debwiki/css/debwiki.css

   1 /*
   2  *      wiki.debian.org stylesheet proposal
   3  *
   4  *      Kalle Söderman, 2008 debwiki.css
   5  *
   6  *      Copyleft : This work is free, you can copy, spread, and modify it under
   7  *      the terms of the Free Art License http://artlibre.org/licence/lal/en/
   8  *
   9  *
  10  *      Font size table
  11  *      ---------------
  12  *      Browser default 16px
  13  *
  14  *      14px    87.5%           body
  15  *      24px    1.714em
  16  *      18px    1.286em
  17  *      16px    1.143em
  18  *      12px    0.857em
  19  *      11px    0.75em
  20  *      8px     0.57em
  21  */
  22
  23 @import url("debian.css");
  24
  25 /*
  26  *      Header
  27  */
  28 body {
  29                 font-size: 100%;
  30 }
  31
  32 #breadcrumbs {
  33         text-transform: none;
  34 }
  35 #wikisection p.section{
  36         left: 0;
  37 }
  38 #wikisection {
  39         position: absolute;
  40         top: 0;
  41 }
  42 div#username {
  43         font-size: 0.75em;
  44         margin-left: 5em;
  45         color: #d2d3d7;
  46 }
  47 .sitetools {
  48         text-align:left;
  49         margin: 0 10px 0 0;
  50         padding: 2px 10px 2px 5px;
  51         position: absolute;
  52         top:0;
  53         right:0;
  54         border-right: 1px solid white;
  55         border-left: 1px solid #d2d3d7;
  56         line-height: 1em;
  57 }
  58
  59 #searchform {
  60         float: left;
  61         font-size: 0.75em;
  62         line-height: 2;
  63 }
  64
  65 #pagelocation {
  66 }
  67
  68
  69 #sitetools form {
  70         margin:0;
  71         padding:0;
  72 }
  73
  74 #sitetools input {
  75         margin: 0 0 0 0.25em;
  76         padding-left: 4px;
  77         padding-right: 4px;
  78 }
  79
  80 #sitetools select {
  81         margin-left: 0.5em;
  82 }
  83
  84 #sitetools form p {
  85         display: inline;
  86         line-height: 1em;
  87         margin:0;
  88         padding:0;
  89 }
  90
  91 .sitetools a {
  92         margin: 5px 0.5em 2px 0;
  93         padding: 0 0 0 0;
  94 }
  95
  96 .sitetools {
  97         margin:0;
  98         padding: 2px 10px 2px 5px;
  99         border-left: 1px solid white;
 100         border-right: 1px solid #d2d3d7;
 101         display:block;
 102         float:left;
 103 }
 104
 105 /*
 106  *      Leftcol (Should be renamed secondnav)
 107  */
 108
 109 #leftcol {
 110         float: right;
 111         margin: 2em 0 0 1em  ;
 112         width: 16em;
 113         clear: both;
 114 }
 115
 116 #leftcol a {
 117         display: block;
 118 }
 119
 120 #leftcol #username {
 121         margin: 0 0 1em 0;
 122         display:block;
 123 }
 124
 125 #userhome {
 126         font-weight: bold;
 127         margin-bottom: 1em;
 128 }
 129
 130 #navibar
 131 , .editbar {
 132         list-style: none;
 133         margin: 0;
 134         padding:0;
 135 }
 136
 137 #leftcol ul.editbar {
 138         margin-top: 1em;
 139 }
 140
 141 form select {
 142 }
 143
 144 #leftcol .editbar form select {
 145         width: 100%;
 146 }
 147
 148 .editbar {
 149         padding: 0 0 0 0;
 150         font-size: 0.75em;
 151         line-height: 2;
 152         position: absolute;
 153         right: 10px;
 154 }
 155
 156 #leftcol li {
 157         display:block;
 158         margin:0;
 159         padding:0;
 160         list-style: none;
 161 }
 162
 163 #content {
 164         margin-top: 1.5em;
 165 }
 166
 167 .info {
 168         position: relative;
 169         margin:0 0 0.5em 0;
 170         float: none;
 171 }
 172 #leftcol .info a {
 173         display: inline;
 174 }
 175
 176 #leftcol .info strong {
 177         margin: 0;
 178         padding: 0;
 179 }
 180
 181 /*
 182  *      Typography
 183  */
 184
 185 hr {
 186         background-color: #d2d3d7;
 187         height: 1px;
 188 }
 189
 190 pre, div.codearea {
 191         padding: 1em;
 192         margin: 2em 1.5em 2em 1.5em;
 193         line-height: 1.5em;
 194         background-color: #f5f6f7;
 195         border: 1px solid #d2d3d7 ;
 196         font-family: monospace;
 197         font-size: 100%;
 198         line-height: 2em;
 199 }
 200 div.codearea pre {
 201                 border: none;
 202                 padding: 0;
 203                 margin: 0;
 204 }
 205 div.table-of-contents {
 206         font-size: 0.75em;
 207         line-height: 2em;
 208         list-style:none;
 209         background-image: url('../img/greydot.png');
 210         background-position: bottom left;
 211         background-repeat: repeat-x;
 212         background-color: transparent;
 213         padding: 0;
 214         margin:0;
 215         border:0;
 216         max-width: 50em;
 217         display:block;
 218 }
 219
 220 p.table-of-contents-heading {
 221         font-weight:bold;
 222         padding:0;
 223         margin:1.5em 0 0 0;
 224         font-size: 125%;
 225         letter-spacing: normal;
 226 }
 227
 228 div.table-of-contents ol {
 229         list-style-position: inside;
 230         padding:0;
 231         margin: 0;
 232 }
 233
 234 div.table-of-contents ol ol {
 235         list-style-position: inside;
 236         padding-left: 2em;
 237         margin: 0;
 238 }
 239
 240
 241 div.table-of-contents li {
 242         background-image: url('../img/greydot.png');
 243         background-position: top left;
 244         background-repeat: repeat-x;
 245         padding: 0;
 246         margin:0;
 247  }
 248
 249 div.table-of-contents a:hover {
 250         background-color: #f0f0f4;
 251 }
 252
 253 div.table-of-contents a {
 254         text-decoration: none;
 255 }
 256
 257 .portal h1 {
 258         margin-top: 0;
 259         line-height: 1em;
 260 }
 261
 262 .portal h1:after {
 263         content: "Portal";
 264         font-family:monospace;
 265         font-weight: normal;
 266         font-size: 0.62em;
 267         text-transform: uppercase;
 268         letter-spacing: 0.08em;
 269         background-color: #c70036;
 270         line-height: 16px;
 271         color:white;
 272         padding: 0 5px 0 5px;
 273         margin:1em 0 3em 0;
 274         display: block;
 275 }
 276 h1#locationline {
 277 }
 278 h1#locationline a {
 279         color: black;
 280 }
 281 span.u {
 282                 font-style: normal;
 283                 font-weight: normal;
 284                 text-decoration: underline;
 285 }
 286 p.searchhint {
 287         padding:1em;
 288         border: 1px solid #cccca3;
 289         margin:1em 0 1em 0;
 290         background-color:#ffffcb;
 291         font-size: 0.75em;
 292         line-height: 2;
 293 }
 294 p.searchstats {
 295                 font-size: 0.75em;
 296                 background-color: transparent;
 297                 background-color: #f5f6f7;
 298                 margin:0;
 299                 border-top: 1px solid #d2d3d7 ;
 300                 text-transform:lowercase;
 301                 line-height: 2;
 302                 padding: 0;
 303 }
 304 div.codearea {
 305                 margin: 2em 1.5em 2em 1.5em;
 306                 font-family: monospace;
 307 }
 308 a.codenumbers {
 309                 font-size: 100%;
 310 }
 311
 312
 313 /*
 314  *      Footer
 315  */
 316
 317 p#pageinfo {
 318         color: gray;
 319         font-size: 1em;
 320         margin: 1em 0 0 0;
 321 }
 322
 323 #footer {
 324         margin-top: 2em;
 325         margin-left: 52px;
 326         margin-right: 10px;
 327         clear: both;
 328 }
 329 #footer ul.editbar {
 330         font-size: 1em;
 331         border-bottom: 1px solid #d2d3d7;
 332         background-image: none;
 333         margin: 0 0 1.5em 0;
 334 }
 335
 336 ul#credits {
 337         margin: 1em 0 0 0;
 338         padding:0;
 339         font-size: 1em;
 340         line-height: 2;
 341 }
 342
 343 ul#credits li {
 344         list-style: none;
 345         display: inline;
 346         margin: 0 1em 0 0;
 347 }
 348
 349 #content div.caution
 350 , #content div.important
 351 , #content div.note
 352 , #content div.tip
 353 , #content div.warning {
 354         margin: 1em 0 1em 0;
 355 }
 356
 357 #message {
 358         background-color: #f5f6f7;
 359         padding: 1em;
 360         margin: 1em 0 1em 0;
 361         border: 1px solid #d2d3d7 ;
 362         font-size: 0.75em;
 363         line-height: 2;
 364 }
 365
 366 #message p {
 367         margin:0;
 368         padding:0;
 369 }
 370
 371 table   {
 372         margin: 0.75em 0 0.75em 0;
 373 }
 374 td {
 375                 padding: 0 1em 0 0.5em;
 376 }
 377
 378 #content div.debian {
 379         border:1px solid #c70036;
 380         border-top: 1px solid  #c70036;
 381         background-repeat: no-repeat;
 382         background-position: 10px 5px;
 383         margin: 2em 1.5em 2em 1.5em;
 384         padding: 0 1.5em 0 50px;
 385         font-size: 0.75em;
 386 }
 387 #content div.debian p {
 388                 margin: 1.5em  0 1.5em 0;
 389 }
 390
 391 /*
 392  * Editor
 393  */
 394
 395 #editor #editor-textarea {
 396         display: block;
 397         margin: 1em 0 1em 0;
 398 }
 399 p img.attachment {
 400                 float: left;
 401                 padding-right: 1.5em;
 402 }
 403 table p img.attachment {
 404                 display: inline;
 405                 float: none;
 406                 padding: 0;
 407 }
 408 p img {
 409                 display: inline;
 410 }
 411 table.diff {
 412         font-family: monospace;
 413         font-size: 1em;
 414 }
 415 div#header ul li {
 416         display: inline;
 417         margin-right: 1em;
 418 }
 419 ul#navibar li.wikilink {
 420         margin: 0;
 421 }
 422 ul#navibar li.current {
 423         display: none;
 424 }
 425 li.wikilink {
 426         margin:0;
 427         padding:0;
 428 }
 429 ul#navibar li.userlink {
 430         margin:0;
 431         padding:0;
 432 }
 433 #pagetrail {
 434         margin:0;
 435         display: inline;
 436         text-transform: lowercase;
 437         line-height: 2;
 438         background-color: transparent;
 439         background-color: #f5f6f7;
 440         min-height: 20px;
 441 }
 442 #searchform {
 443         position: absolute;
 444         right: 10px;
 445         top: 0;
 446 }
 447 div#content {
 448         margin: 0 10px 0 52px;
 449 }
 450 div#header {
 451         margin:0;
 452 }
 453 #navbar {
 454         background-color: transparent;
 455         list-style:none;
 456         display:block;
 457         border-bottom:1px solid #c70036;
 458         text-indent:0;
 459         padding: 0;
 460         margin-top:0;
 461         margin-bottom:0;
 462 }
 463 #navbar ul {
 464         margin: 0;
 465         padding: 0;
 466         clear: both;
 467         overflow: hidden;
 468         min-height: 45px;
 469 }
 470 #navbar li {
 471         list-style: none;
 472         float: left;
 473         padding: 0;
 474         margin: 0;
 475 }
 476 #navbar a:link
 477 , #navbar a:visited {
 478         padding: 1.75em 1em 0.25em 1em;
 479         border-left: 1px solid transparent;
 480         border-right: 1px solid transparent;
 481         display: block;
 482         text-decoration: none;
 483 }
 484 #navbar a:visited {
 485         color: #54638c;
 486 }
 487 #navbar a:hover
 488 , #navbar a:visited:hover {
 489         background-color: #efefef;
 490         border-left: 1px solid  #d2d3d7;
 491         border-right: 1px solid #d2d3d7;
 492         text-decoration: underline;
 493 }
 494 form.actionsmenu {
 495         float: right;
 496         vertical-align: text-top;
 497 }
 498 span.sep {
 499         margin-right: 0.25em;
 500         margin-left: 0.25em;
 501 }
 502 td.diff-added {
 503         color: #31a300;
 504 }
 505 td.diff-removed {
 506         color: #c70036;
 507 }
 508 td.diff-info {
 509         padding-left:0;
 510 }