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 | ||
68 | /* players div */ | |
69 | ||
70 | #players { | |
71 | overflow: auto; | |
fd4a69e4 | 72 | margin-bottom: 15px; |
7a00c409 BA |
73 | } |
74 | ||
75 | #players p { | |
76 | font-weight: bold; | |
77 | text-align: center; | |
78 | } | |
79 | ||
80 | #active, #inactive { | |
81 | float: left; | |
82 | width: 50%; | |
83 | } | |
84 | ||
85 | #inactive table { | |
86 | opacity: 0.6; | |
87 | } | |
88 | ||
89 | table.list { | |
90 | border-collapse: collapse; | |
91 | width: 400px; | |
92 | margin: 0 auto; | |
93 | table-layout: fixed; | |
94 | font-size: 1.1rem; | |
95 | cursor: pointer; | |
96 | } | |
97 | ||
98 | table.list td | |
99 | { | |
100 | border: 1px solid #ddd; | |
101 | padding: 10px; | |
102 | } | |
103 | table.list th { | |
104 | padding: 1em 10px; | |
105 | text-align: left; | |
106 | } | |
107 | ||
108 | table.list tr:not(.title) { | |
109 | background-color: #aaa; | |
110 | } | |
111 | table.list tr:not(.title):nth-child(even){ | |
112 | background-color: #ccc; | |
113 | } | |
114 | table.list tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover { | |
115 | background-color: lightyellow; | |
116 | } | |
117 | ||
118 | /* ranking div */ | |
119 | ||
fd4a69e4 BA |
120 | #ranking { |
121 | margin-bottom: 15px; | |
122 | } | |
123 | ||
7a00c409 BA |
124 | table.ranking { |
125 | border-collapse: collapse; | |
126 | width: 500px; | |
127 | margin: 0 auto; | |
128 | font-size: 1.1rem; | |
129 | } | |
130 | ||
131 | table.ranking td | |
132 | { | |
133 | border: 1px solid #ddd; | |
134 | padding: 10px; | |
135 | } | |
136 | table.ranking th { | |
137 | padding: 1em 10px; | |
138 | text-align: left; | |
139 | } | |
140 | ||
141 | table.ranking tr:not(.title) { | |
142 | background-color: #aaa; | |
143 | } | |
144 | table.ranking tr:not(.title):nth-child(even){ | |
145 | background-color: #ccc; | |
146 | } | |
147 | table.ranking tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):hover { | |
148 | background-color: lightyellow; | |
149 | } | |
150 | ||
151 | table.ranking th.scoring { | |
152 | cursor: pointer; | |
153 | } | |
154 | ||
155 | .active { | |
156 | background-color: yellow; | |
157 | } | |
158 | ||
159 | /* pairings div */ | |
160 | ||
161 | button.block { | |
162 | display: block; | |
163 | margin: 30px auto; | |
164 | } | |
165 | ||
166 | .button-container { | |
167 | margin-top: 30px; | |
168 | text-align: center; | |
169 | } | |
170 | ||
171 | button.cancel { | |
172 | margin-left: 30px; | |
173 | background-image: linear-gradient(to bottom, #d93470, #b82b47); | |
174 | } | |
175 | button.cancel:hover { | |
176 | background-image: linear-gradient(to bottom, #fc433c, #d93434); | |
177 | } | |
178 | ||
fd4a69e4 BA |
179 | .toto { |
180 | color: darkgrey; | |
181 | } | |
182 | ||
7a00c409 BA |
183 | .scored { |
184 | background-color: lightgreen; | |
185 | } | |
186 | ||
187 | #pairings p { | |
188 | font-weight: bold; | |
189 | } | |
190 | ||
191 | td.score { | |
192 | padding-left: 30px; | |
193 | } | |
194 | ||
195 | .pairing { | |
196 | float: left; | |
197 | width: 47%; | |
198 | padding-left: 3%; | |
199 | padding-bottom: 10px; | |
200 | cursor: pointer; | |
201 | } | |
202 | .unpaired { | |
203 | cursor: default; | |
204 | } | |
205 | .scored { | |
206 | cursor: default; | |
207 | } | |
208 | ||
209 | .pairing > table { | |
210 | font-size: 1.1rem; | |
211 | } | |
212 | ||
213 | .pairing:hover:not(.scored) { | |
214 | background-color: yellow; | |
215 | } | |
216 | ||
217 | #scoreInput { | |
218 | margin: 30px 0; | |
219 | } | |
220 | ||
221 | #scoreInput table { | |
222 | width: 500px; | |
223 | margin: 0 auto; | |
224 | table-layout: fixed; | |
225 | font-size: 1.1rem; | |
226 | } | |
227 | ||
228 | #scoreInput table td {overflow:hidden;} | |
229 | ||
230 | #scoreInput table td:nth-of-type(2) {padding:0 10px;} | |
231 | #scoreInput table td:nth-of-type(3) {padding: 0 10px;} | |
232 | ||
233 | #scoreInput table td > input { | |
234 | padding: 0 3px; | |
235 | } | |
236 | ||
237 | #scoreInput table th { | |
238 | padding-bottom: 10px; | |
239 | } |