xref: /template/writr/css/theme.less (revision 49d371544e542e214e97d7210d0121b6779c2929) 
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    bdi:first-child {
216        display: none;
217    }
218}
219
220/* =DokuWiki-specific
221----------------------------------------------- */
222
223/* Breadcrumbs */
224div.breadcrumbs {
225    background-color: @ini_background_alt;
226    margin: 0 0 20px -40px;
227    padding: 15px 40px;
228    position: relative;
229    width: 800px;
230    font-size: 14px;
231
232    a {
233        text-decoration: none;
234    }
235}
236body:not(.mode_show) div.breadcrumbs {
237    display: none;
238}
239
240/* TOC */
241#dw__toc {
242    width: 240px;
243
244    h3 {
245        font-size: 14px;
246        margin-bottom: 0;
247        padding: 10px;
248    }
249    > div {
250        padding: 0 10px 10px;
251    }
252    ul li {
253        font-size: 14px;
254        line-height: inherit;
255    }
256    ul ul {
257        padding-left: 20px;
258    }
259    ul ul ul {
260        padding-left: 15px;
261    }
262    li li {
263        list-style: square;
264        color: lighten(@ini_text, 40%);
265    }
266    a {
267        text-decoration: none;
268    }
269}
270
271/* Section editing */
272.secedit input.button, /* @deprecated since Detritus */
273.secedit button {
274    padding: 5px 10px;
275}
276.dokuwiki div.section_highlight {
277    margin: 0 -40px;
278    padding: 0 20px;
279    border-width: 0 20px;
280}
281
282/* Modal windows */
283.dokuwiki form.search div.ajax_qsearch {
284    left: auto;
285    right: -13.5em;
286    top: -10px;
287}
288.JSpopup {
289    border: 2px solid @ini_background_neu;
290    border-radius: 20px;
291    color: @ini_text;
292    padding: 10px;
293    font-size: 14px;
294}
295
296.mock-layout {
297    background-color: @ini_background;
298    padding: 0;
299    width: auto;
300
301    &::after {
302        width: 40px;
303    }
304    &::before {
305        width: 20px;
306        left: 40px;
307    }
308
309    > div {
310        padding: 20px 20px 20px 80px !important;
311    }
312}
313
314/* Fullscreen media manager */
315.mode_media {
316    .mock-layout;
317
318    #writr__sidebar-toggle,
319    #writr__masthead .site-branding,
320    #writr__masthead .search-form,
321    #writr__site-navigation,
322    #writr__secondary,
323    .breadcrumbs,
324    .page-footer {
325        display: none;
326    }
327    #writr__page,
328    .content-area {
329        width: auto;
330    }
331    .content-area {
332        padding: 0;
333    }
334
335    /* show only logo in sidebar */
336    #writr__sidebar {
337        float: none;
338        padding: 0;
339        width: auto;
340        position: static;
341        .site-header {
342            background-color: transparent;
343            position: absolute;
344            top: 15px;
345            left: 5px;
346        }
347        .site-logo {
348            display: inline-block;
349            img {
350                width: 50px;
351                height: 50px;
352            }
353        }
354    }
355}
356
357/* Popup media manager */
358.media-popup {
359    padding: 0;
360
361    &,
362    &::before,
363    &::after {
364        background-color: @ini_background;
365    }
366
367    #mediamgr__aside > div,
368    #mediamgr__content > div {
369        padding: 5px;
370    }
371
372    #media__tree {
373        li > ul {
374            margin-left: 0;
375        }
376        ul li li {
377            margin-left: 1em;
378        }
379    }
380}
381
382/* Image detail page */
383.detail-page {
384    .mock-layout;
385
386    p.back a .genericon {
387        vertical-align: middle;
388        text-decoration: none;
389        margin: 0 5px 0 -8px;
390    }
391}
392