Commit | Line | Data |
---|---|---|
7a00c409 BA |
1 | /* General */ |
2 | ||
3 | @import '../vendor/Ubuntu_googlefont.css'; | |
4 | ||
5 | body { | |
6 | font-family: Ubuntu, Verdana, sans-serif; | |
7 | margin: 0; | |
8 | width: 800px; | |
9 | margin: 0 auto; | |
10 | font-size: 1.1rem; | |
11 | } | |
12 | ||
13 | .sidenav { | |
14 | height: 100%; | |
15 | width: 200px; | |
16 | position: fixed; | |
17 | z-index: 1; | |
18 | top: 0; | |
19 | left: 0; | |
20 | background-color: #111; | |
21 | overflow-x: hidden; | |
22 | padding: 20px 0 0 0; | |
23 | margin: 0; | |
24 | } | |
25 | ||
26 | @media screen and (max-height: 450px) { | |
27 | .sidenav {padding-top: 15px;} | |
28 | } | |
29 | ||
30 | .sidenav li { | |
31 | padding: 6px 8px 6px 16px; | |
32 | font-size: 25px; | |
33 | color: #818181; | |
34 | display: block; | |
35 | cursor: pointer; | |
36 | } | |
37 | ||
38 | .sidenav li:hover { | |
39 | color: #f1f1f1; | |
40 | } | |
41 | ||
42 | .main { | |
43 | margin-left: 200px; /* Same as the width of the sidenav */ | |
44 | padding: 0px 10px; | |
45 | } | |
46 | ||
47 | .btn { | |
48 | background-color: #3498db; | |
49 | background-image: linear-gradient(to bottom, #3498db, #2980b9); | |
50 | box-shadow: 0px 2px 3px #666666; | |
51 | font-family: Arial; | |
52 | color: #ffffff; | |
53 | font-size: 20px; | |
54 | padding: 10px 20px 10px 20px; | |
55 | text-decoration: none; | |
56 | } | |
57 | ||
58 | .btn:hover { | |
59 | background-color: #3cb0fd; | |
60 | background-image: linear-gradient(to bottom, #3cb0fd, #3498db); | |
61 | text-decoration: none; | |
62 | } | |
63 | ||
64 | table th { | |
65 | font-weight: bold; | |
66 | } | |
67 | ||
1369a09d BA |
68 | .left, .right { |
69 | float: left; | |
70 | width: 50%; | |
71 | } | |
72 | ||
73 | .button-container-horizontal, .button-container-vertical { | |
74 | margin-top: 30px; | |
75 | text-align: center; | |
76 | } | |
77 | .button-container-vertical { | |
78 | float: left; | |
79 | } | |
80 | /* All children except first: margin: 30px */ | |
81 | .button-container-horizontal .btn:not(:first-child) { | |
82 | margin-right: 30px; | |
83 | } | |
84 | .button-container-vertical .btn { | |
85 | display: block; | |
86 | margin-left: 30px; | |
87 | } | |
88 | .button-container-vertical .btn:not(:first-child) { | |
89 | margin-top: 15px; | |
90 | } | |
91 | ||
92 | button.validate { | |
93 | background-image: linear-gradient(to bottom, #6fa162, #40992e); | |
94 | } | |
95 | button.validate:hover { | |
96 | background-image: linear-gradient(to bottom, #37cc4e, #40c24f); | |
97 | } | |
98 | button.cancel { | |
99 | background-image: linear-gradient(to bottom, #d93470, #b82b47); | |
100 | } | |
101 | button.cancel:hover { | |
102 | background-image: linear-gradient(to bottom, #fc433c, #d93434); | |
103 | } | |
104 | ||
7a00c409 BA |
105 | /* players div */ |
106 | ||
107 | #players { | |
108 | overflow: auto; | |
fd4a69e4 | 109 | margin-bottom: 15px; |
7a00c409 BA |
110 | } |
111 | ||
112 | #players p { | |
113 | font-weight: bold; | |
114 | text-align: center; | |
115 | } | |
116 | ||
7a00c409 BA |
117 | #inactive table { |
118 | opacity: 0.6; | |
119 | } | |
120 | ||
121 | table.list { | |
122 | border-collapse: collapse; | |
123 | width: 400px; | |
124 | margin: 0 auto; | |
125 | table-layout: fixed; | |
126 | font-size: 1.1rem; | |
127 | cursor: pointer; | |
128 | } | |
129 | ||
130 | table.list td | |
131 | { | |
132 | border: 1px solid #ddd; | |
133 | padding: 10px; | |
134 | } | |
135 | table.list th { | |
136 | padding: 1em 10px; | |
137 | text-align: left; | |
138 | } | |
139 | ||
140 | table.list tr:not(.title) { | |
141 | background-color: #aaa; | |
142 | } | |
143 | table.list tr:not(.title):nth-child(even){ | |
144 | background-color: #ccc; | |
145 | } | |
146 | table.list tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover { | |
147 | background-color: lightyellow; | |
148 | } | |
149 | ||
150 | /* ranking div */ | |
151 | ||
fd4a69e4 BA |
152 | #ranking { |
153 | margin-bottom: 15px; | |
1369a09d | 154 | overflow: auto; |
fd4a69e4 BA |
155 | } |
156 | ||
7a00c409 BA |
157 | table.ranking { |
158 | border-collapse: collapse; | |
159 | width: 500px; | |
160 | margin: 0 auto; | |
161 | font-size: 1.1rem; | |
1369a09d BA |
162 | display: block; |
163 | float: left; | |
7a00c409 BA |
164 | } |
165 | ||
166 | table.ranking td | |
167 | { | |
168 | border: 1px solid #ddd; | |
169 | padding: 10px; | |
170 | } | |
171 | table.ranking th { | |
172 | padding: 1em 10px; | |
173 | text-align: left; | |
174 | } | |
175 | ||
176 | table.ranking tr:not(.title) { | |
177 | background-color: #aaa; | |
178 | } | |
179 | table.ranking tr:not(.title):nth-child(even){ | |
180 | background-color: #ccc; | |
181 | } | |
182 | table.ranking tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover { | |
183 | background-color: lightyellow; | |
184 | } | |
185 | ||
7a00c409 BA |
186 | /* pairings div */ |
187 | ||
1369a09d BA |
188 | .warning { |
189 | color: red; | |
190 | margin-top: 25px; | |
7a00c409 BA |
191 | } |
192 | ||
1369a09d BA |
193 | span.link { |
194 | color: darkblue; | |
195 | cursor: pointer; | |
7a00c409 BA |
196 | } |
197 | ||
1369a09d BA |
198 | button.block { |
199 | display: block; | |
200 | margin: 25px auto; | |
7a00c409 BA |
201 | } |
202 | ||
fd4a69e4 BA |
203 | .toto { |
204 | color: darkgrey; | |
205 | } | |
206 | ||
7a00c409 BA |
207 | .scored { |
208 | background-color: lightgreen; | |
209 | } | |
210 | ||
211 | #pairings p { | |
212 | font-weight: bold; | |
213 | } | |
214 | ||
215 | td.score { | |
216 | padding-left: 30px; | |
217 | } | |
218 | ||
219 | .pairing { | |
220 | float: left; | |
221 | width: 47%; | |
222 | padding-left: 3%; | |
223 | padding-bottom: 10px; | |
224 | cursor: pointer; | |
225 | } | |
226 | .unpaired { | |
227 | cursor: default; | |
228 | } | |
7a00c409 BA |
229 | |
230 | .pairing > table { | |
231 | font-size: 1.1rem; | |
232 | } | |
233 | ||
234 | .pairing:hover:not(.scored) { | |
235 | background-color: yellow; | |
236 | } | |
237 | ||
238 | #scoreInput { | |
239 | margin: 30px 0; | |
240 | } | |
241 | ||
242 | #scoreInput table { | |
243 | width: 500px; | |
244 | margin: 0 auto; | |
245 | table-layout: fixed; | |
246 | font-size: 1.1rem; | |
247 | } | |
248 | ||
249 | #scoreInput table td {overflow:hidden;} | |
250 | ||
251 | #scoreInput table td:nth-of-type(2) {padding:0 10px;} | |
252 | #scoreInput table td:nth-of-type(3) {padding: 0 10px;} | |
253 | ||
254 | #scoreInput table td > input { | |
255 | padding: 0 3px; | |
256 | } | |
257 | ||
258 | #scoreInput table th { | |
259 | padding-bottom: 10px; | |
260 | } |