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/* Content */
53.site-content{
54    z-index: 0;
55}
56
57/* Header */
58.site-header {
59    background: @ini_theme_color;
60    color: @ini_background;
61}
62.site-logo {
63    display: block;
64    margin: 0 0 20px;
65    text-align: center;
66}
67.site-logo img {
68    display: block;
69}
70.site-branding {
71    position: relative;
72    padding: 0;
73    margin: 0 0 20px;
74    text-align: center;
75
76    p {
77        margin: 0;
78    }
79}
80.site-title {
81    padding: 0 0 5px;
82    margin: 0;
83    font-size: 20px;
84    font-weight: bold;
85    text-transform: uppercase;
86}
87.site-title a {
88    display: inline-block;
89    color: @ini_background;
90    text-decoration: none;
91}
92.site-title a:hover {
93    color: @ini_theme_color_alt;
94}
95.site-description {
96    margin: 0 0 20px;
97    color: @ini_background;
98    font-size: 12px;
99    text-transform: uppercase;
100}
101
102/* Primary */
103.content-area {
104    text-align: left;
105    float: right;
106    width: @ini_content_width;
107    height: auto;
108    padding: 0 40px;
109    background: @ini_background;
110    -webkit-box-sizing: border-box;
111    -moz-box-sizing:    border-box;
112    box-sizing:         border-box;
113}
114
115/* Sidebar */
116.widget-area,
117.widget-area a,
118.widget-area h1,
119.widget-area h2,
120.widget-area h3,
121.widget-area h4,
122.widget-area h5,
123.widget-area h6 {
124    color: @ini_background;
125}
126.widget-area a:hover,
127.widget-area a:focus,
128.widget-area a:active {
129    color: @ini_background_neu;
130}
131.widget-area {
132    width: 220px;
133}
134.site-info {
135    padding: 0 0 40px;
136    color: @ini_background;
137    font-size: 12px;
138    text-align: center;
139}
140.site-info a {
141    color: @ini_background;
142    text-decoration: none;
143}
144.site-info a:hover {
145    color: @ini_theme_color_alt;
146}
147.page-footer {
148    font-size: 14px;
149    padding: 20px 40px;
150    margin: 40px -40px 0;
151    width: @ini_content_width;
152    background-color: @ini_background_alt;
153
154    // Hide page path in the page footer
155    bdi:first-child {
156        display: none;
157    }
158}
159
160/* =DokuWiki-specific
161----------------------------------------------- */
162
163/* Breadcrumbs */
164div.breadcrumbs {
165    background-color: @ini_background_alt;
166    margin: 0 0 20px -40px;
167    padding: 15px 40px;
168    position: relative;
169    width: @ini_content_width;
170    font-size: 14px;
171
172    a {
173        text-decoration: none;
174    }
175}
176body:not(.mode_show) div.breadcrumbs {
177    display: none;
178}
179
180/* TOC */
181#dw__toc {
182    width: 240px;
183
184    h3 {
185        font-size: 14px;
186        margin-bottom: 0;
187        padding: 10px;
188    }
189    > div {
190        padding: 0 10px 10px;
191    }
192    ul li {
193        font-size: 14px;
194        line-height: inherit;
195    }
196    ul ul {
197        padding-left: 20px;
198    }
199    ul ul ul {
200        padding-left: 15px;
201    }
202    li li {
203        list-style: square;
204        color: lighten(@ini_text, 40%);
205    }
206    a {
207        text-decoration: none;
208    }
209}
210
211/* Section editing */
212.secedit input.button, /* @deprecated since Detritus */
213.secedit button {
214    padding: 5px 10px;
215}
216.dokuwiki div.section_highlight {
217    margin: 0 -40px;
218    padding: 0 20px;
219    border-width: 0 20px;
220}
221.dokuwiki a[rel="tag"] {
222	display: inline-block;
223	padding: 5px 10px;
224	margin: 0 5px 5px 0;
225	background: @ini_theme_color;
226	color: #fff;
227	font-size: 12px;
228	text-decoration: none;
229}
230
231/* Modal windows */
232.dokuwiki form.search div.ajax_qsearch {
233    left: auto;
234    right: -13.5em;
235    top: -10px;
236}
237.JSpopup {
238    border: 2px solid @ini_background_neu;
239    border-radius: 20px;
240    color: @ini_text;
241    padding: 10px;
242    font-size: 14px;
243}
244
245.mock-layout {
246    background-color: @ini_background;
247    padding: 0;
248    width: auto;
249
250    &::after {
251        width: 40px;
252    }
253    &::before {
254        width: 20px;
255        left: 40px;
256    }
257
258    > div {
259        padding: 20px 20px 20px 80px !important;
260    }
261}
262
263/* Fullscreen media manager */
264.mode_media {
265    .mock-layout;
266
267    #writr__sidebar-toggle,
268    #writr__masthead .site-branding,
269    #writr__masthead .search-form,
270    #writr__site-navigation,
271    #writr__secondary,
272    .breadcrumbs,
273    .page-footer {
274        display: none;
275    }
276    #writr__page,
277    .content-area {
278        width: auto;
279    }
280    .content-area {
281        padding: 0;
282    }
283
284    /* show only logo in sidebar */
285    #writr__sidebar {
286        float: none;
287        padding: 0;
288        width: auto;
289        position: static;
290        .site-header {
291            background-color: transparent;
292            position: absolute;
293            top: 15px;
294            left: 5px;
295        }
296        .site-logo {
297            display: inline-block;
298            img {
299                width: 50px;
300                height: 50px;
301            }
302        }
303    }
304}
305
306/* Popup media manager */
307.media-popup {
308    padding: 0;
309
310    &,
311    &::before,
312    &::after {
313        background-color: @ini_background;
314    }
315
316    #mediamgr__aside > div,
317    #mediamgr__content > div {
318        padding: 5px;
319    }
320
321    #media__tree {
322        li > ul {
323            margin-left: 0;
324        }
325        ul li li {
326            margin-left: 1em;
327        }
328    }
329}
330
331/* Image detail page */
332.detail-page {
333    .mock-layout;
334
335    p.back a .genericon {
336        vertical-align: middle;
337        text-decoration: none;
338        margin: 0 5px 0 -8px;
339    }
340}
341