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