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