1/**
2 * This file provides styles for the general layout structure.
3 */
4
5/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
6/* col grid */
7/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
8.make-grid(xs);
9
10@media screen {
11    .container {
12        margin: 0 @margin-big;
13    }
14}
15
16/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
17/* font sizing */
18/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
19@media @screen_min-xxs {
20    html {
21        font-size: 100%; //16px
22    }
23}
24
25@media @screen_min-xs {
26    html {
27        font-size: 100%; //16px
28    }
29}
30
31@media @screen_min-sm {
32    .make-grid(sm);
33    html {
34        font-size: 100%; //16px
35    }
36}
37
38@media @screen_min-md {
39    .make-grid(md);
40    html {
41        font-size: 87.5%; //14px
42    }
43}
44
45@media @screen_min-lg {
46    .make-grid(lg);
47    html {
48        font-size: 87.5%; //14px
49    }
50}
51
52@media @screen_min-xlg {
53    html {
54        font-size: 93.75%; //15px
55    }
56}
57
58@media @screen_min-xxlg {
59    html {
60        font-size: 100%; //16px
61    }
62}
63
64/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
65/* z-indices */
66/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
67@media screen {
68    .nav-direct p {
69        z-index: 1000; // keyboard-navigation overlays always on top
70    }
71
72    .top-header {
73        z-index: 2; // put MagicMatcher-Dropdowns above .content and metabox-tabs
74    }
75
76    #dokuwiki__aside div.nav a {
77        &:hover, &:focus, &:active {
78            z-index: 100; // show label/link above content on hover etc.
79        }
80    }
81
82    .qc-output {
83        z-index: 1; // put qc-output above meta-box
84    }
85
86    #spr__meta-box {
87        z-index: 10; // put meta-box above positioned content-elements such as aggregations, edit-buttons
88        ul.meta-tabs > li.active {
89            z-index: 1; // put the active tab above the meta-content in .tab-pane.active
90        }
91    }
92
93    nav#dokuwiki__pagetools {
94        z-index: 100; // put labels of the pagetools above content on hover etc.
95    }
96
97    #dokuwiki__detail .img-link a::before {
98        z-index: 2; // put 'view original file'-overlay above image
99    }
100
101    /* plug-in do_tasks */
102    .plugin__do_usertasks_list {
103        z-index: 200; // put tasks-list above pagetools
104    }
105
106    /* plug-in editable */
107    #dokuwiki__content.main-content div.editbutton_table {
108        z-index: 1; // for IE
109    }
110
111    /* plug-in tabinclude */
112    div#dwpl-ti-container li.dwpl-ti-tab div.selected {
113        z-index: 1; // put .slected tab above div.dwpl-ti-content-box
114    }
115}
116
117@media @screen_min-md {
118    .wide-content .search.main-sidebar p.toggleSearch {
119        z-index: 1; // put search-toggle-button above #dw__search
120    }
121}
122
123@media @screen_max-md {
124    body.show-mobile-sidebar #dokuwiki__aside {
125            z-index: 200; // mobile sidebar above all except nav-direct
126    }
127}
128
129/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
130/* screen sizing */
131/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
132
133// >= 1024
134@media @screen_min-md {
135
136    .content .row > .col-xs-12 {
137        border-radius: 0 @ini_default_border_radius @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
138    }
139
140    .top-header {
141        position: absolute;
142        top: 0;
143        right: 0;
144        width: 50%;
145    }
146
147    .header,
148    .tools {
149        .row {
150            position: relative;
151
152            > .col-xs-12 {
153                width: @ini_sidebar_width;
154                box-sizing: border-box;
155            }
156        }
157    }
158
159    .header {
160        .row > .col-xs-12 {
161            position: relative;
162            height: 150px;
163            min-height: 6rem;
164            display: table;
165
166            + .col-xs-12 {
167                float: right;
168                width: @ini_site_width;
169                box-sizing: border-box;
170            }
171        }
172    }
173
174    /* + + + + +  layout option compact  + + + + + */
175    .header-compact {
176        .header {
177            .row > .col-xs-12 {
178                height: auto;
179                min-height: auto;
180            }
181        }
182    }
183
184    .tools {
185        .row > .col-xs-12 {
186            position: absolute;
187        }
188    }
189
190    .content {
191        .row > .col-xs-12 {
192            position: relative;
193            width: 100%;
194            background-color: #fff;
195        }
196    }
197
198    .showSidebar {
199        .content {
200            .row > .col-xs-12 {
201                width: @ini_site_width;
202                float: right;
203            }
204        }
205    }
206
207    .wide-content {
208        .content {
209            .row > .col-xs-12 {
210                width: auto;
211                float: none;
212            }
213        }
214
215        &.showSidebar {
216            .content {
217                .row > .col-xs-12 {
218                    margin-left: @toggle-showsidebar_width;
219                }
220            }
221        }
222    }
223
224    .main-sidebar {
225        &.search {
226            > img {
227                width: 100%;
228                height: auto;
229            }
230        }
231    }
232}
233
234// > 1024
235@media @screen_md-lg {
236    .wide-content.showSidebar {
237        .content {
238            .row > .col-xs-12 {
239                margin-left: 2.3rem;
240            }
241        }
242    }
243}
244
245@media @screen_max-md {
246    .container {
247        margin: 0 1.25rem;
248    }
249
250    .content {
251        position: relative;
252
253        #dokuwiki__pagetools {
254            top: 0;
255        }
256
257        .row > .col-xs-12 #dokuwiki__content::before {
258            display: none;
259        }
260    }
261
262    .tools {
263        .main-sidebar {
264            display: none;
265        }
266    }
267}
268
269@media @screen_max-xxs {
270    @mobileMargin: 4px;
271
272    .container {
273        margin: 0 @mobileMargin;
274    }
275
276    body.show-mobile-sidebar #dokuwiki__aside {
277        left: @mobileMargin;
278    }
279
280    #dokuwiki__footer {
281        .main-footer {
282            > * {
283                padding-left: 2rem;
284                padding-right: 2rem;
285            }
286        }
287    }
288}
289