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