xref: /template/sprintdoc/css/base.less (revision d9d97457c39e04d8c09c10facf24ad8712cddae3) ! 
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
202div, span, object,
203h1, h2, h3, h4, h5, h6, p, blockquote,
204a, abbr, em,acronym, img, strong,
205dl, dt, dd, ol, ul, li,
206fieldset, form, label, legend,
207table, caption, tbody, tfoot, thead, tr, th, td,
208input, select, option, textarea, button {
209    font-size: 1rem;
210    line-height: 100%;
211}
212
213
214ol,
215ul {
216    list-style: none outside none;
217}
218
219blockquote,
220q {
221    quotes: none;
222}
223
224acronym {
225    cursor: help;
226    border-bottom: dotted 1px @ini_text;
227}
228
229*:focus {
230    outline: 0;
231}
232
233table{
234    border-collapse: collapse;
235    border-spacing: 0;
236    empty-cells: show;
237    caption-side: top;
238}
239
240caption,
241th,
242td {
243    text-align: left;
244    vertical-align: top;
245}
246
247img {
248    display: block;
249    float: none;
250    border: none 0;
251    line-height: @line-height-default;
252}
253
254*,
255div,
256nav,
257header {
258    box-sizing: border-box;
259}
260
261header,
262footer,
263.container,
264.row, nav,
265nav > ul {
266    &::before,
267    &::after {
268        display: table;
269        content: ' ';
270        clear: both;
271    }
272}
273
274
275/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
276/* css behaviour */
277
278.sr-out {
279    .sr-out();
280}
281
282.sr-only {
283    .sr-only();
284}
285
286.clearer{
287    clear: both;
288}
289
290.structure,
291.none,
292.mobile-only {
293    display: none;
294}
295
296.mobile-only {
297    display: none;
298
299    @media @screen_max-md {
300        display: inline-block;
301    }
302}
303
304.mobile-hide {
305    display: inline-block;
306
307    @media @screen_max-md {
308        display: none;
309    }
310}
311
312.desktop-only {
313    display: none;
314    @media @screen_min-md {
315        display: inline-block;
316    }
317}
318
319
320/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
321/* screen only */
322/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
323
324@media screen {
325    html {
326        -ms-text-size-adjust: 100%;
327        -webkit-text-size-adjust: 100%;
328    }
329
330    article, aside, details, figcaption, figure, footer, header,
331    main, menu, nav, section, summary {
332        display: block;
333    }
334
335    audio,
336    canvas,
337    progress,
338    video {
339        display: inline-block;
340        vertical-align: baseline;
341    }
342
343    audio:not([controls]) {
344        display: none;
345        height: 0;
346    }
347
348    [hidden],
349    template {
350        display: none;
351    }
352
353    a:active,
354    a:hover {
355        outline: 0;
356    }
357
358    abbr[title] {
359        border-bottom: 1px dotted;
360    }
361
362    small {
363        font-size: 80%;
364    }
365
366    sub,
367    sup {
368        font-size: 75%;
369        line-height: 0;
370        position: relative;
371        vertical-align: baseline;
372    }
373
374    sup {
375        top: -0.5em;
376    }
377
378    sub {
379        bottom: -0.25em;
380    }
381
382    svg:not(:root) {
383        overflow: hidden;
384    }
385
386    hr {
387        box-sizing: content-box;
388        height: 0;
389    }
390
391    pre {
392        overflow: auto;
393    }
394
395    code,
396    kbd,
397    pre,
398    samp {
399        font-family: monospace, monospace;
400        font-size: 1em;
401    }
402
403    button,
404    input,
405    optgroup,
406    select,
407    textarea {
408        color: inherit;
409        font: inherit;
410        margin: 0;
411    }
412
413    button,
414    select {
415        text-transform: none;
416    }
417
418    button {
419        overflow: visible;
420    }
421
422    input {
423        &[type="checkbox"],
424        &[type="radio"] {
425            box-sizing: border-box;
426            padding: 0;
427        }
428
429        &[type="number"] {
430            &::-webkit-inner-spin-button,
431            &::-webkit-outer-spin-button {
432                height: auto;
433            }
434        }
435
436        &[type="search"] {
437            -webkit-appearance: textfield;
438            box-sizing: content-box;
439
440            &::-webkit-search-cancel-button,
441            &::-webkit-search-decoration {
442                -webkit-appearance: none;
443            }
444        }
445    }
446
447    legend {
448        border: 0;
449        padding: 0;
450    }
451
452    textarea {
453        overflow: auto;
454    }
455
456    table {
457        border-collapse: collapse;
458        border-spacing: 0;
459    }
460
461    td,
462    th {
463        padding: 0;
464    }
465
466    html, body {
467        font-family: @font_family_screen;
468        color: @ini_text;
469    }
470}
471
472
473/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
474/* print only */
475/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
476
477@media print {
478    body {
479        font-size: 12pt;
480    }
481}
482