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