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