1/**
2 * This file provides the main design styles for the
3 * bits that surround the content.
4 *
5 * @author Anika Henke <anika@selfthinker.org>
6 * @author Andreas Gohr <andi@splitbrain.org>
7 * @author Clarence Lee <clarencedglee@gmail.com>
8 */
9
10/* header
11********************************************************************/
12
13
14#dokuwiki__header {
15    width: 100%;
16    height: 100px;
17    position: fixed;
18    right:0;
19    left:0;
20    top:0;
21    z-index: 30;
22
23    .pad {
24        width: 100%;
25        height: 60px;
26        background: #222c37;
27    }
28
29    .headings {
30        width: 271px;
31        height: 34px;
32        float: left;
33        padding: 13px 0 0 0;
34    }
35
36    .tools {
37        width: 170px;
38        height: 60px;
39        float: right;
40        position: relative;
41
42
43
44        .holder {
45            .pure-menu-link;
46        }
47
48        .menu {
49            list-style: none;
50            width:100%;
51            height:100%;
52
53            &:hover ul {
54                display:block;
55            }
56            ul {
57                .pure-menu-children；
58            }
59
60            li {
61                background:#222c37;
62                .pure-menu-item;
63                margin: 0px 0 0 -19px;
64                width: 190px;
65                a {
66                    padding-left: 30px;
67                }
68                a {
69                    height: 40px;
70                    line-height: 40px;
71                    display: block;
72                    float: left;
73                    margin: 0 15px;
74                    text-decoration: none;
75                    cursor: pointer;
76                    color: #D1D1D1;
77                    -webkit-transition: color .15s;
78                    -moz-transition: color .15s;
79                    -ms-transition: color .15s;
80                    -o-transition: color .15s;
81                    transition: color .15s;
82                }
83                a:hover { color: #00cccc; }
84                a.selected {
85                    color: #00cccc; position: relative; font-family: 'avalonbold', sans-serif; line-height: 44px;
86                }
87                a.selected:after {
88                    content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 11px; left: 0; background: #00cccc;
89                }
90            }
91
92            a {
93                height: 40px;
94                line-height: 40px;
95                display: block;
96                float: left;
97                margin: 0px 15px;
98                text-decoration: none;
99                cursor: pointer;
100                color: #D1D1D1;
101                transition: color 0.15s ease 0s;
102            }
103        }
104
105        ul {
106            display:none;
107            position: relative;
108            z-index: 15;
109            list-style: none;
110            margin: 15px 15px 15px 0;
111        }
112
113        li {
114            float: left;
115            margin: 0 0 0 20px;
116            font-size: 1em;
117            font-family: 'avalon', sans-serif;
118        }
119
120    }
121
122    [dir=rtl] .tools li {
123        margin-right: 1em;
124        margin-left: 0;
125    }
126
127    form.search {
128        float: right; position: relative;
129
130        :before {
131            content: '';
132            width: 18px;
133            height: 60px;
134            position: absolute;
135            left: -17px;
136            background: url(images/shard-left.png) 0 0 no-repeat;
137        }
138        :after {
139            content: '';
140            width: 18px;
141            height: 60px;
142            position: absolute;
143            right: -17px;
144            background: url(images/shard-right.png) 0 0 no-repeat;
145        }
146
147        input.edit {
148            width: 350px;
149            line-height: 20px;
150            padding: 20px 50px 20px 20px;
151            border: 0;
152            margin: 0;
153            outline: none;
154            -webkit-border-radius: 0;
155            -moz-border-radius: 0;
156            border-radius: 0;
157        }
158
159        input.edit:focus {
160            background: #fff !important;
161        }
162
163        input.button {
164            background: transparent url(images/search.png) no-repeat 0 0;
165            border-width: 0;
166            width: 19px;
167            height: 14px;
168            text-indent: -99999px;
169            margin-left: -35px;
170            box-shadow: none;
171            padding: 0;
172        }
173
174    }
175
176    [dir=rtl] form.search {
177        input.edit {
178            padding: .35em .1em .35em 22px;
179        }
180
181        input.button {
182            background-position: 5px 0;
183            margin-left: 0;
184            margin-right: -20px;
185            position: relative;
186        }
187    }
188
189    #IE7 form.search {
190        min-height: 1px;
191        z-index: 21;
192    }
193
194
195    .links {
196        ul {
197            float: right;
198            list-style-type: none;
199            margin: 10px 0;
200            padding: 0 30px 0 0;
201        }
202
203        li {
204            float: left;
205            margin: 0 1px 0 0;
206            font-size: 1em;
207            font-family: 'avalon', sans-serif;
208            a {
209                height: 40px;
210                line-height: 40px;
211                display: block;
212                float: left;
213                margin: 0 15px;
214                text-decoration: none;
215                cursor: pointer;
216                color: #D1D1D1;
217                -webkit-transition: color .15s;
218                -moz-transition: color .15s;
219                -ms-transition: color .15s;
220                -o-transition: color .15s;
221                transition: color .15s;
222            }
223            a:hover { color: #00cccc; }
224            a.selected { color: #00cccc; position: relative; font-family: 'avalonbold', sans-serif; line-height: 44px; }
225            a.selected:after { content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 11px; left: 0; background: #00cccc; }
226        }
227
228    }
229
230    h1 {
231        margin: 0;
232        font-size: 1.5em;
233        font-weight: normal;
234
235        img {
236            float: left;
237            margin: 0px 10px 0px 20px;
238        }
239
240        span {
241            display: block;
242            width:100%;
243
244        }
245
246        a {
247            color: #D1D1D1;
248        }
249        a:hover { color: #00cccc; }
250        a.selected {
251            color: #00cccc; position: relative; font-family: 'avalonbold', sans-serif; line-height: 44px;
252        }
253        a.selected:after {
254            content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 11px; left: 0; background: #00cccc;
255        }
256    }
257
258    p.claim {
259        margin-bottom: 0;
260        font-size: 0.875em;
261    }
262
263    /* make all links in header (including breadcrumb and interwiki) same colour as the rest */
264    a {
265        color: @ini_link;
266        background-color: inherit;
267    }
268}
269
270[dir=rtl] #dokuwiki__header h1 img {
271    float: right;
272    margin-left: .5em;
273    margin-right: 0;
274}
275
276/* highlight selected tool */
277.mode_admin a.action.admin,
278.mode_login a.action.login,
279.mode_register a.action.register,
280.mode_profile a.action.profile,
281.mode_recent a.action.recent,
282.mode_index a.action.index,
283.mode_media a.action.media,
284.mode_revisions a.action.revs,
285.mode_backlink a.action.backlink,
286.mode_subscribe a.action.subscribe {
287    .pur
288}
289
290
291#dokuwiki__usertools a.action,
292#dokuwiki__usertools a.iw_user {
293    padding-left: 20px;
294    background: transparent url(images/usertools.png) no-repeat 0 0;
295}
296
297[dir=rtl] #dokuwiki__usertools a.action {
298    padding-left: 0;
299    padding-right: 20px;
300}
301
302[dir=rtl] #IE7 #dokuwiki__usertools a.action {
303    display: inline-block;
304}
305
306#dokuwiki__header .mobileTools {
307    display: none; /* hide mobile tools dropdown to only show in mobile view */
308}
309
310/*____________ user tools ____________*/
311
312#dokuwiki__usertools {
313
314    .pure-menu;
315    .pure-menu-horizontal;
316    float:right;
317    width:auto;
318    background:#333;
319
320    li.much {
321        .pure-menu-item;
322        .pure-menu-has-children;
323        .pure-menu-allow-hover;
324    }
325
326    ul {
327        .pure-menu-item;
328    }
329
330    li {
331        .pure-menu-item;
332    }
333}
334
335[dir=rtl] ##dokuwiki__header usertools {
336    text-align: left;
337    left: 40px;
338    right: auto;
339
340    a.action.admin {
341        background-position: right 0;
342    }
343
344    a.action.profile {
345        background-position: right -32px;
346    }
347
348    a.action.register {
349        background-position: right -64px;
350    }
351
352    a.action.login {
353        background-position: right -96px;
354    }
355
356    a.action.logout {
357        background-position: right -128px;
358    }
359}
360
361/*____________ site tools ____________*/
362
363#dokuwiki__sitetools {
364    text-align: right;
365    form.search {
366        font-size: 0.875em;
367    }
368    a.action.recent {
369        background-position: left -96px;
370    }
371
372}
373
374[dir=rtl] #dokuwiki__sitetools {
375    text-align: left;
376}
377
378/*____________ breadcrumbs ____________*/
379
380.dokuwiki div.breadcrumbs {
381
382    width: 100%;
383    background: #e6e6e6;
384    border-bottom: #222c37 0px solid;
385
386    div {
387        padding: .1em .35em;
388    }
389
390    div:only-child {
391        border-top: 1px solid @ini_background;
392        border-bottom: 1px solid @ini_border;
393    }
394
395    div:first-child {
396        //border-top: 1px solid @ini_background;
397    }
398
399    div:last-child {
400        //border-bottom: 1px solid @ini_border;
401    }
402
403    .bcsep {
404        font-size: 0.75em;
405    }
406
407    .trace {
408        span.info {
409            float: right;
410        }
411    }
412}
413
414#IE7 .dokuwiki div.breadcrumbs div,
415#IE8 .dokuwiki div.breadcrumbs div {
416    //border-bottom: 1px solid @ini_border;
417}
418
419/* sidebar
420********************************************************************/
421
422.dokuwiki .aside {
423    font-size: 0.875em;
424    overflow: hidden;
425    word-wrap: break-word;
426
427    /* make sidebar more condensed */
428
429    h1 {
430        font-size: 1.714em;
431        margin-bottom: .292em;
432    }
433
434    h2 {
435        margin: 2em 0 1em 0;
436        font-size: 14px;
437        border-bottom: 1px solid #EEE;
438        padding-left: 10px;
439    }
440
441    h3 {
442        margin-bottom: .444em;
443    }
444
445    h4 {
446        margin-bottom: .5em;
447    }
448
449    h5 {
450        margin-bottom: .5714em;
451    }
452
453    p,
454    ul,
455    ol,
456    dl,
457    pre,
458    table,
459    fieldset,
460    hr,
461    blockquote,
462    address {
463        margin-bottom: .7em;
464    }
465
466    ul,
467    ol {
468        padding-left: .5em;
469    }
470
471    li ul,
472    li ol {
473        margin-bottom: 0;
474        padding: 0;
475    }
476
477    a:link,
478    a:visited {
479        color: @ini_link;
480        background-color: inherit;
481    }
482}
483
484[dir=rtl] .dokuwiki .aside ul,
485[dir=rtl] .dokuwiki .aside ol {
486    padding-right: .5em;
487}
488
489/* content
490********************************************************************/
491
492.dokuwiki .pageId {
493    margin: 0.2em 0;
494    color: #333;
495    text-align: center;
496    border-bottom: 1px solid #eee;
497    font-size: 3em;
498    font-weight: 300;
499    max-width: 800px;
500    margin: 0px auto 50px;
501}
502
503.dokuwiki div.page {
504    margin: 0 auto;
505    max-width: 800px;
506    margin-bottom: 50px;
507    line-height: 1.6em;
508    padding: 1.556em 2em 0;
509
510    p {
511        margin: 1em auto;
512        padding: 0 2em;
513        max-width: 800px;
514        line-height: 1.6em;
515    }
516}
517
518.dokuwiki .docInfo {
519    font-size: 0.875em;
520    text-align: right;
521}
522
523/* license note under edit window */
524.dokuwiki div.license {
525    font-size: 93.75%;
526}
527
528[dir=rtl] .dokuwiki .docInfo {
529    text-align: left;
530}
531
532[dir=rtl] .dokuwiki .pageId {
533    right: auto;
534    left: -1em;
535}
536
537/* footer
538********************************************************************/
539
540.dokuwiki .wrapper {
541    margin-bottom: 1.4em;
542}
543
544#dokuwiki__footer {
545    margin-bottom: 1em;
546    text-align: center;
547
548    > .pad {
549        font-size: 0.875em;
550    }
551
552    div.license {
553        margin-bottom: 0.5em;
554        font-size: 100%;
555    }
556
557    div.buttons a {
558        img {
559            opacity: 0.5;
560        }
561
562        &:hover img,
563        &:active img,
564        &:focus img {
565            opacity: 1;
566        }
567    }
568
569}
570
571[dir=rtl] #dokuwiki__footer .license img {
572    margin: 0 0 0 .5em;
573}
574