Convert the player_info page.
[xonotic/xonstat.git] / xonstat / static / css / app.css
1 /* Fonts */
2 @font-face {
3     font-family: 'Xolonium';
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 body {
14   background-color: #0F0F0F;
15   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) repeat scroll 0% 0%, url("img/bg.jpg") no-repeat fixed center center / cover black;
16   color: #9B9B9B;
17   font-family: "Xolonium", "Helvetica Neue", Helvetica, Arial, sans-serif;
18 }
19
20 h1, h2, h3, h4, h5 {
21   color: #C3C3C3;;
22   font-family: "Xolonium", Helvetica, Arial, sans-serif;
23 }
24
25 p {
26   color: #C3C3C3;
27   font-size: 1.2rem;
28 }
29
30 hr {
31   border-color: #1b1b1b;
32 }
33
34 ul, ol, dl {
35   font-size: 1.1rem;
36 }
37
38 fieldset {
39   border: none;
40 }
41
42 table {
43   background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.70);
44   border: 1px solid #436688;
45   border-collapse: collapse;
46   border-spacing: 0;
47 }
48
49 table tr td {
50   font-size: 10px;
51 }
52
53 table thead {
54   background-color: #001021;
55 }
56
57 table td, table th {
58   border: 1px solid #436688;
59 }
60
61 table tr.even, table tr.alt, table tr:nth-of-type(2n) {
62   background: none;
63 }
64
65 table thead tr th, table thead tr td, table tr th, table tr td {
66   color: #D0D0D0;
67 }
68
69 .table-condensed {
70   table-layout: fixed;
71   width: 100%;
72 }
73
74 .table-condensed th, .table-condensed td {
75   padding: 4px 5px;
76 }
77
78 .no-stretch {
79   overflow: hidden;
80   text-overflow: ellipsis;
81   white-space: nowrap;
82 }
83
84 .top-bar {
85   height: 50px;
86 }
87
88 .top-bar .name h1 a {
89   color: rgb(200, 200, 200);
90   font-size: 1.1rem;
91   text-shadow: 0px 1px 1px rgba(200, 200, 200, 0.4);
92 }
93
94 .top-bar-section ul li {
95   background: none;
96 }
97
98 .top-bar-section ul li > a {
99   color: rgb(200, 200, 200);
100   font-family: 'Xolonium';
101   font-size: 1rem;
102   text-shadow: 0px 1px 1px rgba(200, 200, 200, 0.4);
103 }
104
105 .top-bar-section li:not(.has-form) a:not(.button) {
106   line-height: 50px;
107 }
108
109 .top-bar, .contain-to-grid {
110   background: linear-gradient( rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 95% );
111   margin-bottom: 15px;
112 }
113
114 .top-bar.expanded .title-area {
115   background: none;
116 }
117
118 .top-bar-section li:not(.has-form) a:not(.button) {
119   background: none;
120 }
121
122 .top-bar-section li:not(.has-form) a:not(.button):hover {
123  background: #333;
124 }
125
126 .panel {
127   background-color: #151515;
128   border-color: rgb(40, 40, 40);
129 }
130
131 .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p, .panel li, .panel dl {
132   color: #777777;
133 }
134
135 .th {
136   box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.4);
137 }
138
139 .th:hover, .th:focus {
140   box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.7);
141 }
142
143 /* Footer */
144 #footer {
145   background: linear-gradient( rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 95% );
146   font-family: sans-serif;
147   font-style: italic;
148   margin: 15px 0px 0px 0px;
149   padding-top: 5px;
150   width: 100%;
151 }
152
153 #footer p {
154   color: white;
155   margin-bottom: 0.5rem;
156   text-align: center;
157 }
158
159 #footer ul {
160   font-size: 1rem;
161   list-style: none;
162   margin-left: 0;
163 }
164
165 #title {
166   color: #08C;
167   font-size: 1.8rem;
168   margin-bottom: 10px;
169   position: relative;
170   text-align: center;
171   text-shadow: 2px 2px 3px #333;
172 }
173
174 .statline {
175   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
176   font-size: 0.9rem;
177   position: relative;
178   top: -10px;
179 }
180
181 .nostretch {
182   overflow: hidden;
183   text-overflow: ellipsis;
184   white-space: nowrap;
185 }
186
187 .button.tiny {
188   margin: 0;
189   padding: 0.5rem 1rem 0.5rem;
190 }
191
192 .tabs dd > a, .tabs .tab-title > a {
193   background: none;
194   color: #aaa;
195   padding: 1rem;
196 }
197
198 .tabs dd > a:hover, .tabs .tab-title > a:hover {
199   background-color: #1D1D1D;
200 }
201
202 .tabs dd.active a, .tabs .tab-title.active a {
203   background-color: #111;
204   color: #aaa;
205 }
206
207 .eloup {
208   color: #008000;
209 }
210
211 .elodown {
212   color: #BE0000;
213 }
214
215 .eloneutral {
216   color: gray;
217 }
218
219 .tabs-content {
220   margin-bottom: 0;
221 }