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