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