source: styles/globals.css@ 433e0c5

main
Last change on this file since 433e0c5 was 433e0c5, checked in by anastasovv <simon@…>, 23 months ago

Added complaints, managing credits, and lost connection screens
  • Property mode set to 100644
File size: 30.3 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.fs-inputs-container > div {
358 margin: auto;
359 margin-top: 2.4rem;
360 width: -webkit-fit-content;
361 width: -moz-fit-content;
362 width: fit-content;
363 display: -webkit-box;
364 display: -ms-flexbox;
365 display: flex;
366 -webkit-box-orient: vertical;
367 -webkit-box-direction: normal;
368 -ms-flex-direction: column;
369 flex-direction: column;
370 -webkit-box-pack: center;
371 -ms-flex-pack: center;
372 justify-content: center;
373 -webkit-box-align: center;
374 -ms-flex-align: center;
375 align-items: center;
376}
377
378.fs-inputs-container > div > span {
379 margin-bottom: .5rem;
380 font-size: 1.5rem;
381}
382
383.fs-inputs-container > div > input {
384 margin-bottom: 2rem;
385 padding-left: 4px;
386 padding-right: 4px;
387 font-size: 2rem;
388}
389
390.statsScreen svg {
391 cursor: pointer;
392 font-size: 2.5rem;
393 color: white;
394}
395
396.statsScreen > div h1 {
397 font-size: 2.5rem;
398 margin-bottom: 5rem;
399}
400
401.statsScreen > div p {
402 display: -webkit-box;
403 display: -ms-flexbox;
404 display: flex;
405 -webkit-box-pack: justify;
406 -ms-flex-pack: justify;
407 justify-content: space-between;
408 font-size: 1.5rem;
409 margin-bottom: 1rem;
410}
411
412.statsScreen > div p:nth-child(2n) {
413 color: white;
414}
415
416.statsScreen > div p span {
417 margin-left: 5rem;
418}
419
420.manageCreditsScreen .inlineAlert {
421 font-size: 1.5rem !important;
422 cursor: auto;
423}
424
425.manageCreditsScreen svg {
426 z-index: 100;
427 cursor: pointer;
428 font-size: 2.5rem;
429 color: white;
430}
431
432.manageCreditsScreen > div {
433 top: 0%;
434 -webkit-transform: translate(-50%, 0);
435 transform: translate(-50%, 0);
436 width: 100%;
437}
438
439.manageCreditsScreen > div h2 {
440 font-size: 1.5rem;
441 margin-bottom: 1rem;
442}
443
444.manageCreditsScreen > div p {
445 margin-bottom: 5rem;
446 color: white;
447}
448
449.manageCreditsScreen > div button span {
450 color: white;
451}
452
453.manageCreditsScreen > div > div:not(.main) {
454 margin-top: 5vh;
455 height: 15vh;
456}
457
458.manageCreditsScreen > div > div.main {
459 height: 70vh;
460 display: -webkit-box;
461 display: -ms-flexbox;
462 display: flex;
463}
464
465.manageCreditsScreen > div > div.main > div {
466 -webkit-box-flex: 1;
467 -ms-flex: 1;
468 flex: 1;
469 display: -webkit-box;
470 display: -ms-flexbox;
471 display: flex;
472 -webkit-box-orient: vertical;
473 -webkit-box-direction: normal;
474 -ms-flex-direction: column;
475 flex-direction: column;
476 -webkit-box-pack: center;
477 -ms-flex-pack: center;
478 justify-content: center;
479 -webkit-box-align: center;
480 -ms-flex-align: center;
481 align-items: center;
482}
483
484.manageCreditsScreen > div > div.main > div .fs-inputs-container {
485 width: 40%;
486}
487
488.manageCreditsScreen > div > div.main > div .fs-inputs-container > div {
489 width: 100%;
490}
491
492.manageCreditsScreen > div > div.main > div .fs-inputs-container > div label {
493 color: white;
494}
495
496.manageCreditsScreen > div > div.main > div .fs-inputs-container > div span {
497 color: #ead24d;
498}
499
500.manageCreditsScreen > div > div.main > div .fs-inputs-container > div input {
501 font-size: 1.2rem;
502 width: 100%;
503 text-align: center;
504}
505
506.complainScreen .inlineAlert {
507 cursor: auto;
508}
509
510.complainScreen > div > div textarea {
511 width: 50vw;
512 height: 40vh;
513 font-size: 2rem;
514 margin-top: 1rem;
515 margin-bottom: 3rem;
516}
517
518.inlineAlert {
519 cursor: pointer;
520 background-color: #ffdddd;
521 padding: .8rem 2.4rem;
522 border-radius: 15px;
523 color: #ff0000;
524 font-size: 1.8rem !important;
525 font-weight: 100;
526 letter-spacing: -.030em;
527}
528
529/**
530 * Component <- Loading
531 */
532.loadingScreen h1 {
533 font-size: 5rem;
534}
535
536.lostConnectionScreen h3 {
537 font-size: 2rem;
538 margin-bottom: 1rem;
539}
540
541.lostConnectionScreen h3:nth-child(2) {
542 color: white;
543}
544
545/**
546 * Component <- RegisterScreen
547 */
548/**
549 * Primary Thingies
550 */
551.primaryButton {
552 background: -webkit-gradient(linear, left top, right top, from(#0B932E), to(#097625));
553 background: linear-gradient(to right, #0B932E, #097625);
554 color: #ead24d;
555 outline: none;
556 border: none;
557 border-radius: 10px;
558 font-size: 1.5rem;
559 font-weight: bold;
560 padding: 5px 20px;
561 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
562 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
563 cursor: pointer;
564 -webkit-transition: all .2s linear;
565 transition: all .2s linear;
566}
567
568.primaryButton:hover {
569 -webkit-transform: scale(1.1) rotateZ(-1deg);
570 transform: scale(1.1) rotateZ(-1deg);
571}
572
573.primaryButton:active {
574 -webkit-transition: .05s linear;
575 transition: .05s linear;
576 -webkit-transform: scale(1) rotateZ(-1deg);
577 transform: scale(1) rotateZ(-1deg);
578}
579
580.secondaryButton {
581 background: -webkit-gradient(linear, left top, right top, from(#4d99ea), to(#4d99ea));
582 background: linear-gradient(to right, #4d99ea, #4d99ea);
583 color: white;
584 outline: none;
585 border: none;
586 border-radius: 10px;
587 font-size: 1.5rem;
588 font-weight: bold;
589 padding: 5px 20px;
590 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
591 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
592 cursor: pointer;
593 -webkit-transition: all .2s linear;
594 transition: all .2s linear;
595}
596
597.secondaryButton:hover {
598 -webkit-transform: scale(1.1) rotateZ(-1deg);
599 transform: scale(1.1) rotateZ(-1deg);
600}
601
602.secondaryButton:active {
603 -webkit-transition: .05s linear;
604 transition: .05s linear;
605 -webkit-transform: scale(1) rotateZ(-1deg);
606 transform: scale(1) rotateZ(-1deg);
607}
608
609.tertiaryButton {
610 background: -webkit-gradient(linear, left top, right top, from(#484848), to(#6a6a6a));
611 background: linear-gradient(to right, #484848, #6a6a6a);
612 color: white;
613 outline: none;
614 border: none;
615 border-radius: 10px;
616 font-size: 1.5rem;
617 font-weight: bold;
618 padding: 5px 20px;
619 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
620 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
621 cursor: pointer;
622 -webkit-transition: all .2s linear;
623 transition: all .2s linear;
624}
625
626.tertiaryButton:hover {
627 background: -webkit-gradient(linear, left top, right top, from(#6e6e6e), to(#a0a0a0));
628 background: linear-gradient(to right, #6e6e6e, #a0a0a0);
629}
630
631.tertiaryButton:active {
632 -webkit-transition: .05s linear;
633 transition: .05s linear;
634 background: -webkit-gradient(linear, left top, right top, from(#484848), to(#6a6a6a));
635 background: linear-gradient(to right, #484848, #6a6a6a);
636}
637
638/**
639 * Input Sliders
640 */
641.primarySlider {
642 -webkit-appearance: none;
643 width: 250px;
644 height: 10px;
645 background: #0B932E;
646 outline: none;
647 border-radius: 10px;
648 -webkit-transition: .2s;
649 -webkit-transition: opacity .2s;
650 transition: opacity .2s;
651 -webkit-box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
652 box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
653}
654
655.primarySlider:hover {
656 opacity: 1;
657}
658
659.primarySlider::-webkit-slider-thumb {
660 -webkit-appearance: none;
661 appearance: none;
662 outline: none;
663 border: none;
664 width: 35px;
665 height: 35px;
666 border-radius: 50%;
667 background: url("/images/gold-coin.png");
668 background-size: contain;
669 background-color: #ead24d;
670 cursor: pointer;
671}
672
673.primarySlider::-moz-range-thumb {
674 -moz-appearance: none;
675 appearance: none;
676 outline: none;
677 border: none;
678 width: 35px;
679 height: 35px;
680 border-radius: 50%;
681 background: url("/images/gold-coin.png");
682 background-size: contain;
683 background-color: #ead24d;
684 cursor: pointer;
685}
686
687/**
688 * Scrollbar
689 */
690/* width */
691::-webkit-scrollbar {
692 width: 15px;
693}
694
695/* Track */
696::-webkit-scrollbar-track {
697 background: #0B932E;
698}
699
700/* Handle */
701::-webkit-scrollbar-thumb {
702 background: #ead24d;
703}
704
705/* Handle on hover */
706::-webkit-scrollbar-thumb:hover {
707 background: #efcb00;
708}
709
710/**
711 * File <- Blackjack Main
712 */
713.blackjackButtons {
714 position: absolute;
715 left: 0;
716 top: 90vh;
717 width: 100vw;
718 height: 10vh;
719 overflow: hidden;
720}
721
722.blackjackButtons > div {
723 display: -webkit-box;
724 display: -ms-flexbox;
725 display: flex;
726 -webkit-box-orient: horizontal;
727 -webkit-box-direction: normal;
728 -ms-flex-direction: row;
729 flex-direction: row;
730 -webkit-box-pack: center;
731 -ms-flex-pack: center;
732 justify-content: center;
733 -webkit-box-align: center;
734 -ms-flex-align: center;
735 align-items: center;
736 -webkit-transition: .5s ease-in-out;
737 transition: .5s ease-in-out;
738}
739
740.blackjackButtons > div > button {
741 width: 300px;
742}
743
744.blackjackButtons > div > button:nth-child(2) {
745 margin-left: 30px;
746}
747
748.card {
749 aspect-ratio: 400/560;
750 height: 150px;
751 background-size: contain;
752 position: absolute;
753 -webkit-transition: .5s ease-in-out;
754 transition: .5s ease-in-out;
755 border-radius: 10px;
756 border: 1px solid black;
757}
758
759.blackjackDisplayBet {
760 position: absolute;
761 -webkit-transform: translate(-50%, -50%);
762 transform: translate(-50%, -50%);
763 left: 51vw;
764 top: 63.5vh;
765}
766
767.blackjackSideBetsModal {
768 z-index: 20;
769 -webkit-box-orient: vertical !important;
770 -webkit-box-direction: normal !important;
771 -ms-flex-direction: column !important;
772 flex-direction: column !important;
773 position: fixed;
774 left: 50vw;
775 top: 45vh;
776 width: 41vw;
777 height: 80vh;
778 padding: 10px;
779 -webkit-transform: translate(-50%, -50%);
780 transform: translate(-50%, -50%);
781 background: -webkit-gradient(linear, left top, right top, from(#0B932Ec0), to(#097625e0));
782 background: linear-gradient(to right, #0B932Ec0, #097625e0);
783 -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
784 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
785 border-radius: 20px;
786 overflow-y: scroll;
787}
788
789.blackjackSideBetsModal .blackjackSideBetSelect {
790 display: -webkit-box;
791 display: -ms-flexbox;
792 display: flex;
793 -webkit-box-orient: vertical;
794 -webkit-box-direction: normal;
795 -ms-flex-direction: column;
796 flex-direction: column;
797 width: 100%;
798}
799
800.blackjackSideBetsModal .blackjackSideBetSelect:first-child {
801 margin-top: 10rem;
802}
803
804.blackjackSideBetsModal .blackjackSideBetSelect h1 {
805 margin-bottom: 1rem;
806 color: #ead24d;
807}
808
809.blackjackSideBetsModal .blackjackSideBetSelect > div {
810 text-align: left;
811}
812
813.blackjackSideBetsModal .blackjackSideBetSelect > div p {
814 margin-bottom: 1rem;
815 padding: 10px 20px;
816 border-radius: 5px;
817 cursor: pointer;
818 -webkit-transition: all .25s linear;
819 transition: all .25s linear;
820}
821
822.blackjackSideBetsModal .blackjackSideBetSelect > div p span {
823 font-size: 1.2rem;
824 color: #ead24d;
825}
826
827.blackjackSideBetsModal .blackjackSideBetSelect > div p:hover {
828 color: #ead24d;
829 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
830 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
831}
832
833.blackjackSideBetsChooseCreditsModal {
834 z-index: 20;
835 -webkit-box-orient: vertical !important;
836 -webkit-box-direction: normal !important;
837 -ms-flex-direction: column !important;
838 flex-direction: column !important;
839 position: fixed;
840 left: 50vw;
841 top: 45vh;
842 width: 41vw;
843 height: 80vh;
844 padding: 10px;
845 -webkit-transform: translate(-50%, -50%);
846 transform: translate(-50%, -50%);
847 background: -webkit-gradient(linear, left top, right top, from(#00000080), to(#00000080));
848 background: linear-gradient(to right, #00000080, #00000080);
849 -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
850 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
851 border-radius: 20px;
852}
853
854.blackjackSideBetsChooseCreditsModal p {
855 margin-bottom: 1rem;
856 padding: 10px 20px;
857 border-radius: 5px;
858 -webkit-transition: all .25s linear;
859 transition: all .25s linear;
860}
861
862.blackjackSideBetsChooseCreditsModal p span {
863 font-size: 1.2rem;
864 color: white;
865}
866
867/**
868 * File <- Roulette Main
869 */
870.rouletteMainContainer {
871 background-color: #006600;
872}
873
874#rouletteBall {
875 position: absolute;
876 top: 87.5%;
877 left: 17.5%;
878 width: 1rem;
879}
880
881#rouletteBetsImg {
882 position: absolute;
883 top: 65%;
884 left: 59%;
885 -webkit-transform: translate(-50%, -50%);
886 transform: translate(-50%, -50%);
887 width: 50vw;
888 height: auto;
889 cursor: url(/gold-coin.cur), auto;
890}
891
892#rouletteWheelImg {
893 position: absolute;
894 top: 60%;
895 left: 18%;
896 -webkit-transition: all .5s ease-in-out;
897 transition: all .5s ease-in-out;
898 width: 450px;
899 height: auto;
900}
901
902.rouletteInfoText {
903 position: absolute;
904 top: 15%;
905 width: 100vw;
906 text-align: center;
907 font-size: 1.1rem;
908}
909
910.roulettePlayersContainer {
911 position: absolute;
912 top: 15%;
913 right: 4%;
914 width: 10vw;
915 height: 80vh;
916 -webkit-box-shadow: 0 0 10px rgba(10, 148, 45, 0.25);
917 box-shadow: 0 0 10px rgba(10, 148, 45, 0.25);
918 padding: 1rem;
919 display: -ms-grid;
920 display: grid;
921 -ms-grid-rows: (minmax(0, 1fr))[2];
922 grid-template-rows: repeat(2, minmax(0, 1fr));
923 overflow-x: hidden;
924 overflow-y: scroll;
925}
926
927.roulettePlayersContainer p {
928 word-wrap: break-word;
929 margin-top: .5rem;
930}
931
932.rouletteTimer {
933 position: absolute;
934 top: calc((60% + 450px) / 2);
935 left: calc(18.5%);
936 -webkit-transform: translate(-50%, -50%);
937 transform: translate(-50%, -50%);
938 display: -webkit-box;
939 display: -ms-flexbox;
940 display: flex;
941 -webkit-box-orient: vertical;
942 -webkit-box-direction: normal;
943 -ms-flex-direction: column;
944 flex-direction: column;
945 -webkit-box-pack: center;
946 -ms-flex-pack: center;
947 justify-content: center;
948 -webkit-box-align: center;
949 -ms-flex-align: center;
950 align-items: center;
951 gap: 5px;
952 font-size: 2.5rem;
953 color: black;
954}
955
956.rouletteBetModal {
957 z-index: 20;
958 -webkit-box-orient: vertical;
959 -webkit-box-direction: normal;
960 -ms-flex-direction: column;
961 flex-direction: column;
962 -webkit-box-pack: center;
963 -ms-flex-pack: center;
964 justify-content: center;
965 -webkit-box-align: center;
966 -ms-flex-align: center;
967 align-items: center;
968 position: fixed;
969 left: 0;
970 top: 0;
971 width: 100vw;
972 height: 100vh;
973 background: #000000c0;
974}
975
976.rouletteBetModal p {
977 margin-bottom: 1rem;
978 padding: 10px 20px;
979 border-radius: 5px;
980 -webkit-transition: all .25s linear;
981 transition: all .25s linear;
982}
983
984.rouletteBetModal p span {
985 font-size: 1.2rem;
986 color: #ead24d;
987}
988
989.pokerRaiseModal {
990 z-index: 20;
991 -webkit-box-orient: vertical;
992 -webkit-box-direction: normal;
993 -ms-flex-direction: column;
994 flex-direction: column;
995 -webkit-box-pack: center;
996 -ms-flex-pack: center;
997 justify-content: center;
998 -webkit-box-align: center;
999 -ms-flex-align: center;
1000 align-items: center;
1001 position: fixed;
1002 left: 0;
1003 top: 0;
1004 width: 100vw;
1005 height: 100vh;
1006 background: #000000c0;
1007}
1008
1009.pokerRaiseModal p {
1010 margin-bottom: 1rem;
1011 padding: 10px 20px;
1012 border-radius: 5px;
1013 -webkit-transition: all .25s linear;
1014 transition: all .25s linear;
1015}
1016
1017.pokerRaiseModal p span {
1018 font-size: 1.2rem;
1019 color: #ead24d;
1020}
1021
1022/**
1023 * Spin effect on the roulette wheel
1024 */
1025.spin {
1026 -webkit-animation: spinner 4s infinite;
1027 animation: spinner 4s infinite;
1028 -webkit-animation-timing-function: ease-in-out;
1029 animation-timing-function: ease-in-out;
1030}
1031
1032@-webkit-keyframes spinner {
1033 0% {
1034 -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
1035 transform: translate(-50%, -50%) rotateZ(0deg);
1036 }
1037 10% {
1038 -webkit-transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
1039 transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
1040 }
1041 20% {
1042 -webkit-transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
1043 transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
1044 }
1045 30% {
1046 -webkit-transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
1047 transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
1048 }
1049 40% {
1050 -webkit-transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
1051 transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
1052 }
1053 50% {
1054 -webkit-transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
1055 transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
1056 }
1057 60% {
1058 -webkit-transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
1059 transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
1060 }
1061 70% {
1062 -webkit-transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
1063 transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
1064 }
1065 80% {
1066 -webkit-transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
1067 transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
1068 }
1069 90% {
1070 -webkit-transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
1071 transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
1072 }
1073 100% {
1074 -webkit-transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
1075 transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
1076 }
1077}
1078
1079@keyframes spinner {
1080 0% {
1081 -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
1082 transform: translate(-50%, -50%) rotateZ(0deg);
1083 }
1084 10% {
1085 -webkit-transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
1086 transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
1087 }
1088 20% {
1089 -webkit-transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
1090 transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
1091 }
1092 30% {
1093 -webkit-transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
1094 transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
1095 }
1096 40% {
1097 -webkit-transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
1098 transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
1099 }
1100 50% {
1101 -webkit-transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
1102 transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
1103 }
1104 60% {
1105 -webkit-transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
1106 transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
1107 }
1108 70% {
1109 -webkit-transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
1110 transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
1111 }
1112 80% {
1113 -webkit-transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
1114 transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
1115 }
1116 90% {
1117 -webkit-transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
1118 transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
1119 }
1120 100% {
1121 -webkit-transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
1122 transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
1123 }
1124}
1125
1126/**
1127 * File <- Poker Main
1128 */
1129.pokerMainContainer .pokerPickATableContainer {
1130 position: absolute;
1131 left: 0;
1132 top: 0;
1133 width: 100vw;
1134 height: 100vh;
1135 background-color: #111;
1136 display: -webkit-box;
1137 display: -ms-flexbox;
1138 display: flex;
1139 -webkit-box-orient: vertical;
1140 -webkit-box-direction: normal;
1141 -ms-flex-direction: column;
1142 flex-direction: column;
1143 -webkit-box-pack: center;
1144 -ms-flex-pack: center;
1145 justify-content: center;
1146 -webkit-box-align: center;
1147 -ms-flex-align: center;
1148 align-items: center;
1149 gap: 5rem;
1150}
1151
1152.pokerMainContainer .pokerPickATableContainer .createATable > input {
1153 margin-bottom: 2rem;
1154 padding-left: 4px;
1155 padding-right: 4px;
1156 font-size: 1.5rem;
1157 margin-right: 1rem;
1158 border-radius: .5rem;
1159}
1160
1161.pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > h3 {
1162 margin-bottom: 1rem;
1163}
1164
1165.pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > div {
1166 display: -webkit-box;
1167 display: -ms-flexbox;
1168 display: flex;
1169 -webkit-box-orient: vertical;
1170 -webkit-box-direction: normal;
1171 -ms-flex-direction: column;
1172 flex-direction: column;
1173 -webkit-box-align: center;
1174 -ms-flex-align: center;
1175 align-items: center;
1176 gap: 2rem;
1177 width: 100vw;
1178 max-height: 45vh;
1179 padding-block: 2rem;
1180 overflow-x: hidden;
1181 overflow-y: scroll;
1182}
1183
1184.pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > div > div {
1185 -webkit-box-shadow: 0 5px 25px #4d99eaaa;
1186 box-shadow: 0 5px 25px #4d99eaaa;
1187 width: 60vw;
1188 padding: 1rem 3rem;
1189 border-radius: .5rem;
1190 cursor: pointer;
1191 display: -ms-grid;
1192 display: grid;
1193 -ms-grid-columns: (minmax(0, 1fr))[4];
1194 grid-template-columns: repeat(4, minmax(0, 1fr));
1195 place-items: center;
1196 -webkit-transition: all .2s ease-out;
1197 transition: all .2s ease-out;
1198}
1199
1200.pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > div > div:hover {
1201 -webkit-transform: scale(1.05);
1202 transform: scale(1.05);
1203 -webkit-box-shadow: 0 10px 35px #4d99eaaa;
1204 box-shadow: 0 10px 35px #4d99eaaa;
1205}
1206
1207.pokerMainContainer .pokerChairsContainer .pokerChair {
1208 position: absolute;
1209 -webkit-transform: translate(-50%, -50%);
1210 transform: translate(-50%, -50%);
1211 width: 110px;
1212 aspect-ratio: 1;
1213 border-radius: 50%;
1214 border: 5px solid #ead24daa;
1215 background-color: black;
1216 display: -ms-grid;
1217 display: grid;
1218 place-items: center;
1219 font-size: .8rem;
1220}
1221
1222.pokerMainContainer .pokerChairsContainer .pokerChair.onTurn {
1223 border: 5px dotted #ead24d;
1224 background-color: #ead24d55;
1225}
1226
1227.pokerMainContainer .pokerChairsContainer .pokerChair.folded {
1228 border: 5px solid rgba(59, 59, 59, 0.667);
1229 background-color: rgba(59, 59, 59, 0.667);
1230}
1231
1232.pokerMainContainer .pokerChairsContainer .pokerChair > div p {
1233 margin-block: 2px;
1234}
1235
1236.pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer {
1237 position: relative;
1238}
1239
1240.pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div {
1241 position: absolute;
1242 top: -2vh;
1243 -webkit-transform: translate(-50%, -50%);
1244 transform: translate(-50%, -50%);
1245 display: -webkit-box;
1246 display: -ms-flexbox;
1247 display: flex;
1248}
1249
1250.pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div .card {
1251 height: 80px;
1252 margin-inline: -1rem;
1253 position: relative;
1254}
1255
1256.pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div .card:first-child {
1257 -webkit-transform: rotateZ(-5deg);
1258 transform: rotateZ(-5deg);
1259}
1260
1261.pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div .card:last-child {
1262 -webkit-transform: rotateZ(5deg);
1263 transform: rotateZ(5deg);
1264}
1265
1266.pokerMainContainer .pokerPotContainer {
1267 position: absolute;
1268 top: 57vh;
1269 left: 50vw;
1270 -webkit-transform: translate(-50%, -50%);
1271 transform: translate(-50%, -50%);
1272}
1273
1274.pokerMainContainer .pokerPlayButtonsContainer {
1275 position: absolute;
1276 top: 62vh;
1277 left: 50vw;
1278 -webkit-transform: translate(-50%, -50%);
1279 transform: translate(-50%, -50%);
1280 display: -webkit-box;
1281 display: -ms-flexbox;
1282 display: flex;
1283 -webkit-box-pack: center;
1284 -ms-flex-pack: center;
1285 justify-content: center;
1286 gap: 1rem;
1287}
1288
1289.pokerMainContainer .pokerPlayButtonsContainer button {
1290 min-width: 110px;
1291}
1292
1293.pokerMainContainer .cardsInTheMiddleContainer {
1294 position: absolute;
1295 top: 45vh;
1296 left: 50vw;
1297 -webkit-transform: translate(-50%, -50%);
1298 transform: translate(-50%, -50%);
1299 display: -webkit-box;
1300 display: -ms-flexbox;
1301 display: flex;
1302 -webkit-box-pack: center;
1303 -ms-flex-pack: center;
1304 justify-content: center;
1305}
1306
1307.pokerMainContainer .cardsInTheMiddleContainer .card {
1308 height: 130px;
1309 position: relative;
1310 margin-inline: 2px;
1311}
1312
1313.pokerMainContainer .pokerMessagesContainer {
1314 position: absolute;
1315 top: 5vh;
1316 left: 50vw;
1317 -webkit-transform: translateX(-50%);
1318 transform: translateX(-50%);
1319}
1320
1321.pokerMainContainer .pokerMessagesContainer > p:first-child {
1322 font-style: italic;
1323 color: #c1fbaa;
1324}
1325
1326.pokerMainContainer .pokerMessagesContainer > p:not(:first-child):not(:last-child) {
1327 font-size: 1.2rem;
1328 margin-top: 1rem;
1329}
1330
1331.pokerMainContainer .pokerMessagesContainer > p:last-child {
1332 margin-top: .5rem;
1333 color: #ccc;
1334}
1335/*# sourceMappingURL=globals.css.map */
Note: See TracBrowser for help on using the repository browser.