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