source: styles/globals.css@ faff334

main
Last change on this file since faff334 was faff334, checked in by anastasovv <simon@…>, 2 years ago

Ability for admin to watch live games and for user to see games history
  • Property mode set to 100644
File size: 38.1 KB
RevLine 
[87614a5]1@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap);
[6568bde]2html,
3body {
4 padding: 0;
5 margin: 0;
[87614a5]6 font-family: 'Inter', sans-serif;
[ace7865]7 overflow: hidden;
[6568bde]8}
9
10a {
11 color: inherit;
12 text-decoration: none;
13}
14
15* {
[87614a5]16 -webkit-box-sizing: border-box;
17 box-sizing: border-box;
[6568bde]18}
[87614a5]19
20p, 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 */
40header.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;
[b13f93b]53 position: relative;
54 z-index: 5;
[87614a5]55}
56
57header.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
67header.header h2 {
68 cursor: pointer;
69}
70
71header.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
82header.header nav ul li {
83 margin-right: 4rem;
84}
85
86header.header nav ul li:last-child {
87 margin-right: 0;
88}
89
[64dc53b]90header.header nav.mainHeaderNavigation ul li {
91 cursor: pointer;
92}
93
[87614a5]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 {
[ace7865]136 z-index: 30;
[87614a5]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 {
[b13f93b]182 z-index: 30;
[87614a5]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;
[b13f93b]346 z-index: 10;
[87614a5]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
[e903234]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
[87614a5]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;
[64dc53b]414 padding-left: 4px;
415 padding-right: 4px;
[87614a5]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
[433e0c5]449.manageCreditsScreen .inlineAlert {
450 font-size: 1.5rem !important;
451 cursor: auto;
452}
453
[87614a5]454.manageCreditsScreen svg {
[433e0c5]455 z-index: 100;
[87614a5]456 cursor: pointer;
457 font-size: 2.5rem;
458 color: white;
459}
460
[433e0c5]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 {
[87614a5]469 font-size: 1.5rem;
470 margin-bottom: 1rem;
471}
472
473.manageCreditsScreen > div p {
474 margin-bottom: 5rem;
475 color: white;
476}
477
[433e0c5]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;
[87614a5]531 width: 100%;
[433e0c5]532 text-align: center;
533}
534
535.complainScreen .inlineAlert {
536 cursor: auto;
537}
538
539.complainScreen > div > div textarea {
[e007fcd]540 background-color: #c3ffd2;
[433e0c5]541 width: 50vw;
542 height: 40vh;
543 font-size: 2rem;
544 margin-top: 1rem;
545 margin-bottom: 3rem;
[87614a5]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
[e007fcd]566.lostConnectionScreen > div {
567 text-align: center;
568}
569
[433e0c5]570.lostConnectionScreen h3 {
571 font-size: 2rem;
572 margin-bottom: 1rem;
573}
574
575.lostConnectionScreen h3:nth-child(2) {
576 color: white;
577}
578
[e007fcd]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
[87614a5]597/**
[e903234]598 * Component <- LoginScreen
[87614a5]599 */
[e903234]600.loginScreen.admin {
601 z-index: 50;
602}
603
[faff334]604.liveGamesMegaContainer {
605 margin-top: 3rem;
606 display: -webkit-box;
607 display: -ms-flexbox;
608 display: flex;
609 -webkit-box-orient: vertical;
610 -webkit-box-direction: normal;
611 -ms-flex-direction: column;
612 flex-direction: column;
613 gap: 8rem;
614}
615
616.liveGamesMegaContainer .liveGamesContainer {
617 display: -webkit-box;
618 display: -ms-flexbox;
619 display: flex;
620 -webkit-box-orient: vertical;
621 -webkit-box-direction: normal;
622 -ms-flex-direction: column;
623 flex-direction: column;
624 -webkit-box-align: start;
625 -ms-flex-align: start;
626 align-items: flex-start;
627 gap: 2rem;
628}
629
630.liveGamesMegaContainer .liveGamesContainer h3 {
631 color: white;
632}
633
634.liveGamesMegaContainer .liveGamesContainer > div {
635 width: 100%;
636 padding: 2rem;
637 -webkit-transition: all .2s linear;
638 transition: all .2s linear;
639 -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
640 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
641}
642
643.liveGamesMegaContainer .liveGamesContainer > div:hover {
644 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
645 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
646}
647
648.liveGamesMegaContainer .liveGamesContainer > div h6 {
649 margin-inline: 0;
650 margin-block: .5rem;
651 color: #ead24d;
652 font-weight: normal;
653 font-size: 1.2rem;
654 text-align: center;
655}
656
657.liveGamesMegaContainer .liveGamesContainer > div h6 span {
658 color: white;
659}
660
661.liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame {
662 display: -webkit-box;
663 display: -ms-flexbox;
664 display: flex;
665}
666
667.liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div {
668 -webkit-box-flex: 1;
669 -ms-flex: 1;
670 flex: 1;
671 display: -webkit-box;
672 display: -ms-flexbox;
673 display: flex;
674 -webkit-box-orient: vertical;
675 -webkit-box-direction: normal;
676 -ms-flex-direction: column;
677 flex-direction: column;
678}
679
680.liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div:nth-child(1) {
681 -webkit-box-align: start;
682 -ms-flex-align: start;
683 align-items: flex-start;
684}
685
686.liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div:nth-child(2) {
687 -webkit-box-align: center;
688 -ms-flex-align: center;
689 align-items: center;
690}
691
692.liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div:nth-child(2) > div {
693 -webkit-box-orient: vertical;
694 -webkit-box-direction: normal;
695 -ms-flex-direction: column;
696 flex-direction: column;
697 -webkit-box-pack: center;
698 -ms-flex-pack: center;
699 justify-content: center;
700}
701
702.liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div:nth-child(3) {
703 -webkit-box-align: end;
704 -ms-flex-align: end;
705 align-items: flex-end;
706}
707
708.liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div:nth-child(3) h5 {
709 margin-inline: 4rem;
710}
711
712.liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div p {
713 margin-top: 1rem;
714 font-size: 1.5rem;
715}
716
717.liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div h5 {
718 font-size: 5rem;
719 font-weight: 100;
720 font-style: italic;
721 margin-inline: 3rem;
722 margin-block: 0;
723 display: -webkit-box;
724 display: -ms-flexbox;
725 display: flex;
726 -webkit-box-align: center;
727 -ms-flex-align: center;
728 align-items: center;
729}
730
731.liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div > div {
732 display: -webkit-box;
733 display: -ms-flexbox;
734 display: flex;
735 margin-inline: 2.5rem;
736}
737
738.liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div > div .card {
739 margin-inline: -2.5rem;
740 position: relative;
741}
742
743.liveGamesMegaContainer .liveGamesContainer > div .cardsOnTable, .liveGamesMegaContainer .liveGamesContainer > div .cards {
744 display: -webkit-box;
745 display: -ms-flexbox;
746 display: flex;
747 margin-inline: 2.5rem;
748}
749
750.liveGamesMegaContainer .liveGamesContainer > div .cardsOnTable .card, .liveGamesMegaContainer .liveGamesContainer > div .cards .card {
751 margin-inline: -2.5rem;
752 position: relative;
753}
754
755.liveGamesMegaContainer .liveGamesContainer > div .cardsOnTable {
756 display: -webkit-box;
757 display: -ms-flexbox;
758 display: flex;
759 -webkit-box-pack: center;
760 -ms-flex-pack: center;
761 justify-content: center;
762}
763
764.liveGamesMegaContainer .liveGamesContainer > div .cards .card {
765 margin-inline: -1.6rem;
766 height: 100px;
767}
768
769.liveGamesMegaContainer .liveGamesContainer > div .playerInLiveRouletteGame, .liveGamesMegaContainer .liveGamesContainer > div .playerInLivePokerGame {
770 display: -webkit-box;
771 display: -ms-flexbox;
772 display: flex;
773 -webkit-box-align: center;
774 -ms-flex-align: center;
775 align-items: center;
776}
777
778.liveGamesMegaContainer .liveGamesContainer > div .playerInLiveRouletteGame > div, .liveGamesMegaContainer .liveGamesContainer > div .playerInLivePokerGame > div {
779 -webkit-box-flex: 1;
780 -ms-flex: 1;
781 flex: 1;
782}
783
784.liveGamesMegaContainer .liveGamesContainer > div .playerInLivePokerGame {
785 margin-block: .8rem;
786}
787
[e903234]788.complaintsScreen {
789 z-index: 20;
790}
791
792.complaintsScreen .complaint {
793 width: 100%;
794 padding: 2rem;
795 -webkit-transition: all .2s linear;
796 transition: all .2s linear;
797 -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
798 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
799}
800
801.complaintsScreen .complaint:hover {
802 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
803 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
804}
805
806.complaintsScreen .complaint:nth-child(2n+1) {
807 color: white;
808}
809
810.complaintsScreen .complaint > div:nth-child(1) {
811 display: -webkit-box;
812 display: -ms-flexbox;
813 display: flex;
814 -webkit-box-pack: justify;
815 -ms-flex-pack: justify;
816 justify-content: space-between;
817 -webkit-box-align: center;
818 -ms-flex-align: center;
819 align-items: center;
820}
821
822.complaintsScreen .complaint > div:nth-child(1) > * {
823 -webkit-box-flex: 1;
824 -ms-flex: 1;
825 flex: 1;
826}
827
828.complaintsScreen .complaint > div:nth-child(1) > div {
829 display: -webkit-box;
830 display: -ms-flexbox;
831 display: flex;
832 -webkit-box-pack: end;
833 -ms-flex-pack: end;
834 justify-content: flex-end;
835}
836
837.complaintsScreen .complaint textarea {
838 width: 100%;
839 height: 7rem;
840 margin-top: .5rem;
841 font-size: 1.2rem;
842 padding: .4rem;
843 background-color: #c3ffd2;
844}
845
846.complaintsScreen .complaint .answering {
847 margin-top: 1rem;
848}
849
850.complaintsScreen .complaint .answering > div {
851 display: -webkit-box;
852 display: -ms-flexbox;
853 display: flex;
854 -webkit-box-pack: end;
855 -ms-flex-pack: end;
856 justify-content: flex-end;
857 margin-top: 1rem;
858}
859
860.complaintsScreen .complaint .primaryButton, .complaintsScreen .complaint .secondaryButton {
861 font-size: 1rem;
862}
863
864.liveGamesScreen {
865 z-index: 20;
866}
867
868.dashboardScreen.admin .fs-inputs-container {
869 -webkit-transform: translate(-50%, -75%);
870 transform: translate(-50%, -75%);
871}
872
873.dashboardScreen.admin .fs-inputs-container > div {
874 gap: 10rem;
875}
876
877.dashboardScreen.admin .fs-inputs-container > div > div {
878 width: 50vw;
879 display: -webkit-box;
880 display: -ms-flexbox;
881 display: flex;
882 -ms-flex-pack: distribute;
883 justify-content: space-around;
884}
885
[87614a5]886/**
887 * Primary Thingies
888 */
889.primaryButton {
890 background: -webkit-gradient(linear, left top, right top, from(#0B932E), to(#097625));
891 background: linear-gradient(to right, #0B932E, #097625);
892 color: #ead24d;
893 outline: none;
894 border: none;
895 border-radius: 10px;
896 font-size: 1.5rem;
897 font-weight: bold;
898 padding: 5px 20px;
899 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
900 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
901 cursor: pointer;
902 -webkit-transition: all .2s linear;
903 transition: all .2s linear;
904}
905
906.primaryButton:hover {
907 -webkit-transform: scale(1.1) rotateZ(-1deg);
908 transform: scale(1.1) rotateZ(-1deg);
909}
910
911.primaryButton:active {
912 -webkit-transition: .05s linear;
913 transition: .05s linear;
914 -webkit-transform: scale(1) rotateZ(-1deg);
915 transform: scale(1) rotateZ(-1deg);
916}
917
918.secondaryButton {
919 background: -webkit-gradient(linear, left top, right top, from(#4d99ea), to(#4d99ea));
920 background: linear-gradient(to right, #4d99ea, #4d99ea);
921 color: white;
922 outline: none;
923 border: none;
924 border-radius: 10px;
925 font-size: 1.5rem;
926 font-weight: bold;
927 padding: 5px 20px;
928 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
929 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
930 cursor: pointer;
931 -webkit-transition: all .2s linear;
932 transition: all .2s linear;
933}
934
935.secondaryButton:hover {
936 -webkit-transform: scale(1.1) rotateZ(-1deg);
937 transform: scale(1.1) rotateZ(-1deg);
938}
939
940.secondaryButton:active {
941 -webkit-transition: .05s linear;
942 transition: .05s linear;
943 -webkit-transform: scale(1) rotateZ(-1deg);
944 transform: scale(1) rotateZ(-1deg);
945}
946
[9bd09b0]947.tertiaryButton {
948 background: -webkit-gradient(linear, left top, right top, from(#484848), to(#6a6a6a));
949 background: linear-gradient(to right, #484848, #6a6a6a);
950 color: white;
951 outline: none;
952 border: none;
953 border-radius: 10px;
954 font-size: 1.5rem;
955 font-weight: bold;
956 padding: 5px 20px;
957 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
958 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
959 cursor: pointer;
960 -webkit-transition: all .2s linear;
961 transition: all .2s linear;
962}
963
964.tertiaryButton:hover {
965 background: -webkit-gradient(linear, left top, right top, from(#6e6e6e), to(#a0a0a0));
966 background: linear-gradient(to right, #6e6e6e, #a0a0a0);
967}
968
969.tertiaryButton:active {
970 -webkit-transition: .05s linear;
971 transition: .05s linear;
972 background: -webkit-gradient(linear, left top, right top, from(#484848), to(#6a6a6a));
973 background: linear-gradient(to right, #484848, #6a6a6a);
974}
975
[87614a5]976/**
977 * Input Sliders
978 */
979.primarySlider {
980 -webkit-appearance: none;
981 width: 250px;
982 height: 10px;
983 background: #0B932E;
984 outline: none;
985 border-radius: 10px;
986 -webkit-transition: .2s;
987 -webkit-transition: opacity .2s;
988 transition: opacity .2s;
989 -webkit-box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
990 box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
991}
992
993.primarySlider:hover {
994 opacity: 1;
995}
996
997.primarySlider::-webkit-slider-thumb {
998 -webkit-appearance: none;
999 appearance: none;
1000 outline: none;
1001 border: none;
1002 width: 35px;
1003 height: 35px;
1004 border-radius: 50%;
1005 background: url("/images/gold-coin.png");
1006 background-size: contain;
1007 background-color: #ead24d;
1008 cursor: pointer;
1009}
1010
1011.primarySlider::-moz-range-thumb {
1012 -moz-appearance: none;
1013 appearance: none;
1014 outline: none;
1015 border: none;
1016 width: 35px;
1017 height: 35px;
1018 border-radius: 50%;
1019 background: url("/images/gold-coin.png");
1020 background-size: contain;
1021 background-color: #ead24d;
1022 cursor: pointer;
1023}
1024
1025/**
1026 * Scrollbar
1027 */
1028/* width */
1029::-webkit-scrollbar {
1030 width: 15px;
1031}
1032
1033/* Track */
1034::-webkit-scrollbar-track {
1035 background: #0B932E;
1036}
1037
1038/* Handle */
1039::-webkit-scrollbar-thumb {
1040 background: #ead24d;
1041}
1042
1043/* Handle on hover */
1044::-webkit-scrollbar-thumb:hover {
1045 background: #efcb00;
1046}
1047
1048/**
1049 * File <- Blackjack Main
1050 */
1051.blackjackButtons {
1052 position: absolute;
1053 left: 0;
1054 top: 90vh;
1055 width: 100vw;
1056 height: 10vh;
1057 overflow: hidden;
1058}
1059
1060.blackjackButtons > div {
1061 display: -webkit-box;
1062 display: -ms-flexbox;
1063 display: flex;
1064 -webkit-box-orient: horizontal;
1065 -webkit-box-direction: normal;
1066 -ms-flex-direction: row;
1067 flex-direction: row;
1068 -webkit-box-pack: center;
1069 -ms-flex-pack: center;
1070 justify-content: center;
1071 -webkit-box-align: center;
1072 -ms-flex-align: center;
1073 align-items: center;
1074 -webkit-transition: .5s ease-in-out;
1075 transition: .5s ease-in-out;
1076}
1077
1078.blackjackButtons > div > button {
1079 width: 300px;
1080}
1081
1082.blackjackButtons > div > button:nth-child(2) {
1083 margin-left: 30px;
1084}
1085
[b13f93b]1086.card {
[87614a5]1087 aspect-ratio: 400/560;
1088 height: 150px;
1089 background-size: contain;
1090 position: absolute;
1091 -webkit-transition: .5s ease-in-out;
1092 transition: .5s ease-in-out;
1093 border-radius: 10px;
1094 border: 1px solid black;
1095}
1096
1097.blackjackDisplayBet {
1098 position: absolute;
1099 -webkit-transform: translate(-50%, -50%);
1100 transform: translate(-50%, -50%);
1101 left: 51vw;
1102 top: 63.5vh;
1103}
1104
1105.blackjackSideBetsModal {
1106 z-index: 20;
1107 -webkit-box-orient: vertical !important;
1108 -webkit-box-direction: normal !important;
1109 -ms-flex-direction: column !important;
1110 flex-direction: column !important;
1111 position: fixed;
1112 left: 50vw;
1113 top: 45vh;
1114 width: 41vw;
1115 height: 80vh;
1116 padding: 10px;
1117 -webkit-transform: translate(-50%, -50%);
1118 transform: translate(-50%, -50%);
1119 background: -webkit-gradient(linear, left top, right top, from(#0B932Ec0), to(#097625e0));
1120 background: linear-gradient(to right, #0B932Ec0, #097625e0);
1121 -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
1122 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
1123 border-radius: 20px;
1124 overflow-y: scroll;
1125}
1126
1127.blackjackSideBetsModal .blackjackSideBetSelect {
1128 display: -webkit-box;
1129 display: -ms-flexbox;
1130 display: flex;
1131 -webkit-box-orient: vertical;
1132 -webkit-box-direction: normal;
1133 -ms-flex-direction: column;
1134 flex-direction: column;
1135 width: 100%;
1136}
1137
1138.blackjackSideBetsModal .blackjackSideBetSelect:first-child {
1139 margin-top: 10rem;
1140}
1141
1142.blackjackSideBetsModal .blackjackSideBetSelect h1 {
1143 margin-bottom: 1rem;
1144 color: #ead24d;
1145}
1146
1147.blackjackSideBetsModal .blackjackSideBetSelect > div {
1148 text-align: left;
1149}
1150
1151.blackjackSideBetsModal .blackjackSideBetSelect > div p {
1152 margin-bottom: 1rem;
1153 padding: 10px 20px;
1154 border-radius: 5px;
1155 cursor: pointer;
1156 -webkit-transition: all .25s linear;
1157 transition: all .25s linear;
1158}
1159
1160.blackjackSideBetsModal .blackjackSideBetSelect > div p span {
1161 font-size: 1.2rem;
1162 color: #ead24d;
1163}
1164
1165.blackjackSideBetsModal .blackjackSideBetSelect > div p:hover {
1166 color: #ead24d;
1167 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
1168 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
1169}
1170
1171.blackjackSideBetsChooseCreditsModal {
1172 z-index: 20;
1173 -webkit-box-orient: vertical !important;
1174 -webkit-box-direction: normal !important;
1175 -ms-flex-direction: column !important;
1176 flex-direction: column !important;
1177 position: fixed;
1178 left: 50vw;
1179 top: 45vh;
1180 width: 41vw;
1181 height: 80vh;
1182 padding: 10px;
1183 -webkit-transform: translate(-50%, -50%);
1184 transform: translate(-50%, -50%);
1185 background: -webkit-gradient(linear, left top, right top, from(#00000080), to(#00000080));
1186 background: linear-gradient(to right, #00000080, #00000080);
1187 -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
1188 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
1189 border-radius: 20px;
1190}
1191
1192.blackjackSideBetsChooseCreditsModal p {
1193 margin-bottom: 1rem;
1194 padding: 10px 20px;
1195 border-radius: 5px;
1196 -webkit-transition: all .25s linear;
1197 transition: all .25s linear;
1198}
1199
1200.blackjackSideBetsChooseCreditsModal p span {
1201 font-size: 1.2rem;
1202 color: white;
1203}
[9bd09b0]1204
1205/**
1206 * File <- Roulette Main
1207 */
1208.rouletteMainContainer {
1209 background-color: #006600;
1210}
1211
[3a783f2]1212#rouletteBall {
1213 position: absolute;
1214 top: 87.5%;
1215 left: 17.5%;
1216 width: 1rem;
1217}
1218
[9bd09b0]1219#rouletteBetsImg {
1220 position: absolute;
1221 top: 65%;
1222 left: 59%;
1223 -webkit-transform: translate(-50%, -50%);
1224 transform: translate(-50%, -50%);
1225 width: 50vw;
1226 height: auto;
1227 cursor: url(/gold-coin.cur), auto;
1228}
1229
1230#rouletteWheelImg {
1231 position: absolute;
1232 top: 60%;
1233 left: 18%;
[ace7865]1234 -webkit-transition: all .5s ease-in-out;
1235 transition: all .5s ease-in-out;
[9bd09b0]1236 width: 450px;
1237 height: auto;
1238}
1239
1240.rouletteInfoText {
1241 position: absolute;
1242 top: 15%;
1243 width: 100vw;
1244 text-align: center;
1245 font-size: 1.1rem;
1246}
1247
1248.roulettePlayersContainer {
1249 position: absolute;
1250 top: 15%;
1251 right: 4%;
1252 width: 10vw;
1253 height: 80vh;
1254 -webkit-box-shadow: 0 0 10px rgba(10, 148, 45, 0.25);
1255 box-shadow: 0 0 10px rgba(10, 148, 45, 0.25);
1256 padding: 1rem;
1257 display: -ms-grid;
1258 display: grid;
1259 -ms-grid-rows: (minmax(0, 1fr))[2];
1260 grid-template-rows: repeat(2, minmax(0, 1fr));
1261 overflow-x: hidden;
1262 overflow-y: scroll;
1263}
1264
1265.roulettePlayersContainer p {
1266 word-wrap: break-word;
1267 margin-top: .5rem;
1268}
1269
1270.rouletteTimer {
1271 position: absolute;
1272 top: calc((60% + 450px) / 2);
1273 left: calc(18.5%);
1274 -webkit-transform: translate(-50%, -50%);
1275 transform: translate(-50%, -50%);
[ace7865]1276 display: -webkit-box;
1277 display: -ms-flexbox;
1278 display: flex;
1279 -webkit-box-orient: vertical;
1280 -webkit-box-direction: normal;
1281 -ms-flex-direction: column;
1282 flex-direction: column;
1283 -webkit-box-pack: center;
1284 -ms-flex-pack: center;
1285 justify-content: center;
1286 -webkit-box-align: center;
1287 -ms-flex-align: center;
1288 align-items: center;
1289 gap: 5px;
[9bd09b0]1290 font-size: 2.5rem;
1291 color: black;
1292}
1293
1294.rouletteBetModal {
1295 z-index: 20;
1296 -webkit-box-orient: vertical;
1297 -webkit-box-direction: normal;
1298 -ms-flex-direction: column;
1299 flex-direction: column;
1300 -webkit-box-pack: center;
1301 -ms-flex-pack: center;
1302 justify-content: center;
1303 -webkit-box-align: center;
1304 -ms-flex-align: center;
1305 align-items: center;
1306 position: fixed;
1307 left: 0;
1308 top: 0;
1309 width: 100vw;
1310 height: 100vh;
1311 background: #000000c0;
1312}
1313
1314.rouletteBetModal p {
1315 margin-bottom: 1rem;
1316 padding: 10px 20px;
1317 border-radius: 5px;
1318 -webkit-transition: all .25s linear;
1319 transition: all .25s linear;
1320}
1321
1322.rouletteBetModal p span {
1323 font-size: 1.2rem;
1324 color: #ead24d;
1325}
1326
[3a783f2]1327.pokerRaiseModal {
1328 z-index: 20;
1329 -webkit-box-orient: vertical;
1330 -webkit-box-direction: normal;
1331 -ms-flex-direction: column;
1332 flex-direction: column;
1333 -webkit-box-pack: center;
1334 -ms-flex-pack: center;
1335 justify-content: center;
1336 -webkit-box-align: center;
1337 -ms-flex-align: center;
1338 align-items: center;
1339 position: fixed;
1340 left: 0;
1341 top: 0;
1342 width: 100vw;
1343 height: 100vh;
1344 background: #000000c0;
1345}
1346
1347.pokerRaiseModal p {
1348 margin-bottom: 1rem;
1349 padding: 10px 20px;
1350 border-radius: 5px;
1351 -webkit-transition: all .25s linear;
1352 transition: all .25s linear;
1353}
1354
1355.pokerRaiseModal p span {
1356 font-size: 1.2rem;
1357 color: #ead24d;
1358}
1359
[ace7865]1360/**
1361 * Spin effect on the roulette wheel
1362 */
1363.spin {
1364 -webkit-animation: spinner 4s infinite;
1365 animation: spinner 4s infinite;
1366 -webkit-animation-timing-function: ease-in-out;
1367 animation-timing-function: ease-in-out;
1368}
1369
1370@-webkit-keyframes spinner {
1371 0% {
1372 -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
1373 transform: translate(-50%, -50%) rotateZ(0deg);
1374 }
1375 10% {
1376 -webkit-transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
1377 transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
1378 }
1379 20% {
1380 -webkit-transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
1381 transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
1382 }
1383 30% {
1384 -webkit-transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
1385 transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
1386 }
1387 40% {
1388 -webkit-transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
1389 transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
1390 }
1391 50% {
1392 -webkit-transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
1393 transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
1394 }
1395 60% {
1396 -webkit-transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
1397 transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
1398 }
1399 70% {
1400 -webkit-transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
1401 transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
1402 }
1403 80% {
1404 -webkit-transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
1405 transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
1406 }
1407 90% {
1408 -webkit-transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
1409 transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
1410 }
1411 100% {
1412 -webkit-transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
1413 transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
1414 }
1415}
1416
1417@keyframes spinner {
1418 0% {
1419 -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
1420 transform: translate(-50%, -50%) rotateZ(0deg);
1421 }
1422 10% {
1423 -webkit-transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
1424 transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
1425 }
1426 20% {
1427 -webkit-transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
1428 transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
1429 }
1430 30% {
1431 -webkit-transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
1432 transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
1433 }
1434 40% {
1435 -webkit-transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
1436 transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
1437 }
1438 50% {
1439 -webkit-transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
1440 transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
1441 }
1442 60% {
1443 -webkit-transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
1444 transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
1445 }
1446 70% {
1447 -webkit-transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
1448 transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
1449 }
1450 80% {
1451 -webkit-transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
1452 transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
1453 }
1454 90% {
1455 -webkit-transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
1456 transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
1457 }
1458 100% {
1459 -webkit-transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
1460 transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
1461 }
1462}
1463
[9bd09b0]1464/**
1465 * File <- Poker Main
1466 */
[b13f93b]1467.pokerMainContainer .pokerPickATableContainer {
1468 position: absolute;
1469 left: 0;
1470 top: 0;
1471 width: 100vw;
1472 height: 100vh;
1473 background-color: #111;
1474 display: -webkit-box;
1475 display: -ms-flexbox;
1476 display: flex;
1477 -webkit-box-orient: vertical;
1478 -webkit-box-direction: normal;
1479 -ms-flex-direction: column;
1480 flex-direction: column;
1481 -webkit-box-pack: center;
1482 -ms-flex-pack: center;
1483 justify-content: center;
1484 -webkit-box-align: center;
1485 -ms-flex-align: center;
1486 align-items: center;
1487 gap: 5rem;
1488}
1489
1490.pokerMainContainer .pokerPickATableContainer .createATable > input {
1491 margin-bottom: 2rem;
1492 padding-left: 4px;
1493 padding-right: 4px;
1494 font-size: 1.5rem;
1495 margin-right: 1rem;
1496 border-radius: .5rem;
1497}
1498
1499.pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > h3 {
1500 margin-bottom: 1rem;
1501}
1502
1503.pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > div {
1504 display: -webkit-box;
1505 display: -ms-flexbox;
1506 display: flex;
1507 -webkit-box-orient: vertical;
1508 -webkit-box-direction: normal;
1509 -ms-flex-direction: column;
1510 flex-direction: column;
1511 -webkit-box-align: center;
1512 -ms-flex-align: center;
1513 align-items: center;
1514 gap: 2rem;
1515 width: 100vw;
1516 max-height: 45vh;
1517 padding-block: 2rem;
1518 overflow-x: hidden;
1519 overflow-y: scroll;
1520}
1521
1522.pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > div > div {
1523 -webkit-box-shadow: 0 5px 25px #4d99eaaa;
1524 box-shadow: 0 5px 25px #4d99eaaa;
1525 width: 60vw;
1526 padding: 1rem 3rem;
1527 border-radius: .5rem;
1528 cursor: pointer;
1529 display: -ms-grid;
1530 display: grid;
1531 -ms-grid-columns: (minmax(0, 1fr))[4];
1532 grid-template-columns: repeat(4, minmax(0, 1fr));
1533 place-items: center;
1534 -webkit-transition: all .2s ease-out;
1535 transition: all .2s ease-out;
1536}
1537
1538.pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > div > div:hover {
1539 -webkit-transform: scale(1.05);
1540 transform: scale(1.05);
1541 -webkit-box-shadow: 0 10px 35px #4d99eaaa;
1542 box-shadow: 0 10px 35px #4d99eaaa;
1543}
1544
1545.pokerMainContainer .pokerChairsContainer .pokerChair {
1546 position: absolute;
1547 -webkit-transform: translate(-50%, -50%);
1548 transform: translate(-50%, -50%);
1549 width: 110px;
1550 aspect-ratio: 1;
1551 border-radius: 50%;
1552 border: 5px solid #ead24daa;
1553 background-color: black;
1554 display: -ms-grid;
1555 display: grid;
1556 place-items: center;
1557 font-size: .8rem;
1558}
1559
[3a783f2]1560.pokerMainContainer .pokerChairsContainer .pokerChair.onTurn {
1561 border: 5px dotted #ead24d;
1562 background-color: #ead24d55;
1563}
1564
1565.pokerMainContainer .pokerChairsContainer .pokerChair.folded {
1566 border: 5px solid rgba(59, 59, 59, 0.667);
1567 background-color: rgba(59, 59, 59, 0.667);
1568}
1569
[b13f93b]1570.pokerMainContainer .pokerChairsContainer .pokerChair > div p {
1571 margin-block: 2px;
1572}
1573
1574.pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer {
1575 position: relative;
1576}
1577
1578.pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div {
1579 position: absolute;
1580 top: -2vh;
1581 -webkit-transform: translate(-50%, -50%);
1582 transform: translate(-50%, -50%);
1583 display: -webkit-box;
1584 display: -ms-flexbox;
1585 display: flex;
1586}
1587
1588.pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div .card {
1589 height: 80px;
1590 margin-inline: -1rem;
1591 position: relative;
1592}
1593
1594.pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div .card:first-child {
1595 -webkit-transform: rotateZ(-5deg);
1596 transform: rotateZ(-5deg);
1597}
1598
1599.pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div .card:last-child {
1600 -webkit-transform: rotateZ(5deg);
1601 transform: rotateZ(5deg);
1602}
1603
[3a783f2]1604.pokerMainContainer .pokerPotContainer {
1605 position: absolute;
1606 top: 57vh;
1607 left: 50vw;
1608 -webkit-transform: translate(-50%, -50%);
1609 transform: translate(-50%, -50%);
1610}
1611
[b13f93b]1612.pokerMainContainer .pokerPlayButtonsContainer {
1613 position: absolute;
[3a783f2]1614 top: 62vh;
[b13f93b]1615 left: 50vw;
1616 -webkit-transform: translate(-50%, -50%);
1617 transform: translate(-50%, -50%);
1618 display: -webkit-box;
1619 display: -ms-flexbox;
1620 display: flex;
1621 -webkit-box-pack: center;
1622 -ms-flex-pack: center;
1623 justify-content: center;
1624 gap: 1rem;
1625}
1626
1627.pokerMainContainer .pokerPlayButtonsContainer button {
1628 min-width: 110px;
1629}
1630
1631.pokerMainContainer .cardsInTheMiddleContainer {
1632 position: absolute;
1633 top: 45vh;
1634 left: 50vw;
1635 -webkit-transform: translate(-50%, -50%);
1636 transform: translate(-50%, -50%);
1637 display: -webkit-box;
1638 display: -ms-flexbox;
1639 display: flex;
1640 -webkit-box-pack: center;
1641 -ms-flex-pack: center;
1642 justify-content: center;
1643}
1644
1645.pokerMainContainer .cardsInTheMiddleContainer .card {
1646 height: 130px;
1647 position: relative;
1648 margin-inline: 2px;
1649}
1650
1651.pokerMainContainer .pokerMessagesContainer {
1652 position: absolute;
1653 top: 5vh;
1654 left: 50vw;
1655 -webkit-transform: translateX(-50%);
1656 transform: translateX(-50%);
1657}
1658
1659.pokerMainContainer .pokerMessagesContainer > p:first-child {
1660 font-style: italic;
1661 color: #c1fbaa;
1662}
1663
1664.pokerMainContainer .pokerMessagesContainer > p:not(:first-child):not(:last-child) {
1665 font-size: 1.2rem;
1666 margin-top: 1rem;
1667}
1668
1669.pokerMainContainer .pokerMessagesContainer > p:last-child {
1670 margin-top: .5rem;
1671 color: #ccc;
1672}
[87614a5]1673/*# sourceMappingURL=globals.css.map */
Note: See TracBrowser for help on using the repository browser.