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