9604004fe7ebb4bcfd601585871d679d2f13c952
[westcastle.git] / css / index.css
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 .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
105 /* players div */
106
107 #players {
108 overflow: auto;
109 margin-bottom: 15px;
110 }
111
112 #players p {
113 font-weight: bold;
114 text-align: center;
115 }
116
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
152 #ranking {
153 margin-bottom: 15px;
154 overflow: auto;
155 }
156
157 table.ranking {
158 border-collapse: collapse;
159 width: 500px;
160 margin: 0 auto;
161 font-size: 1.1rem;
162 display: block;
163 float: left;
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
186 /* pairings div */
187
188 .warning {
189 color: red;
190 margin-top: 25px;
191 }
192
193 span.link {
194 color: darkblue;
195 cursor: pointer;
196 }
197
198 button.block {
199 display: block;
200 margin: 25px auto;
201 }
202
203 .toto {
204 color: darkgrey;
205 }
206
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 }
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 }