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