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         vertical-align: middle;
  83 }
  84 td.gt_icon {
  85     text-align: center;
  86 }
  87 blockquote {
  88         font-size:14px;
  89         color:#fff;
  90         margin:12px 15px;
  91         line-height:22px;
  92         padding:10px;
  93         border:1px solid #6D8399;
  94         border-left:3px solid #B5DAFF;
  95         background-color: rgba(105,105,105,0.1);
  96 }
  97 code {
  98         display:block;
  99         border:1px solid #999;
 100         padding:10px;
 101         margin:12px 15px;
 102         white-space: pre;
 103 }
 104 table { width:100%; }
 105 input { font-family: 'Xolonium', 'Arial', 'Helvetica'; }
 106 /* helpers */
 107 .clearfix:after {
 108     content: ".";
 109     display: block;
 110     height: 0;
 111     clear: both;
 112     visibility: hidden;
 113 }
 114
 115 /* layout */
 116 #container {
 117         position:relative;
 118         width:1052px;
 119         background: transparent url('img/web_background_l2.png') no-repeat center top;
 120         margin:0 auto;
 121         padding-top:200px;
 122 }
 123 #content {
 124         position:relative;
 125         top:-20px;
 126         /*min-width:512px;
 127         max-width:986px;
 128         width:auto;*/
 129         width:950px;
 130         padding-bottom:20px;
 131 }
 132 #title {
 133         position:relative;
 134         text-align:center;
 135         height:25px;
 136         line-height:25px;
 137         top:-48px;
 138         color:#DCE9F5;
 139 }
 140 .table_block {
 141     float: left;
 142     padding-right: 25px;
 143 }
 144 .window {
 145         border-width: 56px 56px 56px;
 146         -moz-border-image: url(img/web_border.png) 85 85 85 stretch;
 147         -webkit-border-image: url(img/web_border.png) 72 85 85 stretch;
 148         -o-border-image: url(img/web_border.png) 96 96 96 stretch;
 149         border-image: url(img/web_border.png) 96 96 96 stretch;
 150 }
 151 #main {
 152         position:relative;
 153         width:610px;
 154 }
 155 #sidebar {
 156         width: 320px;
 157         margin-right:5px;
 158 }
 159 #main.left, #sidebar.left {
 160         float:left;
 161 }
 162 #main.right, #sidebar.right {
 163         float:right;
 164 }
 165 #footer{
 166     clear: both;
 167     text-align: center;
 168 }
 169
 170 /* Main Menu */
 171 #menu {
 172         top: -40px;
 173         left:-18px;
 174     width: 976px;
 175         list-style:none;
 176         border:1px solid #AED5FE;
 177         border-top:0;
 178         -moz-border-radius: 0 0 4px 4px;
 179         -webkit-border-radius: 0 0 4px 4px;
 180         border-radius: 0 0 4px 4px;
 181 }
 182 #menu li {
 183         display:inline;
 184 }
 185 #menu li a {
 186         width:145px;
 187         height:32px;
 188         line-height:32px;
 189         vertical-align:middle;
 190         color:#AED5FE;
 191         text-align:center;
 192 }
 193
 194 /* pagination */
 195 .pagination {
 196     padding-right: 8px;
 197 }
 198
 199
 200 /* drop-down navigation */
 201 .nav, .nav ul {
 202         list-style: none;
 203         margin: 0;
 204         padding: 0;
 205 }
 206
 207 .nav {
 208   z-index: 100;
 209   position: relative;
 210 }
 211 .nav li {
 212   border-right: 1px solid #AED5FE;
 213   float: left;
 214   margin: 0;
 215   padding: 0;
 216   position: relative;
 217 }
 218 .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
 219   display: block;
 220   padding: 0;
 221   text-decoration:none;
 222 }
 223
 224 .nav li a:hover {
 225         background-color:#111 !important;
 226         color:#fff !important;
 227         text-shadow:1px 1px 3px #5A8BBC !important;
 228 }
 229
 230 .nav ul {
 231   border-bottom: 1px solid #000;
 232   list-style: none;
 233   margin: 0;
 234   min-width:164px;
 235   position: absolute;
 236   top: -999em;
 237 }
 238 .nav li:hover ul,
 239 .nav li.sfHover ul {
 240   top: 32px;
 241   z-index:1000;
 242 }
 243 .nav ul li {
 244   border:0;
 245   float: none;
 246 }
 247 .nav ul a {
 248   width: 145px;
 249   white-space: nowrap;
 250   border-bottom:1px solid #AED5FE;
 251 }
 252 .nav ul a:hover {
 253         background-color:#111 !important;
 254         color:#fff !important;
 255 }
 256 .nav li.last {
 257         border-right:1px solid #AED5FE !important;
 258 }
 259 .nav2 {
 260         border:1px solid #AED5FE;
 261         left:-1px;
 262 }
 263 .nav2 li a {
 264         background-color:#000;
 265         width:164px !important;
 266 }
 267
 268
 269 /* UI widgets */
 270 .button {
 271         display:inline-block;
 272         background: url(img/web_button_sprite.png) no-repeat -128px 0;
 273         height:32px;
 274         width:190px;
 275         line-height:24px;
 276         text-align:center;
 277         color:#ccc;
 278         text-decoration:none;
 279         border:0;
 280         padding:0;
 281         cursor:pointer;
 282 }
 283 a.button {
 284         height:24px;
 285         width:160px;
 286         line-height:24px;
 287         padding:4px 16px;
 288 }
 289 .button.s { background-position:0 0; width:126px; }
 290 .button.m { background-position:-320px 0; width:318px; }
 291 .button.l { background-position:-640px 0; width:638px; }
 292 a.button.s { width:96px; }
 293 a.button.m { width:288px; }
 294 a.button.l { width:608px; }
 295
 296 .button.s:hover { background-position:0 -33px; }
 297 .button:hover { background-position:-128px -33px; }
 298 .button.m:hover { background-position:-320px -33px; }
 299 .button.l:hover { background-position:-640px -33px; }
 300
 301 .button.s:active, .button.s:focus  { background-position:0 -66px; }
 302 .button:active, .button:focus { background-position:-128px -66px; }
 303 .button.m:active, .button.m:focus { background-position:-320px -66px; }
 304 .button.l:active, .button.l:focus { background-position:-640px -66px; }
 305
 306 .button:hover, .button:active, .button:focus {
 307         outline:0;
 308 }
 309
 310 input[type=text], .textbox {
 311         display:inline-block;
 312         background: url(img/inputbox_sprite.png) no-repeat -128px 0;
 313         width:150px;
 314         height:24px;
 315         line-height:24px;
 316         text-align:left;
 317         color:#ccc;
 318         text-decoration:none;
 319         padding:4px 16px;
 320         border:0;
 321 }
 322
 323 .textbox.s { background-position: 0 0; width:96px; }
 324 .textbox.m { background-position:-320px 0; width:288px; }
 325 .textbox.l { background-position:-640px 0; width:608px; }
 326
 327 .textbox.s:hover { background-position:0 -32px; }
 328 input[type=text]:hover, .textbox:hover { background-position:-128px -32px; }
 329 .textbox.m:hover { background-position:-320px -32px; }
 330 .textbox.l:hover { background-position:-640px -32px; }
 331
 332 .textbox:hover, .textbox:active, .textbox:focus, input[type=text] {
 333         outline:none;
 334 }
 335
 336 .checkbox, .radio {
 337         display: none;
 338 }
 339 .checkbox-label {
 340         background: url('img/web_checkbox_n0.png') no-repeat;
 341         padding-left: 40px;
 342         padding-top: 3px;
 343         margin: 5px;
 344         height: 32px;
 345         display: inline-block;
 346         cursor:pointer;
 347 }
 348 .checkbox-label:hover, .radio-label:hover{
 349         text-decoration: underline;
 350 }
 351 .checkbox-selected, .radio-selected {
 352         background: url('img/web_checkbox_n1.png') no-repeat;
 353 }
 354 .radio-label {
 355         background: url("img/web_radiobutton_n0.png") no-repeat;
 356         padding-left: 60px;
 357         padding-top: 3px;
 358         margin: 5px;
 359         height: 64px;
 360         width: 64px;
 361         display: block;
 362         float: left;
 363         cursor:pointer;
 364 }
 365 .radio-selected {
 366         background: url("img/web_radiobutton_n1.png") no-repeat;
 367 }
 368
 369 /* Content Specific */
 370
 371 /*Tables */
 372 #top-players, #top-servers, #top-maps {
 373     float: left;
 374     margin-bottom: 10px;
 375     width:100%;
 376 }
 377 #player-index-table, #server-index-table{
 378     width: 600px;
 379 }
 380 #map-index-table {
 381     width: 300px;
 382 }
 383 #recent-games {
 384     width: 950px;
 385 }
 386 #recent-games_filter {
 387         position: absolute;
 388         top: -38px;
 389         right: 0;
 390 }
 391 #search { margin-bottom:10px; }
 392 table { text-shadow:1px 1px 4px #013; }
 393 thead {
 394         background-color:#020F1C;
 395 }
 396 thead.red {
 397         color:#EEAFAB;
 398         background-color:#170403;
 399         text-shadow:1px 1px 4px #722;
 400 }
 401 tr.odd.red {
 402         background-color:#571612;
 403 }
 404 tr.even.red {
 405         background-color:#571612;
 406 }
 407 thead.blue {
 408         color:#ABBBEE;
 409         background-color:#04081A;
 410         text-shadow:1px 1px 4px #227;
 411 }
 412 tr.odd.blue {
 413         background-color:#000F4C;
 414 }
 415 tr.even.blue {
 416         background-color:#000F4C;
 417 }
 418
 419 /* column-specific table widths */
 420 .create-dt{
 421     width: 150px;
 422 }
 423
 424 /* Containers */
 425 #filter {
 426         float:left;
 427         width:200px;
 428 }
 429 #recent-games-list {
 430         float:right;
 431         width:735px;
 432 }
 433 .game {
 434         float:left;
 435     background-image: -moz-linear-gradient(center bottom , #062C52, #041B33);
 436         background-image: -webkit-gradient(
 437                 linear,
 438                 left bottom,
 439                 left top,
 440                 color-stop(0.51, #062C52),
 441                 color-stop(0.51, #041B33)
 442         );
 443     border: 1px solid #A4B7CA;
 444     border-radius: 7px;
 445     -moz-border-radius: 7px;
 446     -webkit-border-radius: 7px;
 447     margin-bottom: 20px;
 448     padding: 10px 7px;
 449         box-shadow: 0 0 3px 1px;
 450         min-width:700px;
 451 }
 452
 453 .game img {
 454   float: left;
 455 }
 456 .game h3 {
 457         color:#93B1CF;
 458         text-shadow:1px 1px 2px #000;
 459         padding:4px 4px 8px;
 460         margin: 20px 0 0 0;
 461 }
 462 .game h3 a {
 463         color:#C5DCF3;
 464 }
 465 .game h3 a:hover {
 466         color:#fff;
 467 }
 468 .game th {
 469         font-size:10px;
 470         padding:2px 5px;
 471         min-width:50px;
 472 }
 473 .game th.nick {
 474         text-align:right;
 475         width:160px;
 476         max-width:260px;
 477 }
 478 .game tr {
 479         font-size:14px;
 480 }
 481 .game td:first-child {
 482         text-align:right;
 483         padding-right:8px;
 484 }
 485 .permalink {
 486         float:right;
 487         font-size:12px;
 488 }
 489 .permalink a {
 490         color:#6F8194 !important;
 491 }
 492 .permalink a:hover {
 493         color:#A4B7CA !important;
 494         text-decoration:underline;
 495 }