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