1/* =Theme
2----------------------------------------------- */
3
4/* Body */
5body {
6    overflow-x: hidden;
7    padding: 40px 0 0;
8    width: 100%;
9    background: @ini_text_alt;
10    color: @ini_text;
11    -ms-word-wrap: break-word;
12    word-wrap:     break-word;
13}
14body:after,
15body:before {
16    content: '';
17    display: block;
18    position: fixed;
19    z-index: -1;
20    top: 0;
21    height: 200%;
22}
23body:after {
24    left: 0;
25    width: 300px;
26    background: @ini_theme_color;
27}
28body:before {
29    left: 300px;
30    width: 100px;
31    background: @ini_text_alt;
32}
33
34/* Page */
35#writr__page {
36    z-index: 1;
37    margin: 0;
38    width: (@ini_content_width + 400px);
39}
40#writr__page:before {
41    content: '';
42    display: block;
43    position: fixed;
44    z-index: -1;
45    top: 0;
46    left: 400px;
47    width: @ini_content_width;
48    height: 100%;
49    background: @ini_background;
50}
51
52/* Sidebar */
53.sidebar-area {
54    position: relative;
55    float: left;
56    width: 300px;
57    padding: 0 40px;
58    -webkit-box-sizing: border-box;
59    -moz-box-sizing:    border-box;
60    box-sizing:         border-box;
61}
62#writr__sidebar-toggle {
63    display: none;
64    position: absolute;
65    z-index: 3;
66    top: -40px;
67    left: 0;
68    height: 40px;
69    width: 40px;
70    background: @ini_theme_color_alt;
71    color: @ini_background;
72    line-height: 40px;
73    text-align: center;
74    text-decoration: none;
75}
76#writr__sidebar-toggle:before,
77#writr__sidebar-toggle:after {
78    content: '';
79    display: block;
80    position: absolute;
81    border-top: 40px solid @ini_theme_color_alt;
82    border-right: 40px solid transparent;
83}
84#writr__sidebar-toggle:before {
85    top: 40px;
86}
87#writr__sidebar-toggle:after {
88    top: 0;
89    left: 40px;
90}
91#writr__sidebar-toggle .genericon {
92    margin-top: 5px;
93    height: 40px;
94    width: 40px;
95    font-size: 40px;
96    line-height: 40px;
97    -webkit-transform: rotate(45deg);
98    -moz-transform:    rotate(45deg);
99    -ms-transform:     rotate(45deg);
100    -o-transform:      rotate(45deg);
101    transform:         rotate(45deg);
102}
103#writr__sidebar-toggle.open .genericon {
104    -webkit-transform: rotate(0deg);
105    -moz-transform:    rotate(0deg);
106    -ms-transform:     rotate(0deg);
107    -o-transform:      rotate(0deg);
108    transform:         rotate(0deg);
109}
110
111/* Header */
112.site-header {
113    background: @ini_theme_color;
114    color: @ini_background;
115}
116.site-logo {
117    display: block;
118    margin: 0 0 20px;
119    text-align: center;
120}
121.site-logo img {
122    display: block;
123}
124.site-branding {
125    position: relative;
126    padding: 0;
127    margin: 0 0 20px;
128    border-bottom: 0px solid @ini_theme_color_alt;
129    text-align: center;
130}
131.site-title {
132    padding: 0 0 5px;
133    margin: 0;
134    font-size: 20px;
135    font-weight: bold;
136    text-transform: uppercase;
137}
138.site-title a {
139    display: inline-block;
140    color: @ini_background;
141    text-decoration: none;
142}
143.site-title a:hover {
144    color: @ini_theme_color_alt;
145}
146.site-description {
147    margin: 0 0 20px;
148    color: @ini_background;
149    font-size: 12px;
150    text-transform: uppercase;
151}
152
153/* Primary */
154.content-area {
155    text-align: left;
156    float: right;
157    width: @ini_content_width;
158    height: auto;
159    padding: 0 40px;
160    background: @ini_background;
161    -webkit-box-sizing: border-box;
162    -moz-box-sizing:    border-box;
163    box-sizing:         border-box;
164}
165
166/* Sidebar */
167.widget-area,
168.widget-area a,
169.widget-area h1,
170.widget-area h2,
171.widget-area h3,
172.widget-area h4,
173.widget-area h5,
174.widget-area h6 {
175    color: @ini_background;
176}
177.widget-area a:hover,
178.widget-area a:focus,
179.widget-area a:active {
180    color: @ini_background_neu;
181}
182.widget-area {
183    width: 220px;
184}
185
186/* Footer */
187.site-footer {
188}
189.site-info {
190    padding: 0 0 40px;
191    color: @ini_background;
192    font-size: 12px;
193    text-align: center;
194}
195.site-info a {
196    color: @ini_background;
197    text-decoration: none;
198}
199.site-info a:hover {
200    color: @ini_theme_color_alt;
201}
202.page-footer {
203    font-size: 14px;
204    padding: 20px 40px;
205    margin: 40px -40px 0;
206    width: 800px;
207    background-color: @ini_background_alt;
208
209    bdi:first-child {
210        display: none;
211    }
212}
213
214/* =DokuWiki-specific
215----------------------------------------------- */
216
217/* Breadcrumbs */
218div.breadcrumbs {
219    background-color: @ini_background_alt;
220    margin: 0 0 20px -40px;
221    padding: 15px 40px;
222    position: relative;
223    width: 800px;
224    font-size: 14px;
225
226    a {
227        text-decoration: none;
228    }
229}
230body:not(.mode_show) div.breadcrumbs {
231    display: none;
232}
233
234/* TOC */
235#dw__toc {
236    width: 240px;
237
238    h3 {
239        font-size: 14px;
240        margin-bottom: 0;
241        padding: 10px;
242    }
243    > div {
244        padding: 0 10px 10px;
245    }
246    ul li {
247        font-size: 14px;
248        line-height: inherit;
249    }
250    ul ul {
251        padding-left: 20px;
252    }
253    ul ul ul {
254        padding-left: 15px;
255    }
256    li li {
257        list-style: square;
258        color: lighten(@ini_text, 40%);
259    }
260    a {
261        text-decoration: none;
262    }
263}
264
265/* Section editing */
266.secedit input.button, /* @deprecated since Detritus */
267.secedit button {
268    padding: 5px 10px;
269}
270.dokuwiki div.section_highlight {
271    margin: 0 -40px;
272    padding: 0 20px;
273    border-width: 0 20px;
274}
275.dokuwiki a[rel="tag"] {
276	display: inline-block;
277	padding: 5px 10px;
278	margin: 0 5px 5px 0;
279	background: @ini_theme_color;
280	color: #fff;
281	font-size: 12px;
282	text-decoration: none;
283}
284
285/* Modal windows */
286.dokuwiki form.search div.ajax_qsearch {
287    left: auto;
288    right: -13.5em;
289    top: -10px;
290}
291.JSpopup {
292    border: 2px solid @ini_background_neu;
293    border-radius: 20px;
294    color: @ini_text;
295    padding: 10px;
296    font-size: 14px;
297}
298
299.mock-layout {
300    background-color: @ini_background;
301    padding: 0;
302    width: auto;
303
304    &::after {
305        width: 40px;
306    }
307    &::before {
308        width: 20px;
309        left: 40px;
310    }
311
312    > div {
313        padding: 20px 20px 20px 80px !important;
314    }
315}
316
317/* Fullscreen media manager */
318.mode_media {
319    .mock-layout;
320
321    #writr__sidebar-toggle,
322    #writr__masthead .site-branding,
323    #writr__masthead .search-form,
324    #writr__site-navigation,
325    #writr__secondary,
326    .breadcrumbs,
327    .page-footer {
328        display: none;
329    }
330    #writr__page,
331    .content-area {
332        width: auto;
333    }
334    .content-area {
335        padding: 0;
336    }
337
338    /* show only logo in sidebar */
339    #writr__sidebar {
340        float: none;
341        padding: 0;
342        width: auto;
343        position: static;
344        .site-header {
345            background-color: transparent;
346            position: absolute;
347            top: 15px;
348            left: 5px;
349        }
350        .site-logo {
351            display: inline-block;
352            img {
353                width: 50px;
354                height: 50px;
355            }
356        }
357    }
358}
359
360/* Popup media manager */
361.media-popup {
362    padding: 0;
363
364    &,
365    &::before,
366    &::after {
367        background-color: @ini_background;
368    }
369
370    #mediamgr__aside > div,
371    #mediamgr__content > div {
372        padding: 5px;
373    }
374
375    #media__tree {
376        li > ul {
377            margin-left: 0;
378        }
379        ul li li {
380            margin-left: 1em;
381        }
382    }
383}
384
385/* Image detail page */
386.detail-page {
387    .mock-layout;
388
389    p.back a .genericon {
390        vertical-align: middle;
391        text-decoration: none;
392        margin: 0 5px 0 -8px;
393    }
394}
395