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