xonstat/static/css/style.css

   1 /* Author: Tyler "-z-" Mulligan
   2  * Notes: Graphics paritially generated from a Xonotic game theme with
   3  * the idea of future support for other game skins to be generated and
   4  * supported by this framework.
   5  * Reset by Richard Clark @ html5doctor.com, v1.6.1
   6  * Last Updated: 2011-06-29
   7  */  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }  body { line-height:1; }  article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {  display:block; }  nav ul { list-style:none; }  blockquote, q { quotes:none; }  blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }  a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }  /* change colours to suit your needs */ ins { background-color:#C59240; color:#000; text-decoration:none; }  /* change colours to suit your needs */ mark { background-color:#B58224; color:#000;  font-style:italic; font-weight:bold; }  del { text-decoration: line-through; }  abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }  table { border-collapse:collapse; border-spacing:0; }  /* change border colour to suit your needs */ hr { display:block; height:1px; border:0;  border-top:1px solid #888; margin:1em 0; padding:0; }  input, select { vertical-align:middle; }
   8
   9 @font-face {
  10     font-family: 'Xolonium';
  11     src: url('fonts/xolonium-webfont.eot');
  12     src: url('fonts/xolonium-webfont.eot?#iefix') format('embedded-opentype'),
  13          url('fonts/xolonium-webfont.woff') format('woff'),
  14          url('fonts/xolonium-webfont.ttf') format('truetype'),
  15          url('fonts/xolonium-webfont.svg#Xolonium') format('svg');
  16     font-weight: normal;
  17     font-style: normal;
  18 }
  19
  20 body {
  21         width:100%;
  22         background:#000 url('img/web_background.png') 0 0 no-repeat;
  23         background-size: 100%;
  24     font-family: 'Xolonium', 'Arial', 'Helvetica';
  25     font-size: 14px;
  26     line-height:1.4em;
  27         color:#C7E3FF;
  28         overflow-x:hidden;
  29 }
  30 h1 {
  31         font-size:20px;
  32         text-align: center;
  33 }
  34
  35 h2 {
  36         font-size:18px;
  37         color:#D0E8FF;
  38         text-shadow:1px 1px 4px #013;
  39         margin:15px 0 12px;
  40 }
  41 h3 {
  42         font-size:16px;
  43         /*color:#FF7000;*/
  44         color:#ADC0D2;
  45         margin:18px 0 4px;
  46 }
  47 h4 {
  48         font-size:15px;
  49         color:#6D8399;
  50         margin:18px 0 4px;
  51 }
  52 h5 {
  53         color:#BD5300;
  54         margin:8px 0 4px;
  55 }
  56 p {
  57         margin:8px 0;
  58         line-height:18px;
  59 }
  60 a {
  61         color:#DCE9F5;
  62         text-decoration:none;
  63 }
  64 a:hover {
  65         color:#D95F00;
  66 }
  67 th {
  68         font-size:13px;
  69         padding:2px;
  70         border:1px solid #436688;
  71         background-color:#001021;
  72         cursor:pointer;
  73 }
  74 th:hover {
  75         color:#fff;
  76         text-shadow:1px 1px 3px #5A8BBC !important;
  77 }
  78 td {
  79         border:1px solid #436688;
  80         font-size:10px;
  81         padding:4px;
  82 }
  83 blockquote {
  84         font-size:14px;
  85         color:#fff;
  86         margin:12px 15px;
  87         line-height:22px;
  88         padding:10px;
  89         border:1px solid #6D8399;
  90         border-left:3px solid #B5DAFF;
  91         background-color: rgba(105,105,105,0.1);
  92 }
  93 code {
  94         display:block;
  95         border:1px solid #999;
  96         padding:10px;
  97         margin:12px 15px;
  98         white-space: pre;
  99 }
 100 table { width:100%; }
 101 input { font-family: 'Xolonium', 'Arial', 'Helvetica'; }
 102 /* helpers */
 103 .clearfix:after {
 104     content: ".";
 105     display: block;
 106     height: 0;
 107     clear: both;
 108     visibility: hidden;
 109 }
 110
 111 /* layout */
 112 #container {
 113         position:relative;
 114         width:1052px;
 115         background: transparent url('img/web_background_l2.png') no-repeat center top;
 116         margin:0 auto;
 117         padding-top:244px;
 118 }
 119 #content {
 120         position:relative;
 121         top:-20px;
 122         /*min-width:512px;
 123         max-width:986px;
 124         width:auto;*/
 125         width:950px;
 126         padding-bottom:20px;
 127 }
 128 #title {
 129         position:relative;
 130         text-align:center;
 131         height:25px;
 132         line-height:25px;
 133         top:-44px;
 134         color:#DCE9F5;
 135 }
 136 .window {
 137         border-width: 56px 56px 56px;
 138         -moz-border-image: url(img/web_border.png) 85 85 85 stretch;
 139         -webkit-border-image: url(img/web_border.png) 72 85 85 stretch;
 140         -o-border-image: url(img/web_border.png) 96 96 96 stretch;
 141         border-image: url(img/web_border.png) 96 96 96 stretch;
 142 }
 143 #main {
 144         position:relative;
 145         width:610px;
 146 }
 147 #sidebar {
 148         width: 320px;
 149         margin-right:5px;
 150 }
 151 #main.left, #sidebar.left {
 152         float:left;
 153 }
 154 #main.right, #sidebar.right {
 155         float:right;
 156 }
 157 #footer{
 158     clear: both;
 159     text-align: center;
 160 }
 161 header {
 162         height:0;
 163 }
 164 header a {
 165         position:absolute;
 166         top:20px;
 167         left:180px;
 168         display:block;
 169         height:210px;
 170         width:0;
 171         padding-left:660px;
 172         overflow:hidden;
 173 }
 174 header h2 { display:none; }
 175 /* Main Menu */
 176 #menu {
 177         top: -33px;
 178         left:-18px;
 179     width: 976px;
 180         list-style:none;
 181         border:1px solid #AED5FE;
 182         border-top:0;
 183         -moz-border-radius: 0 0 4px 4px;
 184         -webkit-border-radius: 0 0 4px 4px;
 185         border-radius: 0 0 4px 4px;
 186 }
 187 #menu li {
 188         display:inline;
 189 }
 190 #menu li a {
 191         width:145px;
 192         height:32px;
 193         line-height:32px;
 194         vertical-align:middle;
 195         color:#AED5FE;
 196         text-align:center;
 197 }
 198
 199 /* drop-down navigation */
 200 .nav, .nav ul {
 201         list-style: none;
 202         margin: 0;
 203         padding: 0;
 204 }
 205
 206 .nav {
 207   z-index: 100;
 208   position: relative;
 209 }
 210 .nav li {
 211   border-right: 1px solid #AED5FE;
 212   float: left;
 213   margin: 0;
 214   padding: 0;
 215   position: relative;
 216 }
 217 .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
 218   display: block;
 219   padding: 0;
 220   text-decoration:none;
 221 }
 222
 223 .nav li a:hover {
 224         background-color:#111 !important;
 225         color:#fff !important;
 226         text-shadow:1px 1px 3px #5A8BBC !important;
 227 }
 228
 229 .nav ul {
 230   border-bottom: 1px solid #000;
 231   list-style: none;
 232   margin: 0;
 233   min-width:164px;
 234   position: absolute;
 235   top: -999em;
 236 }
 237 .nav li:hover ul,
 238 .nav li.sfHover ul {
 239   top: 32px;
 240   z-index:1000;
 241 }
 242 .nav ul li {
 243   border:0;
 244   float: none;
 245 }
 246 .nav ul a {
 247   width: 145px;
 248   white-space: nowrap;
 249   border-bottom:1px solid #AED5FE;
 250 }
 251 .nav ul a:hover {
 252         background-color:#111 !important;
 253         color:#fff !important;
 254 }
 255 .nav li.last {
 256         border-right:1px solid #AED5FE !important;
 257 }
 258 .nav2 {
 259         border:1px solid #AED5FE;
 260         left:-1px;
 261 }
 262 .nav2 li a {
 263         background-color:#000;
 264         width:164px !important;
 265 }
 266
 267
 268 /* UI widgets */
 269 .button {
 270         display:inline-block;
 271         background: url(img/web_button_sprite.png) no-repeat -128px 0;
 272         height:32px;
 273         width:190px;
 274         line-height:24px;
 275         text-align:center;
 276         color:#ccc;
 277         text-decoration:none;
 278         border:0;
 279         padding:0;
 280         cursor:pointer;
 281 }
 282 a.button {
 283         height:24px;
 284         width:160px;
 285         line-height:24px;
 286         padding:4px 16px;
 287 }
 288 .button.s { background-position:0 0; width:126px; }
 289 .button.m { background-position:-320px 0; width:318px; }
 290 .button.l { background-position:-640px 0; width:638px; }
 291 a.button.s { width:96px; }
 292 a.button.m { width:288px; }
 293 a.button.l { width:608px; }
 294
 295 .button.s:hover { background-position:0 -33px; }
 296 .button:hover { background-position:-128px -33px; }
 297 .button.m:hover { background-position:-320px -33px; }
 298 .button.l:hover { background-position:-640px -33px; }
 299
 300 .button.s:active, .button.s:focus  { background-position:0 -66px; }
 301 .button:active, .button:focus { background-position:-128px -66px; }
 302 .button.m:active, .button.m:focus { background-position:-320px -66px; }
 303 .button.l:active, .button.l:focus { background-position:-640px -66px; }
 304
 305 .button:hover, .button:active, .button:focus {
 306         outline:0;
 307 }
 308
 309 input[type=text], .textbox {
 310         display:inline-block;
 311         background: url(img/inputbox_sprite.png) no-repeat -128px 0;
 312         width:150px;
 313         height:24px;
 314         line-height:24px;
 315         text-align:left;
 316         color:#ccc;
 317         text-decoration:none;
 318         padding:4px 16px;
 319         border:0;
 320 }
 321
 322 .textbox.s { background-position: 0 0; width:96px; }
 323 .textbox.m { background-position:-320px 0; width:288px; }
 324 .textbox.l { background-position:-640px 0; width:608px; }
 325
 326 .textbox.s:hover { background-position:0 -32px; }
 327 input[type=text]:hover, .textbox:hover { background-position:-128px -32px; }
 328 .textbox.m:hover { background-position:-320px -32px; }
 329 .textbox.l:hover { background-position:-640px -32px; }
 330
 331 .textbox:hover, .textbox:active, .textbox:focus, input[type=text] {
 332         outline:none;
 333 }
 334
 335 .checkbox, .radio {
 336         display: none;
 337 }
 338 .checkbox-label {
 339         background: url('img/web_checkbox_n0.png') no-repeat;
 340         padding-left: 40px;
 341         padding-top: 3px;
 342         margin: 5px;
 343         height: 32px;
 344         display: inline-block;
 345         cursor:pointer;
 346 }
 347 .checkbox-label:hover, .radio-label:hover{
 348         text-decoration: underline;
 349 }
 350 .checkbox-selected, .radio-selected {
 351         background: url('img/web_checkbox_n1.png') no-repeat;
 352 }
 353 .radio-label {
 354         background: url("img/web_radiobutton_n0.png") no-repeat;
 355         padding-left: 60px;
 356         padding-top: 3px;
 357         margin: 5px;
 358         height: 64px;
 359         width: 64px;
 360         display: block;
 361         float: left;
 362         cursor:pointer;
 363 }
 364 .radio-selected {
 365         background: url("img/web_radiobutton_n1.png") no-repeat;
 366 }
 367
 368 /* Content Specific */
 369
 370 /*Tables */
 371 #top-players, #top-servers, #top-maps {
 372     float: left;
 373     margin-bottom: 10px;
 374     width:100%;
 375 }
 376
 377 #recent-games {
 378     width: 610px;
 379 }
 380 #recent-games_filter {
 381         position: absolute;
 382         top: -38px;
 383         right: 0;
 384 }
 385 #search { margin-bottom:10px; }
 386 table { text-shadow:1px 1px 4px #013; }
 387 thead {
 388         background-color:#020F1C;
 389 }
 390 thead.red {
 391         color:#EEAFAB;
 392         background-color:#170403;
 393         text-shadow:1px 1px 4px #722;
 394 }
 395 tr.odd.red {
 396         background-color:#571612;
 397 }
 398 tr.even.red {
 399         background-color:#571612;
 400 }
 401 thead.blue {
 402         color:#ABBBEE;
 403         background-color:#04081A;
 404         text-shadow:1px 1px 4px #227;
 405 }
 406 tr.odd.blue {
 407         background-color:#000F4C;
 408 }
 409 tr.even.blue {
 410         background-color:#571612;
 411 }
 412
 413 /* Containers */
 414 #filter {
 415         float:left;
 416         width:200px;
 417 }
 418 #recent-games-list {
 419         float:right;
 420         width:735px;
 421 }
 422 .game {
 423         float:left;
 424     background-image: -moz-linear-gradient(center bottom , #062C52, #041B33);
 425         background-image: -webkit-gradient(
 426                 linear,
 427                 left bottom,
 428                 left top,
 429                 color-stop(0.51, #062C52),
 430                 color-stop(0.51, #041B33)
 431         );
 432     border: 1px solid #A4B7CA;
 433     border-radius: 7px;
 434     -moz-border-radius: 7px;
 435     -webkit-border-radius: 7px;
 436     margin-bottom: 20px;
 437     padding: 10px 7px;
 438         box-shadow: 0 0 3px 1px;
 439         min-width:700px;
 440 }
 441 .game h3 {
 442         color:#93B1CF;
 443         text-shadow:1px 1px 2px #000;
 444         padding:4px 4px 8px;
 445         margin:0;
 446 }
 447 .game h3 a {
 448         color:#C5DCF3;
 449 }
 450 .game h3 a:hover {
 451         color:#fff;
 452 }
 453 .game th {
 454         font-size:10px;
 455         padding:2px 5px;
 456         min-width:50px;
 457 }
 458 .game th.nick {
 459         text-align:right;
 460         width:160px;
 461         max-width:260px;
 462 }
 463 .game tr {
 464         font-size:14px;
 465 }
 466 .game td:first-child {
 467         text-align:right;
 468         padding-right:8px;
 469 }
 470 .permalink {
 471         float:right;
 472         font-size:12px;
 473 }
 474 .permalink a {
 475         color:#6F8194 !important;
 476 }
 477 .permalink a:hover {
 478         color:#A4B7CA !important;
 479         text-decoration:underline;
 480 }