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