6a273b50968116c01bb735629a4c94e0003b4c74
[xonotic/xonstat.git] / 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 /* accuracy and weapon graphs */
183 .weapon-nav {
184   height: 70px;
185   margin-bottom: 20px;
186 }
187 .weapon-nav ul {
188   display: block;
189   list-style: none outside none;
190 }
191 .weapon-nav li {
192   cursor: pointer;
193   float: left;
194   margin-right: 10px;
195 }
196 .weapon-nav li:hover {
197   border-bottom: 2px solid #001021;
198 }
199 .weapon-nav .weapon-active {
200   border-bottom: 2px solid #436688;
201 }
202 .weapon-nav p {
203   text-align: center;
204 }
205
206 .flot table, .flot td {
207   background-color: black;
208         border: 0;
209 }
210
211 /* Player Info Tabs */
212 #gbtabcontainer { margin-top: 10px; }
213 #gbtab { font-size: 12px; }
214 .tabbable p { font-size: 14px; }
215 .tabs-below .nav-tabs > li > a { border-radius: 4px 4px 4px 4px; }
216 .nav-tabs > .active > a, .nav-tabs > .active > a:hover { background-color: #111; color: #aaa; border-color: #222; }
217 .nav-tabs > .active > a, .nav-tabs > .active > a:focus { background-color: #111; color: #aaa; border-color: #222; }
218 .nav-tabs > li > a { border-radius: 4px 4px 4px 4px; text-align: center; }
219 .nav-tabs > li > a:hover { background-color: #111; border-color: #333; }
220 .nav-tabs { border-bottom: 0px solid #000; }
221
222 .table .tdcenter { text-align: center; }
223
224 /* Game Info and Game Index*/
225 .game-detail img {
226   float: left;
227   margin-right: 10px;
228   margin-bottom: 5px;
229 }
230
231 .game img {
232   float: left;
233   margin-right: 5px;
234   margin-bottom: 5px;
235 }
236
237 .game-detail p,
238 .game h4 {
239   float: left;
240 }
241
242
243 /* Teamscores */
244 .teamscores tr {
245   background-color: #000;
246 }
247 .teamscores td {
248   padding: 3px;
249   text-align: center;
250   font-size: 12px;
251   font-weight: bold;
252 }
253 .teamscores tr.red {
254   background-color: #4d0000;
255 }
256 .teamscores tr.blue {
257   background-color: #00004d;
258 }
259 .teamscores tr.yellow {
260   background-color: #4d4d00;
261 }
262 .teamscores tr.pink {
263   background-color: #4d004d;
264 }
265
266
267 /* Gametype filters */
268 .btn-toolbar .nav > li a {
269     width: 80px;
270
271
272 .btn.dropdown-toggle, .btn.dropdown-toggle:active {
273     background: none;
274     border: 1px solid transparent;
275     border-radius:4px 4px 4px 4px;
276     line-height:20px;
277     color: #428bca;
278     padding: 10px 0px 10px 0px;
279     font-size: 14px;
280     outline: 0;
281 }
282 .btn.dropdown-toggle:hover, .btn.dropdown-toggle:focus {
283     background-color:#111;
284     color:#2a6496;
285     border-color:#333;
286 }
287
288 .btn.dropdown-toggle > .caret {
289   height: 21px;
290   border-top-color: #428bca;
291   border-top-width: 8px;
292   border-left-width: 8px;
293   border-right-width: 8px;
294 }
295
296 .dropdown-menu {
297   width: 100px;
298 }
299
300 .dropdown-menu.nav-tabs {
301     padding:4px;
302     background-color: #111;
303     border: 1px solid #333;
304     width: 256px; }
305 .dropdown-menu.nav-tabs > li > a {
306     width:80px;
307     color:inherit;
308 }
309 .dropdown-menu.nav-tabs > li > a:hover {
310     color:#222;
311 }
312
313 /* Player nicknames */
314 .nostretch {
315   overflow: hidden;
316   text-overflow: ellipsis;
317   white-space: nowrap;
318 }
319
320 .player-nick {
321     width: 25%;
322 }
323
324 /* elo colors */
325 .eloup { color: green; }
326 .elodown { color: rgb(190,0,0); }
327 .eloneutral { color: gray; }
328
329 /* Navigation links */
330 .pagination > li > a, .pagination > li > span {
331     background-color: #111111;
332     border-color: rgb(49, 49, 49);
333     color: rgb(121, 121, 121);
334 }
335 .pagination>li>a:hover, .pagination>li>a:focus, .pagination>.active>a, .pagination>.active>span{
336     background-color: rgb(43, 34, 34);
337 }
338
339
340 /* Desktop-specific stuff */
341 @media (min-width: 768px) {
342     .navbar-form {
343         float: right;
344     }
345 }