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