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