source: styles/globals.css

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

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