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