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