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