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