bwc9876.dev
Live location tracking and playback for the game "manhunt"
1:root {
2 font-family: "Bungee";
3 user-select: none;
4 -webkit-user-select: none;
5
6 --scale: 1.25;
7 --small: calc(1rem * pow(var(--scale), -1));
8 --half: calc(1rem * pow(var(--scale), -0.5));
9 --1: calc(1rem * pow(var(--scale), 0));
10 --2: calc(1rem * pow(var(--scale), 1));
11 --3: calc(1rem * pow(var(--scale), 2));
12 --4: calc(1rem * pow(var(--scale), 3));
13 --5: calc(1rem * pow(var(--scale), 4));
14 --6: calc(1rem * pow(var(--scale), 5));
15 --7: calc(1rem * pow(var(--scale), 6));
16 --8: calc(1rem * pow(var(--scale), 7));
17 --9: calc(1rem * pow(var(--scale), 8));
18 --10: calc(1rem * pow(var(--scale), 9));
19 --11: calc(1rem * pow(var(--scale), 10));
20 --12: calc(1rem * pow(var(--scale), 11));
21 --14: calc(1rem * pow(var(--scale), 13));
22 overflow: hidden;
23}
24
25body {
26 display: flex;
27 flex-direction: column;
28 overflow: hidden;
29 margin: 0;
30 width: 100vw;
31 height: 100vh;
32}
33
34button {
35 font-family: "Bungee";
36}
37
38header {
39 font-size: 18pt;
40 font-weight: bold;
41 box-sizing: border-box;
42 z-index: 80;
43
44 display: flex;
45 flex-direction: row;
46 align-items: center;
47
48 box-shadow: #0001 0 2px 20px;
49 background-color: #eee;
50
51 padding: var(--1);
52 gap: var(--1);
53
54 .grow {
55 flex-grow: 1;
56 display: flex;
57 height: 100%;
58 align-items: center;
59 }
60}
61
62main {
63 display: flex;
64 flex-direction: column;
65 flex-grow: 1;
66
67 .map {
68 flex-grow: 1;
69 background-color: #211; /* TEMP: Until I set up and actual map */
70 }
71
72 &.lobby {
73 .frame {
74 flex-grow: 1;
75 background-color: #aaa;
76 position: relative;
77 overflow-y: scroll;
78 width: 100%;
79 }
80
81 .pfp-list {
82 z-index: 4;
83 overflow-x: auto;
84 box-shadow: 0 0 10px #0004;
85 display: flex;
86 flex-direction: row;
87 align-items: center;
88 justify-content: center;
89 gap: var(--2);
90 width: 100%;
91 font-size: 20pt;
92 height: 5vh;
93 padding: var(--small) 0;
94
95 small {
96 font-size: 0.7em;
97 font-style: italic;
98 color: #383838ff;
99 }
100
101 .pfp {
102 transition: transform 175ms linear;
103
104 @starting-style {
105 transform: scale(0);
106 }
107 }
108 }
109
110 .team-button {
111 display: flex;
112 --deco: black;
113 z-index: 3;
114 flex-direction: row;
115 align-items: center;
116 justify-content: center;
117 box-shadow: 0 0 5px var(--deco);
118 background-color: var(--deco);
119 font-size: 16pt;
120 gap: var(--small);
121 padding: var(--1) 0;
122 border: none;
123
124 &.hider {
125 --deco: #67c;
126 }
127
128 &.seeker {
129 --deco: #c67;
130 }
131 }
132 }
133
134 &.menu button {
135 display: flex;
136 flex-direction: row;
137 align-items: center;
138 justify-content: center;
139 border-radius: 0;
140 border: none;
141 margin: 0;
142 /* box-shadow: 0 0 25px black; */
143 width: 105%;
144
145 &:first-child {
146 font-size: 35pt;
147 flex-grow: 1;
148 justify-content: safe;
149 flex-direction: column;
150 background-color: #6c6;
151 margin-top: calc(-1 * var(--4));
152 transform: rotateZ(2deg) translateX(-7px) translateY(-30px);
153 }
154
155 &:nth-child(2) {
156 font-size: 28pt;
157 min-height: 32%;
158 flex-direction: column;
159 background-color: #67c;
160 margin-top: calc(-1 * var(--8));
161 padding-bottom: var(--5);
162 transform: rotateZ(-2deg) translateX(-6px);
163 }
164
165 &:nth-child(3) {
166 font-size: 25pt;
167 min-height: 20%;
168 margin-top: calc(-1 * var(--4));
169 gap: 4px;
170 background-color: #c67;
171 transform: rotateZ(1deg) translateY(5px);
172 }
173 }
174}
175
176div.screen-cover {
177 font-size: 24pt;
178 position: fixed;
179 inset: 0;
180 background-color: #0009;
181 display: flex;
182 align-items: center;
183 justify-content: center;
184 z-index: 500;
185 flex-direction: column;
186 backdrop-filter: blur(1px);
187 gap: var(--2);
188
189 strong {
190 color: white;
191 filter: drop-shadow(0 0 10px #000a);
192 }
193
194 .spinner {
195 font-size: 48pt;
196 view-transition-name: spinner;
197 opacity: 0.85;
198 }
199}
200
201.settings-popup {
202 position: relative;
203 font-family: "sans-serif";
204 font-size: 18pt;
205 background-color: white;
206 display: flex;
207 padding: var(--small) var(--1);
208 flex-direction: column;
209 width: 93vw;
210 height: 95vh;
211 border-radius: 10px;
212 overflow: hidden;
213 border: none;
214 transition: 100ms ease-out;
215 transition-property: transform, opacity;
216
217 @starting-style {
218 transform: translateY(10px);
219 opacity: 0;
220 }
221
222 h2 {
223 margin: 0;
224 font-size: 22pt;
225 font-family: "Bungee";
226 border-bottom: solid 2px #aaa;
227 display: flex;
228 gap: 0.2em;
229 align-items: center;
230 justify-content: center;
231 }
232
233 h3 {
234 font-size: 20pt;
235 font-family: "Bungee";
236 margin: 0;
237 display: flex;
238 gap: 0.2em;
239 align-items: center;
240 }
241
242 fieldset {
243 padding: var(--small) 0;
244 border: none;
245 border-bottom: solid 2px #ddd;
246 display: flex;
247 flex-direction: column;
248
249 p {
250 font-size: 16pt;
251 margin: 0;
252 margin-bottom: var(--2);
253 text-wrap: balance;
254 font-family: sans-serif;
255 }
256 }
257
258 & > div:nth-child(2) {
259 flex-grow: 1;
260 display: flex;
261 flex-direction: column;
262 overflow-y: scroll;
263 min-height: 0;
264 }
265
266 & > div:nth-child(3) {
267 height: 7%;
268
269 button {
270 font-size: 20pt;
271 box-shadow: 0 0 5px black;
272 background-color: #6c7;
273 border: none;
274 border-radius: 5px;
275 margin: 0;
276 padding: 0 var(--1);
277 width: 100%;
278 height: 100%;
279 }
280 }
281
282 select {
283 padding: 0.5em 0;
284 }
285
286 input {
287 width: 100%;
288 box-shadow: 0 0 5px #0004 inset;
289
290 &.extra {
291 margin-top: 0em;
292 }
293
294 &[type="range"] {
295 appearance: none;
296 padding: 0.2em 0;
297 border-radius: 5px;
298 background-color: #999;
299 height: var(--1);
300
301 &::-webkit-slider-thumb {
302 appearance: none;
303 border-radius: 50%;
304 color: red;
305 background-color: white;
306 box-shadow: 0 0 5px #000a;
307 height: var(--4);
308 width: var(--4);
309 }
310 }
311 }
312
313 label {
314 display: grid;
315 grid-template-areas: "l p" "i i";
316 gap: var(--small);
317 margin: var(--1) 0;
318 width: 100%;
319
320 :first-child {
321 grid-area: l;
322 }
323
324 :nth-child(2) {
325 grid-area: p;
326 text-align: right;
327 }
328
329 :nth-child(3) {
330 grid-area: i;
331 }
332 }
333}
334
335:root::view-transition-group(spinner) {
336 animation-duration: 0s;
337 animation-delay: 0s;
338}
339
340@keyframes rotation {
341 0% {
342 transform: rotate(0deg);
343 }
344
345 100% {
346 transform: rotate(360deg);
347 }
348}
349
350span.spinner {
351 width: 1em;
352 height: 1em;
353 filter: drop-shadow(0 0 10px #000a);
354 border: solid 0.1em gray;
355 border-bottom-color: white;
356 border-radius: 50%;
357 display: inline-block;
358 box-sizing: border-box;
359 animation: rotation 1s linear infinite;
360}
361
362span.pfp {
363 border-radius: 50%;
364 position: relative;
365 display: flex;
366 align-items: center;
367 justify-content: center;
368
369 --deco-color: #0000;
370
371 box-sizing: border-box;
372 border-style: solid;
373 border-width: 4px;
374 border-color: var(--deco-color);
375
376 img {
377 width: 2em;
378 height: 2em;
379 border-radius: 50%;
380 }
381
382 svg {
383 position: absolute;
384 bottom: -10%;
385 right: -15%;
386 color: var(--deco-color);
387 filter: drop-shadow(0 0 2px black);
388 border-radius: 50%;
389 padding: 1px;
390 text-align: center;
391 }
392
393 &[data-initial]::after {
394 content: attr(data-initial);
395 color: white;
396 filter: drop-shadow(0 0 4px black);
397 position: absolute;
398 display: flex;
399 align-items: center;
400 justify-content: center;
401 }
402
403 &.seeker {
404 --deco-color: #c67;
405 }
406
407 &.hider {
408 --deco-color: #67c;
409 }
410}
411
412button.fab {
413 transition: 100ms linear;
414 transition-property: color, background-color, box-shadow;
415 background-color: #151515ff;
416 color: #eee;
417 border-radius: 100px;
418 box-shadow: 0 0 6px #222;
419 border: none;
420 display: flex;
421 align-items: center;
422 justify-content: center;
423 gap: 0.3em;
424 font-size: 12pt;
425 padding: var(--2);
426 position: absolute;
427
428 &:disabled {
429 background-color: #999;
430 color: #555;
431 box-shadow: 0 0 5px #4445 inset;
432 }
433
434 &.bl {
435 left: 0.5em;
436 bottom: var(--small);
437 }
438
439 &.br {
440 right: 0.5em;
441 bottom: var(--small);
442 }
443
444 &.tr {
445 right: 0.5em;
446 top: var(--small);
447 }
448
449 &.tl {
450 left: 0.5em;
451 top: var(--small);
452 }
453}