source: styles/globals.css@ 3a783f2

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

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