xonstat/static/css/app.css

   1 /* Fonts */
   2 @font-face {
   3     font-family: 'XoloniumNormal';
   4     src: url('fonts/xolonium-webfont.eot');
   5     src: url('fonts/xolonium-webfont.eot?#iefix') format('embedded-opentype'),
   6          url('fonts/xolonium-webfont.woff') format('woff'),
   7          url('fonts/xolonium-webfont.ttf') format('truetype'),
   8          url('fonts/xolonium-webfont.svg#XoloniumNormal') format('svg');
   9     font-weight: normal;
  10     font-style: normal;
  11 }
  12
  13
  14 /* Primary elements */
  15 body {
  16     background: url("img/web_background_4.jpg") no-repeat fixed center center / cover  black;
  17     background-color: black;
  18     color: #D0D0D0;
  19     font-family: "XoloniumNormal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  20 }
  21 h1 small,
  22 h2 small,
  23 h3 small,
  24 h4 small,
  25 h5 small,
  26 h6 small {
  27   font-weight: normal;
  28   color: #999999;
  29 }
  30 h1 {
  31   font-size: 30px;
  32   line-height: 36px;
  33 }
  34 h1 small {
  35   font-size: 18px;
  36 }
  37 h2 {
  38   font-size: 24px;
  39   line-height: 36px;
  40 }
  41 h2 small {
  42   font-size: 18px;
  43 }
  44 h3 {
  45   line-height: 27px;
  46   font-size: 18px;
  47 }
  48 h3 small {
  49   font-size: 14px;
  50 }
  51 h4, h5, h6 {
  52   line-height: 18px;
  53 }
  54 h4 {
  55   font-size: 14px;
  56 }
  57 h4 small {
  58   font-size: 12px;
  59 }
  60 h5 {
  61   font-size: 12px;
  62 }
  63 h6 {
  64   font-size: 11px;
  65   color: #999999;
  66   text-transform: uppercase;
  67 }
  68 table {
  69     background: rgb(0, 0, 0); /* IE Fallback */
  70     background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
  71     border: 1px solid #436688;
  72 }
  73 table th { border: 1px solid #436688; background-color: #001021; }
  74 table td {
  75     border: 1px solid #436688;
  76     font-size: 10px;
  77 }
  78 .table-hover > tbody > tr:hover > td,
  79 .table-hover > tbody > tr:hover > th {
  80     background-color: #222;
  81 }
  82 .table th, .table td {
  83     border: 1px solid #436688;
  84 }
  85 .table td {
  86     vertical-align: middle;
  87 }
  88 .table .tdcenter { text-align: center; }
  89 .accordion-group {
  90     border: 1px solid rgb(39, 37, 37);
  91 }
  92 .accordion-inner {
  93     border: none;
  94 }
  95
  96 /* One-off elements */
  97 #statline {
  98     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  99     font-size: 13px;
 100     position: relative;
 101     top: -25px;
 102 }
 103 #xonborder {
 104     background: rgb(0, 0, 0); /* IE Fallback */
 105     background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
 106     border-radius: 15px 15px 15px 15px;
 107     margin-bottom: 30px;
 108     margin-left: 0px;
 109     padding: 20px;
 110 }
 111 #title {
 112     color: #0088CC;
 113     font-size: 30px;
 114     margin-bottom: 15px;
 115     position: relative;
 116     text-align: center;
 117     text-shadow: 2px 2px 3px #333;
 118 }
 119 .indexform {
 120     margin: 20px 0px 20px 0px;
 121 }
 122 .indexbox {
 123     width: 250px;
 124 }
 125
 126
 127 /* Navigation bar */
 128 .navbar-brand {
 129     margin-left: 0;
 130     padding-bottom: 0px;
 131     padding-top: 10px;
 132     text-align: left;
 133 }
 134 .navbar-inverse {
 135     background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
 136 }
 137 .navbar-inverse .nav>.active>a, .navbar-inverse .nav>.active>a:hover, .navbar-inverse .nav>.active>a:focus {
 138     background: none repeat scroll 0 0 rgba(49, 49, 49, 0.6);
 139 }
 140 .navbar-inverse .nav>li>a, .navbar-brand {
 141     font-family: XoloniumNormal;
 142 }
 143 .search, input[type="search"] {
 144     background-color: #606060;
 145     border: 1px solid #202020;
 146     color: #AAAAAA;
 147     width: 100px;
 148 }
 149
 150 /* Game scoreboard */
 151 .game {
 152   float: left;
 153   min-width: 700px;
 154   padding: 10px 7px;
 155 }
 156 .game a {
 157     color: #CCC;
 158 }
 159 .game a:hover {
 160     color: #d95f00;
 161     text-decoration: none;
 162 }
 163 .game tr {
 164     background-color: #000;
 165 }
 166 .game tr.red {
 167   background-color: #4d0000;
 168 }
 169 .game tr.blue {
 170   background-color: #00004d;
 171 }
 172 .game tr.yellow {
 173   background-color: #4d4d00;
 174 }
 175 .game tr.pink {
 176   background-color: #4d004d;
 177 }
 178 .game tr:hover {
 179     background-color: #222;
 180 }
 181
 182 .teamscore {
 183   text-align: right;
 184   text-shadow: -1px -1px 0 #222;
 185   font-size: 200%;
 186   font-weight: bold;
 187   padding: 10px 7px;
 188   margin-right: 10px;
 189   margin-top: 20px;
 190 }
 191 .teamscore .red {
 192   color: #ad0000;
 193 }
 194 .teamscore .blue {
 195   color: #0000ad;
 196 }
 197 .teamscore .yellow {
 198   color: #adad00;
 199 }
 200 .teamscore .pink {
 201   color: #ad00ad;
 202 }
 203
 204 /* accuracy and weapon graphs */
 205 .weapon-nav {
 206   height: 70px;
 207   margin-bottom: 20px;
 208 }
 209 .weapon-nav ul {
 210   display: block;
 211   list-style: none outside none;
 212 }
 213 .weapon-nav li {
 214   cursor: pointer;
 215   float: left;
 216   margin-right: 10px;
 217 }
 218 .weapon-nav li:hover {
 219   border-bottom: 2px solid #001021;
 220 }
 221 .weapon-nav .weapon-active {
 222   border-bottom: 2px solid #436688;
 223 }
 224 .weapon-nav p {
 225   text-align: center;
 226 }
 227
 228 .flot table, .flot td {
 229   background-color: black;
 230         border: 0;
 231 }
 232
 233 /* Player Info Tabs */
 234 #gbtabcontainer { margin-top: 10px; }
 235 #gbtab { font-size: 12px; }
 236 .tabbable p { font-size: 14px; }
 237 .tabs-below .nav-tabs > li > a { border-radius: 4px 4px 4px 4px; }
 238 .nav-tabs > .active > a, .nav-tabs > .active > a:hover { background-color: #111; color: #aaa; border-color: #222; }
 239 .nav-tabs > .active > a, .nav-tabs > .active > a:focus { background-color: #111; color: #aaa; border-color: #222; }
 240 .nav-tabs > li > a { border-radius: 4px 4px 4px 4px; text-align: center; }
 241 .nav-tabs > li > a:hover { background-color: #111; border-color: #333; }
 242 .nav-tabs { border-bottom: 0px solid #000; }
 243
 244 .table .tdcenter { text-align: center; }
 245
 246 /* Game Info and Game Index*/
 247 .game-detail img {
 248   float: left;
 249   margin-right: 10px;
 250   margin-bottom: 5px;
 251 }
 252
 253 .game img {
 254   float: left;
 255   margin-right: 5px;
 256   margin-bottom: 5px;
 257 }
 258
 259 .game-detail p,
 260 .game h4 {
 261   float: left;
 262 }
 263
 264
 265 /* Teamscores */
 266 .teamscores tr {
 267   background-color: #000;
 268 }
 269 .teamscores td {
 270   padding: 3px;
 271   text-align: center;
 272   font-size: 12px;
 273   font-weight: bold;
 274 }
 275 .teamscores tr.red {
 276   background-color: #4d0000;
 277 }
 278 .teamscores tr.blue {
 279   background-color: #00004d;
 280 }
 281 .teamscores tr.yellow {
 282   background-color: #4d4d00;
 283 }
 284 .teamscores tr.pink {
 285   background-color: #4d004d;
 286 }
 287
 288
 289 /* Gametype filters */
 290 .btn-toolbar .nav > li a {
 291     width: 80px;
 292 }
 293
 294 .btn.dropdown-toggle, .btn.dropdown-toggle:active {
 295     background: none;
 296     border: 1px solid transparent;
 297     border-radius:4px 4px 4px 4px;
 298     line-height:20px;
 299     color: #428bca;
 300     padding: 10px 0px 10px 0px;
 301     font-size: 14px;
 302     outline: 0;
 303 }
 304 .btn.dropdown-toggle:hover, .btn.dropdown-toggle:focus {
 305     background-color:#111;
 306     color:#2a6496;
 307     border-color:#333;
 308 }
 309
 310 .btn.dropdown-toggle > .caret {
 311   height: 21px;
 312   border-top-color: #428bca;
 313   border-top-width: 8px;
 314   border-left-width: 8px;
 315   border-right-width: 8px;
 316 }
 317
 318 .dropdown-menu {
 319   width: 100px;
 320 }
 321
 322 .dropdown-menu.nav-tabs {
 323     padding:4px;
 324     background-color: #111;
 325     border: 1px solid #333;
 326     width: 256px; }
 327 .dropdown-menu.nav-tabs > li > a {
 328     width:80px;
 329     color:inherit;
 330 }
 331 .dropdown-menu.nav-tabs > li > a:hover {
 332     color:#222;
 333 }
 334
 335 /* Player nicknames */
 336 .nostretch {
 337   overflow: hidden;
 338   text-overflow: ellipsis;
 339   white-space: nowrap;
 340 }
 341
 342 .player-nick {
 343     width: 25%;
 344 }
 345
 346 /* elo colors */
 347 .eloup { color: green; }
 348 .elodown { color: rgb(190,0,0); }
 349 .eloneutral { color: gray; }
 350
 351 /* Navigation links */
 352 .pagination > li > a, .pagination > li > span {
 353     background-color: #111111;
 354     border-color: rgb(49, 49, 49);
 355     color: rgb(121, 121, 121);
 356 }
 357 .pagination>li>a:hover, .pagination>li>a:focus, .pagination>.active>a, .pagination>.active>span{
 358     background-color: rgb(43, 34, 34);
 359 }
 360
 361
 362 /* Desktop-specific stuff */
 363 @media (min-width: 768px) {
 364     .navbar-form {
 365         float: right;
 366     }
 367 }