xref: /template/writr/css/theme.less (revision 1f923bd5b69e734d20244307cf9e987a9bceb508) 
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    position: relative;
178    width: @ini_content_width;
179    font-size: 14px;
180
181    a {
182        text-decoration: none;
183    }
184}
185.makeFullWidth div.breadcrumbs {
186  width: ~"calc(100vw - 400px - @{ini_content_border})";
187}
188body:not(.mode_show) div.breadcrumbs {
189    display: none;
190}
191
192/* TOC */
193#dw__toc {
194    width: 240px;
195
196    h3 {
197        font-size: 14px;
198        margin-bottom: 0;
199        padding: 10px;
200    }
201    > div {
202        padding: 0 10px 10px;
203    }
204    ul li {
205        font-size: 14px;
206        line-height: inherit;
207    }
208    ul ul {
209        padding-left: 20px;
210    }
211    ul ul ul {
212        padding-left: 15px;
213    }
214    li li {
215        list-style: square;
216        color: lighten(@ini_text, 40%);
217    }
218    a {
219        text-decoration: none;
220    }
221}
222
223/* Section editing */
224.secedit input.button, /* @deprecated since Detritus */
225.secedit button {
226    padding: 5px 10px;
227}
228.dokuwiki div.section_highlight {
229    margin: 0 -40px;
230    padding: 0 20px;
231    border-width: 0 20px;
232}
233.dokuwiki a[rel="tag"] {
234	display: inline-block;
235	padding: 5px 10px;
236	margin: 0 5px 5px 0;
237	background: @ini_theme_color;
238	color: #fff;
239	font-size: 12px;
240	text-decoration: none;
241}
242
243/* Modal windows */
244.dokuwiki form.search div.ajax_qsearch {
245    left: auto;
246    right: -13.5em;
247    top: -10px;
248}
249.JSpopup {
250    border: 2px solid @ini_background_neu;
251    border-radius: 20px;
252    color: @ini_text;
253    padding: 10px;
254    font-size: 14px;
255}
256
257.mock-layout {
258    background-color: @ini_background;
259    padding: 0;
260    width: auto;
261
262    &::after {
263        width: 40px;
264    }
265    &::before {
266        width: 20px;
267        left: 40px;
268    }
269
270    > div {
271        padding: 20px 20px 20px 80px !important;
272    }
273}
274
275/* Fullscreen media manager */
276.mode_media {
277    .mock-layout;
278
279    #writr__sidebar-toggle,
280    #writr__masthead .site-branding,
281    #writr__masthead .search-form,
282    #writr__site-navigation,
283    #writr__secondary,
284    .breadcrumbs,
285    .page-footer {
286        display: none;
287    }
288    #writr__page,
289    .content-area {
290        width: auto;
291    }
292    .content-area {
293        padding: 0;
294    }
295
296    /* show only logo in sidebar */
297    #writr__sidebar {
298        float: none;
299        padding: 0;
300        width: auto;
301        position: static;
302        .site-header {
303            background-color: transparent;
304            position: absolute;
305            top: 15px;
306            left: 5px;
307        }
308        .site-logo {
309            display: inline-block;
310            img {
311                width: 50px;
312                height: 50px;
313            }
314        }
315    }
316}
317
318/* Popup media manager */
319.media-popup {
320    padding: 0;
321
322    &,
323    &::before,
324    &::after {
325        background-color: @ini_background;
326    }
327
328    #mediamgr__aside > div,
329    #mediamgr__content > div {
330        padding: 5px;
331    }
332
333    #media__tree {
334        li > ul {
335            margin-left: 0;
336        }
337        ul li li {
338            margin-left: 1em;
339        }
340    }
341}
342
343/* Image detail page */
344.detail-page {
345    .mock-layout;
346
347    p.back a .genericon {
348        vertical-align: middle;
349        text-decoration: none;
350        margin: 0 5px 0 -8px;
351    }
352}
353