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