1/**
2 * This file provides the basic vars
3 */
4
5@font_family_screen:       arial, sans-serif;
6@font_family_print:        "Times New Roman", serif;
7
8@nav_direct_background:    @ini_background;
9@nav_direct_color:         @ini_existing;
10
11@background_darker:        rgba(230,230,230, .2);
12@ini_sidebar_width:        (100 - @ini_site_width) - 4;
13
14@height-context-bar:       50px;
15
16@margin-small:             1rem;
17@margin-default:           2rem;
18@margin-big:               3.07rem;
19@nav-margin:               1.3rem;
20
21@small-spacing:            .3rem;
22@very-small-spacing:       .2rem;
23
24@grid:                     @margin-small;
25@toggle-size:              1.75rem;
26
27@transition:               ease-out .30s;
28
29@box-shadow-offset:        .1em .1em .1em rgba(153,153,153,.5); // tabinclude
30@box-shadow:               0 0 .5em rgba(153,153,153,.5); // pagetoolbox hover
31@box-shadow-colored:       0 0 .5em fade(@ini_existing, 50%);
32@box-shadow-right-bottom:  .1em .3rem .5em rgba(153,153,153,.5);
33@box-shadow-bottom:        0 .1em .5em rgba(153,153,153,.5); // qc-wrapper (breadcrumb), struct inline-editor
34
35/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
36/* for programmers customizing */
37/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
38@fix_border-radius:        3px;           // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
39
40@toggle-showsidebar_width: 3.47rem;       // shown sidebar after toggle
41
42@headericons-margin-xxs:  .45rem;         // screen xxs margin-top for header icons
43
44@page_padding-top:         @margin-small; // padding-top for 'dokuwiki__content'
45@page-header_height:       2.8rem;        // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
46@meta-box_height:          (@page-header_height - @page_padding-top);
47@breadcrumb_height:        @page-header_height;
48
49@formfield_min-height:     2rem;          // min-height for input, textarea, select, keygen
50
51@code-background:          #F6F6F6; /* code, pre, samp, kbd */
52
53/* icons */
54@noopentasks-background:   #ECECEC; /* metabox tabs + num in icons + tabinclude */
55@noopentasks-border:       #BBB; /* metabox tabs + num in icons + code, pre, samp, kbd */
56@noopentasks-color:        #666; /* metabox tabs + num in icons + code, pre, samp, kbd */
57@wikiicons-border:         #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */
58
59/* navigation left */
60@menu-margin-lg: 1.3rem;
61
62@quicksearch-button-color: @noopentasks-color; /* autosuggest, submit in quicksearch */
63@suggestion-zebra:         #EEE;
64
65/* edit mode */
66@highlight-odd-ini_text:  fade(@ini_background, 95%);
67@highlight-even-ini_text: fade(@ini_text, 5%);
68@color-editBox:           #252525; // editmode for tables, revision states
69
70/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
71/* fonts */
72/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
73@font-size-very-small:     .73rem;
74@font-size-small:          .88rem;
75@font-size-default:        1rem;
76@font-size-big:            1.5rem;
77@font-size-bigger:         1.75rem;
78
79@line-height-default:      125%;
80@line-height-big:          135%;
81@line-height-bigger:       140%;
82
83@font-weight-bold:         800;
84@font-weight-normal:       400;
85
86@font-scale-factor:        .0769;
87
88@font-size-head6: @font-size-default;
89@font-size-head5: @font-size-default + @font-scale-factor;
90@font-size-head4: @font-size-default + (@font-scale-factor * 3);
91@font-size-head3: @font-size-default + (@font-scale-factor * 5);
92@font-size-head2: @font-size-default + (@font-scale-factor * 7);
93@font-size-head1: @font-size-default + (@font-scale-factor * 9);
94
95/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
96/* breakpoints */
97/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
98@break-min-xxs: 480;
99@break-max-xxs: (@break-min-xxs - 1);
100
101@break-min-xs: 768;
102@break-max-xs: (@break-min-xs - 1);
103
104@break-min-sm: 992;
105@break-max-sm: (@break-min-sm - 1);
106
107@break-min-md: 1024;
108@break-max-md: (@break-min-md - 1);
109
110@break-min-lg: 1200;
111@break-max-lg: (@break-min-lg - 1);
112
113@break-min-xlg: 1440;
114@break-max-xlg: (@break-min-xlg - 1);
115
116@break-min-xxlg: 1600;
117@break-max-xxlg: (@break-min-xxlg - 1);
118
119/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
120/* media queries for breakpoints */
121/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
122@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
123@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";
124
125@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)";
126@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)";
127
128@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)";
129@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)";
130
131@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
132@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
133
134@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
135@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
136
137@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
138@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
139
140@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
141@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
142
143@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
144@screen_only-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px) and (max-width: " ~"@{break-max-xxlg}px)";
145@screen_md-xlg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
146@screen_md-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-lg}px)";
147@screen_xs-lg: ~"only screen and (min-width: " ~"@{break-min-xs}px) and (max-width: " ~"@{break-max-md}px)";
148
149/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
150/* col width */
151/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
152@c12:               100%;
153@c11:               91.66666667%;
154@c10:               83.33333333%;
155@c9:                75%;
156@c8:                66.66666667%;
157@c7:                58.33333333%;
158@c6:                50%;
159@c5:                41.66666667%;
160@c4:                33.33333333%;
161@c3:                25%;
162@c2:                16.66666667%;
163@c1:                8.33333333%;
164
165@grid-columns:      12;
166