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