1 | @import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap);
|
---|
2 | html,
|
---|
3 | body {
|
---|
4 | padding: 0;
|
---|
5 | margin: 0;
|
---|
6 | font-family: 'Inter', sans-serif;
|
---|
7 | overflow: hidden;
|
---|
8 | }
|
---|
9 |
|
---|
10 | a {
|
---|
11 | color: inherit;
|
---|
12 | text-decoration: none;
|
---|
13 | }
|
---|
14 |
|
---|
15 | * {
|
---|
16 | -webkit-box-sizing: border-box;
|
---|
17 | box-sizing: border-box;
|
---|
18 | }
|
---|
19 |
|
---|
20 | p, h1, h3 {
|
---|
21 | margin: 0;
|
---|
22 | }
|
---|
23 |
|
---|
24 | .app {
|
---|
25 | color: white;
|
---|
26 | letter-spacing: 1px;
|
---|
27 | width: 100vw;
|
---|
28 | height: 100vh;
|
---|
29 | margin: auto;
|
---|
30 | overflow: hidden;
|
---|
31 | background-size: cover;
|
---|
32 | background-repeat: no-repeat;
|
---|
33 | background-position: 0% 50%;
|
---|
34 | text-align: center;
|
---|
35 | }
|
---|
36 |
|
---|
37 | /**
|
---|
38 | * Component <- Header
|
---|
39 | */
|
---|
40 | header.header {
|
---|
41 | display: -webkit-box;
|
---|
42 | display: -ms-flexbox;
|
---|
43 | display: flex;
|
---|
44 | -webkit-box-pack: justify;
|
---|
45 | -ms-flex-pack: justify;
|
---|
46 | justify-content: space-between;
|
---|
47 | -webkit-box-align: center;
|
---|
48 | -ms-flex-align: center;
|
---|
49 | align-items: center;
|
---|
50 | width: 92vw;
|
---|
51 | margin: auto;
|
---|
52 | margin-top: 20px;
|
---|
53 | position: relative;
|
---|
54 | z-index: 5;
|
---|
55 | }
|
---|
56 |
|
---|
57 | header.header .logo {
|
---|
58 | width: 80px;
|
---|
59 | aspect-ratio: 1;
|
---|
60 | border-radius: 100%;
|
---|
61 | background-image: url("/images/logo.png");
|
---|
62 | background-size: cover;
|
---|
63 | border: 2px solid rgba(255, 255, 255, 0.2);
|
---|
64 | cursor: pointer;
|
---|
65 | }
|
---|
66 |
|
---|
67 | header.header h2 {
|
---|
68 | cursor: pointer;
|
---|
69 | }
|
---|
70 |
|
---|
71 | header.header nav ul {
|
---|
72 | display: -webkit-box;
|
---|
73 | display: -ms-flexbox;
|
---|
74 | display: flex;
|
---|
75 | -webkit-box-orient: horizontal;
|
---|
76 | -webkit-box-direction: normal;
|
---|
77 | -ms-flex-direction: row;
|
---|
78 | flex-direction: row;
|
---|
79 | list-style-type: none;
|
---|
80 | }
|
---|
81 |
|
---|
82 | header.header nav ul li {
|
---|
83 | margin-right: 4rem;
|
---|
84 | }
|
---|
85 |
|
---|
86 | header.header nav ul li:last-child {
|
---|
87 | margin-right: 0;
|
---|
88 | }
|
---|
89 |
|
---|
90 | header.header nav.mainHeaderNavigation ul li {
|
---|
91 | cursor: pointer;
|
---|
92 | }
|
---|
93 |
|
---|
94 | /**
|
---|
95 | * Component <- Full Width Text
|
---|
96 | *
|
---|
97 | * Used in "Welcome To Caessino"
|
---|
98 | */
|
---|
99 | .fullwidthText {
|
---|
100 | width: 100vw;
|
---|
101 | display: -webkit-box;
|
---|
102 | display: -ms-flexbox;
|
---|
103 | display: flex;
|
---|
104 | -webkit-box-orient: vertical;
|
---|
105 | -webkit-box-direction: normal;
|
---|
106 | -ms-flex-direction: column;
|
---|
107 | flex-direction: column;
|
---|
108 | -webkit-box-pack: center;
|
---|
109 | -ms-flex-pack: center;
|
---|
110 | justify-content: center;
|
---|
111 | -webkit-box-align: center;
|
---|
112 | -ms-flex-align: center;
|
---|
113 | align-items: center;
|
---|
114 | margin-top: 40px;
|
---|
115 | padding: 15px 0 20px 0;
|
---|
116 | background-color: rgba(0, 0, 0, 0.6);
|
---|
117 | }
|
---|
118 |
|
---|
119 | .fullwidthText h1 {
|
---|
120 | color: #FFD700;
|
---|
121 | font-weight: lighter;
|
---|
122 | font-size: 2.5rem;
|
---|
123 | }
|
---|
124 |
|
---|
125 | .fullwidthText h3 {
|
---|
126 | margin-top: 15px;
|
---|
127 | font-weight: lighter;
|
---|
128 | }
|
---|
129 |
|
---|
130 | /**
|
---|
131 | * Component <- Alert
|
---|
132 | *
|
---|
133 | * Similar to Full Width Text
|
---|
134 | */
|
---|
135 | .alert {
|
---|
136 | z-index: 30;
|
---|
137 | width: 100vw;
|
---|
138 | display: -webkit-box;
|
---|
139 | display: -ms-flexbox;
|
---|
140 | display: flex;
|
---|
141 | -webkit-box-orient: vertical;
|
---|
142 | -webkit-box-direction: normal;
|
---|
143 | -ms-flex-direction: column;
|
---|
144 | flex-direction: column;
|
---|
145 | -webkit-box-pack: center;
|
---|
146 | -ms-flex-pack: center;
|
---|
147 | justify-content: center;
|
---|
148 | -webkit-box-align: center;
|
---|
149 | -ms-flex-align: center;
|
---|
150 | align-items: center;
|
---|
151 | padding: 20px 0 25px 0;
|
---|
152 | background-color: rgba(0, 0, 0, 0.9);
|
---|
153 | position: absolute;
|
---|
154 | -webkit-transform: translateY(-70%);
|
---|
155 | transform: translateY(-70%);
|
---|
156 | -webkit-transition: '.5s linear';
|
---|
157 | transition: '.5s linear';
|
---|
158 | }
|
---|
159 |
|
---|
160 | .alert h1 {
|
---|
161 | color: #FFD700;
|
---|
162 | font-weight: lighter;
|
---|
163 | font-size: 2.5rem;
|
---|
164 | }
|
---|
165 |
|
---|
166 | .alert h3 {
|
---|
167 | margin-top: 10px;
|
---|
168 | font-weight: lighter;
|
---|
169 | }
|
---|
170 |
|
---|
171 | .alert button {
|
---|
172 | width: 500px;
|
---|
173 | margin-top: 20px;
|
---|
174 | }
|
---|
175 |
|
---|
176 | /**
|
---|
177 | * Component <- Notification
|
---|
178 | *
|
---|
179 | * Displayed fixed in the top right corner
|
---|
180 | */
|
---|
181 | .notification {
|
---|
182 | z-index: 30;
|
---|
183 | position: fixed;
|
---|
184 | top: 40px;
|
---|
185 | right: 30px;
|
---|
186 | width: 500px;
|
---|
187 | min-height: 200px;
|
---|
188 | display: -webkit-box;
|
---|
189 | display: -ms-flexbox;
|
---|
190 | display: flex;
|
---|
191 | -webkit-box-orient: vertical;
|
---|
192 | -webkit-box-direction: normal;
|
---|
193 | -ms-flex-direction: column;
|
---|
194 | flex-direction: column;
|
---|
195 | -webkit-box-pack: center;
|
---|
196 | -ms-flex-pack: center;
|
---|
197 | justify-content: center;
|
---|
198 | -webkit-box-align: end;
|
---|
199 | -ms-flex-align: end;
|
---|
200 | align-items: flex-end;
|
---|
201 | font-size: 2rem;
|
---|
202 | padding: 20px;
|
---|
203 | border-radius: 15px;
|
---|
204 | -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
205 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
206 | }
|
---|
207 |
|
---|
208 | .notification svg {
|
---|
209 | cursor: pointer;
|
---|
210 | }
|
---|
211 |
|
---|
212 | .notification > div {
|
---|
213 | -webkit-box-flex: 1;
|
---|
214 | -ms-flex: 1;
|
---|
215 | flex: 1;
|
---|
216 | width: 100%;
|
---|
217 | display: -webkit-box;
|
---|
218 | display: -ms-flexbox;
|
---|
219 | display: flex;
|
---|
220 | -webkit-box-pack: center;
|
---|
221 | -ms-flex-pack: center;
|
---|
222 | justify-content: center;
|
---|
223 | -webkit-box-align: center;
|
---|
224 | -ms-flex-align: center;
|
---|
225 | align-items: center;
|
---|
226 | font-size: 1.5rem;
|
---|
227 | margin-bottom: 1.2rem;
|
---|
228 | text-align: center;
|
---|
229 | }
|
---|
230 |
|
---|
231 | /**
|
---|
232 | * Component <- Game Circle
|
---|
233 | *
|
---|
234 | * Used in Landing Page -> to display the games in circles
|
---|
235 | */
|
---|
236 | .gameCircles {
|
---|
237 | display: -webkit-box;
|
---|
238 | display: -ms-flexbox;
|
---|
239 | display: flex;
|
---|
240 | -webkit-box-orient: horizontal;
|
---|
241 | -webkit-box-direction: normal;
|
---|
242 | -ms-flex-direction: row;
|
---|
243 | flex-direction: row;
|
---|
244 | -webkit-box-pack: justify;
|
---|
245 | -ms-flex-pack: justify;
|
---|
246 | justify-content: space-between;
|
---|
247 | -webkit-box-align: center;
|
---|
248 | -ms-flex-align: center;
|
---|
249 | align-items: center;
|
---|
250 | width: 92vw;
|
---|
251 | margin: auto;
|
---|
252 | margin-top: 50px;
|
---|
253 | }
|
---|
254 |
|
---|
255 | .gameCircles .gameCircle {
|
---|
256 | -webkit-transition: all .2s linear;
|
---|
257 | transition: all .2s linear;
|
---|
258 | cursor: pointer;
|
---|
259 | display: -webkit-box;
|
---|
260 | display: -ms-flexbox;
|
---|
261 | display: flex;
|
---|
262 | -webkit-box-orient: vertical;
|
---|
263 | -webkit-box-direction: normal;
|
---|
264 | -ms-flex-direction: column;
|
---|
265 | flex-direction: column;
|
---|
266 | -webkit-box-pack: center;
|
---|
267 | -ms-flex-pack: center;
|
---|
268 | justify-content: center;
|
---|
269 | -webkit-box-align: center;
|
---|
270 | -ms-flex-align: center;
|
---|
271 | align-items: center;
|
---|
272 | }
|
---|
273 |
|
---|
274 | .gameCircles .gameCircle .circleLarge {
|
---|
275 | -webkit-transition: all .2s linear;
|
---|
276 | transition: all .2s linear;
|
---|
277 | width: 22vw;
|
---|
278 | aspect-ratio: 1;
|
---|
279 | border-radius: 100%;
|
---|
280 | background: -webkit-gradient(linear, left bottom, right top, from(#ffd900cc), to(#B65714));
|
---|
281 | background: linear-gradient(to top right, #ffd900cc, #B65714);
|
---|
282 | opacity: .95;
|
---|
283 | display: -webkit-box;
|
---|
284 | display: -ms-flexbox;
|
---|
285 | display: flex;
|
---|
286 | -webkit-box-orient: vertical;
|
---|
287 | -webkit-box-direction: normal;
|
---|
288 | -ms-flex-direction: column;
|
---|
289 | flex-direction: column;
|
---|
290 | }
|
---|
291 |
|
---|
292 | .gameCircles .gameCircle .circleLarge .circle {
|
---|
293 | border-radius: 100%;
|
---|
294 | width: 98%;
|
---|
295 | background-size: cover;
|
---|
296 | margin: auto;
|
---|
297 | aspect-ratio: 1;
|
---|
298 | }
|
---|
299 |
|
---|
300 | .gameCircles .gameCircle h3 {
|
---|
301 | -webkit-transition: all .2s linear;
|
---|
302 | transition: all .2s linear;
|
---|
303 | font-weight: lighter;
|
---|
304 | margin-top: 30px;
|
---|
305 | opacity: 0;
|
---|
306 | }
|
---|
307 |
|
---|
308 | .gameCircles .gameCircle h1.loading {
|
---|
309 | color: white;
|
---|
310 | position: absolute;
|
---|
311 | width: 100vw;
|
---|
312 | top: 50vh;
|
---|
313 | left: 50vw;
|
---|
314 | -webkit-transform: translate(-50%, -50%);
|
---|
315 | transform: translate(-50%, -50%);
|
---|
316 | font-size: 5rem;
|
---|
317 | z-index: 10;
|
---|
318 | }
|
---|
319 |
|
---|
320 | .gameCircles .gameCircle:hover .circleLarge {
|
---|
321 | -webkit-transform: scale(1.1);
|
---|
322 | transform: scale(1.1);
|
---|
323 | opacity: 1;
|
---|
324 | }
|
---|
325 |
|
---|
326 | .gameCircles .gameCircle:hover h3 {
|
---|
327 | opacity: 1;
|
---|
328 | }
|
---|
329 |
|
---|
330 | .gameCircles:hover .gameCircle .circleLarge {
|
---|
331 | opacity: 1 !important;
|
---|
332 | }
|
---|
333 |
|
---|
334 | /**
|
---|
335 | * Full Screen Overlay
|
---|
336 | */
|
---|
337 | .fullscreen {
|
---|
338 | position: fixed;
|
---|
339 | top: 0;
|
---|
340 | left: 0;
|
---|
341 | width: 100vw;
|
---|
342 | height: 100vh;
|
---|
343 | background: -webkit-gradient(linear, left top, right top, from(#0B932E), to(#097625));
|
---|
344 | background: linear-gradient(to right, #0B932E, #097625);
|
---|
345 | color: #ead24d;
|
---|
346 | z-index: 10;
|
---|
347 | }
|
---|
348 |
|
---|
349 | .fs-centered > div {
|
---|
350 | position: fixed;
|
---|
351 | top: 50vh;
|
---|
352 | left: 50vw;
|
---|
353 | -webkit-transform: translate(-50%, -50%);
|
---|
354 | transform: translate(-50%, -50%);
|
---|
355 | }
|
---|
356 |
|
---|
357 | .top-to-bottom-centered {
|
---|
358 | overflow-y: scroll;
|
---|
359 | }
|
---|
360 |
|
---|
361 | .top-to-bottom-centered > div {
|
---|
362 | padding-block: 2rem;
|
---|
363 | width: 70vw;
|
---|
364 | margin-inline: auto;
|
---|
365 | display: -webkit-box;
|
---|
366 | display: -ms-flexbox;
|
---|
367 | display: flex;
|
---|
368 | -webkit-box-orient: vertical;
|
---|
369 | -webkit-box-direction: normal;
|
---|
370 | -ms-flex-direction: column;
|
---|
371 | flex-direction: column;
|
---|
372 | gap: 4rem;
|
---|
373 | }
|
---|
374 |
|
---|
375 | .top-to-bottom-centered > div .link {
|
---|
376 | color: #fff3ae;
|
---|
377 | text-decoration: underline;
|
---|
378 | cursor: pointer;
|
---|
379 | }
|
---|
380 |
|
---|
381 | .top-to-bottom-centered > div h3 {
|
---|
382 | font-size: 1.5rem;
|
---|
383 | text-align: center;
|
---|
384 | }
|
---|
385 |
|
---|
386 | .fs-inputs-container > div {
|
---|
387 | margin: auto;
|
---|
388 | margin-top: 2.4rem;
|
---|
389 | width: -webkit-fit-content;
|
---|
390 | width: -moz-fit-content;
|
---|
391 | width: fit-content;
|
---|
392 | display: -webkit-box;
|
---|
393 | display: -ms-flexbox;
|
---|
394 | display: flex;
|
---|
395 | -webkit-box-orient: vertical;
|
---|
396 | -webkit-box-direction: normal;
|
---|
397 | -ms-flex-direction: column;
|
---|
398 | flex-direction: column;
|
---|
399 | -webkit-box-pack: center;
|
---|
400 | -ms-flex-pack: center;
|
---|
401 | justify-content: center;
|
---|
402 | -webkit-box-align: center;
|
---|
403 | -ms-flex-align: center;
|
---|
404 | align-items: center;
|
---|
405 | }
|
---|
406 |
|
---|
407 | .fs-inputs-container > div > span {
|
---|
408 | margin-bottom: .5rem;
|
---|
409 | font-size: 1.5rem;
|
---|
410 | }
|
---|
411 |
|
---|
412 | .fs-inputs-container > div > input {
|
---|
413 | margin-bottom: 2rem;
|
---|
414 | padding-left: 4px;
|
---|
415 | padding-right: 4px;
|
---|
416 | font-size: 2rem;
|
---|
417 | }
|
---|
418 |
|
---|
419 | .statsScreen svg {
|
---|
420 | cursor: pointer;
|
---|
421 | font-size: 2.5rem;
|
---|
422 | color: white;
|
---|
423 | }
|
---|
424 |
|
---|
425 | .statsScreen > div h1 {
|
---|
426 | font-size: 2.5rem;
|
---|
427 | margin-bottom: 5rem;
|
---|
428 | }
|
---|
429 |
|
---|
430 | .statsScreen > div p {
|
---|
431 | display: -webkit-box;
|
---|
432 | display: -ms-flexbox;
|
---|
433 | display: flex;
|
---|
434 | -webkit-box-pack: justify;
|
---|
435 | -ms-flex-pack: justify;
|
---|
436 | justify-content: space-between;
|
---|
437 | font-size: 1.5rem;
|
---|
438 | margin-bottom: 1rem;
|
---|
439 | }
|
---|
440 |
|
---|
441 | .statsScreen > div p:nth-child(2n) {
|
---|
442 | color: white;
|
---|
443 | }
|
---|
444 |
|
---|
445 | .statsScreen > div p span {
|
---|
446 | margin-left: 5rem;
|
---|
447 | }
|
---|
448 |
|
---|
449 | .manageCreditsScreen .inlineAlert {
|
---|
450 | font-size: 1.5rem !important;
|
---|
451 | cursor: auto;
|
---|
452 | }
|
---|
453 |
|
---|
454 | .manageCreditsScreen svg {
|
---|
455 | z-index: 100;
|
---|
456 | cursor: pointer;
|
---|
457 | font-size: 2.5rem;
|
---|
458 | color: white;
|
---|
459 | }
|
---|
460 |
|
---|
461 | .manageCreditsScreen > div {
|
---|
462 | top: 0%;
|
---|
463 | -webkit-transform: translate(-50%, 0);
|
---|
464 | transform: translate(-50%, 0);
|
---|
465 | width: 100%;
|
---|
466 | }
|
---|
467 |
|
---|
468 | .manageCreditsScreen > div h2 {
|
---|
469 | font-size: 1.5rem;
|
---|
470 | margin-bottom: 1rem;
|
---|
471 | }
|
---|
472 |
|
---|
473 | .manageCreditsScreen > div p {
|
---|
474 | margin-bottom: 5rem;
|
---|
475 | color: white;
|
---|
476 | }
|
---|
477 |
|
---|
478 | .manageCreditsScreen > div button span {
|
---|
479 | color: white;
|
---|
480 | }
|
---|
481 |
|
---|
482 | .manageCreditsScreen > div > div:not(.main) {
|
---|
483 | margin-top: 5vh;
|
---|
484 | height: 15vh;
|
---|
485 | }
|
---|
486 |
|
---|
487 | .manageCreditsScreen > div > div.main {
|
---|
488 | height: 70vh;
|
---|
489 | display: -webkit-box;
|
---|
490 | display: -ms-flexbox;
|
---|
491 | display: flex;
|
---|
492 | }
|
---|
493 |
|
---|
494 | .manageCreditsScreen > div > div.main > div {
|
---|
495 | -webkit-box-flex: 1;
|
---|
496 | -ms-flex: 1;
|
---|
497 | flex: 1;
|
---|
498 | display: -webkit-box;
|
---|
499 | display: -ms-flexbox;
|
---|
500 | display: flex;
|
---|
501 | -webkit-box-orient: vertical;
|
---|
502 | -webkit-box-direction: normal;
|
---|
503 | -ms-flex-direction: column;
|
---|
504 | flex-direction: column;
|
---|
505 | -webkit-box-pack: center;
|
---|
506 | -ms-flex-pack: center;
|
---|
507 | justify-content: center;
|
---|
508 | -webkit-box-align: center;
|
---|
509 | -ms-flex-align: center;
|
---|
510 | align-items: center;
|
---|
511 | }
|
---|
512 |
|
---|
513 | .manageCreditsScreen > div > div.main > div .fs-inputs-container {
|
---|
514 | width: 40%;
|
---|
515 | }
|
---|
516 |
|
---|
517 | .manageCreditsScreen > div > div.main > div .fs-inputs-container > div {
|
---|
518 | width: 100%;
|
---|
519 | }
|
---|
520 |
|
---|
521 | .manageCreditsScreen > div > div.main > div .fs-inputs-container > div label {
|
---|
522 | color: white;
|
---|
523 | }
|
---|
524 |
|
---|
525 | .manageCreditsScreen > div > div.main > div .fs-inputs-container > div span {
|
---|
526 | color: #ead24d;
|
---|
527 | }
|
---|
528 |
|
---|
529 | .manageCreditsScreen > div > div.main > div .fs-inputs-container > div input {
|
---|
530 | font-size: 1.2rem;
|
---|
531 | width: 100%;
|
---|
532 | text-align: center;
|
---|
533 | }
|
---|
534 |
|
---|
535 | .complainScreen .inlineAlert {
|
---|
536 | cursor: auto;
|
---|
537 | }
|
---|
538 |
|
---|
539 | .complainScreen > div > div textarea {
|
---|
540 | background-color: #c3ffd2;
|
---|
541 | width: 50vw;
|
---|
542 | height: 40vh;
|
---|
543 | font-size: 2rem;
|
---|
544 | margin-top: 1rem;
|
---|
545 | margin-bottom: 3rem;
|
---|
546 | }
|
---|
547 |
|
---|
548 | .inlineAlert {
|
---|
549 | cursor: pointer;
|
---|
550 | background-color: #ffdddd;
|
---|
551 | padding: .8rem 2.4rem;
|
---|
552 | border-radius: 15px;
|
---|
553 | color: #ff0000;
|
---|
554 | font-size: 1.8rem !important;
|
---|
555 | font-weight: 100;
|
---|
556 | letter-spacing: -.030em;
|
---|
557 | }
|
---|
558 |
|
---|
559 | /**
|
---|
560 | * Component <- Loading
|
---|
561 | */
|
---|
562 | .loadingScreen h1 {
|
---|
563 | font-size: 5rem;
|
---|
564 | }
|
---|
565 |
|
---|
566 | .lostConnectionScreen > div {
|
---|
567 | text-align: center;
|
---|
568 | }
|
---|
569 |
|
---|
570 | .lostConnectionScreen h3 {
|
---|
571 | font-size: 2rem;
|
---|
572 | margin-bottom: 1rem;
|
---|
573 | }
|
---|
574 |
|
---|
575 | .lostConnectionScreen h3:nth-child(2) {
|
---|
576 | color: white;
|
---|
577 | }
|
---|
578 |
|
---|
579 | .activateScreen > div {
|
---|
580 | text-align: center;
|
---|
581 | }
|
---|
582 |
|
---|
583 | .activateScreen h3 {
|
---|
584 | font-size: 2rem;
|
---|
585 | margin-bottom: 1rem;
|
---|
586 | }
|
---|
587 |
|
---|
588 | .activateScreen h3:nth-child(1) {
|
---|
589 | color: white;
|
---|
590 | }
|
---|
591 |
|
---|
592 | .activateScreen button {
|
---|
593 | font-size: 1.8rem;
|
---|
594 | margin-top: 8rem;
|
---|
595 | }
|
---|
596 |
|
---|
597 | /**
|
---|
598 | * Component <- LoginScreen
|
---|
599 | */
|
---|
600 | .loginScreen.admin {
|
---|
601 | z-index: 50;
|
---|
602 | }
|
---|
603 |
|
---|
604 | .complaintsScreen {
|
---|
605 | z-index: 20;
|
---|
606 | }
|
---|
607 |
|
---|
608 | .complaintsScreen .complaint {
|
---|
609 | width: 100%;
|
---|
610 | padding: 2rem;
|
---|
611 | -webkit-transition: all .2s linear;
|
---|
612 | transition: all .2s linear;
|
---|
613 | -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
---|
614 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
---|
615 | }
|
---|
616 |
|
---|
617 | .complaintsScreen .complaint:hover {
|
---|
618 | -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
619 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
620 | }
|
---|
621 |
|
---|
622 | .complaintsScreen .complaint:nth-child(2n+1) {
|
---|
623 | color: white;
|
---|
624 | }
|
---|
625 |
|
---|
626 | .complaintsScreen .complaint > div:nth-child(1) {
|
---|
627 | display: -webkit-box;
|
---|
628 | display: -ms-flexbox;
|
---|
629 | display: flex;
|
---|
630 | -webkit-box-pack: justify;
|
---|
631 | -ms-flex-pack: justify;
|
---|
632 | justify-content: space-between;
|
---|
633 | -webkit-box-align: center;
|
---|
634 | -ms-flex-align: center;
|
---|
635 | align-items: center;
|
---|
636 | }
|
---|
637 |
|
---|
638 | .complaintsScreen .complaint > div:nth-child(1) > * {
|
---|
639 | -webkit-box-flex: 1;
|
---|
640 | -ms-flex: 1;
|
---|
641 | flex: 1;
|
---|
642 | }
|
---|
643 |
|
---|
644 | .complaintsScreen .complaint > div:nth-child(1) > div {
|
---|
645 | display: -webkit-box;
|
---|
646 | display: -ms-flexbox;
|
---|
647 | display: flex;
|
---|
648 | -webkit-box-pack: end;
|
---|
649 | -ms-flex-pack: end;
|
---|
650 | justify-content: flex-end;
|
---|
651 | }
|
---|
652 |
|
---|
653 | .complaintsScreen .complaint textarea {
|
---|
654 | width: 100%;
|
---|
655 | height: 7rem;
|
---|
656 | margin-top: .5rem;
|
---|
657 | font-size: 1.2rem;
|
---|
658 | padding: .4rem;
|
---|
659 | background-color: #c3ffd2;
|
---|
660 | }
|
---|
661 |
|
---|
662 | .complaintsScreen .complaint .answering {
|
---|
663 | margin-top: 1rem;
|
---|
664 | }
|
---|
665 |
|
---|
666 | .complaintsScreen .complaint .answering > div {
|
---|
667 | display: -webkit-box;
|
---|
668 | display: -ms-flexbox;
|
---|
669 | display: flex;
|
---|
670 | -webkit-box-pack: end;
|
---|
671 | -ms-flex-pack: end;
|
---|
672 | justify-content: flex-end;
|
---|
673 | margin-top: 1rem;
|
---|
674 | }
|
---|
675 |
|
---|
676 | .complaintsScreen .complaint .primaryButton, .complaintsScreen .complaint .secondaryButton {
|
---|
677 | font-size: 1rem;
|
---|
678 | }
|
---|
679 |
|
---|
680 | .liveGamesScreen {
|
---|
681 | z-index: 20;
|
---|
682 | }
|
---|
683 |
|
---|
684 | .dashboardScreen.admin .fs-inputs-container {
|
---|
685 | -webkit-transform: translate(-50%, -75%);
|
---|
686 | transform: translate(-50%, -75%);
|
---|
687 | }
|
---|
688 |
|
---|
689 | .dashboardScreen.admin .fs-inputs-container > div {
|
---|
690 | gap: 10rem;
|
---|
691 | }
|
---|
692 |
|
---|
693 | .dashboardScreen.admin .fs-inputs-container > div > div {
|
---|
694 | width: 50vw;
|
---|
695 | display: -webkit-box;
|
---|
696 | display: -ms-flexbox;
|
---|
697 | display: flex;
|
---|
698 | -ms-flex-pack: distribute;
|
---|
699 | justify-content: space-around;
|
---|
700 | }
|
---|
701 |
|
---|
702 | /**
|
---|
703 | * Primary Thingies
|
---|
704 | */
|
---|
705 | .primaryButton {
|
---|
706 | background: -webkit-gradient(linear, left top, right top, from(#0B932E), to(#097625));
|
---|
707 | background: linear-gradient(to right, #0B932E, #097625);
|
---|
708 | color: #ead24d;
|
---|
709 | outline: none;
|
---|
710 | border: none;
|
---|
711 | border-radius: 10px;
|
---|
712 | font-size: 1.5rem;
|
---|
713 | font-weight: bold;
|
---|
714 | padding: 5px 20px;
|
---|
715 | -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
716 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
717 | cursor: pointer;
|
---|
718 | -webkit-transition: all .2s linear;
|
---|
719 | transition: all .2s linear;
|
---|
720 | }
|
---|
721 |
|
---|
722 | .primaryButton:hover {
|
---|
723 | -webkit-transform: scale(1.1) rotateZ(-1deg);
|
---|
724 | transform: scale(1.1) rotateZ(-1deg);
|
---|
725 | }
|
---|
726 |
|
---|
727 | .primaryButton:active {
|
---|
728 | -webkit-transition: .05s linear;
|
---|
729 | transition: .05s linear;
|
---|
730 | -webkit-transform: scale(1) rotateZ(-1deg);
|
---|
731 | transform: scale(1) rotateZ(-1deg);
|
---|
732 | }
|
---|
733 |
|
---|
734 | .secondaryButton {
|
---|
735 | background: -webkit-gradient(linear, left top, right top, from(#4d99ea), to(#4d99ea));
|
---|
736 | background: linear-gradient(to right, #4d99ea, #4d99ea);
|
---|
737 | color: white;
|
---|
738 | outline: none;
|
---|
739 | border: none;
|
---|
740 | border-radius: 10px;
|
---|
741 | font-size: 1.5rem;
|
---|
742 | font-weight: bold;
|
---|
743 | padding: 5px 20px;
|
---|
744 | -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
745 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
746 | cursor: pointer;
|
---|
747 | -webkit-transition: all .2s linear;
|
---|
748 | transition: all .2s linear;
|
---|
749 | }
|
---|
750 |
|
---|
751 | .secondaryButton:hover {
|
---|
752 | -webkit-transform: scale(1.1) rotateZ(-1deg);
|
---|
753 | transform: scale(1.1) rotateZ(-1deg);
|
---|
754 | }
|
---|
755 |
|
---|
756 | .secondaryButton:active {
|
---|
757 | -webkit-transition: .05s linear;
|
---|
758 | transition: .05s linear;
|
---|
759 | -webkit-transform: scale(1) rotateZ(-1deg);
|
---|
760 | transform: scale(1) rotateZ(-1deg);
|
---|
761 | }
|
---|
762 |
|
---|
763 | .tertiaryButton {
|
---|
764 | background: -webkit-gradient(linear, left top, right top, from(#484848), to(#6a6a6a));
|
---|
765 | background: linear-gradient(to right, #484848, #6a6a6a);
|
---|
766 | color: white;
|
---|
767 | outline: none;
|
---|
768 | border: none;
|
---|
769 | border-radius: 10px;
|
---|
770 | font-size: 1.5rem;
|
---|
771 | font-weight: bold;
|
---|
772 | padding: 5px 20px;
|
---|
773 | -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
774 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
775 | cursor: pointer;
|
---|
776 | -webkit-transition: all .2s linear;
|
---|
777 | transition: all .2s linear;
|
---|
778 | }
|
---|
779 |
|
---|
780 | .tertiaryButton:hover {
|
---|
781 | background: -webkit-gradient(linear, left top, right top, from(#6e6e6e), to(#a0a0a0));
|
---|
782 | background: linear-gradient(to right, #6e6e6e, #a0a0a0);
|
---|
783 | }
|
---|
784 |
|
---|
785 | .tertiaryButton:active {
|
---|
786 | -webkit-transition: .05s linear;
|
---|
787 | transition: .05s linear;
|
---|
788 | background: -webkit-gradient(linear, left top, right top, from(#484848), to(#6a6a6a));
|
---|
789 | background: linear-gradient(to right, #484848, #6a6a6a);
|
---|
790 | }
|
---|
791 |
|
---|
792 | /**
|
---|
793 | * Input Sliders
|
---|
794 | */
|
---|
795 | .primarySlider {
|
---|
796 | -webkit-appearance: none;
|
---|
797 | width: 250px;
|
---|
798 | height: 10px;
|
---|
799 | background: #0B932E;
|
---|
800 | outline: none;
|
---|
801 | border-radius: 10px;
|
---|
802 | -webkit-transition: .2s;
|
---|
803 | -webkit-transition: opacity .2s;
|
---|
804 | transition: opacity .2s;
|
---|
805 | -webkit-box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
|
---|
806 | box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
|
---|
807 | }
|
---|
808 |
|
---|
809 | .primarySlider:hover {
|
---|
810 | opacity: 1;
|
---|
811 | }
|
---|
812 |
|
---|
813 | .primarySlider::-webkit-slider-thumb {
|
---|
814 | -webkit-appearance: none;
|
---|
815 | appearance: none;
|
---|
816 | outline: none;
|
---|
817 | border: none;
|
---|
818 | width: 35px;
|
---|
819 | height: 35px;
|
---|
820 | border-radius: 50%;
|
---|
821 | background: url("/images/gold-coin.png");
|
---|
822 | background-size: contain;
|
---|
823 | background-color: #ead24d;
|
---|
824 | cursor: pointer;
|
---|
825 | }
|
---|
826 |
|
---|
827 | .primarySlider::-moz-range-thumb {
|
---|
828 | -moz-appearance: none;
|
---|
829 | appearance: none;
|
---|
830 | outline: none;
|
---|
831 | border: none;
|
---|
832 | width: 35px;
|
---|
833 | height: 35px;
|
---|
834 | border-radius: 50%;
|
---|
835 | background: url("/images/gold-coin.png");
|
---|
836 | background-size: contain;
|
---|
837 | background-color: #ead24d;
|
---|
838 | cursor: pointer;
|
---|
839 | }
|
---|
840 |
|
---|
841 | /**
|
---|
842 | * Scrollbar
|
---|
843 | */
|
---|
844 | /* width */
|
---|
845 | ::-webkit-scrollbar {
|
---|
846 | width: 15px;
|
---|
847 | }
|
---|
848 |
|
---|
849 | /* Track */
|
---|
850 | ::-webkit-scrollbar-track {
|
---|
851 | background: #0B932E;
|
---|
852 | }
|
---|
853 |
|
---|
854 | /* Handle */
|
---|
855 | ::-webkit-scrollbar-thumb {
|
---|
856 | background: #ead24d;
|
---|
857 | }
|
---|
858 |
|
---|
859 | /* Handle on hover */
|
---|
860 | ::-webkit-scrollbar-thumb:hover {
|
---|
861 | background: #efcb00;
|
---|
862 | }
|
---|
863 |
|
---|
864 | /**
|
---|
865 | * File <- Blackjack Main
|
---|
866 | */
|
---|
867 | .blackjackButtons {
|
---|
868 | position: absolute;
|
---|
869 | left: 0;
|
---|
870 | top: 90vh;
|
---|
871 | width: 100vw;
|
---|
872 | height: 10vh;
|
---|
873 | overflow: hidden;
|
---|
874 | }
|
---|
875 |
|
---|
876 | .blackjackButtons > div {
|
---|
877 | display: -webkit-box;
|
---|
878 | display: -ms-flexbox;
|
---|
879 | display: flex;
|
---|
880 | -webkit-box-orient: horizontal;
|
---|
881 | -webkit-box-direction: normal;
|
---|
882 | -ms-flex-direction: row;
|
---|
883 | flex-direction: row;
|
---|
884 | -webkit-box-pack: center;
|
---|
885 | -ms-flex-pack: center;
|
---|
886 | justify-content: center;
|
---|
887 | -webkit-box-align: center;
|
---|
888 | -ms-flex-align: center;
|
---|
889 | align-items: center;
|
---|
890 | -webkit-transition: .5s ease-in-out;
|
---|
891 | transition: .5s ease-in-out;
|
---|
892 | }
|
---|
893 |
|
---|
894 | .blackjackButtons > div > button {
|
---|
895 | width: 300px;
|
---|
896 | }
|
---|
897 |
|
---|
898 | .blackjackButtons > div > button:nth-child(2) {
|
---|
899 | margin-left: 30px;
|
---|
900 | }
|
---|
901 |
|
---|
902 | .card {
|
---|
903 | aspect-ratio: 400/560;
|
---|
904 | height: 150px;
|
---|
905 | background-size: contain;
|
---|
906 | position: absolute;
|
---|
907 | -webkit-transition: .5s ease-in-out;
|
---|
908 | transition: .5s ease-in-out;
|
---|
909 | border-radius: 10px;
|
---|
910 | border: 1px solid black;
|
---|
911 | }
|
---|
912 |
|
---|
913 | .blackjackDisplayBet {
|
---|
914 | position: absolute;
|
---|
915 | -webkit-transform: translate(-50%, -50%);
|
---|
916 | transform: translate(-50%, -50%);
|
---|
917 | left: 51vw;
|
---|
918 | top: 63.5vh;
|
---|
919 | }
|
---|
920 |
|
---|
921 | .blackjackSideBetsModal {
|
---|
922 | z-index: 20;
|
---|
923 | -webkit-box-orient: vertical !important;
|
---|
924 | -webkit-box-direction: normal !important;
|
---|
925 | -ms-flex-direction: column !important;
|
---|
926 | flex-direction: column !important;
|
---|
927 | position: fixed;
|
---|
928 | left: 50vw;
|
---|
929 | top: 45vh;
|
---|
930 | width: 41vw;
|
---|
931 | height: 80vh;
|
---|
932 | padding: 10px;
|
---|
933 | -webkit-transform: translate(-50%, -50%);
|
---|
934 | transform: translate(-50%, -50%);
|
---|
935 | background: -webkit-gradient(linear, left top, right top, from(#0B932Ec0), to(#097625e0));
|
---|
936 | background: linear-gradient(to right, #0B932Ec0, #097625e0);
|
---|
937 | -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
|
---|
938 | box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
|
---|
939 | border-radius: 20px;
|
---|
940 | overflow-y: scroll;
|
---|
941 | }
|
---|
942 |
|
---|
943 | .blackjackSideBetsModal .blackjackSideBetSelect {
|
---|
944 | display: -webkit-box;
|
---|
945 | display: -ms-flexbox;
|
---|
946 | display: flex;
|
---|
947 | -webkit-box-orient: vertical;
|
---|
948 | -webkit-box-direction: normal;
|
---|
949 | -ms-flex-direction: column;
|
---|
950 | flex-direction: column;
|
---|
951 | width: 100%;
|
---|
952 | }
|
---|
953 |
|
---|
954 | .blackjackSideBetsModal .blackjackSideBetSelect:first-child {
|
---|
955 | margin-top: 10rem;
|
---|
956 | }
|
---|
957 |
|
---|
958 | .blackjackSideBetsModal .blackjackSideBetSelect h1 {
|
---|
959 | margin-bottom: 1rem;
|
---|
960 | color: #ead24d;
|
---|
961 | }
|
---|
962 |
|
---|
963 | .blackjackSideBetsModal .blackjackSideBetSelect > div {
|
---|
964 | text-align: left;
|
---|
965 | }
|
---|
966 |
|
---|
967 | .blackjackSideBetsModal .blackjackSideBetSelect > div p {
|
---|
968 | margin-bottom: 1rem;
|
---|
969 | padding: 10px 20px;
|
---|
970 | border-radius: 5px;
|
---|
971 | cursor: pointer;
|
---|
972 | -webkit-transition: all .25s linear;
|
---|
973 | transition: all .25s linear;
|
---|
974 | }
|
---|
975 |
|
---|
976 | .blackjackSideBetsModal .blackjackSideBetSelect > div p span {
|
---|
977 | font-size: 1.2rem;
|
---|
978 | color: #ead24d;
|
---|
979 | }
|
---|
980 |
|
---|
981 | .blackjackSideBetsModal .blackjackSideBetSelect > div p:hover {
|
---|
982 | color: #ead24d;
|
---|
983 | -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
984 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
985 | }
|
---|
986 |
|
---|
987 | .blackjackSideBetsChooseCreditsModal {
|
---|
988 | z-index: 20;
|
---|
989 | -webkit-box-orient: vertical !important;
|
---|
990 | -webkit-box-direction: normal !important;
|
---|
991 | -ms-flex-direction: column !important;
|
---|
992 | flex-direction: column !important;
|
---|
993 | position: fixed;
|
---|
994 | left: 50vw;
|
---|
995 | top: 45vh;
|
---|
996 | width: 41vw;
|
---|
997 | height: 80vh;
|
---|
998 | padding: 10px;
|
---|
999 | -webkit-transform: translate(-50%, -50%);
|
---|
1000 | transform: translate(-50%, -50%);
|
---|
1001 | background: -webkit-gradient(linear, left top, right top, from(#00000080), to(#00000080));
|
---|
1002 | background: linear-gradient(to right, #00000080, #00000080);
|
---|
1003 | -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
|
---|
1004 | box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
|
---|
1005 | border-radius: 20px;
|
---|
1006 | }
|
---|
1007 |
|
---|
1008 | .blackjackSideBetsChooseCreditsModal p {
|
---|
1009 | margin-bottom: 1rem;
|
---|
1010 | padding: 10px 20px;
|
---|
1011 | border-radius: 5px;
|
---|
1012 | -webkit-transition: all .25s linear;
|
---|
1013 | transition: all .25s linear;
|
---|
1014 | }
|
---|
1015 |
|
---|
1016 | .blackjackSideBetsChooseCreditsModal p span {
|
---|
1017 | font-size: 1.2rem;
|
---|
1018 | color: white;
|
---|
1019 | }
|
---|
1020 |
|
---|
1021 | /**
|
---|
1022 | * File <- Roulette Main
|
---|
1023 | */
|
---|
1024 | .rouletteMainContainer {
|
---|
1025 | background-color: #006600;
|
---|
1026 | }
|
---|
1027 |
|
---|
1028 | #rouletteBall {
|
---|
1029 | position: absolute;
|
---|
1030 | top: 87.5%;
|
---|
1031 | left: 17.5%;
|
---|
1032 | width: 1rem;
|
---|
1033 | }
|
---|
1034 |
|
---|
1035 | #rouletteBetsImg {
|
---|
1036 | position: absolute;
|
---|
1037 | top: 65%;
|
---|
1038 | left: 59%;
|
---|
1039 | -webkit-transform: translate(-50%, -50%);
|
---|
1040 | transform: translate(-50%, -50%);
|
---|
1041 | width: 50vw;
|
---|
1042 | height: auto;
|
---|
1043 | cursor: url(/gold-coin.cur), auto;
|
---|
1044 | }
|
---|
1045 |
|
---|
1046 | #rouletteWheelImg {
|
---|
1047 | position: absolute;
|
---|
1048 | top: 60%;
|
---|
1049 | left: 18%;
|
---|
1050 | -webkit-transition: all .5s ease-in-out;
|
---|
1051 | transition: all .5s ease-in-out;
|
---|
1052 | width: 450px;
|
---|
1053 | height: auto;
|
---|
1054 | }
|
---|
1055 |
|
---|
1056 | .rouletteInfoText {
|
---|
1057 | position: absolute;
|
---|
1058 | top: 15%;
|
---|
1059 | width: 100vw;
|
---|
1060 | text-align: center;
|
---|
1061 | font-size: 1.1rem;
|
---|
1062 | }
|
---|
1063 |
|
---|
1064 | .roulettePlayersContainer {
|
---|
1065 | position: absolute;
|
---|
1066 | top: 15%;
|
---|
1067 | right: 4%;
|
---|
1068 | width: 10vw;
|
---|
1069 | height: 80vh;
|
---|
1070 | -webkit-box-shadow: 0 0 10px rgba(10, 148, 45, 0.25);
|
---|
1071 | box-shadow: 0 0 10px rgba(10, 148, 45, 0.25);
|
---|
1072 | padding: 1rem;
|
---|
1073 | display: -ms-grid;
|
---|
1074 | display: grid;
|
---|
1075 | -ms-grid-rows: (minmax(0, 1fr))[2];
|
---|
1076 | grid-template-rows: repeat(2, minmax(0, 1fr));
|
---|
1077 | overflow-x: hidden;
|
---|
1078 | overflow-y: scroll;
|
---|
1079 | }
|
---|
1080 |
|
---|
1081 | .roulettePlayersContainer p {
|
---|
1082 | word-wrap: break-word;
|
---|
1083 | margin-top: .5rem;
|
---|
1084 | }
|
---|
1085 |
|
---|
1086 | .rouletteTimer {
|
---|
1087 | position: absolute;
|
---|
1088 | top: calc((60% + 450px) / 2);
|
---|
1089 | left: calc(18.5%);
|
---|
1090 | -webkit-transform: translate(-50%, -50%);
|
---|
1091 | transform: translate(-50%, -50%);
|
---|
1092 | display: -webkit-box;
|
---|
1093 | display: -ms-flexbox;
|
---|
1094 | display: flex;
|
---|
1095 | -webkit-box-orient: vertical;
|
---|
1096 | -webkit-box-direction: normal;
|
---|
1097 | -ms-flex-direction: column;
|
---|
1098 | flex-direction: column;
|
---|
1099 | -webkit-box-pack: center;
|
---|
1100 | -ms-flex-pack: center;
|
---|
1101 | justify-content: center;
|
---|
1102 | -webkit-box-align: center;
|
---|
1103 | -ms-flex-align: center;
|
---|
1104 | align-items: center;
|
---|
1105 | gap: 5px;
|
---|
1106 | font-size: 2.5rem;
|
---|
1107 | color: black;
|
---|
1108 | }
|
---|
1109 |
|
---|
1110 | .rouletteBetModal {
|
---|
1111 | z-index: 20;
|
---|
1112 | -webkit-box-orient: vertical;
|
---|
1113 | -webkit-box-direction: normal;
|
---|
1114 | -ms-flex-direction: column;
|
---|
1115 | flex-direction: column;
|
---|
1116 | -webkit-box-pack: center;
|
---|
1117 | -ms-flex-pack: center;
|
---|
1118 | justify-content: center;
|
---|
1119 | -webkit-box-align: center;
|
---|
1120 | -ms-flex-align: center;
|
---|
1121 | align-items: center;
|
---|
1122 | position: fixed;
|
---|
1123 | left: 0;
|
---|
1124 | top: 0;
|
---|
1125 | width: 100vw;
|
---|
1126 | height: 100vh;
|
---|
1127 | background: #000000c0;
|
---|
1128 | }
|
---|
1129 |
|
---|
1130 | .rouletteBetModal p {
|
---|
1131 | margin-bottom: 1rem;
|
---|
1132 | padding: 10px 20px;
|
---|
1133 | border-radius: 5px;
|
---|
1134 | -webkit-transition: all .25s linear;
|
---|
1135 | transition: all .25s linear;
|
---|
1136 | }
|
---|
1137 |
|
---|
1138 | .rouletteBetModal p span {
|
---|
1139 | font-size: 1.2rem;
|
---|
1140 | color: #ead24d;
|
---|
1141 | }
|
---|
1142 |
|
---|
1143 | .pokerRaiseModal {
|
---|
1144 | z-index: 20;
|
---|
1145 | -webkit-box-orient: vertical;
|
---|
1146 | -webkit-box-direction: normal;
|
---|
1147 | -ms-flex-direction: column;
|
---|
1148 | flex-direction: column;
|
---|
1149 | -webkit-box-pack: center;
|
---|
1150 | -ms-flex-pack: center;
|
---|
1151 | justify-content: center;
|
---|
1152 | -webkit-box-align: center;
|
---|
1153 | -ms-flex-align: center;
|
---|
1154 | align-items: center;
|
---|
1155 | position: fixed;
|
---|
1156 | left: 0;
|
---|
1157 | top: 0;
|
---|
1158 | width: 100vw;
|
---|
1159 | height: 100vh;
|
---|
1160 | background: #000000c0;
|
---|
1161 | }
|
---|
1162 |
|
---|
1163 | .pokerRaiseModal p {
|
---|
1164 | margin-bottom: 1rem;
|
---|
1165 | padding: 10px 20px;
|
---|
1166 | border-radius: 5px;
|
---|
1167 | -webkit-transition: all .25s linear;
|
---|
1168 | transition: all .25s linear;
|
---|
1169 | }
|
---|
1170 |
|
---|
1171 | .pokerRaiseModal p span {
|
---|
1172 | font-size: 1.2rem;
|
---|
1173 | color: #ead24d;
|
---|
1174 | }
|
---|
1175 |
|
---|
1176 | /**
|
---|
1177 | * Spin effect on the roulette wheel
|
---|
1178 | */
|
---|
1179 | .spin {
|
---|
1180 | -webkit-animation: spinner 4s infinite;
|
---|
1181 | animation: spinner 4s infinite;
|
---|
1182 | -webkit-animation-timing-function: ease-in-out;
|
---|
1183 | animation-timing-function: ease-in-out;
|
---|
1184 | }
|
---|
1185 |
|
---|
1186 | @-webkit-keyframes spinner {
|
---|
1187 | 0% {
|
---|
1188 | -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
|
---|
1189 | transform: translate(-50%, -50%) rotateZ(0deg);
|
---|
1190 | }
|
---|
1191 | 10% {
|
---|
1192 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
|
---|
1193 | transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
|
---|
1194 | }
|
---|
1195 | 20% {
|
---|
1196 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
|
---|
1197 | transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
|
---|
1198 | }
|
---|
1199 | 30% {
|
---|
1200 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
|
---|
1201 | transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
|
---|
1202 | }
|
---|
1203 | 40% {
|
---|
1204 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
|
---|
1205 | transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
|
---|
1206 | }
|
---|
1207 | 50% {
|
---|
1208 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
|
---|
1209 | transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
|
---|
1210 | }
|
---|
1211 | 60% {
|
---|
1212 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
|
---|
1213 | transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
|
---|
1214 | }
|
---|
1215 | 70% {
|
---|
1216 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
|
---|
1217 | transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
|
---|
1218 | }
|
---|
1219 | 80% {
|
---|
1220 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
|
---|
1221 | transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
|
---|
1222 | }
|
---|
1223 | 90% {
|
---|
1224 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
|
---|
1225 | transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
|
---|
1226 | }
|
---|
1227 | 100% {
|
---|
1228 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
|
---|
1229 | transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
|
---|
1230 | }
|
---|
1231 | }
|
---|
1232 |
|
---|
1233 | @keyframes spinner {
|
---|
1234 | 0% {
|
---|
1235 | -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
|
---|
1236 | transform: translate(-50%, -50%) rotateZ(0deg);
|
---|
1237 | }
|
---|
1238 | 10% {
|
---|
1239 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
|
---|
1240 | transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
|
---|
1241 | }
|
---|
1242 | 20% {
|
---|
1243 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
|
---|
1244 | transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
|
---|
1245 | }
|
---|
1246 | 30% {
|
---|
1247 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
|
---|
1248 | transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
|
---|
1249 | }
|
---|
1250 | 40% {
|
---|
1251 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
|
---|
1252 | transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
|
---|
1253 | }
|
---|
1254 | 50% {
|
---|
1255 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
|
---|
1256 | transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
|
---|
1257 | }
|
---|
1258 | 60% {
|
---|
1259 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
|
---|
1260 | transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
|
---|
1261 | }
|
---|
1262 | 70% {
|
---|
1263 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
|
---|
1264 | transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
|
---|
1265 | }
|
---|
1266 | 80% {
|
---|
1267 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
|
---|
1268 | transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
|
---|
1269 | }
|
---|
1270 | 90% {
|
---|
1271 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
|
---|
1272 | transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
|
---|
1273 | }
|
---|
1274 | 100% {
|
---|
1275 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
|
---|
1276 | transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
|
---|
1277 | }
|
---|
1278 | }
|
---|
1279 |
|
---|
1280 | /**
|
---|
1281 | * File <- Poker Main
|
---|
1282 | */
|
---|
1283 | .pokerMainContainer .pokerPickATableContainer {
|
---|
1284 | position: absolute;
|
---|
1285 | left: 0;
|
---|
1286 | top: 0;
|
---|
1287 | width: 100vw;
|
---|
1288 | height: 100vh;
|
---|
1289 | background-color: #111;
|
---|
1290 | display: -webkit-box;
|
---|
1291 | display: -ms-flexbox;
|
---|
1292 | display: flex;
|
---|
1293 | -webkit-box-orient: vertical;
|
---|
1294 | -webkit-box-direction: normal;
|
---|
1295 | -ms-flex-direction: column;
|
---|
1296 | flex-direction: column;
|
---|
1297 | -webkit-box-pack: center;
|
---|
1298 | -ms-flex-pack: center;
|
---|
1299 | justify-content: center;
|
---|
1300 | -webkit-box-align: center;
|
---|
1301 | -ms-flex-align: center;
|
---|
1302 | align-items: center;
|
---|
1303 | gap: 5rem;
|
---|
1304 | }
|
---|
1305 |
|
---|
1306 | .pokerMainContainer .pokerPickATableContainer .createATable > input {
|
---|
1307 | margin-bottom: 2rem;
|
---|
1308 | padding-left: 4px;
|
---|
1309 | padding-right: 4px;
|
---|
1310 | font-size: 1.5rem;
|
---|
1311 | margin-right: 1rem;
|
---|
1312 | border-radius: .5rem;
|
---|
1313 | }
|
---|
1314 |
|
---|
1315 | .pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > h3 {
|
---|
1316 | margin-bottom: 1rem;
|
---|
1317 | }
|
---|
1318 |
|
---|
1319 | .pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > div {
|
---|
1320 | display: -webkit-box;
|
---|
1321 | display: -ms-flexbox;
|
---|
1322 | display: flex;
|
---|
1323 | -webkit-box-orient: vertical;
|
---|
1324 | -webkit-box-direction: normal;
|
---|
1325 | -ms-flex-direction: column;
|
---|
1326 | flex-direction: column;
|
---|
1327 | -webkit-box-align: center;
|
---|
1328 | -ms-flex-align: center;
|
---|
1329 | align-items: center;
|
---|
1330 | gap: 2rem;
|
---|
1331 | width: 100vw;
|
---|
1332 | max-height: 45vh;
|
---|
1333 | padding-block: 2rem;
|
---|
1334 | overflow-x: hidden;
|
---|
1335 | overflow-y: scroll;
|
---|
1336 | }
|
---|
1337 |
|
---|
1338 | .pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > div > div {
|
---|
1339 | -webkit-box-shadow: 0 5px 25px #4d99eaaa;
|
---|
1340 | box-shadow: 0 5px 25px #4d99eaaa;
|
---|
1341 | width: 60vw;
|
---|
1342 | padding: 1rem 3rem;
|
---|
1343 | border-radius: .5rem;
|
---|
1344 | cursor: pointer;
|
---|
1345 | display: -ms-grid;
|
---|
1346 | display: grid;
|
---|
1347 | -ms-grid-columns: (minmax(0, 1fr))[4];
|
---|
1348 | grid-template-columns: repeat(4, minmax(0, 1fr));
|
---|
1349 | place-items: center;
|
---|
1350 | -webkit-transition: all .2s ease-out;
|
---|
1351 | transition: all .2s ease-out;
|
---|
1352 | }
|
---|
1353 |
|
---|
1354 | .pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > div > div:hover {
|
---|
1355 | -webkit-transform: scale(1.05);
|
---|
1356 | transform: scale(1.05);
|
---|
1357 | -webkit-box-shadow: 0 10px 35px #4d99eaaa;
|
---|
1358 | box-shadow: 0 10px 35px #4d99eaaa;
|
---|
1359 | }
|
---|
1360 |
|
---|
1361 | .pokerMainContainer .pokerChairsContainer .pokerChair {
|
---|
1362 | position: absolute;
|
---|
1363 | -webkit-transform: translate(-50%, -50%);
|
---|
1364 | transform: translate(-50%, -50%);
|
---|
1365 | width: 110px;
|
---|
1366 | aspect-ratio: 1;
|
---|
1367 | border-radius: 50%;
|
---|
1368 | border: 5px solid #ead24daa;
|
---|
1369 | background-color: black;
|
---|
1370 | display: -ms-grid;
|
---|
1371 | display: grid;
|
---|
1372 | place-items: center;
|
---|
1373 | font-size: .8rem;
|
---|
1374 | }
|
---|
1375 |
|
---|
1376 | .pokerMainContainer .pokerChairsContainer .pokerChair.onTurn {
|
---|
1377 | border: 5px dotted #ead24d;
|
---|
1378 | background-color: #ead24d55;
|
---|
1379 | }
|
---|
1380 |
|
---|
1381 | .pokerMainContainer .pokerChairsContainer .pokerChair.folded {
|
---|
1382 | border: 5px solid rgba(59, 59, 59, 0.667);
|
---|
1383 | background-color: rgba(59, 59, 59, 0.667);
|
---|
1384 | }
|
---|
1385 |
|
---|
1386 | .pokerMainContainer .pokerChairsContainer .pokerChair > div p {
|
---|
1387 | margin-block: 2px;
|
---|
1388 | }
|
---|
1389 |
|
---|
1390 | .pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer {
|
---|
1391 | position: relative;
|
---|
1392 | }
|
---|
1393 |
|
---|
1394 | .pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div {
|
---|
1395 | position: absolute;
|
---|
1396 | top: -2vh;
|
---|
1397 | -webkit-transform: translate(-50%, -50%);
|
---|
1398 | transform: translate(-50%, -50%);
|
---|
1399 | display: -webkit-box;
|
---|
1400 | display: -ms-flexbox;
|
---|
1401 | display: flex;
|
---|
1402 | }
|
---|
1403 |
|
---|
1404 | .pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div .card {
|
---|
1405 | height: 80px;
|
---|
1406 | margin-inline: -1rem;
|
---|
1407 | position: relative;
|
---|
1408 | }
|
---|
1409 |
|
---|
1410 | .pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div .card:first-child {
|
---|
1411 | -webkit-transform: rotateZ(-5deg);
|
---|
1412 | transform: rotateZ(-5deg);
|
---|
1413 | }
|
---|
1414 |
|
---|
1415 | .pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div .card:last-child {
|
---|
1416 | -webkit-transform: rotateZ(5deg);
|
---|
1417 | transform: rotateZ(5deg);
|
---|
1418 | }
|
---|
1419 |
|
---|
1420 | .pokerMainContainer .pokerPotContainer {
|
---|
1421 | position: absolute;
|
---|
1422 | top: 57vh;
|
---|
1423 | left: 50vw;
|
---|
1424 | -webkit-transform: translate(-50%, -50%);
|
---|
1425 | transform: translate(-50%, -50%);
|
---|
1426 | }
|
---|
1427 |
|
---|
1428 | .pokerMainContainer .pokerPlayButtonsContainer {
|
---|
1429 | position: absolute;
|
---|
1430 | top: 62vh;
|
---|
1431 | left: 50vw;
|
---|
1432 | -webkit-transform: translate(-50%, -50%);
|
---|
1433 | transform: translate(-50%, -50%);
|
---|
1434 | display: -webkit-box;
|
---|
1435 | display: -ms-flexbox;
|
---|
1436 | display: flex;
|
---|
1437 | -webkit-box-pack: center;
|
---|
1438 | -ms-flex-pack: center;
|
---|
1439 | justify-content: center;
|
---|
1440 | gap: 1rem;
|
---|
1441 | }
|
---|
1442 |
|
---|
1443 | .pokerMainContainer .pokerPlayButtonsContainer button {
|
---|
1444 | min-width: 110px;
|
---|
1445 | }
|
---|
1446 |
|
---|
1447 | .pokerMainContainer .cardsInTheMiddleContainer {
|
---|
1448 | position: absolute;
|
---|
1449 | top: 45vh;
|
---|
1450 | left: 50vw;
|
---|
1451 | -webkit-transform: translate(-50%, -50%);
|
---|
1452 | transform: translate(-50%, -50%);
|
---|
1453 | display: -webkit-box;
|
---|
1454 | display: -ms-flexbox;
|
---|
1455 | display: flex;
|
---|
1456 | -webkit-box-pack: center;
|
---|
1457 | -ms-flex-pack: center;
|
---|
1458 | justify-content: center;
|
---|
1459 | }
|
---|
1460 |
|
---|
1461 | .pokerMainContainer .cardsInTheMiddleContainer .card {
|
---|
1462 | height: 130px;
|
---|
1463 | position: relative;
|
---|
1464 | margin-inline: 2px;
|
---|
1465 | }
|
---|
1466 |
|
---|
1467 | .pokerMainContainer .pokerMessagesContainer {
|
---|
1468 | position: absolute;
|
---|
1469 | top: 5vh;
|
---|
1470 | left: 50vw;
|
---|
1471 | -webkit-transform: translateX(-50%);
|
---|
1472 | transform: translateX(-50%);
|
---|
1473 | }
|
---|
1474 |
|
---|
1475 | .pokerMainContainer .pokerMessagesContainer > p:first-child {
|
---|
1476 | font-style: italic;
|
---|
1477 | color: #c1fbaa;
|
---|
1478 | }
|
---|
1479 |
|
---|
1480 | .pokerMainContainer .pokerMessagesContainer > p:not(:first-child):not(:last-child) {
|
---|
1481 | font-size: 1.2rem;
|
---|
1482 | margin-top: 1rem;
|
---|
1483 | }
|
---|
1484 |
|
---|
1485 | .pokerMainContainer .pokerMessagesContainer > p:last-child {
|
---|
1486 | margin-top: .5rem;
|
---|
1487 | color: #ccc;
|
---|
1488 | }
|
---|
1489 | /*# sourceMappingURL=globals.css.map */ |
---|