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