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