xref: /template/sprintdoc/css/base.less (revision 8ed4f142b7684c19aa65534d8b517156d22ab862) 
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
142@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
143@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
144
145@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
146@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
147
148
149/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
150/* col width */
151
152@c12:               100%;
153@c11:               91.66666667%;
154@c10:               83.33333333%;
155@c9:                75%;
156@c8:                66.66666667%;
157@c7:                58.33333333%;
158@c6:                50%;
159@c5:                41.66666667%;
160@c4:                33.33333333%;
161@c3:                25%;
162@c2:                16.66666667%;
163@c1:                8.33333333%;
164
165@grid-columns:      12;
166
167
168/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
169/* all media */
170/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
171
172html,
173body {
174    .reset();
175    font-size: 100.1%;
176}
177
178header,
179.nav-direct{
180    .elementsReset();
181}
182
183div, span, object,
184h1, h2, h3, h4, h5, h6, p, blockquote,
185a, abbr, em,acronym, img, strong,
186dl, dt, dd, ol, ul, li,
187fieldset, form, label, legend,
188table, caption, tbody, tfoot, thead, tr, th, td,
189input, select, option, textarea, button {
190    font-size: 1rem;
191    line-height: 100%;
192}
193
194
195ol,
196ul {
197    list-style: none outside none;
198}
199
200blockquote,
201q {
202    quotes: none;
203}
204
205acronym {
206    cursor: help;
207    border-bottom: dotted 1px #333;
208}
209
210*:focus {
211    outline: 0;
212}
213
214table{
215    border-collapse: collapse;
216    border-spacing: 0;
217    empty-cells: show;
218    caption-side: top;
219}
220
221caption,
222th,
223td {
224    text-align: left;
225    vertical-align: top;
226}
227
228img {
229    display: block;
230    float: none;
231    border: none 0;
232    line-height: @line-height-default;
233}
234
235*,
236div,
237nav,
238header {
239    box-sizing: border-box;
240}
241
242header,
243footer,
244.container,
245.row, nav,
246nav > ul {
247    &::before,
248    &::after {
249        display: table;
250        content: "  ";
251        clear: both;
252    }
253}
254
255
256/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
257/* css behaviour */
258
259.sr-out {
260    .sr-out();
261}
262
263.sr-only {
264    .sr-only();
265}
266
267.clearer{
268    clear: both;
269}
270
271.structure,
272.none,
273.mobile-only {
274    display: none;
275}
276
277.mobile-only {
278    display: none;
279    @media @screen_max-md {
280        display: inline-block;
281    }
282}
283
284.mobile-hide {
285    display: inline-block;
286
287    @media @screen_max-md {
288        display: none;
289    }
290}
291
292
293/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
294/* screen only */
295/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
296
297@media screen {
298    html {
299        -ms-text-size-adjust: 100%;
300        -webkit-text-size-adjust: 100%;
301    }
302
303    article, aside, details, figcaption, figure, footer, header,
304    main, menu, nav, section, summary {
305        display: block;
306    }
307
308    audio,
309    canvas,
310    progress,
311    video {
312        display: inline-block;
313        vertical-align: baseline;
314    }
315
316    audio:not([controls]) {
317        display: none;
318        height: 0;
319    }
320
321    [hidden],
322    template {
323        display: none;
324    }
325
326    a:active,
327    a:hover {
328        outline: 0;
329    }
330
331    abbr[title] {
332        border-bottom: 1px dotted;
333    }
334
335    small {
336        font-size: 80%;
337    }
338
339    sub,
340    sup {
341        font-size: 75%;
342        line-height: 0;
343        position: relative;
344        vertical-align: baseline;
345    }
346
347    sup {
348        top: -0.5em;
349    }
350
351    sub {
352        bottom: -0.25em;
353    }
354
355    svg:not(:root) {
356        overflow: hidden;
357    }
358
359    hr {
360        box-sizing: content-box;
361        height: 0;
362    }
363
364    pre {
365        overflow: auto;
366    }
367
368    code,
369    kbd,
370    pre,
371    samp {
372        font-family: monospace, monospace;
373        font-size: 1em;
374    }
375
376    button,
377    input,
378    optgroup,
379    select,
380    textarea {
381        color: inherit;
382        font: inherit;
383        margin: 0;
384    }
385
386    button,
387    select {
388        text-transform: none;
389    }
390
391    button {
392        overflow: visible;
393    }
394
395    input {
396        &[type="checkbox"],
397        &[type="radio"] {
398            box-sizing: border-box;
399            padding: 0;
400        }
401
402        &[type="number"] {
403            &::-webkit-inner-spin-button,
404            &::-webkit-outer-spin-button {
405                height: auto;
406            }
407        }
408
409        &[type="search"] {
410            -webkit-appearance: textfield;
411            box-sizing: content-box;
412
413            &::-webkit-search-cancel-button,
414            &::-webkit-search-decoration {
415                -webkit-appearance: none;
416            }
417        }
418    }
419
420    legend {
421        border: 0;
422        padding: 0;
423    }
424
425    textarea {
426        overflow: auto;
427    }
428
429    table {
430        border-collapse: collapse;
431        border-spacing: 0;
432    }
433
434    td,
435    th {
436        padding: 0;
437    }
438
439    html, body, div, span, applet, object, iframe,
440    h1, h2, h3, h4, h5, h6, p, blockquote,
441    a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp,
442    small, strike, strong, sub, sup, tt, var,
443    b, u, i, center,
444    dl, dt, dd, ol, ul, li,
445    fieldset, form, label, legend,
446    table, caption, tbody, tfoot, thead, tr, th, td,
447    article, aside, canvas, details, embed,
448    figure, figcaption, footer, header,
449    menu, nav, output, ruby, section, summary,
450    time, mark, audio, video {
451        font-family: @font_family_screen;
452        color: @ini_text;
453    }
454}
455
456
457/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
458/* print only */
459/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
460
461@media print {
462    body {
463        font-size: 12pt;
464    }
465}
466