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