xref: /template/writr/css/theme.less (revision 8eeaf2298e0c64a6d242ec4b142748eab2886c31) 
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: @ini_content_width;
208    background-color: @ini_background_alt;
209
210    // Hide page path in the page footer
211    bdi:first-child {
212        display: none;
213    }
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: @ini_content_width;
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.dokuwiki a[rel="tag"] {
278	display: inline-block;
279	padding: 5px 10px;
280	margin: 0 5px 5px 0;
281	background: @ini_theme_color;
282	color: #fff;
283	font-size: 12px;
284	text-decoration: none;
285}
286
287/* Modal windows */
288.dokuwiki form.search div.ajax_qsearch {
289    left: auto;
290    right: -13.5em;
291    top: -10px;
292}
293.JSpopup {
294    border: 2px solid @ini_background_neu;
295    border-radius: 20px;
296    color: @ini_text;
297    padding: 10px;
298    font-size: 14px;
299}
300
301.mock-layout {
302    background-color: @ini_background;
303    padding: 0;
304    width: auto;
305
306    &::after {
307        width: 40px;
308    }
309    &::before {
310        width: 20px;
311        left: 40px;
312    }
313
314    > div {
315        padding: 20px 20px 20px 80px !important;
316    }
317}
318
319/* Fullscreen media manager */
320.mode_media {
321    .mock-layout;
322
323    #writr__sidebar-toggle,
324    #writr__masthead .site-branding,
325    #writr__masthead .search-form,
326    #writr__site-navigation,
327    #writr__secondary,
328    .breadcrumbs,
329    .page-footer {
330        display: none;
331    }
332    #writr__page,
333    .content-area {
334        width: auto;
335    }
336    .content-area {
337        padding: 0;
338    }
339
340    /* show only logo in sidebar */
341    #writr__sidebar {
342        float: none;
343        padding: 0;
344        width: auto;
345        position: static;
346        .site-header {
347            background-color: transparent;
348            position: absolute;
349            top: 15px;
350            left: 5px;
351        }
352        .site-logo {
353            display: inline-block;
354            img {
355                width: 50px;
356                height: 50px;
357            }
358        }
359    }
360}
361
362/* Popup media manager */
363.media-popup {
364    padding: 0;
365
366    &,
367    &::before,
368    &::after {
369        background-color: @ini_background;
370    }
371
372    #mediamgr__aside > div,
373    #mediamgr__content > div {
374        padding: 5px;
375    }
376
377    #media__tree {
378        li > ul {
379            margin-left: 0;
380        }
381        ul li li {
382            margin-left: 1em;
383        }
384    }
385}
386
387/* Image detail page */
388.detail-page {
389    .mock-layout;
390
391    p.back a .genericon {
392        vertical-align: middle;
393        text-decoration: none;
394        margin: 0 5px 0 -8px;
395    }
396}
397