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