xonstat/static/css/app.css

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