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