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