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