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