source: styles/globals.css@ e903234

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

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