xref: /template/sprintdoc/css/base.less (revision fd02700e79e2fdb77f8a890d6cf45fd1210866ac) 
1/**
2 * This file provides the basic vars and reset styles.
3 *
4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
5 */
6
7
8/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
9/* global vars */
10/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
11
12@font_family_screen:       arial, sans-serif;
13@font_family_print:        "Times New Roman", serif;
14
15@nav_direct_background:    @ini_background_content;
16@nav_direct_color:         @ini_existing;
17
18@ini_sidebar_width:        (100 - @ini_site_width) - 4;
19
20@height-context-bar:       50px;
21
22@margin-small:             1rem;
23@margin-default:           2rem;
24@margin-big:               3.07rem;
25
26@small-spacing:            .3rem;
27@very-small-spacing:       .2rem;
28
29@grid:                     @margin-small;
30@toggle-size:              1.75rem;
31
32@transition:               ease-out .30s;
33
34@box-shadow-offset:        .1em .1em .1em rgba(153,153,153,.5); // tabinclude
35@box-shadow:               0 0 .5em rgba(153,153,153,.5); // pagetoolbox hover
36@box-shadow-colored:       0 0 .5em fade(@ini_existing, 50%);
37@box-shadow-right-bottom:  .1em .3rem .5em rgba(153,153,153,.5);
38@box-shadow-bottom:        0 .1em .5em rgba(153,153,153,.5); // qc-wrapper (breadcrumb), struct inline-editor
39
40
41/* + + +  for programmers customizing  + + + */
42
43@fix_border-radius:        3px;           // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
44
45@toggle-showsidebar_width: 3.07rem;       // shown sidebar after toggle
46
47@page_padding-top:         @margin-small; // padding-top for 'dokuwiki__content'
48@page-header_height:       2.8rem;        // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
49@meta-box_height:          (@page-header_height - @page_padding-top);
50@breadcrumb_height:        @page-header_height;
51
52@formfield_min-height:     2rem;          // min-height for input, textarea, select, keygen
53
54@code-background:          #F6F6F6; /* code, pre, samp, kbd */
55
56
57/* icons */
58@noopentasks-background:   #ECECEC; /* metabox tabs + num in icons + tabinclude */
59@noopentasks-border:       #BBB; /* metabox tabs + num in icons + code, pre, samp, kbd */
60@noopentasks-color:        #666; /* metabox tabs + num in icons + code, pre, samp, kbd */
61@wikiicons-border:         #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */
62
63
64/* navigation left */
65@menu-margin-lg: 1.3rem;
66
67@quicksearch-button-color: @noopentasks-color; /* autosuggest, submit in quicksearch */
68@suggestion-zebra:         #EEE;
69
70
71/* edit mode */
72@highlight-odd-ini_text:  fade(@ini_background_content, 95%);
73@highlight-even-ini_text: fade(@ini_text, 5%);
74@color-editBox:           #252525; // editmode for tables, revision states
75
76
77//@nolinkedicon-ini_background: fade(@ini_background, 10%);
78//@opacity-ini_nav_menu_color:  fade(@ini_nav_menu_color, 40%);
79
80
81/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
82/* fonts */
83
84@font-size-very-small:     .73rem;
85@font-size-small:          .88rem;
86@font-size-default:        1rem;
87@font-size-big:            1.5rem;
88@font-size-bigger:         1.75rem;
89
90@line-height-default:      125%;
91@line-height-big:          135%;
92@line-height-bigger:       140%;
93
94@font-weight-bold:         800;
95@font-weight-normal:       400;
96
97@font-scale-factor:        .0769;
98
99@font-size-head6: @font-size-default;
100@font-size-head5: @font-size-default + @font-scale-factor;
101@font-size-head4: @font-size-default + (@font-scale-factor * 3);
102@font-size-head3: @font-size-default + (@font-scale-factor * 5);
103@font-size-head2: @font-size-default + (@font-scale-factor * 7);
104@font-size-head1: @font-size-default + (@font-scale-factor * 9);
105
106
107/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
108/* breakpoints */
109
110@break-min-xxs: 480;
111@break-max-xxs: (@break-min-xxs - 1);
112
113@break-min-xs: 768;
114@break-max-xs: (@break-min-xs - 1);
115
116@break-min-sm: 992;
117@break-max-sm: (@break-min-sm - 1);
118
119@break-min-md: 1024;
120@break-max-md: (@break-min-md - 1);
121
122@break-min-lg: 1200;
123@break-max-lg: (@break-min-lg - 1);
124
125@break-min-xlg: 1440;
126@break-max-xlg: (@break-min-xlg - 1);
127
128@break-min-xxlg: 1600;
129@break-max-xxlg: (@break-min-xxlg - 1);
130
131
132/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
133/* media queries for breakpoints */
134
135@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
136@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";
137
138@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)";
139@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)";
140
141@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)";
142@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)";
143
144@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
145@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
146
147@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
148@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
149
150@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
151@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
152
153@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
154@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
155
156@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
157@screen_only-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px) and (max-width: " ~"@{break-max-xxlg}px)";
158@screen_md-xlg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
159@screen_md-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-lg}px)";
160@screen_xs-lg: ~"only screen and (min-width: " ~"@{break-min-xs}px) and (max-width: " ~"@{break-max-md}px)";
161
162
163/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
164/* col width */
165
166@c12:               100%;
167@c11:               91.66666667%;
168@c10:               83.33333333%;
169@c9:                75%;
170@c8:                66.66666667%;
171@c7:                58.33333333%;
172@c6:                50%;
173@c5:                41.66666667%;
174@c4:                33.33333333%;
175@c3:                25%;
176@c2:                16.66666667%;
177@c1:                8.33333333%;
178
179@grid-columns:      12;
180
181
182/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
183/* all media */
184/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
185
186html,
187body {
188    .reset();
189    font-size: 100.1%;
190}
191
192header,
193.nav-direct{
194    .elementsReset();
195}
196
197div, span, object,
198h1, h2, h3, h4, h5, h6, p, blockquote,
199a, abbr, em,acronym, img, strong,
200dl, dt, dd, ol, ul, li,
201fieldset, form, label, legend,
202table, caption, tbody, tfoot, thead, tr, th, td,
203input, select, option, textarea, button {
204    font-size: 1rem;
205    line-height: 100%;
206}
207
208
209ol,
210ul {
211    list-style: none outside none;
212}
213
214blockquote,
215q {
216    quotes: none;
217}
218
219acronym {
220    cursor: help;
221    border-bottom: dotted 1px @ini_text;
222}
223
224*:focus {
225    outline: 0;
226}
227
228table{
229    border-collapse: collapse;
230    border-spacing: 0;
231    empty-cells: show;
232    caption-side: top;
233}
234
235caption,
236th,
237td {
238    text-align: left;
239    vertical-align: top;
240}
241
242img {
243    display: block;
244    float: none;
245    border: none 0;
246    line-height: @line-height-default;
247}
248
249*,
250div,
251nav,
252header {
253    box-sizing: border-box;
254}
255
256header,
257footer,
258.container,
259.row, nav,
260nav > ul {
261    &::before,
262    &::after {
263        display: table;
264        content: ' ';
265        clear: both;
266    }
267}
268
269
270/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
271/* css behaviour */
272
273.sr-out {
274    .sr-out();
275}
276
277.sr-only {
278    .sr-only();
279}
280
281.clearer{
282    clear: both;
283}
284
285.structure,
286.none,
287.mobile-only {
288    display: none;
289}
290
291.mobile-only {
292    display: none;
293
294    @media @screen_max-md {
295        display: inline-block;
296    }
297}
298
299.mobile-hide {
300    display: inline-block;
301
302    @media @screen_max-md {
303        display: none;
304    }
305}
306
307.desktop-only {
308    display: none;
309    @media @screen_min-md {
310        display: inline-block;
311    }
312}
313
314
315/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
316/* screen only */
317/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
318
319@media screen {
320    html {
321        -ms-text-size-adjust: 100%;
322        -webkit-text-size-adjust: 100%;
323    }
324
325    article, aside, details, figcaption, figure, footer, header,
326    main, menu, nav, section, summary {
327        display: block;
328    }
329
330    audio,
331    canvas,
332    progress,
333    video {
334        display: inline-block;
335        vertical-align: baseline;
336    }
337
338    audio:not([controls]) {
339        display: none;
340        height: 0;
341    }
342
343    [hidden],
344    template {
345        display: none;
346    }
347
348    a:active,
349    a:hover {
350        outline: 0;
351    }
352
353    abbr[title] {
354        border-bottom: 1px dotted;
355    }
356
357    small {
358        font-size: 80%;
359    }
360
361    sub,
362    sup {
363        font-size: 75%;
364        line-height: 0;
365        position: relative;
366        vertical-align: baseline;
367    }
368
369    sup {
370        top: -0.5em;
371    }
372
373    sub {
374        bottom: -0.25em;
375    }
376
377    svg:not(:root) {
378        overflow: hidden;
379    }
380
381    hr {
382        box-sizing: content-box;
383        height: 0;
384    }
385
386    pre {
387        overflow: auto;
388    }
389
390    code,
391    kbd,
392    pre,
393    samp {
394        font-family: monospace, monospace;
395        font-size: 1em;
396    }
397
398    button,
399    input,
400    optgroup,
401    select,
402    textarea {
403        color: inherit;
404        font: inherit;
405        margin: 0;
406    }
407
408    button,
409    select {
410        text-transform: none;
411    }
412
413    button {
414        overflow: visible;
415    }
416
417    input {
418        &[type="checkbox"],
419        &[type="radio"] {
420            box-sizing: border-box;
421            padding: 0;
422        }
423
424        &[type="number"] {
425            &::-webkit-inner-spin-button,
426            &::-webkit-outer-spin-button {
427                height: auto;
428            }
429        }
430
431        &[type="search"] {
432            -webkit-appearance: textfield;
433            box-sizing: content-box;
434
435            &::-webkit-search-cancel-button,
436            &::-webkit-search-decoration {
437                -webkit-appearance: none;
438            }
439        }
440    }
441
442    legend {
443        border: 0;
444        padding: 0;
445    }
446
447    textarea {
448        overflow: auto;
449    }
450
451    table {
452        border-collapse: collapse;
453        border-spacing: 0;
454    }
455
456    td,
457    th {
458        padding: 0;
459    }
460
461    html, body {
462        font-family: @font_family_screen;
463        color: @ini_text;
464    }
465}
466
467
468/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
469/* print only */
470/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
471
472@media print {
473    body {
474        font-size: 12pt;
475    }
476}
477