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