]> git.vanrenterghem.biz Git - git.ikiwiki.info.git/blob - doc/style.css
single-indent (not sure why I doubled it)
[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,aside,details,figcaption,figure,
9 footer,header,hgroup,menu,nav,section {
10         display: block;
11 }
13 div.header, header.header {
14         margin: 0;
15         font-size: 140%;
16         font-weight: bold;
17         line-height: 1em;
18         display: block;
19 }
21 .inlineheader .author {
22         margin: 0;
23         font-size: 112%;
24         font-weight: bold;
25         display: block;
26 }
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 }
42 .inlinepage .actions ul {
43         border-bottom: 0;
44 }
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 }
59 .inlinecontent,
60 .inlineenclosure {
61         margin-top: .4em;
62 }
64 .pagefooter,
65 .inlinefooter,
66 .comments {
67         clear: both;
68 }
70 #pageinfo {
71         margin: 1em 0;
72         border-top: 1px solid #000;
73 }
75 .tags {
76         margin-top: 1em;
77 }
79 .inlinepage .tags {
80         display: inline;
81 }
83 .mapparent {
84         text-decoration: none;
85 }
87 .img caption {
88         font-size: 80%;
89         caption-side: bottom;
90         text-align: center;
91 }
93 img.img {
94         margin: 0.5ex;
95 }
97 .align-left {
98         float:left;
99 }
101 .align-right {
102         float:right;
105 #backlinks {
106         margin-top: 1em;
109 #searchform {
110         display: inline;
111         float: right;
114 #editcontent {
115         width: 98%;
118 .editcontentdiv {
119         width: auto;
120         overflow: auto;
123 img {
124         border-style: none;
127 pre {
128         overflow: auto;
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;
140 .recentchanges .metadata {
141         padding: 0px 0.5em;
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;
151 .recentchanges .desc {
152         display: none;
154 .recentchanges .diff {
155         display: none;
157 .recentchanges .committer {
158         float: left;
159         margin: 0;
160         width: 40%;
162 .recentchanges .committype {
163         float: left;
164         margin: 0;
165         width: 5%;
166         font-size: small;
168 .recentchanges .changedate {
169         float: left;
170         margin: 0;
171         width: 35%;
172         font-size: small;
174 .recentchanges .pagelinks,
175 .recentchanges .revert {
176         float: right;
177         margin: 0;
178         width: 60%;
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;
190 .inlinepage {
191         padding: 10px 10px;
192         border: 1px solid #aaa;
193         overflow: auto;
196 .pagedate,
197 .pagelicense,
198 .pagecopyright {
199         font-style: italic;
200         display: block;
201         margin-top: 1em;
204 .archivepagedate {
205         font-style: italic;
207 .archivepage {
208         margin-bottom: 1em;
211 .error {
212         color: #C00;
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;
227 hr.poll {
228         height: 10pt;
229         color: white !important;
230         background: #eee;
231         border: 2px solid black;
233 div.poll {
234         margin-top: 1ex;
235         margin-bottom: 1ex;
236         padding: 1ex 1ex;
237         border: 1px solid #aaa;
240 span.color {
241         padding: 2px;
244 .comment-header,
245 .microblog-header {
246         font-style: italic;
247         margin-top: .3em;
249 .comment .author,
250 .microblog .author {
251         font-weight: bold;
253 .comment-subject {
254         font-weight: bold;
256 .comment-avatar {
257         float: right;
259 .comment {
260         border: 1px solid #aaa;
261         padding: 3px;
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;
273 div.progress-done {
274         background: #ea6 !important;
275         color: black !important;
276         text-align: center;
277         padding: 1px;
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         .addcomment { display: none; }
292 /* infobox template */
293 .infobox {
294         float: right;
295         margin-left: 2ex;
296         margin-top: 1ex;
297         margin-bottom: 1ex;
298         padding: 1ex 1ex;
299         border: 1px solid #aaa;
300         background: white;
301         color: black !important;
304 /* notebox template */
305 .notebox {
306         float: right;
307         margin-left: 2ex;
308         margin-top: 1ex;
309         margin-bottom: 1ex;
310         padding: 1ex 1ex;
311         border: 1px solid #aaa;
312         width: 25%;
313         background: white;
314         color: black !important;
317 /* popup template and backlinks hiding */
318 .popup {
319         border-bottom: 1px dotted #366;
320         color: #366;
322 .popup .balloon,
323 .popup .paren,
324 .popup .expand {
325         display: none;
326         text-align: left;
328 .popup:hover .balloon,
329 .popup:focus .balloon {
330         position: absolute;
331         display: inline;
332         margin: 1em 0 0 -2em;
333         padding: 0.625em;
334         border: 2px solid;
335         background-color: #dee;
336         color: black;
339 /* form styling */
340 fieldset {
341         margin: 1ex 0;
342         border: 1px solid black;
344 legend {
345         padding: 0 1ex;
347 .fb_submit {
348         float: left;
349         margin: 2px 0;
351 label.block {    
352         display: block;   
354 label.inline {    
355         display: inline;
357 input#openid_identifier {
358         background: url(wikiicons/openidlogin-bg.gif) no-repeat;
359         background-color: #fff;
360         background-position: 0 50%;
361         color: #000;
362         padding-left: 18px;
364 input#searchbox {
365         background: url(wikiicons/search-bg.gif) no-repeat;
366         background-color: #fff;
367         background-position: 100% 50%;
368         color: #000;
369         padding-right: 16px;
371 /* invalid form fields */
372 .fb_invalid {
373         color: red;
374         background: white !important;
376 /* required form fields */
377 .fb_required {
378         font-weight: bold;
381 /* highlight plugin */
382 pre.hl { color:#000000; background-color:#ffffff; }
383 .hl.num { color:#2928ff; }
384 .hl.esc { color:#ff00ff; }
385 .hl.str { color:#ff0000; }
386 .hl.dstr { color:#818100; }
387 .hl.slc { color:#838183; font-style:italic; }
388 .hl.com { color:#838183; font-style:italic; }
389 .hl.dir { color:#008200; }
390 .hl.sym { color:#000000; }
391 .hl.line { color:#555555; }
392 .hl.mark { background-color:#ffffbb; }
393 .hl.kwa { color:#000000; font-weight:bold; }
394 .hl.kwb { color:#830000; }
395 .hl.kwc { color:#000000; font-weight:bold; }
396 .hl.kwd { color:#010181; }
398 /* calendar plugin */
399 .month-calendar-day-this-day,
400 .year-calendar-this-month {
401         background-color: #eee;
403 .month-calendar-day-head,
404 .month-calendar-day-nolink,
405 .month-calendar-day-link,
406 .month-calendar-day-this-day,
407 .month-calendar-day-future {
408         text-align: right;
410 .month-calendar-arrow A:link,
411 .year-calendar-arrow A:link,
412 .month-calendar-arrow A:visited,
413 .year-calendar-arrow A:visited {
414         text-decoration: none;
415         font-weight: normal;
416         font-size: 150%;
419 /* outlines */
420 li.L1 { list-style: upper-roman; }
421 li.L2 { list-style: decimal; }
422 li.L3 { list-style: lower-alpha; }
423 li.L4 { list-style: disc; }
424 li.L5 { list-style: square; }
425 li.L6 { list-style: circle; }
426 li.L7 { list-style: lower-roman; }
427 li.L8 { list-style: upper-alpha; }
429 /* tag cloud */
430 .pagecloud {
431         float: right;
432         width: 30%;
433         text-align: center;
434         padding: 10px 10px;
435         border: 1px solid #aaa;
436         background: #eee;
437         color: black !important;
439 .smallestPC { font-size: 70%; }
440 .smallPC { font-size: 85%; }
441 .normalPC { font-size: 100%; }
442 .bigPC { font-size: 115%; }
443 .biggestPC { font-size: 130%; }
445 /* orange feed button */
446 .feedbutton {
447         background: #ff6600;
448         color: white !important;
449         border-left: 1px solid #cc9966;
450         border-top: 1px solid #ccaa99;
451         border-right: 1px solid #993300;
452         border-bottom: 1px solid #331100;
453         padding: 0px 0.5em 0px 0.5em;
454         font-family: sans-serif;
455         font-weight: bold;
456         font-size: small;
457         text-decoration: none;
458         margin-top: 1em;
460 .feedbutton:hover {
461         color: white !important;
462         background: #ff9900;
465 .FlattrButton {
466         display: none;
469 /* login selector */
470 #login_choice {
471         display: none;
473 #login_input_area {
474         clear: both;
475         padding: 10px;
477 #login_btns, #login_btns br {
478         clear: both;
480 #login_highlight {
481         background-color: black;
482         float: left;
484 .login_large_btn {
485         padding: 1em 1.5em;
486         border: 1px solid #DDD;
487         margin: 3px;
488         float: left;
490 .login_small_btn {
491         padding: 4px 4px;
492         border: 1px solid #DDD;
493         margin: 3px;
494         float: left;
496 a.login_large_btn:focus {
497         outline: none;
499 a.login_large_btn:focus {
500         outline-style: none;
502 .login_selected {
503         border: 4px solid #DDD;
506 .fileupload-content .ui-progressbar {
507         width: 200px;
508         height: 20px;
510 .fileupload-content .ui-progressbar-value {
511         background: url(ikiwiki/images/pbar-ani.gif);
514 .trails {
515         margin-top: 1em;
516         margin-bottom: 1em;
518 .trail {
519         display: block;
520         clear: both;
521         position: relative;
524 .trailprev {
525         display: block;
526         text-align: left;
527         position: absolute;
528         top: 0%;
529         left: 3%;
530         width: 30%;
533 .trailup {
534         display: block;
535         text-align: center;
536         margin-left: 35%;
537         margin-right: 35%;
540 .trailnext {
541         display: block;
542         text-align: right;
543         position: absolute;
544         top: 0%;
545         width: 30%;
546         right: 3%;
549 .trailsep {
550         display: none;
553 /* mobile/small-screen-friendly layout */
554 @media (max-width: 600px) {
555         .sidebar {
556                 width: auto;
557                 float: none;
558                 margin-top: 0;
559                 border: none;
560         }
562         /* if the mobile browser is new enough, use flex layout to shuffle
563          * the sidebar to the end */
564         .page {
565                 display: -webkit-box;
566                 display: -webkit-flexbox;
567                 display: -webkit-flex;
568                 display: -moz-box;
569                 display: -ms-flexbox;
570                 display: flex;
571                 -webkit-box-orient: vertical;
572                 -webkit-flex-direction: tb;
573                 -webkit-flex-direction: column;
574                 -webkit-flex-flow: column;
575                 -ms-flex-direction: column;
576                 flex-direction: column;
577         }
578         #pageheader {
579                 -webkit-box-ordinal-group: -1;
580                 -webkit-order: -1;
581                 -ms-box-ordinal-group: -1;
582                 -ms-flex-order: -1;
583                 order: -1;
584         }
585         .sidebar, #footer {
586                 -webkit-box-ordinal-group: 1;
587                 -webkit-order: 1;
588                 -ms-box-ordinal-group: 1;
589                 -ms-flex-order: 1;
590                 order: 1;
591         }
593         .blogform, #blogform {
594                 padding: 4px 4px;
595         }