source: styles/globals.scss@ faff334

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

Ability for admin to watch live games and for user to see games history
  • Property mode set to 100644
File size: 23.1 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 .card {
716 margin-inline: -1.6rem;
717
718 height: 100px;
719 }
720 }
721
722 .playerInLiveRouletteGame, .playerInLivePokerGame {
723 display: flex;
724 align-items: center;
725
726 &>div {
727 flex: 1;
728 }
729 }
730
731 .playerInLivePokerGame {
732 margin-block: .8rem;
733 }
734 }
735 }
736}
737
738.complaintsScreen {
739 z-index: 20;
740
741 .complaint {
742 width: 100%;
743 padding: 2rem;
744
745 transition: all .2s linear;
746 box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
747 &:hover {
748 box-shadow: 0 5px 25px rgba(0, 0, 0, .25);
749 }
750
751 &:nth-child(2n+1) {
752 color: white;
753 }
754
755 &>div:nth-child(1) {
756 display: flex;
757 justify-content: space-between;
758 align-items: center;
759
760 &>* {
761 flex: 1;
762 }
763
764 &>div {
765 display: flex;
766 justify-content: flex-end;
767 }
768 }
769
770 textarea {
771 width: 100%;
772 height: 7rem;
773 margin-top: .5rem;
774 font-size: 1.2rem;
775 padding: .4rem;
776
777 background-color: rgb(195, 255, 210);
778 }
779
780 .answering {
781 margin-top: 1rem;
782
783 &>div {
784 display: flex;
785 justify-content: flex-end;
786 margin-top: 1rem;
787 }
788 }
789
790 .primaryButton, .secondaryButton {
791 font-size: 1rem;
792 }
793 }
794}
795
796.liveGamesScreen {
797 z-index: 20;
798}
799
800.dashboardScreen {
801 &.admin {
802 .fs-inputs-container {
803 transform: translate(-50%, -75%);
804
805 &>div {
806 gap: 10rem;
807
808 &>div {
809 width: 50vw;
810 display: flex;
811 justify-content: space-around;
812 }
813 }
814 }
815 }
816}
817
818/**
819 * Primary Thingies
820 */
821.primaryButton {
822 background: linear-gradient(to right, #0B932E, #097625);
823 color: #ead24d;
824
825 outline: none;
826 border: none;
827 border-radius: 10px;
828
829 font-size: 1.5rem;
830 font-weight: bold;
831 padding: 5px 20px;
832
833 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
834
835 cursor: pointer;
836 transition: all .2s linear;
837
838 &:hover {
839 transform: scale(1.1) rotateZ(-1deg);
840 // padding: 10px 20px;
841 }
842
843 &:active {
844 transition: .05s linear;
845 transform: scale(1) rotateZ(-1deg);
846 }
847}
848
849.secondaryButton {
850 background: linear-gradient(to right, #4d99ea, #4d99ea);
851 color: white;
852
853 outline: none;
854 border: none;
855 border-radius: 10px;
856
857 font-size: 1.5rem;
858 font-weight: bold;
859 padding: 5px 20px;
860
861 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
862
863 cursor: pointer;
864 transition: all .2s linear;
865
866 &:hover {
867 transform: scale(1.1) rotateZ(-1deg);
868 // padding: 10px 20px;
869 }
870
871 &:active {
872 transition: .05s linear;
873 transform: scale(1) rotateZ(-1deg);
874 }
875}
876
877.tertiaryButton {
878 background: linear-gradient(to right, #484848, #6a6a6a);
879 color: white;
880
881 outline: none;
882 border: none;
883 border-radius: 10px;
884
885 font-size: 1.5rem;
886 font-weight: bold;
887 padding: 5px 20px;
888
889 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
890
891 cursor: pointer;
892 transition: all .2s linear;
893
894 &:hover {
895 background: linear-gradient(to right, #6e6e6e, #a0a0a0);
896 }
897
898 &:active {
899 transition: .05s linear;
900 background: linear-gradient(to right, #484848, #6a6a6a);
901 }
902}
903
904/**
905 * Input Sliders
906 */
907.primarySlider {
908 -webkit-appearance: none;
909 width: 250px;
910 height: 10px;
911 background: #0B932E;
912 outline: none;
913 border-radius: 10px;
914 -webkit-transition: .2s;
915 transition: opacity .2s;
916
917 box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
918}
919
920.primarySlider:hover {
921 opacity: 1;
922}
923
924.primarySlider::-webkit-slider-thumb {
925 -webkit-appearance: none;
926 appearance: none;
927 outline: none;
928 border: none;
929 width: 35px;
930 height: 35px;
931 border-radius: 50%;
932 background: url("/images/gold-coin.png");
933 background-size: contain;
934 background-color: #ead24d;
935 cursor: pointer;
936}
937
938.primarySlider::-moz-range-thumb {
939 appearance: none;
940 outline: none;
941 border: none;
942 width: 35px;
943 height: 35px;
944 border-radius: 50%;
945 background: url("/images/gold-coin.png");
946 background-size: contain;
947 background-color: #ead24d;
948 cursor: pointer;
949}
950
951/**
952 * Scrollbar
953 */
954
955/* width */
956::-webkit-scrollbar {
957 width: 15px;
958}
959
960/* Track */
961::-webkit-scrollbar-track {
962 background: #0B932E;
963}
964
965/* Handle */
966::-webkit-scrollbar-thumb {
967 background: #ead24d;
968}
969
970/* Handle on hover */
971::-webkit-scrollbar-thumb:hover {
972 background: #efcb00;
973}
974
975/**
976 * File <- Blackjack Main
977 */
978.blackjackButtons {
979 position: absolute;
980
981 left: 0;
982 top: 90vh;
983
984 width: 100vw;
985 height: 10vh;
986
987 overflow: hidden;
988
989 &>div {
990 display: flex;
991 flex-direction: row;
992 justify-content: center;
993 align-items: center;
994
995 transition: .5s ease-in-out;
996
997 &>button {
998 width: 300px;
999 }
1000
1001 &>button:nth-child(2) {
1002 margin-left: 30px;
1003 }
1004 }
1005}
1006
1007.card {
1008 aspect-ratio: 400/560;
1009 height: 150px;
1010
1011 background-size: contain;
1012
1013 position: absolute;
1014
1015 transition: .5s ease-in-out;
1016
1017 border-radius: 10px;
1018
1019 border: 1px solid black;
1020}
1021
1022.blackjackDisplayBet {
1023 position: absolute;
1024
1025 transform: translate(-50%, -50%);
1026
1027 left: 51vw;
1028 top: 63.5vh;
1029}
1030
1031.blackjackSideBetsModal {
1032 z-index: 20;
1033
1034 flex-direction: column !important;
1035
1036 position: fixed;
1037 left: 50vw;
1038 top: 45vh;
1039
1040 width: 41vw;
1041 height: 80vh;
1042
1043 padding: 10px;
1044
1045 transform: translate(-50%, -50%);
1046
1047 background: linear-gradient(to right, #0B932Ec0, #097625e0);
1048
1049 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
1050
1051 border-radius: 20px;
1052
1053 overflow-y: scroll;
1054
1055 .blackjackSideBetSelect {
1056 &:first-child {
1057 margin-top: 10rem;
1058 }
1059
1060 display: flex;
1061 flex-direction: column;
1062 width: 100%;
1063
1064 h1 {
1065 margin-bottom: 1rem;
1066
1067 color: #ead24d;
1068 }
1069
1070 &>div {
1071 text-align: left;
1072
1073 p {
1074 margin-bottom: 1rem;
1075
1076 padding: 10px 20px;
1077 border-radius: 5px;
1078
1079 cursor: pointer;
1080
1081 transition: all .25s linear;
1082
1083 span {
1084 font-size: 1.2rem;
1085 color: #ead24d;
1086 }
1087
1088 &:hover {
1089 color: #ead24d;
1090 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
1091 }
1092 }
1093 }
1094 }
1095}
1096
1097.blackjackSideBetsChooseCreditsModal {
1098 z-index: 20;
1099
1100 flex-direction: column !important;
1101
1102 position: fixed;
1103 left: 50vw;
1104 top: 45vh;
1105
1106 width: 41vw;
1107 height: 80vh;
1108
1109 padding: 10px;
1110
1111 transform: translate(-50%, -50%);
1112
1113 background: linear-gradient(to right, #00000080, #00000080);
1114
1115 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
1116
1117 border-radius: 20px;
1118
1119 p {
1120 margin-bottom: 1rem;
1121
1122 padding: 10px 20px;
1123 border-radius: 5px;
1124
1125 transition: all .25s linear;
1126
1127 span {
1128 font-size: 1.2rem;
1129 color: white;
1130 }
1131 }
1132}
1133
1134/**
1135 * File <- Roulette Main
1136 */
1137.rouletteMainContainer {
1138 background-color: #006600;
1139}
1140
1141#rouletteBall {
1142 position: absolute;
1143 top: 87.5%;
1144 left: 17.5%;
1145
1146 width: 1rem;
1147}
1148
1149#rouletteBetsImg {
1150 position: absolute;
1151 top: 65%;
1152 left: 59%;
1153
1154 transform: translate(-50%, -50%);
1155
1156 width: 50vw;
1157 height: auto;
1158
1159 cursor: url(/gold-coin.cur), auto;
1160}
1161
1162#rouletteWheelImg {
1163 position: absolute;
1164 top: 60%;
1165 left: 18%;
1166
1167 transition: all .5s ease-in-out;
1168
1169 width: 450px;
1170 height: auto;
1171}
1172
1173.rouletteInfoText {
1174 position: absolute;
1175 top: 15%;
1176
1177 width: 100vw;
1178
1179 text-align: center;
1180
1181 font-size: 1.1rem;
1182}
1183
1184.roulettePlayersContainer {
1185 position: absolute;
1186 top: 15%;
1187 right: 4%;
1188
1189 width: 10vw;
1190 height: 80vh;
1191
1192 box-shadow: 0 0 10px rgba(10, 148, 45, .25);
1193
1194 padding: 1rem;
1195
1196 display: grid;
1197 grid-template-rows: repeat(2, minmax(0, 1fr));
1198
1199 overflow-x: hidden;
1200 overflow-y: scroll;
1201
1202 p {
1203 word-wrap: break-word;
1204 margin-top: .5rem;
1205 }
1206}
1207
1208.rouletteTimer {
1209 position: absolute;
1210 top: calc((60% + 450px) / 2);
1211 left: calc(18.5%);
1212
1213 transform: translate(-50%, -50%);
1214
1215 display: flex;
1216 flex-direction: column;
1217 justify-content: center;
1218 align-items: center;
1219 gap: 5px;
1220
1221 font-size: 2.5rem;
1222
1223 color: black;
1224}
1225
1226.rouletteBetModal {
1227 z-index: 20;
1228
1229 flex-direction: column;
1230 justify-content: center;
1231 align-items: center;
1232
1233 position: fixed;
1234 left: 0;
1235 top: 0;
1236
1237 width: 100vw;
1238 height: 100vh;
1239
1240 background: #000000c0;
1241
1242 p {
1243 margin-bottom: 1rem;
1244
1245 padding: 10px 20px;
1246 border-radius: 5px;
1247
1248 transition: all .25s linear;
1249
1250 span {
1251 font-size: 1.2rem;
1252 color: #ead24d;
1253 }
1254 }
1255}
1256
1257.pokerRaiseModal {
1258 z-index: 20;
1259
1260 flex-direction: column;
1261 justify-content: center;
1262 align-items: center;
1263
1264 position: fixed;
1265 left: 0;
1266 top: 0;
1267
1268 width: 100vw;
1269 height: 100vh;
1270
1271 background: #000000c0;
1272
1273 p {
1274 margin-bottom: 1rem;
1275
1276 padding: 10px 20px;
1277 border-radius: 5px;
1278
1279 transition: all .25s linear;
1280
1281 span {
1282 font-size: 1.2rem;
1283 color: #ead24d;
1284 }
1285 }
1286}
1287
1288/**
1289 * Spin effect on the roulette wheel
1290 */
1291.spin {
1292 animation: spinner 4s infinite;
1293 animation-timing-function: ease-in-out;
1294}
1295
1296@keyframes spinner {
1297 0% {
1298 transform: translate(-50%, -50%) rotateZ(0deg);
1299 }
1300 10% {
1301 transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
1302 }
1303 20% {
1304 transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
1305 }
1306 30% {
1307 transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
1308 }
1309 40% {
1310 transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
1311 }
1312 50% {
1313 transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
1314 }
1315 60% {
1316 transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
1317 }
1318 70% {
1319 transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
1320 }
1321 80% {
1322 transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
1323 }
1324 90% {
1325 transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
1326 }
1327 100% {
1328 transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
1329 }
1330}
1331
1332/**
1333 * File <- Poker Main
1334 */
1335.pokerMainContainer {
1336 .pokerPickATableContainer {
1337 position: absolute;
1338 left: 0;
1339 top: 0;
1340 width: 100vw;
1341 height: 100vh;
1342
1343 background-color: #111;
1344
1345 display: flex;
1346 flex-direction: column;
1347 justify-content: center;
1348 align-items: center;
1349 gap: 5rem;
1350
1351 .createATable {
1352 &>input {
1353 margin-bottom: 2rem;
1354
1355 padding-left: 4px;
1356 padding-right: 4px;
1357
1358 font-size: 1.5rem;
1359
1360 margin-right: 1rem;
1361
1362 border-radius: .5rem;
1363 }
1364 }
1365
1366 &>div:not(.createATable) {
1367 &>h3 {
1368 margin-bottom: 1rem;
1369 }
1370
1371 &>div {
1372 display: flex;
1373 flex-direction: column;
1374 align-items: center;
1375 gap: 2rem;
1376
1377 width: 100vw;
1378 max-height: 45vh;
1379 padding-block: 2rem;
1380
1381 overflow-x: hidden;
1382 overflow-y: scroll;
1383
1384 &>div {
1385 box-shadow: 0 5px 25px #4d99eaaa;
1386
1387 width: 60vw;
1388
1389 padding: 1rem 3rem;
1390 border-radius: .5rem;
1391
1392 cursor: pointer;
1393
1394 display: grid;
1395 grid-template-columns: repeat(4, minmax(0, 1fr));
1396 place-items: center;
1397
1398 transition: all .2s ease-out;
1399
1400 &:hover {
1401 transform: scale(1.05);
1402 box-shadow: 0 10px 35px #4d99eaaa;
1403 }
1404 }
1405 }
1406 }
1407 }
1408
1409 .pokerChairsContainer {
1410 .pokerChair {
1411 position: absolute;
1412
1413 transform: translate(-50%, -50%);
1414
1415 width: 110px;
1416 aspect-ratio: 1;
1417
1418 border-radius: 50%;
1419
1420 border: 5px solid #ead24daa;
1421 background-color: black;
1422
1423 display: grid;
1424 place-items: center;
1425
1426 font-size: .8rem;
1427
1428 &.onTurn {
1429 border: 5px dotted #ead24d;
1430 background-color: #ead24d55;
1431 }
1432
1433 &.folded {
1434 border: 5px solid rgba(59, 59, 59, 0.667);
1435 background-color: rgba(59, 59, 59, 0.667);
1436 }
1437
1438 &>div {
1439 p {
1440 margin-block: 2px;
1441 }
1442 }
1443
1444 .pokerPlayerCardsContainer {
1445 position: relative;
1446
1447 &>div {
1448 position: absolute;
1449 top: -2vh;
1450
1451 transform: translate(-50%, -50%);
1452
1453 display: flex;
1454
1455 .card {
1456 height: 80px;
1457
1458 margin-inline: -1rem;
1459
1460 position: relative;
1461
1462 &:first-child {
1463 transform: rotateZ(-5deg);
1464 }
1465
1466 &:last-child {
1467 transform: rotateZ(5deg);
1468 }
1469 }
1470 }
1471 }
1472 }
1473 }
1474
1475 .pokerPotContainer {
1476 position: absolute;
1477 top: 57vh;
1478 left: 50vw;
1479
1480 transform: translate(-50%, -50%);
1481 }
1482
1483 .pokerPlayButtonsContainer {
1484 position: absolute;
1485 top: 62vh;
1486 left: 50vw;
1487
1488 transform: translate(-50%, -50%);
1489
1490 display: flex;
1491 justify-content: center;
1492 gap: 1rem;
1493
1494 button {
1495 min-width: 110px;
1496 }
1497 }
1498
1499 .cardsInTheMiddleContainer {
1500 position: absolute;
1501 top: 45vh;
1502 left: 50vw;
1503
1504 transform: translate(-50%, -50%);
1505
1506 display: flex;
1507 justify-content: center;
1508
1509 .card {
1510 height: 130px;
1511
1512 position: relative;
1513 margin-inline: 2px;
1514 }
1515 }
1516
1517 .pokerMessagesContainer {
1518 position: absolute;
1519 top: 5vh;
1520 left: 50vw;
1521
1522 transform: translateX(-50%);
1523
1524 &>p:first-child {
1525 font-style: italic;
1526 color: #c1fbaa;
1527 }
1528
1529 &>p:not(:first-child):not(:last-child) {
1530 font-size: 1.2rem;
1531 margin-top: 1rem;
1532 }
1533
1534 &>p:last-child {
1535 margin-top: .5rem;
1536 color: #ccc;
1537 }
1538 }
1539}
Note: See TracBrowser for help on using the repository browser.