xref: /template/sprintdoc/css/base.less (revision 1466b31431cbdb6aad17616c9c8ed33978aa0405) 
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
294/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
295/* screen only */
296/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
297
298@media screen {
299    html {
300        -ms-text-size-adjust: 100%;
301        -webkit-text-size-adjust: 100%;
302    }
303
304    article, aside, details, figcaption, figure, footer, header,
305    main, menu, nav, section, summary {
306        display: block;
307    }
308
309    audio,
310    canvas,
311    progress,
312    video {
313        display: inline-block;
314        vertical-align: baseline;
315    }
316
317    audio:not([controls]) {
318        display: none;
319        height: 0;
320    }
321
322    [hidden],
323    template {
324        display: none;
325    }
326
327    a:active,
328    a:hover {
329        outline: 0;
330    }
331
332    abbr[title] {
333        border-bottom: 1px dotted;
334    }
335
336    small {
337        font-size: 80%;
338    }
339
340    sub,
341    sup {
342        font-size: 75%;
343        line-height: 0;
344        position: relative;
345        vertical-align: baseline;
346    }
347
348    sup {
349        top: -0.5em;
350    }
351
352    sub {
353        bottom: -0.25em;
354    }
355
356    svg:not(:root) {
357        overflow: hidden;
358    }
359
360    hr {
361        box-sizing: content-box;
362        height: 0;
363    }
364
365    pre {
366        overflow: auto;
367    }
368
369    code,
370    kbd,
371    pre,
372    samp {
373        font-family: monospace, monospace;
374        font-size: 1em;
375    }
376
377    button,
378    input,
379    optgroup,
380    select,
381    textarea {
382        color: inherit;
383        font: inherit;
384        margin: 0;
385    }
386
387    button,
388    select {
389        text-transform: none;
390    }
391
392    button {
393        overflow: visible;
394    }
395
396    input {
397        &[type="checkbox"],
398        &[type="radio"] {
399            box-sizing: border-box;
400            padding: 0;
401        }
402
403        &[type="number"] {
404            &::-webkit-inner-spin-button,
405            &::-webkit-outer-spin-button {
406                height: auto;
407            }
408        }
409
410        &[type="search"] {
411            -webkit-appearance: textfield;
412            box-sizing: content-box;
413
414            &::-webkit-search-cancel-button,
415            &::-webkit-search-decoration {
416                -webkit-appearance: none;
417            }
418        }
419    }
420
421    legend {
422        border: 0;
423        padding: 0;
424    }
425
426    textarea {
427        overflow: auto;
428    }
429
430    table {
431        border-collapse: collapse;
432        border-spacing: 0;
433    }
434
435    td,
436    th {
437        padding: 0;
438    }
439
440    html, body, div, span, applet, object, iframe,
441    h1, h2, h3, h4, h5, h6, p, blockquote,
442    a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp,
443    small, strike, strong, sub, sup, tt, var,
444    b, u, i, center,
445    dl, dt, dd, ol, ul, li,
446    fieldset, form, label, legend,
447    table, caption, tbody, tfoot, thead, tr, th, td,
448    article, aside, canvas, details, embed,
449    figure, figcaption, footer, header,
450    menu, nav, output, ruby, section, summary,
451    time, mark, audio, video {
452        font-family: @font_family_screen;
453        color: @ini_text;
454    }
455}
456
457
458/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
459/* print only */
460/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
461
462@media print {
463    body {
464        font-size: 12pt;
465    }
466}
467