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