4c48e5c7b9ebbcb2b9b1d6a9f49915c727f2b55c
[ikiwiki.git] / doc / style.css
1 /* ikiwiki style sheet */
2
3 /* Note that instead of modifying this style sheet, you can instead edit
4  * local.css and use it to override or change settings in this one.
5  */
6
7 /* html5 compat */
8 article,aside,details,figcaption,figure,
9 footer,header,hgroup,menu,nav,section {
10         display: block;
11 }
12
13 .header {
14         margin: 0;
15         font-size: 140%;
16         font-weight: bold;
17         line-height: 1em;
18         display: block;
19 }
20
21 .inlineheader .author {
22         margin: 0;
23         font-size: 112%;
24         font-weight: bold;
25         display: block;
26 }
27
28 .actions ul {
29         margin: 0;
30         padding: 6px .4em;
31         height: 1em;
32         list-style-type: none;
33 }
34 .actions li {
35         display: inline;
36         padding: .2em;
37 }
38 .pageheader .actions ul {
39         border-bottom: 1px solid #000;
40 }
41
42 .inlinepage .actions ul {
43         border-bottom: 0;
44 }
45
46 #otherlanguages ul {
47         margin: 0;
48         padding: 6px;
49         list-style-type: none;
50 }
51 #otherlanguages li {
52         display: inline;
53         padding: .2em .4em;
54 }
55 .pageheader #otherlanguages {
56         border-bottom: 1px solid #000;
57 }
58
59 .inlinecontent,
60 .inlineenclosure {
61         margin-top: .4em;
62 }
63
64 .pagefooter,
65 .inlinefooter,
66 .comments {
67         clear: both;
68 }
69
70 #pageinfo {
71         margin: 1em 0;
72         border-top: 1px solid #000;
73 }
74
75 .tags {
76         margin-top: 1em;
77 }
78
79 .inlinepage .tags {
80         display: inline;
81 }
82
83 .mapparent {
84         text-decoration: none;
85 }
86
87 .img caption {
88         font-size: 80%;
89         caption-side: bottom;
90         text-align: center;
91 }
92
93 img.img {
94         margin: 0.5ex;
95 }
96
97 .align-left {
98         float:left;
99 }
100
101 .align-right {
102         float:right;
103 }
104
105 #backlinks {
106         margin-top: 1em;
107 }
108
109 #searchform {
110         display: inline;
111         float: right;
112 }
113
114 #editcontent {
115         width: 98%;
116 }
117
118 .editcontentdiv {
119         width: auto;
120         overflow: auto;
121 }
122
123 img {
124         border-style: none;
125 }
126
127 pre {
128         overflow: auto;
129 }
130
131 div.recentchanges {
132         border-style: solid;
133         border-width: 1px;
134         overflow: auto;
135         width: auto;
136         clear: none;
137         background: #eee;
138         color: black !important;
139 }
140 .recentchanges .metadata {
141         padding: 0px 0.5em;
142 }
143 .recentchanges .changelog {
144         font-style: italic;
145         clear: both;
146         display: block;
147         padding: 1px 2px;
148         background: white !important;
149         color: black !important;
150 }
151 .recentchanges .desc {
152         display: none;
153 }
154 .recentchanges .diff {
155         display: none;
156 }
157 .recentchanges .committer {
158         float: left;
159         margin: 0;
160         width: 40%;
161 }
162 .recentchanges .committype {
163         float: left;
164         margin: 0;
165         width: 5%;
166         font-size: small;
167 }
168 .recentchanges .changedate {
169         float: left;
170         margin: 0;
171         width: 35%;
172         font-size: small;
173 }
174 .recentchanges .pagelinks,
175 .recentchanges .revert {
176         float: right;
177         margin: 0;
178         width: 60%;
179 }
180
181 .blogform, #blogform {
182         padding: 10px 10px;
183         border: 1px solid #aaa;
184         background: #eee;
185         color: black !important;
186         width: auto;
187         overflow: auto;
188 }
189
190 .inlinepage {
191         padding: 10px 10px;
192         border: 1px solid #aaa;
193         overflow: auto;
194 }
195
196 .pagedate,
197 .pagelicense,
198 .pagecopyright {
199         font-style: italic;
200         display: block;
201         margin-top: 1em;
202 }
203
204 .archivepagedate {
205         font-style: italic;
206 }
207 .archivepage {
208         margin-bottom: 1em;
209 }
210
211 .error {
212         color: #C00;
213 }
214
215 .sidebar {
216         width: 20ex;
217         float: right;
218         margin-left: 4px;
219         margin-bottom: 4px;
220         margin-top: -1px;
221         padding: 0ex 2ex;
222         background: white;
223         border: 1px solid black;
224         color: black !important;
225 }
226
227 hr.poll {
228         height: 10pt;
229         color: white !important;
230         background: #eee;
231         border: 2px solid black;
232 }
233 div.poll {
234         margin-top: 1ex;
235         margin-bottom: 1ex;
236         padding: 1ex 1ex;
237         border: 1px solid #aaa;
238 }
239
240 span.color {
241         padding: 2px;
242 }
243
244 .comment-header,
245 .microblog-header {
246         font-style: italic;
247         margin-top: .3em;
248 }
249 .comment .author,
250 .microblog .author {
251         font-weight: bold;
252 }
253 .comment-subject {
254         font-weight: bold;
255 }
256 .comment-avatar {
257         float: right;
258 }
259 .comment {
260         border: 1px solid #aaa;
261         padding: 3px;
262 }
263
264 div.progress {
265         margin-top: 1ex;
266         margin-bottom: 1ex;
267         border: 1px solid #888;
268         width: 400px;
269         background: #eee;
270         color: black !important;
271         padding: 1px;
272 }
273 div.progress-done {
274         background: #ea6 !important;
275         color: black !important;
276         text-align: center;
277         padding: 1px;
278 }
279
280 /* things to hide in printouts */
281 @media print {
282         .actions { display: none; }
283         .tags { display: none; }
284         .trails { display: none; }
285         .feedbutton { display: none; }
286         #searchform { display: none; }
287         .blogform, #blogform { display: none; }
288         #backlinks { display: none; }
289 }
290
291 /* infobox template */
292 .infobox {
293         float: right;
294         margin-left: 2ex;
295         margin-top: 1ex;
296         margin-bottom: 1ex;
297         padding: 1ex 1ex;
298         border: 1px solid #aaa;
299         background: white;
300         color: black !important;
301 }
302
303 /* notebox template */
304 .notebox {
305         float: right;
306         margin-left: 2ex;
307         margin-top: 1ex;
308         margin-bottom: 1ex;
309         padding: 1ex 1ex;
310         border: 1px solid #aaa;
311         width: 25%;
312         background: white;
313         color: black !important;
314 }
315
316 /* popup template and backlinks hiding */
317 .popup {
318         border-bottom: 1px dotted #366;
319         color: #366;
320 }
321 .popup .balloon,
322 .popup .paren,
323 .popup .expand {
324         display: none;
325         text-align: left;
326 }
327 .popup:hover .balloon,
328 .popup:focus .balloon {
329         position: absolute;
330         display: inline;
331         margin: 1em 0 0 -2em;
332         padding: 0.625em;
333         border: 2px solid;
334         background-color: #dee;
335         color: black;
336 }
337
338 /* form styling */
339 fieldset {
340         margin: 1ex 0;
341         border: 1px solid black;
342 }
343 legend {
344         padding: 0 1ex;
345 }
346 .fb_submit {
347         float: left;
348         margin: 2px 0;
349 }
350 label.block {    
351         display: block;   
352 }
353 label.inline {    
354         display: inline;
355 }
356 input#openid_identifier {
357         background: url(wikiicons/openidlogin-bg.gif) no-repeat;
358         background-color: #fff;
359         background-position: 0 50%;
360         color: #000;
361         padding-left: 18px;
362 }
363 input#searchbox {
364         background: url(wikiicons/search-bg.gif) no-repeat;
365         background-color: #fff;
366         background-position: 100% 50%;
367         color: #000;
368         padding-right: 16px;
369 }
370 /* invalid form fields */
371 .fb_invalid {
372         color: red;
373         background: white !important;
374 }
375 /* required form fields */
376 .fb_required {
377         font-weight: bold;
378 }
379
380 /* highlight plugin */
381 pre.hl { color:#000000; background-color:#ffffff; }
382 .hl.num { color:#2928ff; }
383 .hl.esc { color:#ff00ff; }
384 .hl.str { color:#ff0000; }
385 .hl.dstr { color:#818100; }
386 .hl.slc { color:#838183; font-style:italic; }
387 .hl.com { color:#838183; font-style:italic; }
388 .hl.dir { color:#008200; }
389 .hl.sym { color:#000000; }
390 .hl.line { color:#555555; }
391 .hl.mark { background-color:#ffffbb; }
392 .hl.kwa { color:#000000; font-weight:bold; }
393 .hl.kwb { color:#830000; }
394 .hl.kwc { color:#000000; font-weight:bold; }
395 .hl.kwd { color:#010181; }
396
397 /* calendar plugin */
398 .month-calendar-day-this-day,
399 .year-calendar-this-month {
400         background-color: #eee;
401 }
402 .month-calendar-day-head,
403 .month-calendar-day-nolink,
404 .month-calendar-day-link,
405 .month-calendar-day-this-day,
406 .month-calendar-day-future {
407         text-align: right;
408 }
409 .month-calendar-arrow A:link,
410 .year-calendar-arrow A:link,
411 .month-calendar-arrow A:visited,
412 .year-calendar-arrow A:visited {
413         text-decoration: none;
414         font-weight: normal;
415         font-size: 150%;
416 }
417
418 /* outlines */
419 li.L1 { list-style: upper-roman; }
420 li.L2 { list-style: decimal; }
421 li.L3 { list-style: lower-alpha; }
422 li.L4 { list-style: disc; }
423 li.L5 { list-style: square; }
424 li.L6 { list-style: circle; }
425 li.L7 { list-style: lower-roman; }
426 li.L8 { list-style: upper-alpha; }
427
428 /* tag cloud */
429 .pagecloud {
430         float: right;
431         width: 30%;
432         text-align: center;
433         padding: 10px 10px;
434         border: 1px solid #aaa;
435         background: #eee;
436         color: black !important;
437 }
438 .smallestPC { font-size: 70%; }
439 .smallPC { font-size: 85%; }
440 .normalPC { font-size: 100%; }
441 .bigPC { font-size: 115%; }
442 .biggestPC { font-size: 130%; }
443
444 /* orange feed button */
445 .feedbutton {
446         background: #ff6600;
447         color: white !important;
448         border-left: 1px solid #cc9966;
449         border-top: 1px solid #ccaa99;
450         border-right: 1px solid #993300;
451         border-bottom: 1px solid #331100;
452         padding: 0px 0.5em 0px 0.5em;
453         font-family: sans-serif;
454         font-weight: bold;
455         font-size: small;
456         text-decoration: none;
457         margin-top: 1em;
458 }
459 .feedbutton:hover {
460         color: white !important;
461         background: #ff9900;
462 }
463
464 .FlattrButton {
465         display: none;
466 }
467
468 /* openid selector */
469 #openid_choice {
470         display: none;
471 }
472 #openid_input_area {
473         clear: both;
474         padding: 10px;
475 }
476 #openid_btns, #openid_btns br {
477         clear: both;
478 }
479 #openid_highlight {
480         background-color: black;
481         float: left;
482 }
483 .openid_large_btn {
484         padding: 1em 1.5em;
485         border: 1px solid #DDD;
486         margin: 3px;
487         float: left;
488 }
489 .openid_small_btn {
490         padding: 4px 4px;
491         border: 1px solid #DDD;
492         margin: 3px;
493         float: left;
494 }
495 a.openid_large_btn:focus {
496         outline: none;
497 }
498 a.openid_large_btn:focus {
499         outline-style: none;
500 }
501 .openid_selected {
502         border: 4px solid #DDD;
503 }
504
505 .fileupload-content .ui-progressbar {
506         width: 200px;
507         height: 20px;
508 }
509 .fileupload-content .ui-progressbar-value {
510         background: url(ikiwiki/images/pbar-ani.gif);
511 }
512
513 .trails {
514         margin-top: 1em;
515         margin-bottom: 1em;
516 }
517 .trail {
518         display: block;
519         clear: both;
520         position: relative;
521 }
522
523 .trailprev {
524         display: block;
525         text-align: left;
526         position: absolute;
527         top: 0%;
528         left: 3%;
529         width: 30%;
530 }
531
532 .trailup {
533         display: block;
534         text-align: center;
535         margin-left: 35%;
536         margin-right: 35%;
537 }
538
539 .trailnext {
540         display: block;
541         text-align: right;
542         position: absolute;
543         top: 0%;
544         width: 30%;
545         right: 3%;
546 }
547
548 .trailsep {
549         display: none;
550 }