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