source: styles/globals.css@ e007fcd

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

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