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