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