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 .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         clear: both;
  67 }
  68 .inlinefooter {
  69         clear: both;
  70 }
  71
  72 #pageinfo {
  73         margin: 1em 0;
  74         border-top: 1px solid #000;
  75 }
  76
  77 .tags {
  78         margin-top: 1em;
  79 }
  80
  81 .inlinepage .tags {
  82         display: inline;
  83 }
  84
  85 .mapparent {
  86         text-decoration: none;
  87 }
  88
  89 .img caption {
  90         font-size: 80%;
  91         caption-side: bottom;
  92         text-align: center;
  93 }
  94
  95 .align-left {
  96         float:left;
  97 }
  98
  99 .align-right {
 100         float:right;
 101 }
 102
 103 #backlinks {
 104         margin-top: 1em;
 105 }
 106
 107 #searchform {
 108         display: inline;
 109         float: right;
 110 }
 111
 112 #editcontent {
 113         width: 98%;
 114 }
 115
 116 .editcontentdiv {
 117         width: auto;
 118         overflow: auto;
 119 }
 120
 121 img {
 122         border-style: none;
 123 }
 124
 125 pre {
 126         overflow: auto;
 127 }
 128
 129 div.recentchanges {
 130         border-style: solid;
 131         border-width: 1px;
 132         overflow: auto;
 133         width: auto;
 134         clear: none;
 135         background: #eee;
 136         color: black !important;
 137 }
 138 .recentchanges .metadata {
 139         padding: 0px 0.5em;
 140 }
 141 .recentchanges .changelog {
 142         font-style: italic;
 143         clear: both;
 144         display: block;
 145         padding: 1px 2px;
 146         background: white !important;
 147         color: black !important;
 148 }
 149 .recentchanges .desc {
 150         display: none;
 151 }
 152 .recentchanges .diff {
 153         display: none;
 154 }
 155 .recentchanges .committer {
 156         float: left;
 157         margin: 0;
 158         width: 40%;
 159 }
 160 .recentchanges .committype {
 161         float: left;
 162         margin: 0;
 163         width: 5%;
 164         font-size: small;
 165 }
 166 .recentchanges .changedate {
 167         float: left;
 168         margin: 0;
 169         width: 35%;
 170         font-size: small;
 171 }
 172 .recentchanges .pagelinks {
 173         float: right;
 174         margin: 0;
 175         width: 60%;
 176 }
 177
 178 #blogform {
 179         padding: 10px 10px;
 180         border: 1px solid #aaa;
 181         background: #eee;
 182         color: black !important;
 183         width: auto;
 184         overflow: auto;
 185 }
 186
 187 .inlinepage {
 188         padding: 10px 10px;
 189         border: 1px solid #aaa;
 190         overflow: auto;
 191 }
 192
 193 .pagedate,
 194 .pagelicense,
 195 .pagecopyright {
 196         font-style: italic;
 197         display: block;
 198         margin-top: 1em;
 199 }
 200
 201 .error {
 202         color: #C00;
 203 }
 204
 205 .sidebar {
 206         width: 20ex;
 207         float: right;
 208         margin-left: 4px;
 209         margin-bottom: 4px;
 210         margin-top: -1px;
 211         padding: 0ex 2ex;
 212         background: white;
 213         border: 1px solid black;
 214         color: black !important;
 215 }
 216
 217 hr.poll {
 218         height: 10pt;
 219         color: white !important;
 220         background: #eee;
 221         border: 2px solid black;
 222 }
 223 div.poll {
 224         margin-top: 1ex;
 225         margin-bottom: 1ex;
 226         padding: 1ex 1ex;
 227         border: 1px solid #aaa;
 228 }
 229
 230 span.color {
 231         padding: 2px;
 232 }
 233
 234 .comment-header,
 235 .microblog-header {
 236         font-style: italic;
 237         margin-top: .3em;
 238 }
 239 .comment .author,
 240 .microblog .author {
 241         font-weight: bold;
 242 }
 243 .comment-subject {
 244         font-weight: bold;
 245 }
 246 .comment {
 247         border: 1px solid #aaa;
 248         padding: 3px;
 249 }
 250
 251 div.progress {
 252         margin-top: 1ex;
 253         margin-bottom: 1ex;
 254         border: 1px solid #888;
 255         width: 400px;
 256         background: #eee;
 257         color: black !important;
 258         padding: 1px;
 259 }
 260 div.progress-done {
 261         background: #ea6 !important;
 262         color: black !important;
 263         text-align: center;
 264         padding: 1px;
 265 }
 266
 267 /* things to hide in printouts */
 268 @media print {
 269         .actions { display: none; }
 270         .tags { display: none; }
 271         .feedbutton { display: none; }
 272         #searchform { display: none; }
 273         #blogform { display: none; }
 274         #backlinks { display: none; }
 275 }
 276
 277 /* infobox template */
 278 .infobox {
 279         float: right;
 280         margin-left: 2ex;
 281         margin-top: 1ex;
 282         margin-bottom: 1ex;
 283         padding: 1ex 1ex;
 284         border: 1px solid #aaa;
 285         background: white;
 286         color: black !important;
 287 }
 288
 289 /* notebox template */
 290 .notebox {
 291         float: right;
 292         margin-left: 2ex;
 293         margin-top: 1ex;
 294         margin-bottom: 1ex;
 295         padding: 1ex 1ex;
 296         border: 1px solid #aaa;
 297         width: 25%;
 298         background: white;
 299         color: black !important;
 300 }
 301
 302 /* popup template and backlinks hiding */
 303 .popup {
 304         border-bottom: 1px dotted #366;
 305         color: #366;
 306 }
 307 .popup .balloon,
 308 .popup .paren,
 309 .popup .expand {
 310         display: none;
 311 }
 312 .popup:hover .balloon,
 313 .popup:focus .balloon {
 314         position: absolute;
 315         display: inline;
 316         margin: 1em 0 0 -2em;
 317         padding: 0.625em;
 318         border: 2px solid;
 319         background-color: #dee;
 320         color: black;
 321 }
 322
 323 /* form styling */
 324 fieldset {
 325         margin: 1ex 0;
 326         border: 1px solid black;
 327 }
 328 legend {
 329         padding: 0 1ex;
 330 }
 331 .fb_submit {
 332         float: left;
 333         margin: 2px 0;
 334 }
 335 label.block {
 336         display: block;
 337 }
 338 label.inline {
 339         display: inline;
 340 }
 341 ol.form {
 342         list-style: none;
 343         padding: 0;
 344 }
 345 li.form {
 346         padding-bottom: 1em;
 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 /* openid selector */
 457 #openid_choice {
 458         display: none;
 459 }
 460 #openid_input_area {
 461         clear: both;
 462         padding: 10px;
 463 }
 464 #openid_btns, #openid_btns br {
 465         clear: both;
 466 }
 467 #openid_highlight {
 468         background-color: black;
 469         float: left;
 470 }
 471 .openid_large_btn {
 472         padding: 1em 1.5em;
 473         border: 1px solid #DDD;
 474         margin: 3px;
 475         float: left;
 476 }
 477 .openid_small_btn {
 478         padding: 4px 4px;
 479         border: 1px solid #DDD;
 480         margin: 3px;
 481         float: left;
 482 }
 483 a.openid_large_btn:focus {
 484         outline: none;
 485 }
 486 a.openid_large_btn:focus {
 487         -moz-outline-style: none;
 488 }
 489 .openid_selected {
 490         border: 4px solid #DDD;
 491 }