xref: /template/writr/css/theme.less (revision a4ff460312082e5543c3b264d467682eb9ea836a) 
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/* Search */
259.dokuwiki {
260    form.search {
261        input {
262            border: 5px solid @ini_theme_color_alt !important;
263        }
264    }
265}
266
267/* Modal windows */
268.dokuwiki form.search div.ajax_qsearch {
269    left: auto;
270    right: -13.5em;
271    top: -10px;
272}
273.JSpopup {
274    border: 2px solid @ini_background_neu;
275    border-radius: 20px;
276    color: @ini_text;
277    padding: 10px;
278    font-size: 14px;
279}
280
281.mock-layout {
282    background-color: @ini_background;
283    padding: 0;
284    width: auto;
285
286    &::after {
287        width: 40px;
288    }
289    &::before {
290        width: 20px;
291        left: 40px;
292    }
293
294    > div {
295        padding: 20px 20px 20px 80px !important;
296    }
297}
298
299/* Fullscreen media manager */
300.mode_media {
301    .mock-layout;
302
303    #writr__sidebar-toggle,
304    #writr__masthead .site-branding,
305    #writr__masthead .search-form,
306    #writr__site-navigation,
307    #writr__secondary,
308    .breadcrumbs,
309    .page-footer {
310        display: none;
311    }
312    #writr__page,
313    .content-area {
314        width: auto;
315    }
316    .content-area {
317        padding: 0;
318    }
319
320    /* show only logo in sidebar */
321    #writr__sidebar {
322        float: none;
323        padding: 0;
324        width: auto;
325        position: static;
326        .site-header {
327            background-color: transparent;
328            position: absolute;
329            top: 15px;
330            left: 5px;
331        }
332        .site-logo {
333            display: inline-block;
334            img {
335                width: 50px;
336                height: 50px;
337            }
338        }
339    }
340}
341
342/* Popup media manager */
343.media-popup {
344    padding: 0;
345
346    &,
347    &::before,
348    &::after {
349        background-color: @ini_background;
350    }
351
352    #mediamgr__aside > div,
353    #mediamgr__content > div {
354        padding: 5px;
355    }
356
357    #media__tree {
358        li > ul {
359            margin-left: 0;
360        }
361        ul li li {
362            margin-left: 1em;
363        }
364    }
365}
366
367/* Image detail page */
368.detail-page {
369    .mock-layout;
370
371    p.back a .genericon {
372        vertical-align: middle;
373        text-decoration: none;
374        margin: 0 5px 0 -8px;
375    }
376}
377