xref: /template/sprintdoc/css/base.less (revision 4ac10cf3be8e2e469f501800b9e04453d6737427) 
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    svg:not(:root) {
355        overflow: hidden;
356    }
357
358    hr {
359        box-sizing: content-box;
360        height: 0;
361    }
362
363    pre {
364        overflow: auto;
365    }
366
367    code,
368    kbd,
369    pre,
370    samp {
371        font-family: monospace, monospace;
372        font-size: 1em;
373    }
374
375    button,
376    input,
377    optgroup,
378    select,
379    textarea {
380        color: inherit;
381        font: inherit;
382        margin: 0;
383    }
384
385    button,
386    select {
387        text-transform: none;
388    }
389
390    button {
391        overflow: visible;
392    }
393
394    input {
395        &[type="checkbox"],
396        &[type="radio"] {
397            box-sizing: border-box;
398            padding: 0;
399        }
400
401        &[type="number"] {
402            &::-webkit-inner-spin-button,
403            &::-webkit-outer-spin-button {
404                height: auto;
405            }
406        }
407
408        &[type="search"] {
409            -webkit-appearance: textfield;
410            box-sizing: content-box;
411
412            &::-webkit-search-cancel-button,
413            &::-webkit-search-decoration {
414                -webkit-appearance: none;
415            }
416        }
417    }
418
419    legend {
420        border: 0;
421        padding: 0;
422    }
423
424    textarea {
425        overflow: auto;
426    }
427
428    table {
429        border-collapse: collapse;
430        border-spacing: 0;
431    }
432
433    td,
434    th {
435        padding: 0;
436    }
437
438    html, body {
439        font-family: @font_family_screen;
440        color: @ini_text;
441    }
442}
443
444
445/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
446/* print only */
447/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
448
449@media print {
450    body {
451        font-size: 12pt;
452    }
453}
454