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