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