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