xref: /template/sprintdoc/css/base.less (revision 5f18c8954f22987c845380660276a606bd723d6b) 
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@background_page-header: __background_page-header__;
13
14@font_family_screen:     __font_family_screen__;
15
16@color-content-bg:       __background_content__;
17@color-site-bg:          __background_site__;
18
19@color-link:             __existing__;
20@color-link-hover:       @ini_nav_menu_color;
21
22@button_color:           __button_color__;
23@button_background:      __button_background__;
24
25@box-shadow-offset:      __box_shadow_offset__;
26@box-shadow:             __box_shadow__;
27@box-shadow-colored:     __box_shadow_colored__;
28@box-shadow-right-bottom:__box_shadow_right_bottom__;
29@box-shadow-bottom:      __box_shadow_bottom__;
30
31@th_background:          __background_alt__;
32
33
34/* ersetzt: */
35
36//@color-text:             __text__;
37//@border-radius:          __default_border_radius__;
38//@color-border:           __border__;
39//@color-border-light:     __border_light__;
40//@color-nav:              __nav_menu_color__;
41//@color-nav-hover:        __nav_menu_hover_color__;
42//@color-nav-hover-bg:     __nav_menu_hover_bg__;
43
44
45/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
46/* global vars */
47/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
48
49@nav_direct_background   : @ini_background_content;
50@nav_direct_color        : @ini_existing;
51
52@ini_sidebar_width : (100 - @ini_site_width) - 4;
53
54@height-context-bar: 50px;
55
56@margin-small:       1rem;
57@margin-default:     2rem;
58@margin-big:         3.07rem;
59
60@small-spacing:      .3rem;
61@very-small-spacing: .2rem;
62
63@grid:               @margin-small;
64@toggle-size:        1.75rem;
65
66@transition: ease-out .30s;
67
68
69/* + + +  for programmers customizing  + + + */
70@fix_border-radius:        3px;
71@toggle-showsidebar_width: 3.07rem;       // shown sidebar after toggle
72@page_padding-top:         @margin-small; // padding-top for 'dokuwiki__content'
73@page-header_height:       2.8rem;        // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
74@meta-box_height:          (@page-header_height - @page_padding-top);
75@breadcrumb_height:        @page-header_height;
76@formfield_min-height:     2rem;          // min-height for input, textarea, select, keygen
77
78@noopentasks-background:   #BBB;
79@noopentasks-color:        #696969;
80
81
82/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
83/* fonts */
84
85@font-size-very-small: .73rem;
86@font-size-small: .88rem;
87@font-size-default: 1rem;
88@font-size-big: 1.5rem;
89@font-size-bigger: 1.75rem;
90
91@line-height-default: 125%;
92@line-height-big: 135%;
93@line-height-bigger: 140%;
94
95@font-weight-bold: 800;
96@font-weight-normal: 400;
97
98@font-scale-factor: .0769;
99
100@font-size-head6: @font-size-default;
101@font-size-head5: @font-size-default + @font-scale-factor;
102@font-size-head4: @font-size-default + (@font-scale-factor * 2);
103@font-size-head3: @font-size-default + (@font-scale-factor * 3);
104@font-size-head2: @font-size-default + (@font-scale-factor * 4);
105@font-size-head1: @font-size-default + (@font-scale-factor * 5);
106
107
108/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
109/* breakpoints */
110
111@break-min-xxs: 480;
112@break-max-xxs: (@break-min-xxs - 1);
113
114@break-min-xs: 768;
115@break-max-xs: (@break-min-xs - 1);
116
117@break-min-sm: 992;
118@break-max-sm: (@break-min-sm - 1);
119
120@break-min-md: 1024;
121@break-max-md: (@break-min-md - 1);
122
123@break-min-lg: 1200;
124@break-max-lg: (@break-min-lg - 1);
125
126@break-min-xlg: 1440;
127@break-max-xlg: (@break-min-xlg - 1);
128
129@break-min-xxlg: 1600;
130@break-max-xxlg: (@break-min-xxlg - 1);
131
132
133/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
134/* media queries for breakpoints */
135
136@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
137@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";
138
139@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)";
140@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)";
141
142@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)";
143@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)";
144
145@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
146@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
147@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
148
149@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
150@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
151@screen_only-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
152
153@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
154@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
155
156@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
157@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
158
159
160/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
161/* col width */
162
163@c12:               100%;
164@c11:               91.66666667%;
165@c10:               83.33333333%;
166@c9:                75%;
167@c8:                66.66666667%;
168@c7:                58.33333333%;
169@c6:                50%;
170@c5:                41.66666667%;
171@c4:                33.33333333%;
172@c3:                25%;
173@c2:                16.66666667%;
174@c1:                8.33333333%;
175
176@grid-columns:      12;
177
178
179/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
180/* all media */
181/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
182
183html,
184body {
185    .reset();
186    font-size: 100.1%;
187}
188
189header,
190.nav-direct{
191    .elementsReset();
192}
193
194div, span, object,
195h1, h2, h3, h4, h5, h6, p, blockquote,
196a, abbr, em,acronym, img, strong,
197dl, dt, dd, ol, ul, li,
198fieldset, form, label, legend,
199table, caption, tbody, tfoot, thead, tr, th, td,
200input, select, option, textarea, button {
201    font-size: 1rem;
202    line-height: 100%;
203}
204
205
206ol,
207ul {
208    list-style: none outside none;
209}
210
211blockquote,
212q {
213    quotes: none;
214}
215
216acronym {
217    cursor: help;
218    border-bottom: dotted 1px #333;
219}
220
221*:focus {
222    outline: 0;
223}
224
225table{
226    border-collapse: collapse;
227    border-spacing: 0;
228    empty-cells: show;
229    caption-side: top;
230}
231
232caption,
233th,
234td {
235    text-align: left;
236    vertical-align: top;
237}
238
239img {
240    display: block;
241    float: none;
242    border: none 0;
243    line-height: @line-height-default;
244}
245
246*,
247div,
248nav,
249header {
250    box-sizing: border-box;
251}
252
253header,
254footer,
255.container,
256.row, nav,
257nav > ul {
258    &::before,
259    &::after {
260        display: table;
261        content: "  ";
262        clear: both;
263    }
264}
265
266
267/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
268/* css behaviour */
269
270.sr-out {
271    .sr-out();
272}
273
274.sr-only {
275    .sr-only();
276}
277
278.clearer{
279    clear: both;
280}
281
282.structure,
283.none,
284.mobile-only {
285    display: none;
286}
287
288.mobile-only {
289    display: none;
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