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