xref: /template/sprintdoc/css/base_design.less (revision 00c1ebdd538599613507ac32efd0518d311e600e) 
1/**
2 * This file provides the main design styles
3 * across all template elements (typo, colors etc.)
4 *
5 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
6 */
7
8
9html, body {
10    background-color: @color-site-bg;
11}
12
13a {
14    color: @color-link;
15}
16
17/* highlight selected tool */
18.mode_admin a.action.admin,
19.mode_login a.action.login,
20.mode_register a.action.register,
21.mode_profile a.action.profile,
22.mode_recent a.action.recent,
23.mode_index a.action.index,
24.mode_media a.action.media,
25.mode_revisions a.action.revs,
26.mode_backlink a.action.backlink,
27.mode_subscribe a.action.subscribe {
28    font-weight: bold;
29}
30
31.dokuwiki .pageId {
32    float: right;
33    margin-right: -1em;
34    margin-bottom: -1px;
35    margin-top: -1.5em;
36    overflow: hidden;
37    padding: 0.5em 1em 0;
38
39    span {
40        font-size: 0.875em;
41        border: solid @ini_background_alt;
42        border-width: 1px 1px 0;
43        background-color: @ini_background;
44        color: @ini_text_alt;
45        padding: .1em .35em;
46        border-top-left-radius: 2px;
47        border-top-right-radius: 2px;
48        box-shadow: 0 0 .5em @ini_text_alt;
49        display: block;
50    }
51}
52
53.dokuwiki div.page {
54    clear: both;
55    background: @color-content-bg;
56    color: inherit;
57    padding: 1rem 2rem 2rem;
58    // margin-bottom: .5rem; // no margin: if there is another bg-color, then there is an #fff border
59    overflow: hidden;
60    word-wrap: break-word;
61}
62
63.dokuwiki .docInfo {
64    font-size: 0.5rem;
65    text-align: right;
66}
67
68/* license note under edit window */
69.dokuwiki div.license {
70    font-size: 93.75%;
71}
72
73[dir=rtl] .dokuwiki .docInfo {
74    text-align: left;
75}
76
77[dir=rtl] .dokuwiki .pageId {
78    float: left;
79    margin-left: -1em;
80    margin-right: 0;
81}
82
83caption,
84figcaption,
85summary,
86legend {
87    padding: 0;
88    margin: 0 0 .35em;
89    line-height: 1.2;
90}
91
92h1,
93h2,
94h3,
95h4,
96h5,
97h6 {
98    font-weight: bold;
99    padding: 0;
100    line-height: 1.2;
101    clear: both;
102}
103
104[dir=rtl] h1,
105[dir=rtl] h2,
106[dir=rtl] h3,
107[dir=rtl] h4,
108[dir=rtl] h5,
109[dir=rtl] h6 {
110    clear: right;
111}
112
113h1 {
114    font-size: 1.4rem;
115    margin: 0 0 0.444em;
116    padding-top: 1em;
117}
118
119h2 {
120    font-size: 1.12rem;
121    margin: 0 0 0.666em;
122}
123
124h3 {
125    font-size: 1rem;
126    margin: 0 0 0.888em;
127}
128
129h4 {
130    font-size: .94rem;
131    margin: 0 0 1.0em;
132}
133
134h5 {
135    font-size: .88rem;
136    margin: 0 0 1.1428em;
137}
138
139h6 {
140    font-size: .83rem;
141    margin: 0 0 1.333em;
142}
143
144p {
145    font-size: .88rem;
146    line-height: 135%;
147
148    a,
149    span,
150    strong {
151        font-size: inherit;
152    }
153}
154
155label,
156legend,
157button {
158    font-size: .88rem;
159
160    a,
161    span,
162    strong {
163        font-size: inherit;
164    }
165}
166
167hr,
168figure,
169details,
170address {
171    font-size: .88rem;
172    line-height: 140%;
173}
174
175p,
176ul,
177ol,
178dl,
179pre,
180table,
181hr,
182blockquote,
183figure,
184details,
185fieldset,
186address {
187    margin: 0 0 1.4em; /* bottom margin = line-height */
188    padding: 0;
189}
190
191div,
192video,
193audio {
194    margin: 0;
195    padding: 0;
196}
197
198small,
199.code {
200    font-size: .75rem;
201}
202
203.code {
204    margin-top: @grid;
205}
206
207
208/*____________ lists ____________*/
209
210ul,
211ol {
212    font-size: .88rem;
213    line-height: 140%;
214    padding: 0 0 0 1.5em;
215}
216
217[dir=rtl] ul,
218[dir=rtl] ol {
219    padding: 0 1.5em 0 0;
220}
221
222li,
223dd {
224    padding: 0;
225    margin: 0 0 0 1.5em;
226}
227
228[dir=rtl] li,
229[dir=rtl] dd {
230    margin: 0 1.5em 0 0;
231}
232
233dl {
234    font-size: .88rem;
235    line-height: 140%;
236}
237
238dt {
239    font-weight: bold;
240    margin: 0;
241    padding: 0;
242}
243
244li ul,
245li ol,
246li dl,
247dl ul,
248dl ol,
249dl dl {
250    margin-bottom: 0;
251    padding: 0;
252}
253
254li li {
255    font-size: 100%;
256}
257
258ul {
259    list-style: square outside;
260}
261
262ol {
263    list-style: decimal outside;
264}
265
266ol ol {
267    list-style-type: lower-alpha;
268}
269
270ol ol ol {
271    list-style-type: upper-roman;
272}
273
274ol ol ol ol {
275    list-style-type: upper-alpha;
276}
277
278ol ol ol ol ol {
279    list-style-type: lower-roman;
280}
281
282table {
283    border-collapse: collapse;
284    empty-cells: show;
285    border-spacing: 0;
286    border: 1px solid @color-border;
287    font-size: .88rem;
288    line-height: 140%;
289}
290
291caption {
292    caption-side: top;
293    text-align: left;
294}
295
296[dir=rtl] caption {
297    text-align: right;
298}
299
300th,
301td {
302    padding: .3em .5em;
303    margin: 0;
304    vertical-align: top;
305    border: 1px solid @color-border;
306}
307
308th {
309    font-weight: bold;
310    background-color: @ini_background_alt;
311    text-align: left;
312}
313
314[dir=rtl] th {
315    text-align: right;
316}
317
318a {
319    outline: none;
320}
321
322a:link,
323a:visited {
324    text-decoration: none;
325    color: @color-link;
326}
327
328a:hover,
329a:focus,
330a:active {
331    text-decoration: underline;
332}
333
334img {
335    display: inline-block;
336    border-width: 0;
337    vertical-align: middle;
338    color: #666;
339    background-color: transparent;
340    font-style: italic;
341    height: auto;
342}
343
344img,
345object,
346embed,
347iframe,
348video,
349audio {
350    max-width: 100%;
351}
352
353button img {
354    max-width: none;
355}
356
357hr {
358    border-top: solid @color-border;
359    border-bottom: solid @ini_background;
360    border-width: 1px 0;
361    height: 0;
362    text-align: center;
363    clear: both;
364}
365
366acronym,
367abbr {
368    cursor: help;
369    border-bottom: 1px dotted;
370    font-style: normal;
371}
372
373em acronym,
374em abbr {
375    font-style: italic;
376}
377
378mark {
379    background-color: @ini_highlight;
380    color: inherit;
381}
382
383pre,
384code,
385samp,
386kbd {
387    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
388    /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
389    font-size: 1em;
390    direction: ltr;
391    text-align: left;
392    background-color: @color-site-bg;
393    color: @color-text;
394    box-shadow: inset 0 0 .3em @color-border;
395    border-radius: @fix_border-radius;
396}
397
398pre {
399    overflow: auto;
400    word-wrap: normal;
401    border: 1px solid @color-border;
402    border-radius: @fix_border-radius;
403    box-shadow: inset 0 0 .5em @color-border;
404    font-size: .88rem;
405    line-height: 140%;
406    padding: .7em 1em;
407}
408
409blockquote {
410    border: solid @color-border;
411    border-width: 0 0 0 .25em;
412    font-size: .88rem;
413    line-height: 140%;
414    padding: 0 .5em;
415}
416
417[dir=rtl] blockquote {
418    border-width: 0 .25em 0 0;
419}
420
421q:before,
422q:after {
423    content: '';
424}
425
426sub,
427sup {
428    font-size: .8em;
429    line-height: 1;
430}
431
432sub {
433    vertical-align: sub;
434}
435
436sup {
437    vertical-align: super;
438}
439
440small {
441    font-size: .9em;
442}
443
444
445/*____________ forms ____________*/
446
447/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */
448
449form {
450    display: inline;
451    margin: 0;
452    padding: 0;
453}
454
455fieldset {
456    font-size: .88rem;
457    line-height: 140%;
458    border: 1px solid @ini_text_alt;
459    padding: .7rem 1rem;
460}
461
462fieldset > :last-child {
463    margin-bottom: 0;
464}
465
466legend {
467    margin: 0;
468    padding: 0 .1em;
469}
470
471label {
472    vertical-align: middle;
473    cursor: pointer;
474}
475
476input,
477textarea,
478button,
479select,
480optgroup,
481option,
482keygen,
483output,
484meter,
485progress {
486    font: inherit;
487    font-weight: normal;
488    color: #333;
489    background-color: #fff;
490    line-height: normal;
491    margin: 0;
492    vertical-align: middle;
493    box-sizing: border-box;
494}
495
496select {
497    max-width: 100%;
498}
499
500textarea.edit {
501    font-size: .88em;
502}
503
504optgroup {
505    font-style: italic;
506    font-weight: bold;
507}
508
509option {
510    font-style: normal;
511    font-weight: normal;
512}
513
514input,
515textarea,
516select,
517keygen {
518    border: 1px solid #ccc;
519    box-shadow: inset 0 0 1px #eee;
520    border-radius: @fix_border-radius;
521}
522
523input:active,
524input:focus,
525textarea:active,
526textarea:focus,
527select:active,
528select:focus,
529keygen:active,
530keygen:focus {
531    border-color: #999;
532}
533
534input[type=radio],
535input[type=checkbox],
536input[type=image] {
537    padding: 0;
538    border-style: none;
539    box-shadow: none;
540}
541
542
543/* + + + + +  buttons  + + + + + */
544button {
545    background-color: #eee;
546    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
547    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
548    border: 1px solid #ccc;
549    border-radius: @fix_border-radius;
550    color: #333;
551    padding: .1em .5em;
552    cursor: pointer;
553    transition: @transition background-color, @transition color;
554
555    &:hover,
556    &:focus,
557    &:active {
558        background-color: #ddd;
559        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
560        background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
561        border-color: #999;
562    }
563}
564
565
566/* + + +  all types of submit-buttons  + + + */
567a.button,
568input[type=submit],
569input[type=reset],
570button[type=submit],
571.qq-upload-button {
572    cursor: pointer;
573    background-image: none;
574    background-color: @button_background;
575    border: 1px solid @button_background;
576    border-radius: @fix_border-radius;
577    color: @button_color;
578    padding: .3em @grid;
579    transition: @transition background-color, @transition color;
580
581    &:hover,
582    &:active,
583    &:focus {
584        background-color: @button_color;
585        color: @button_background;
586    }
587}
588
589
590/* + + +  all types of buttons not being submit-buttons  + + + */
591input.button,
592input[type=button] {
593    cursor: pointer;
594    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
595    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
596    background-color: #eee;
597    border: 1px solid #ccc;
598    border-radius: @fix_border-radius;
599    color: #333;
600    padding: .1em .5em;
601    transition: @transition background-color, @transition color;
602
603    &:hover,
604    &:active,
605    &:focus {
606        background-color: #ddd;
607        border-color: #999;
608        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
609        background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
610    }
611}
612
613
614/* + + +  all disabled buttons  + + + */
615input[disabled],
616button[disabled],
617select[disabled],
618textarea[disabled],
619option[disabled],
620input[readonly],
621button[readonly],
622select[readonly],
623textarea[readonly] {
624    cursor: auto;
625    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
626    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
627    background-color: #eee;
628    opacity: .5;
629    border: 1px solid #ccc;
630    border-radius: @fix_border-radius;
631    color: #333;
632    font-weight: normal;
633    padding: .3em @grid;
634    transition: @transition background-color, @transition color;
635
636    &:hover,
637    &:active,
638    &:focus {
639        background-color: #ddd;
640        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
641        background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
642        border-color: #999;
643        color: #333;
644    }
645}
646
647input::-moz-focus-inner,
648button::-moz-focus-inner {
649    border: 0;
650    padding: 0;
651}
652