source: styles/globals.scss

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

Added authentication with google
  • Property mode set to 100644
File size: 23.2 KB
Line 
1@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap);
2
3html,
4body {
5 padding: 0;
6 margin: 0;
7 // font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
8 // Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
9
10 font-family: 'Inter', sans-serif;
11
12 overflow: hidden;
13}
14
15a {
16 color: inherit;
17 text-decoration: none;
18}
19
20* {
21 box-sizing: border-box;
22}
23
24// my code below:
25p, h1, h3 {
26 margin: 0;
27}
28
29.app {
30 color: white;
31
32 letter-spacing: 1px;
33
34 width: 100vw;
35 height: 100vh;
36
37 margin: auto;
38
39 overflow: hidden;
40
41 background-size: cover;
42 background-repeat: no-repeat;
43 background-position: 0% 50%;
44
45 text-align: center;
46}
47
48/**
49 * Component <- Header
50 */
51header.header {
52 display: flex;
53 justify-content: space-between;
54 align-items: center;
55
56 width: 92vw;
57 margin: auto;
58 margin-top: 20px;
59
60 position: relative;
61 z-index: 5;
62
63 .logo {
64 width: 80px;
65 aspect-ratio: 1;
66 border-radius: 100%;
67
68 background-image: url("/images/logo.png");
69 background-size: cover;
70
71 border: 2px solid rgba(255, 255, 255, 0.2);
72
73 cursor: pointer;
74 }
75
76 h2 {
77 cursor: pointer;
78 }
79
80 nav {
81 ul {
82 display: flex;
83 flex-direction: row;
84 list-style-type: none;
85
86 li {
87 margin-right: 4rem;
88
89 &:last-child {
90 margin-right: 0;
91 }
92 }
93 }
94
95 &.mainHeaderNavigation {
96 ul {
97 li {
98 cursor: pointer;
99 }
100 }
101 }
102 }
103}
104
105/**
106 * Component <- Full Width Text
107 *
108 * Used in "Welcome To Caessino"
109 */
110.fullwidthText {
111 width: 100vw;
112
113 display: flex;
114 flex-direction: column;
115 justify-content: center;
116 align-items: center;
117
118 margin-top: 40px;
119
120 padding: 15px 0 20px 0;
121
122 background-color: rgba(0, 0, 0, .6);
123
124 h1 {
125 color: #FFD700;
126 font-weight: lighter;
127 font-size: 2.5rem;
128 }
129
130 h3 {
131 margin-top: 15px;
132 font-weight: lighter;
133 }
134}
135
136/**
137 * Component <- Alert
138 *
139 * Similar to Full Width Text
140 */
141.alert {
142 z-index: 30;
143
144 width: 100vw;
145
146 display: flex;
147 flex-direction: column;
148 justify-content: center;
149 align-items: center;
150
151 padding: 20px 0 25px 0;
152
153 background-color: rgba(0, 0, 0, .9);
154
155 position: absolute;
156
157 transform: translateY(-70%);
158
159 transition: '.5s linear';
160
161 h1 {
162 color: #FFD700;
163 font-weight: lighter;
164 font-size: 2.5rem;
165 }
166
167 h3 {
168 margin-top: 10px;
169 font-weight: lighter;
170 }
171
172 button {
173 width: 500px;
174 margin-top: 20px;
175 }
176}
177
178/**
179 * Component <- Notification
180 *
181 * Displayed fixed in the top right corner
182 */
183.notification {
184 z-index: 30;
185
186 position: fixed;
187 top: 40px;
188 right: 30px;
189
190 width: 500px;
191 min-height: 200px;
192
193 display: flex;
194 flex-direction: column;
195 justify-content: center;
196 align-items: flex-end;
197
198 svg {
199 cursor: pointer;
200 }
201
202 &>div {
203 flex: 1;
204
205 width: 100%;
206
207 display: flex;
208 justify-content: center;
209 align-items: center;
210
211 font-size: 1.5rem;
212
213 margin-bottom: 1.2rem;
214
215 text-align: center;
216 }
217
218 font-size: 2rem;
219
220 padding: 20px;
221 border-radius: 15px;
222
223 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
224}
225
226/**
227 * Component <- Game Circle
228 *
229 * Used in Landing Page -> to display the games in circles
230 */
231.gameCircles {
232 display: flex;
233 flex-direction: row;
234 justify-content: space-between;
235 align-items: center;
236
237 width: 92vw;
238 margin: auto;
239 margin-top: 50px;
240
241 .gameCircle {
242 transition: all .2s linear;
243 cursor: pointer;
244
245 display: flex;
246 flex-direction: column;
247 justify-content: center;
248 align-items: center;
249
250 .circleLarge {
251 transition: all .2s linear;
252
253 width: 22vw;
254 aspect-ratio: 1;
255
256 border-radius: 100%;
257
258 background: linear-gradient(to top right, #ffd900cc, #B65714);
259 opacity: .95;
260
261 display: flex;
262 flex-direction: column;
263
264 .circle {
265 border-radius: 100%;
266 width: 98%;
267 background-size: cover;
268 margin: auto;
269 aspect-ratio: 1;
270 }
271 }
272
273 h3 {
274 transition: all .2s linear;
275
276 font-weight: lighter;
277 margin-top: 30px;
278
279 opacity: 0;
280 }
281
282 h1.loading {
283 color: white;
284 position: absolute;
285 width: 100vw;
286 top: 50vh;
287 left: 50vw;
288 transform: translate(-50%, -50%);
289
290 font-size: 5rem;
291
292 z-index: 10;
293 }
294
295 &:hover {
296 .circleLarge {
297 transform: scale(1.1);
298 opacity: 1;
299 }
300
301 h3 {
302 opacity: 1;
303 }
304 }
305 }
306
307 &:hover {
308 .gameCircle {
309 .circleLarge {
310 opacity: 1 !important;
311 }
312 }
313 }
314}
315
316/**
317 * Full Screen Overlay
318 */
319.fullscreen {
320 position: fixed;
321 top: 0;
322 left: 0;
323
324 width: 100vw;
325 height: 100vh;
326
327 background: linear-gradient(to right, #0B932E, #097625);
328 color: #ead24d;
329
330 z-index: 10;
331}
332
333.fs-centered {
334 &>div {
335 position: fixed;
336 top: 50vh;
337 left: 50vw;
338 transform: translate(-50%, -50%);
339 }
340}
341
342.top-to-bottom-centered {
343 overflow-y: scroll;
344
345 &>div {
346 padding-block: 2rem;
347 width: 70vw;
348 margin-inline: auto;
349
350 display: flex;
351 flex-direction: column;
352 gap: 4rem;
353
354 .link {
355 color: #fff3ae;
356 text-decoration: underline;
357 cursor: pointer;
358 }
359
360 h3 {
361 font-size: 1.5rem;
362 text-align: center;
363 }
364
365 }
366}
367
368.fs-inputs-container {
369 &>div {
370 margin: auto;
371 margin-top: 2.4rem;
372 width: fit-content;
373
374 display: flex;
375 flex-direction: column;
376 justify-content: center;
377 align-items: center;
378
379 &>span {
380 margin-bottom: .5rem;
381
382 font-size: 1.5rem;
383 }
384
385 &>input {
386 margin-bottom: 2rem;
387
388 padding-left: 4px;
389 padding-right: 4px;
390
391 font-size: 2rem;
392 }
393 }
394}
395
396.statsScreen {
397 svg {
398 cursor: pointer;
399 font-size: 2.5rem;
400 color: white;
401 }
402
403 &>div {
404 h1 {
405 font-size: 2.5rem;
406 margin-bottom: 5rem;
407 }
408
409 p {
410 display: flex;
411 justify-content: space-between;
412
413 font-size: 1.5rem;
414 margin-bottom: 1rem;
415
416 &:nth-child(2n) {
417 color: white;
418 }
419
420 span {
421 margin-left: 5rem;
422 }
423 }
424 }
425}
426
427.manageCreditsScreen {
428 .inlineAlert {
429 font-size: 1.5rem !important;
430 cursor: auto;
431 }
432
433 svg {
434 z-index: 100;
435 cursor: pointer;
436 font-size: 2.5rem;
437 color: white;
438 }
439
440 &>div {
441 top: 0%;
442 transform: translate(-50%, 0);
443 width: 100%;
444
445 h2 {
446 font-size: 1.5rem;
447 margin-bottom: 1rem;
448 }
449
450 p {
451 margin-bottom: 5rem;
452 color: white;
453 }
454
455 button {
456 span {
457 color: white;
458 }
459 }
460
461 &>div:not(.main) {
462 margin-top: 5vh;
463 height: 15vh;
464 }
465
466 &>div.main {
467 height: 70vh;
468
469 display: flex;
470
471 &>div {
472 flex: 1;
473
474 display: flex;
475 flex-direction: column;
476 justify-content: center;
477 align-items: center;
478
479
480 .fs-inputs-container {
481 width: 40%;
482
483 &>div {
484 width: 100%;
485
486 label {
487 color: white;
488 }
489
490 span {
491 color: #ead24d;
492 }
493
494 input {
495 font-size: 1.2rem;
496 width: 100%;
497
498 text-align: center;
499 }
500 }
501 }
502 }
503 }
504 }
505}
506
507.complainScreen {
508 .inlineAlert {
509 cursor: auto;
510 }
511
512 &>div {
513 &>div {
514 textarea {
515 background-color: rgb(195, 255, 210);
516
517 width: 50vw;
518 height: 40vh;
519 font-size: 2rem;
520 margin-top: 1rem;
521 margin-bottom: 3rem;
522 }
523 }
524 }
525}
526
527.inlineAlert {
528 cursor: pointer;
529
530 background-color: #ffdddd;
531 padding: .8rem 2.4rem;
532 border-radius: 15px;
533
534 color: #ff0000;
535 font-size: 1.8rem !important;
536 font-weight: 100;
537 letter-spacing: -.030em;
538}
539
540/**
541 * Component <- Loading
542 */
543.loadingScreen {
544 h1 {
545 font-size: 5rem;
546 }
547}
548
549.lostConnectionScreen {
550 &>div {
551 text-align: center;
552 }
553
554 h3 {
555 font-size: 2rem;
556 margin-bottom: 1rem;
557
558 &:nth-child(2) {
559 color: white;
560 }
561 }
562}
563
564.activateScreen {
565 &>div {
566 text-align: center;
567 }
568
569 h3 {
570 font-size: 2rem;
571 margin-bottom: 1rem;
572
573 &:nth-child(1) {
574 color: white;
575 }
576 }
577
578 button {
579 font-size: 1.8rem;
580 margin-top: 8rem;
581 }
582}
583
584/**
585 * Component <- LoginScreen
586 */
587.loginScreen {
588 &.admin {
589 z-index: 50;
590 }
591}
592
593.liveGamesMegaContainer {
594 margin-top: 3rem;
595
596 display: flex;
597 flex-direction: column;
598 gap: 8rem;
599
600 .liveGamesContainer {
601 display: flex;
602 flex-direction: column;
603 align-items: flex-start;
604
605 gap: 2rem;
606
607 h3 {
608 color: white;
609 }
610
611 &>div {
612 width: 100%;
613 padding: 2rem;
614
615 transition: all .2s linear;
616 box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
617 &:hover {
618 box-shadow: 0 5px 25px rgba(0, 0, 0, .25);
619 }
620
621 h6 {
622 span {
623 color: white;
624 }
625
626 margin-inline: 0;
627 margin-block: .5rem;
628
629 color: #ead24d;
630 font-weight: normal;
631 font-size: 1.2rem;
632
633 text-align: center;
634 }
635
636 &.liveBlackjackGame {
637 display: flex;
638
639 &>div {
640 flex: 1;
641 display: flex;
642 flex-direction: column;
643
644 &:nth-child(1) {
645 align-items: flex-start;
646 }
647
648 &:nth-child(2) {
649 align-items: center;
650
651 &>div {
652 flex-direction: column;
653 justify-content: center;
654 }
655 }
656
657 &:nth-child(3) {
658 align-items: flex-end;
659
660 h5 {
661 margin-inline: 4rem;
662 }
663 }
664
665 p {
666 margin-top: 1rem;
667
668 font-size: 1.5rem;
669 }
670
671 h5 {
672 font-size: 5rem;
673 font-weight: 100;
674 font-style: italic;
675
676 margin-inline: 3rem;
677 margin-block: 0;
678
679 display: flex;
680 align-items: center;
681 }
682
683 &>div {
684 display: flex;
685
686 margin-inline: 2.5rem;
687
688 .card {
689 margin-inline: -2.5rem;
690
691 position: relative;
692 }
693 }
694 }
695 }
696
697 .cardsOnTable, .cards {
698 display: flex;
699
700 margin-inline: 2.5rem;
701
702 .card {
703 margin-inline: -2.5rem;
704
705 position: relative;
706 }
707 }
708
709 .cardsOnTable {
710 display: flex;
711 justify-content: center;
712 }
713
714 .cards {
715 display: flex;
716 justify-content: center;
717
718 .card {
719 margin-inline: -1.6rem;
720
721 height: 100px;
722 }
723 }
724
725 .playerInLiveRouletteGame, .playerInLivePokerGame {
726 display: flex;
727 align-items: center;
728
729 &>div {
730 flex: 1;
731 }
732 }
733
734 .playerInLivePokerGame {
735 margin-block: .8rem;
736 }
737 }
738 }
739}
740
741.complaintsScreen {
742 z-index: 20;
743
744 .complaint {
745 width: 100%;
746 padding: 2rem;
747
748 transition: all .2s linear;
749 box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
750 &:hover {
751 box-shadow: 0 5px 25px rgba(0, 0, 0, .25);
752 }
753
754 &:nth-child(2n+1) {
755 color: white;
756 }
757
758 &>div:nth-child(1) {
759 display: flex;
760 justify-content: space-between;
761 align-items: center;
762
763 &>* {
764 flex: 1;
765 }
766
767 &>div {
768 display: flex;
769 justify-content: flex-end;
770 }
771 }
772
773 textarea {
774 width: 100%;
775 height: 7rem;
776 margin-top: .5rem;
777 font-size: 1.2rem;
778 padding: .4rem;
779
780 background-color: rgb(195, 255, 210);
781 }
782
783 .answering {
784 margin-top: 1rem;
785
786 &>div {
787 display: flex;
788 justify-content: flex-end;
789 margin-top: 1rem;
790 }
791 }
792
793 .primaryButton, .secondaryButton {
794 font-size: 1rem;
795 }
796 }
797}
798
799.liveGamesScreen {
800 z-index: 20;
801}
802
803.dashboardScreen {
804 &.admin {
805 .fs-inputs-container {
806 transform: translate(-50%, -75%);
807
808 &>div {
809 gap: 10rem;
810
811 &>div {
812 width: 50vw;
813 display: flex;
814 justify-content: space-around;
815 }
816 }
817 }
818 }
819}
820
821/**
822 * Primary Thingies
823 */
824.primaryButton {
825 background: linear-gradient(to right, #0B932E, #097625);
826 color: #ead24d;
827
828 outline: none;
829 border: none;
830 border-radius: 10px;
831
832 font-size: 1.5rem;
833 font-weight: bold;
834 padding: 5px 20px;
835
836 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
837
838 cursor: pointer;
839 transition: all .2s linear;
840
841 &:hover {
842 transform: scale(1.1) rotateZ(-1deg);
843 // padding: 10px 20px;
844 }
845
846 &:active {
847 transition: .05s linear;
848 transform: scale(1) rotateZ(-1deg);
849 }
850}
851
852.secondaryButton {
853 background: linear-gradient(to right, #4d99ea, #4d99ea);
854 color: white;
855
856 outline: none;
857 border: none;
858 border-radius: 10px;
859
860 font-size: 1.5rem;
861 font-weight: bold;
862 padding: 5px 20px;
863
864 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
865
866 cursor: pointer;
867 transition: all .2s linear;
868
869 &:hover {
870 transform: scale(1.1) rotateZ(-1deg);
871 // padding: 10px 20px;
872 }
873
874 &:active {
875 transition: .05s linear;
876 transform: scale(1) rotateZ(-1deg);
877 }
878}
879
880.tertiaryButton {
881 background: linear-gradient(to right, #484848, #6a6a6a);
882 color: white;
883
884 outline: none;
885 border: none;
886 border-radius: 10px;
887
888 font-size: 1.5rem;
889 font-weight: bold;
890 padding: 5px 20px;
891
892 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
893
894 cursor: pointer;
895 transition: all .2s linear;
896
897 &:hover {
898 background: linear-gradient(to right, #6e6e6e, #a0a0a0);
899 }
900
901 &:active {
902 transition: .05s linear;
903 background: linear-gradient(to right, #484848, #6a6a6a);
904 }
905}
906
907/**
908 * Input Sliders
909 */
910.primarySlider {
911 -webkit-appearance: none;
912 width: 250px;
913 height: 10px;
914 background: #0B932E;
915 outline: none;
916 border-radius: 10px;
917 -webkit-transition: .2s;
918 transition: opacity .2s;
919
920 box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
921}
922
923.primarySlider:hover {
924 opacity: 1;
925}
926
927.primarySlider::-webkit-slider-thumb {
928 -webkit-appearance: none;
929 appearance: none;
930 outline: none;
931 border: none;
932 width: 35px;
933 height: 35px;
934 border-radius: 50%;
935 background: url("/images/gold-coin.png");
936 background-size: contain;
937 background-color: #ead24d;
938 cursor: pointer;
939}
940
941.primarySlider::-moz-range-thumb {
942 appearance: none;
943 outline: none;
944 border: none;
945 width: 35px;
946 height: 35px;
947 border-radius: 50%;
948 background: url("/images/gold-coin.png");
949 background-size: contain;
950 background-color: #ead24d;
951 cursor: pointer;
952}
953
954/**
955 * Scrollbar
956 */
957
958/* width */
959::-webkit-scrollbar {
960 width: 15px;
961}
962
963/* Track */
964::-webkit-scrollbar-track {
965 background: #0B932E;
966}
967
968/* Handle */
969::-webkit-scrollbar-thumb {
970 background: #ead24d;
971}
972
973/* Handle on hover */
974::-webkit-scrollbar-thumb:hover {
975 background: #efcb00;
976}
977
978/**
979 * File <- Blackjack Main
980 */
981.blackjackButtons {
982 position: absolute;
983
984 left: 0;
985 top: 90vh;
986
987 width: 100vw;
988 height: 10vh;
989
990 overflow: hidden;
991
992 &>div {
993 display: flex;
994 flex-direction: row;
995 justify-content: center;
996 align-items: center;
997
998 transition: .5s ease-in-out;
999
1000 &>button {
1001 width: 300px;
1002 }
1003
1004 &>button:nth-child(2) {
1005 margin-left: 30px;
1006 }
1007 }
1008}
1009
1010.card {
1011 aspect-ratio: 400/560;
1012 height: 150px;
1013
1014 background-size: contain;
1015
1016 position: absolute;
1017
1018 transition: .5s ease-in-out;
1019
1020 border-radius: 10px;
1021
1022 border: 1px solid black;
1023}
1024
1025.blackjackDisplayBet {
1026 position: absolute;
1027
1028 transform: translate(-50%, -50%);
1029
1030 left: 51vw;
1031 top: 63.5vh;
1032}
1033
1034.blackjackSideBetsModal {
1035 z-index: 20;
1036
1037 flex-direction: column !important;
1038
1039 position: fixed;
1040 left: 50vw;
1041 top: 45vh;
1042
1043 width: 41vw;
1044 height: 80vh;
1045
1046 padding: 10px;
1047
1048 transform: translate(-50%, -50%);
1049
1050 background: linear-gradient(to right, #0B932Ec0, #097625e0);
1051
1052 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
1053
1054 border-radius: 20px;
1055
1056 overflow-y: scroll;
1057
1058 .blackjackSideBetSelect {
1059 &:first-child {
1060 margin-top: 10rem;
1061 }
1062
1063 display: flex;
1064 flex-direction: column;
1065 width: 100%;
1066
1067 h1 {
1068 margin-bottom: 1rem;
1069
1070 color: #ead24d;
1071 }
1072
1073 &>div {
1074 text-align: left;
1075
1076 p {
1077 margin-bottom: 1rem;
1078
1079 padding: 10px 20px;
1080 border-radius: 5px;
1081
1082 cursor: pointer;
1083
1084 transition: all .25s linear;
1085
1086 span {
1087 font-size: 1.2rem;
1088 color: #ead24d;
1089 }
1090
1091 &:hover {
1092 color: #ead24d;
1093 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
1094 }
1095 }
1096 }
1097 }
1098}
1099
1100.blackjackSideBetsChooseCreditsModal {
1101 z-index: 20;
1102
1103 flex-direction: column !important;
1104
1105 position: fixed;
1106 left: 50vw;
1107 top: 45vh;
1108
1109 width: 41vw;
1110 height: 80vh;
1111
1112 padding: 10px;
1113
1114 transform: translate(-50%, -50%);
1115
1116 background: linear-gradient(to right, #00000080, #00000080);
1117
1118 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
1119
1120 border-radius: 20px;
1121
1122 p {
1123 margin-bottom: 1rem;
1124
1125 padding: 10px 20px;
1126 border-radius: 5px;
1127
1128 transition: all .25s linear;
1129
1130 span {
1131 font-size: 1.2rem;
1132 color: white;
1133 }
1134 }
1135}
1136
1137/**
1138 * File <- Roulette Main
1139 */
1140.rouletteMainContainer {
1141 background-color: #006600;
1142}
1143
1144#rouletteBall {
1145 position: absolute;
1146 top: 87.5%;
1147 left: 17.5%;
1148
1149 width: 1rem;
1150}
1151
1152#rouletteBetsImg {
1153 position: absolute;
1154 top: 65%;
1155 left: 59%;
1156
1157 transform: translate(-50%, -50%);
1158
1159 width: 50vw;
1160 height: auto;
1161
1162 cursor: url(/gold-coin.cur), auto;
1163}
1164
1165#rouletteWheelImg {
1166 position: absolute;
1167 top: 60%;
1168 left: 18%;
1169
1170 transition: all .5s ease-in-out;
1171
1172 width: 450px;
1173 height: auto;
1174}
1175
1176.rouletteInfoText {
1177 position: absolute;
1178 top: 15%;
1179
1180 width: 100vw;
1181
1182 text-align: center;
1183
1184 font-size: 1.1rem;
1185}
1186
1187.roulettePlayersContainer {
1188 position: absolute;
1189 top: 15%;
1190 right: 4%;
1191
1192 width: 10vw;
1193 height: 80vh;
1194
1195 box-shadow: 0 0 10px rgba(10, 148, 45, .25);
1196
1197 padding: 1rem;
1198
1199 display: grid;
1200 grid-template-rows: repeat(2, minmax(0, 1fr));
1201
1202 overflow-x: hidden;
1203 overflow-y: scroll;
1204
1205 p {
1206 word-wrap: break-word;
1207 margin-top: .5rem;
1208 }
1209}
1210
1211.rouletteTimer {
1212 position: absolute;
1213 top: calc((60% + 450px) / 2);
1214 left: calc(18.5%);
1215
1216 transform: translate(-50%, -50%);
1217
1218 display: flex;
1219 flex-direction: column;
1220 justify-content: center;
1221 align-items: center;
1222 gap: 5px;
1223
1224 font-size: 2.5rem;
1225
1226 color: black;
1227}
1228
1229.rouletteBetModal {
1230 z-index: 20;
1231
1232 flex-direction: column;
1233 justify-content: center;
1234 align-items: center;
1235
1236 position: fixed;
1237 left: 0;
1238 top: 0;
1239
1240 width: 100vw;
1241 height: 100vh;
1242
1243 background: #000000c0;
1244
1245 p {
1246 margin-bottom: 1rem;
1247
1248 padding: 10px 20px;
1249 border-radius: 5px;
1250
1251 transition: all .25s linear;
1252
1253 span {
1254 font-size: 1.2rem;
1255 color: #ead24d;
1256 }
1257 }
1258}
1259
1260.pokerRaiseModal {
1261 z-index: 20;
1262
1263 flex-direction: column;
1264 justify-content: center;
1265 align-items: center;
1266
1267 position: fixed;
1268 left: 0;
1269 top: 0;
1270
1271 width: 100vw;
1272 height: 100vh;
1273
1274 background: #000000c0;
1275
1276 p {
1277 margin-bottom: 1rem;
1278
1279 padding: 10px 20px;
1280 border-radius: 5px;
1281
1282 transition: all .25s linear;
1283
1284 span {
1285 font-size: 1.2rem;
1286 color: #ead24d;
1287 }
1288 }
1289}
1290
1291/**
1292 * Spin effect on the roulette wheel
1293 */
1294.spin {
1295 animation: spinner 4s infinite;
1296 animation-timing-function: ease-in-out;
1297}
1298
1299@keyframes spinner {
1300 0% {
1301 transform: translate(-50%, -50%) rotateZ(0deg);
1302 }
1303 10% {
1304 transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
1305 }
1306 20% {
1307 transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
1308 }
1309 30% {
1310 transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
1311 }
1312 40% {
1313 transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
1314 }
1315 50% {
1316 transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
1317 }
1318 60% {
1319 transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
1320 }
1321 70% {
1322 transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
1323 }
1324 80% {
1325 transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
1326 }
1327 90% {
1328 transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
1329 }
1330 100% {
1331 transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
1332 }
1333}
1334
1335/**
1336 * File <- Poker Main
1337 */
1338.pokerMainContainer {
1339 .pokerPickATableContainer {
1340 position: absolute;
1341 left: 0;
1342 top: 0;
1343 width: 100vw;
1344 height: 100vh;
1345
1346 background-color: #111;
1347
1348 display: flex;
1349 flex-direction: column;
1350 justify-content: center;
1351 align-items: center;
1352 gap: 5rem;
1353
1354 .createATable {
1355 &>input {
1356 margin-bottom: 2rem;
1357
1358 padding-left: 4px;
1359 padding-right: 4px;
1360
1361 font-size: 1.5rem;
1362
1363 margin-right: 1rem;
1364
1365 border-radius: .5rem;
1366 }
1367 }
1368
1369 &>div:not(.createATable) {
1370 &>h3 {
1371 margin-bottom: 1rem;
1372 }
1373
1374 &>div {
1375 display: flex;
1376 flex-direction: column;
1377 align-items: center;
1378 gap: 2rem;
1379
1380 width: 100vw;
1381 max-height: 45vh;
1382 padding-block: 2rem;
1383
1384 overflow-x: hidden;
1385 overflow-y: scroll;
1386
1387 &>div {
1388 box-shadow: 0 5px 25px #4d99eaaa;
1389
1390 width: 60vw;
1391
1392 padding: 1rem 3rem;
1393 border-radius: .5rem;
1394
1395 cursor: pointer;
1396
1397 display: grid;
1398 grid-template-columns: repeat(4, minmax(0, 1fr));
1399 place-items: center;
1400
1401 transition: all .2s ease-out;
1402
1403 &:hover {
1404 transform: scale(1.05);
1405 box-shadow: 0 10px 35px #4d99eaaa;
1406 }
1407 }
1408 }
1409 }
1410 }
1411
1412 .pokerChairsContainer {
1413 .pokerChair {
1414 position: absolute;
1415
1416 transform: translate(-50%, -50%);
1417
1418 width: 110px;
1419 aspect-ratio: 1;
1420
1421 border-radius: 50%;
1422
1423 border: 5px solid #ead24daa;
1424 background-color: black;
1425
1426 display: grid;
1427 place-items: center;
1428
1429 font-size: .8rem;
1430
1431 &.onTurn {
1432 border: 5px dotted #ead24d;
1433 background-color: #ead24d55;
1434 }
1435
1436 &.folded {
1437 border: 5px solid rgba(59, 59, 59, 0.667);
1438 background-color: rgba(59, 59, 59, 0.667);
1439 }
1440
1441 &>div {
1442 p {
1443 margin-block: 2px;
1444 }
1445 }
1446
1447 .pokerPlayerCardsContainer {
1448 position: relative;
1449
1450 &>div {
1451 position: absolute;
1452 top: -2vh;
1453
1454 transform: translate(-50%, -50%);
1455
1456 display: flex;
1457
1458 .card {
1459 height: 80px;
1460
1461 margin-inline: -1rem;
1462
1463 position: relative;
1464
1465 &:first-child {
1466 transform: rotateZ(-5deg);
1467 }
1468
1469 &:last-child {
1470 transform: rotateZ(5deg);
1471 }
1472 }
1473 }
1474 }
1475 }
1476 }
1477
1478 .pokerPotContainer {
1479 position: absolute;
1480 top: 57vh;
1481 left: 50vw;
1482
1483 transform: translate(-50%, -50%);
1484 }
1485
1486 .pokerPlayButtonsContainer {
1487 position: absolute;
1488 top: 62vh;
1489 left: 50vw;
1490
1491 transform: translate(-50%, -50%);
1492
1493 display: flex;
1494 justify-content: center;
1495 gap: 1rem;
1496
1497 button {
1498 min-width: 110px;
1499 }
1500 }
1501
1502 .cardsInTheMiddleContainer {
1503 position: absolute;
1504 top: 45vh;
1505 left: 50vw;
1506
1507 transform: translate(-50%, -50%);
1508
1509 display: flex;
1510 justify-content: center;
1511
1512 .card {
1513 height: 130px;
1514
1515 position: relative;
1516 margin-inline: 2px;
1517 }
1518 }
1519
1520 .pokerMessagesContainer {
1521 position: absolute;
1522 top: 5vh;
1523 left: 50vw;
1524
1525 transform: translateX(-50%);
1526
1527 &>p:first-child {
1528 font-style: italic;
1529 color: #c1fbaa;
1530 }
1531
1532 &>p:not(:first-child):not(:last-child) {
1533 font-size: 1.2rem;
1534 margin-top: 1rem;
1535 }
1536
1537 &>p:last-child {
1538 margin-top: .5rem;
1539 color: #ccc;
1540 }
1541 }
1542}
Note: See TracBrowser for help on using the repository browser.