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