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 .archivepagedate {
 206         font-style: italic;
 207 }
 208
 209 .error {
 210         color: #C00;
 211 }
 212
 213 .sidebar {
 214         width: 20ex;
 215         float: right;
 216         margin-left: 4px;
 217         margin-bottom: 4px;
 218         margin-top: -1px;
 219         padding: 0ex 2ex;
 220         background: white;
 221         border: 1px solid black;
 222         color: black !important;
 223 }
 224
 225 hr.poll {
 226         height: 10pt;
 227         color: white !important;
 228         background: #eee;
 229         border: 2px solid black;
 230 }
 231 div.poll {
 232         margin-top: 1ex;
 233         margin-bottom: 1ex;
 234         padding: 1ex 1ex;
 235         border: 1px solid #aaa;
 236 }
 237
 238 span.color {
 239         padding: 2px;
 240 }
 241
 242 .comment-header,
 243 .microblog-header {
 244         font-style: italic;
 245         margin-top: .3em;
 246 }
 247 .comment .author,
 248 .microblog .author {
 249         font-weight: bold;
 250 }
 251 .comment-subject {
 252         font-weight: bold;
 253 }
 254 .comment-avatar {
 255         float: right;
 256 }
 257 .comment {
 258         border: 1px solid #aaa;
 259         padding: 3px;
 260 }
 261
 262 div.progress {
 263         margin-top: 1ex;
 264         margin-bottom: 1ex;
 265         border: 1px solid #888;
 266         width: 400px;
 267         background: #eee;
 268         color: black !important;
 269         padding: 1px;
 270 }
 271 div.progress-done {
 272         background: #ea6 !important;
 273         color: black !important;
 274         text-align: center;
 275         padding: 1px;
 276 }
 277
 278 /* things to hide in printouts */
 279 @media print {
 280         .actions { display: none; }
 281         .tags { display: none; }
 282         .trails { display: none; }
 283         .feedbutton { display: none; }
 284         #searchform { display: none; }
 285         .blogform, #blogform { display: none; }
 286         #backlinks { display: none; }
 287 }
 288
 289 /* infobox template */
 290 .infobox {
 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         background: white;
 298         color: black !important;
 299 }
 300
 301 /* notebox template */
 302 .notebox {
 303         float: right;
 304         margin-left: 2ex;
 305         margin-top: 1ex;
 306         margin-bottom: 1ex;
 307         padding: 1ex 1ex;
 308         border: 1px solid #aaa;
 309         width: 25%;
 310         background: white;
 311         color: black !important;
 312 }
 313
 314 /* popup template and backlinks hiding */
 315 .popup {
 316         border-bottom: 1px dotted #366;
 317         color: #366;
 318 }
 319 .popup .balloon,
 320 .popup .paren,
 321 .popup .expand {
 322         display: none;
 323 }
 324 .popup:hover .balloon,
 325 .popup:focus .balloon {
 326         position: absolute;
 327         display: inline;
 328         margin: 1em 0 0 -2em;
 329         padding: 0.625em;
 330         border: 2px solid;
 331         background-color: #dee;
 332         color: black;
 333 }
 334
 335 /* form styling */
 336 fieldset {
 337         margin: 1ex 0;
 338         border: 1px solid black;
 339 }
 340 legend {
 341         padding: 0 1ex;
 342 }
 343 .fb_submit {
 344         float: left;
 345         margin: 2px 0;
 346 }
 347 label.block {
 348         display: block;
 349 }
 350 label.inline {
 351         display: inline;
 352 }
 353 input#openid_identifier {
 354         background: url(wikiicons/openidlogin-bg.gif) no-repeat;
 355         background-color: #fff;
 356         background-position: 0 50%;
 357         color: #000;
 358         padding-left: 18px;
 359 }
 360 input#searchbox {
 361         background: url(wikiicons/search-bg.gif) no-repeat;
 362         background-color: #fff;
 363         background-position: 100% 50%;
 364         color: #000;
 365         padding-right: 16px;
 366 }
 367 /* invalid form fields */
 368 .fb_invalid {
 369         color: red;
 370         background: white !important;
 371 }
 372 /* required form fields */
 373 .fb_required {
 374         font-weight: bold;
 375 }
 376
 377 /* highlight plugin */
 378 pre.hl { color:#000000; background-color:#ffffff; }
 379 .hl.num { color:#2928ff; }
 380 .hl.esc { color:#ff00ff; }
 381 .hl.str { color:#ff0000; }
 382 .hl.dstr { color:#818100; }
 383 .hl.slc { color:#838183; font-style:italic; }
 384 .hl.com { color:#838183; font-style:italic; }
 385 .hl.dir { color:#008200; }
 386 .hl.sym { color:#000000; }
 387 .hl.line { color:#555555; }
 388 .hl.mark { background-color:#ffffbb; }
 389 .hl.kwa { color:#000000; font-weight:bold; }
 390 .hl.kwb { color:#830000; }
 391 .hl.kwc { color:#000000; font-weight:bold; }
 392 .hl.kwd { color:#010181; }
 393
 394 /* calendar plugin */
 395 .month-calendar-day-this-day,
 396 .year-calendar-this-month {
 397         background-color: #eee;
 398 }
 399 .month-calendar-day-head,
 400 .month-calendar-day-nolink,
 401 .month-calendar-day-link,
 402 .month-calendar-day-this-day,
 403 .month-calendar-day-future {
 404         text-align: right;
 405 }
 406 .month-calendar-arrow A:link,
 407 .year-calendar-arrow A:link,
 408 .month-calendar-arrow A:visited,
 409 .year-calendar-arrow A:visited {
 410         text-decoration: none;
 411         font-weight: normal;
 412         font-size: 150%;
 413 }
 414
 415 /* outlines */
 416 li.L1 { list-style: upper-roman; }
 417 li.L2 { list-style: decimal; }
 418 li.L3 { list-style: lower-alpha; }
 419 li.L4 { list-style: disc; }
 420 li.L5 { list-style: square; }
 421 li.L6 { list-style: circle; }
 422 li.L7 { list-style: lower-roman; }
 423 li.L8 { list-style: upper-alpha; }
 424
 425 /* tag cloud */
 426 .pagecloud {
 427         float: right;
 428         width: 30%;
 429         text-align: center;
 430         padding: 10px 10px;
 431         border: 1px solid #aaa;
 432         background: #eee;
 433         color: black !important;
 434 }
 435 .smallestPC { font-size: 70%; }
 436 .smallPC { font-size: 85%; }
 437 .normalPC { font-size: 100%; }
 438 .bigPC { font-size: 115%; }
 439 .biggestPC { font-size: 130%; }
 440
 441 /* orange feed button */
 442 .feedbutton {
 443         background: #ff6600;
 444         color: white !important;
 445         border-left: 1px solid #cc9966;
 446         border-top: 1px solid #ccaa99;
 447         border-right: 1px solid #993300;
 448         border-bottom: 1px solid #331100;
 449         padding: 0px 0.5em 0px 0.5em;
 450         font-family: sans-serif;
 451         font-weight: bold;
 452         font-size: small;
 453         text-decoration: none;
 454         margin-top: 1em;
 455 }
 456 .feedbutton:hover {
 457         color: white !important;
 458         background: #ff9900;
 459 }
 460
 461 .FlattrButton {
 462         display: none;
 463 }
 464
 465 /* openid selector */
 466 #openid_choice {
 467         display: none;
 468 }
 469 #openid_input_area {
 470         clear: both;
 471         padding: 10px;
 472 }
 473 #openid_btns, #openid_btns br {
 474         clear: both;
 475 }
 476 #openid_highlight {
 477         background-color: black;
 478         float: left;
 479 }
 480 .openid_large_btn {
 481         padding: 1em 1.5em;
 482         border: 1px solid #DDD;
 483         margin: 3px;
 484         float: left;
 485 }
 486 .openid_small_btn {
 487         padding: 4px 4px;
 488         border: 1px solid #DDD;
 489         margin: 3px;
 490         float: left;
 491 }
 492 a.openid_large_btn:focus {
 493         outline: none;
 494 }
 495 a.openid_large_btn:focus {
 496         outline-style: none;
 497 }
 498 .openid_selected {
 499         border: 4px solid #DDD;
 500 }
 501
 502 .fileupload-content .ui-progressbar {
 503         width: 200px;
 504         height: 20px;
 505 }
 506 .fileupload-content .ui-progressbar-value {
 507         background: url(ikiwiki/images/pbar-ani.gif);
 508 }
 509
 510 .trails {
 511         margin-top: 1em;
 512         margin-bottom: 1em;
 513 }
 514 .trail {
 515         display: block;
 516         clear: both;
 517         position: relative;
 518 }
 519
 520 .trailprev {
 521         display: block;
 522         text-align: left;
 523         position: absolute;
 524         top: 0%;
 525         left: 3%;
 526         width: 30%;
 527 }
 528
 529 .trailup {
 530         display: block;
 531         text-align: center;
 532         margin-left: 35%;
 533         margin-right: 35%;
 534 }
 535
 536 .trailnext {
 537         display: block;
 538         text-align: right;
 539         position: absolute;
 540         top: 0%;
 541         width: 30%;
 542         right: 3%;
 543 }
 544
 545 .trailsep {
 546         display: none;
 547 }