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