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