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