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