source: styles/globals.scss@ b13f93b

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

Made poker tables system and round 1
  • Property mode set to 100644
File size: 16.9 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 svg {
403 cursor: pointer;
404 font-size: 2.5rem;
405 color: white;
406 }
407
408 &>div {
409 h1 {
410 font-size: 1.5rem;
411 margin-bottom: 1rem;
412 }
413
414 p {
415 margin-bottom: 5rem;
416 color: white;
417 }
418
419 button {
420 width: 100%;
421 }
422 }
423}
424
425.inlineAlert {
426 cursor: pointer;
427
428 background-color: #ffdddd;
429 padding: .8rem 2.4rem;
430 border-radius: 15px;
431
432 color: #ff0000;
433 font-size: 1.8rem !important;
434 font-weight: 100;
435 letter-spacing: -.030em;
436}
437
438/**
439 * Component <- Loading
440 */
441.loadingScreen {
442 h1 {
443 font-size: 5rem;
444 }
445}
446
447/**
448 * Component <- RegisterScreen
449 */
450
451/**
452 * Primary Thingies
453 */
454.primaryButton {
455 background: linear-gradient(to right, #0B932E, #097625);
456 color: #ead24d;
457
458 outline: none;
459 border: none;
460 border-radius: 10px;
461
462 font-size: 1.5rem;
463 font-weight: bold;
464 padding: 5px 20px;
465
466 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
467
468 cursor: pointer;
469 transition: all .2s linear;
470
471 &:hover {
472 transform: scale(1.1) rotateZ(-1deg);
473 // padding: 10px 20px;
474 }
475
476 &:active {
477 transition: .05s linear;
478 transform: scale(1) rotateZ(-1deg);
479 }
480}
481
482.secondaryButton {
483 background: linear-gradient(to right, #4d99ea, #4d99ea);
484 color: white;
485
486 outline: none;
487 border: none;
488 border-radius: 10px;
489
490 font-size: 1.5rem;
491 font-weight: bold;
492 padding: 5px 20px;
493
494 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
495
496 cursor: pointer;
497 transition: all .2s linear;
498
499 &:hover {
500 transform: scale(1.1) rotateZ(-1deg);
501 // padding: 10px 20px;
502 }
503
504 &:active {
505 transition: .05s linear;
506 transform: scale(1) rotateZ(-1deg);
507 }
508}
509
510.tertiaryButton {
511 background: linear-gradient(to right, #484848, #6a6a6a);
512 color: white;
513
514 outline: none;
515 border: none;
516 border-radius: 10px;
517
518 font-size: 1.5rem;
519 font-weight: bold;
520 padding: 5px 20px;
521
522 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
523
524 cursor: pointer;
525 transition: all .2s linear;
526
527 &:hover {
528 background: linear-gradient(to right, #6e6e6e, #a0a0a0);
529 }
530
531 &:active {
532 transition: .05s linear;
533 background: linear-gradient(to right, #484848, #6a6a6a);
534 }
535}
536
537/**
538 * Input Sliders
539 */
540.primarySlider {
541 -webkit-appearance: none;
542 width: 250px;
543 height: 10px;
544 background: #0B932E;
545 outline: none;
546 border-radius: 10px;
547 -webkit-transition: .2s;
548 transition: opacity .2s;
549
550 box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
551}
552
553.primarySlider:hover {
554 opacity: 1;
555}
556
557.primarySlider::-webkit-slider-thumb {
558 -webkit-appearance: none;
559 appearance: none;
560 outline: none;
561 border: none;
562 width: 35px;
563 height: 35px;
564 border-radius: 50%;
565 background: url("/images/gold-coin.png");
566 background-size: contain;
567 background-color: #ead24d;
568 cursor: pointer;
569}
570
571.primarySlider::-moz-range-thumb {
572 appearance: none;
573 outline: none;
574 border: none;
575 width: 35px;
576 height: 35px;
577 border-radius: 50%;
578 background: url("/images/gold-coin.png");
579 background-size: contain;
580 background-color: #ead24d;
581 cursor: pointer;
582}
583
584/**
585 * Scrollbar
586 */
587
588/* width */
589::-webkit-scrollbar {
590 width: 15px;
591}
592
593/* Track */
594::-webkit-scrollbar-track {
595 background: #0B932E;
596}
597
598/* Handle */
599::-webkit-scrollbar-thumb {
600 background: #ead24d;
601}
602
603/* Handle on hover */
604::-webkit-scrollbar-thumb:hover {
605 background: #efcb00;
606}
607
608/**
609 * File <- Blackjack Main
610 */
611.blackjackButtons {
612 position: absolute;
613
614 left: 0;
615 top: 90vh;
616
617 width: 100vw;
618 height: 10vh;
619
620 overflow: hidden;
621
622 &>div {
623 display: flex;
624 flex-direction: row;
625 justify-content: center;
626 align-items: center;
627
628 transition: .5s ease-in-out;
629
630 &>button {
631 width: 300px;
632 }
633
634 &>button:nth-child(2) {
635 margin-left: 30px;
636 }
637 }
638}
639
640.card {
641 aspect-ratio: 400/560;
642 height: 150px;
643
644 background-size: contain;
645
646 position: absolute;
647
648 transition: .5s ease-in-out;
649
650 border-radius: 10px;
651
652 border: 1px solid black;
653}
654
655.blackjackDisplayBet {
656 position: absolute;
657
658 transform: translate(-50%, -50%);
659
660 left: 51vw;
661 top: 63.5vh;
662}
663
664.blackjackSideBetsModal {
665 z-index: 20;
666
667 flex-direction: column !important;
668
669 position: fixed;
670 left: 50vw;
671 top: 45vh;
672
673 width: 41vw;
674 height: 80vh;
675
676 padding: 10px;
677
678 transform: translate(-50%, -50%);
679
680 background: linear-gradient(to right, #0B932Ec0, #097625e0);
681
682 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
683
684 border-radius: 20px;
685
686 overflow-y: scroll;
687
688 .blackjackSideBetSelect {
689 &:first-child {
690 margin-top: 10rem;
691 }
692
693 display: flex;
694 flex-direction: column;
695 width: 100%;
696
697 h1 {
698 margin-bottom: 1rem;
699
700 color: #ead24d;
701 }
702
703 &>div {
704 text-align: left;
705
706 p {
707 margin-bottom: 1rem;
708
709 padding: 10px 20px;
710 border-radius: 5px;
711
712 cursor: pointer;
713
714 transition: all .25s linear;
715
716 span {
717 font-size: 1.2rem;
718 color: #ead24d;
719 }
720
721 &:hover {
722 color: #ead24d;
723 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
724 }
725 }
726 }
727 }
728}
729
730.blackjackSideBetsChooseCreditsModal {
731 z-index: 20;
732
733 flex-direction: column !important;
734
735 position: fixed;
736 left: 50vw;
737 top: 45vh;
738
739 width: 41vw;
740 height: 80vh;
741
742 padding: 10px;
743
744 transform: translate(-50%, -50%);
745
746 background: linear-gradient(to right, #00000080, #00000080);
747
748 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
749
750 border-radius: 20px;
751
752 p {
753 margin-bottom: 1rem;
754
755 padding: 10px 20px;
756 border-radius: 5px;
757
758 transition: all .25s linear;
759
760 span {
761 font-size: 1.2rem;
762 color: white;
763 }
764 }
765}
766
767/**
768 * File <- Roulette Main
769 */
770.rouletteMainContainer {
771 background-color: #006600;
772}
773
774#rouletteBetsImg {
775 position: absolute;
776 top: 65%;
777 left: 59%;
778
779 transform: translate(-50%, -50%);
780
781 width: 50vw;
782 height: auto;
783
784 cursor: url(/gold-coin.cur), auto;
785}
786
787#rouletteWheelImg {
788 position: absolute;
789 top: 60%;
790 left: 18%;
791
792 transition: all .5s ease-in-out;
793
794 width: 450px;
795 height: auto;
796}
797
798.rouletteInfoText {
799 position: absolute;
800 top: 15%;
801
802 width: 100vw;
803
804 text-align: center;
805
806 font-size: 1.1rem;
807}
808
809.roulettePlayersContainer {
810 position: absolute;
811 top: 15%;
812 right: 4%;
813
814 width: 10vw;
815 height: 80vh;
816
817 box-shadow: 0 0 10px rgba(10, 148, 45, .25);
818
819 padding: 1rem;
820
821 display: grid;
822 grid-template-rows: repeat(2, minmax(0, 1fr));
823
824 overflow-x: hidden;
825 overflow-y: scroll;
826
827 p {
828 word-wrap: break-word;
829 margin-top: .5rem;
830 }
831}
832
833.rouletteTimer {
834 position: absolute;
835 top: calc((60% + 450px) / 2);
836 left: calc(18.5%);
837
838 transform: translate(-50%, -50%);
839
840 display: flex;
841 flex-direction: column;
842 justify-content: center;
843 align-items: center;
844 gap: 5px;
845
846 font-size: 2.5rem;
847
848 color: black;
849}
850
851.rouletteBetModal {
852 z-index: 20;
853
854 flex-direction: column;
855 justify-content: center;
856 align-items: center;
857
858 position: fixed;
859 left: 0;
860 top: 0;
861
862 width: 100vw;
863 height: 100vh;
864
865 background: #000000c0;
866
867 p {
868 margin-bottom: 1rem;
869
870 padding: 10px 20px;
871 border-radius: 5px;
872
873 transition: all .25s linear;
874
875 span {
876 font-size: 1.2rem;
877 color: #ead24d;
878 }
879 }
880}
881
882/**
883 * Spin effect on the roulette wheel
884 */
885.spin {
886 animation: spinner 4s infinite;
887 animation-timing-function: ease-in-out;
888}
889
890@keyframes spinner {
891 0% {
892 transform: translate(-50%, -50%) rotateZ(0deg);
893 }
894 10% {
895 transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
896 }
897 20% {
898 transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
899 }
900 30% {
901 transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
902 }
903 40% {
904 transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
905 }
906 50% {
907 transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
908 }
909 60% {
910 transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
911 }
912 70% {
913 transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
914 }
915 80% {
916 transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
917 }
918 90% {
919 transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
920 }
921 100% {
922 transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
923 }
924}
925
926/**
927 * File <- Poker Main
928 */
929.pokerMainContainer {
930 .pokerPickATableContainer {
931 position: absolute;
932 left: 0;
933 top: 0;
934 width: 100vw;
935 height: 100vh;
936
937 background-color: #111;
938
939 display: flex;
940 flex-direction: column;
941 justify-content: center;
942 align-items: center;
943 gap: 5rem;
944
945 .createATable {
946 &>input {
947 margin-bottom: 2rem;
948
949 padding-left: 4px;
950 padding-right: 4px;
951
952 font-size: 1.5rem;
953
954 margin-right: 1rem;
955
956 border-radius: .5rem;
957 }
958 }
959
960 &>div:not(.createATable) {
961 &>h3 {
962 margin-bottom: 1rem;
963 }
964
965 &>div {
966 display: flex;
967 flex-direction: column;
968 align-items: center;
969 gap: 2rem;
970
971 width: 100vw;
972 max-height: 45vh;
973 padding-block: 2rem;
974
975 overflow-x: hidden;
976 overflow-y: scroll;
977
978 &>div {
979 box-shadow: 0 5px 25px #4d99eaaa;
980
981 width: 60vw;
982
983 padding: 1rem 3rem;
984 border-radius: .5rem;
985
986 cursor: pointer;
987
988 display: grid;
989 grid-template-columns: repeat(4, minmax(0, 1fr));
990 place-items: center;
991
992 transition: all .2s ease-out;
993
994 &:hover {
995 transform: scale(1.05);
996 box-shadow: 0 10px 35px #4d99eaaa;
997 }
998 }
999 }
1000 }
1001 }
1002
1003 .pokerChairsContainer {
1004 .pokerChair {
1005 position: absolute;
1006
1007 transform: translate(-50%, -50%);
1008
1009 width: 110px;
1010 aspect-ratio: 1;
1011
1012 border-radius: 50%;
1013
1014 border: 5px solid #ead24daa;
1015 background-color: black;
1016
1017 display: grid;
1018 place-items: center;
1019
1020 font-size: .8rem;
1021
1022 &.onTurn {
1023 border: 5px solid #ead24d;
1024 }
1025
1026 &.folded {
1027 border: 5px solid rgba(71, 64, 24, 0.667);
1028 }
1029
1030 &>div {
1031 p {
1032 margin-block: 2px;
1033 }
1034 }
1035
1036 .pokerPlayerCardsContainer {
1037 position: relative;
1038
1039 &>div {
1040 position: absolute;
1041 top: -2vh;
1042
1043 transform: translate(-50%, -50%);
1044
1045 display: flex;
1046
1047 .card {
1048 height: 80px;
1049
1050 margin-inline: -1rem;
1051
1052 position: relative;
1053
1054 &:first-child {
1055 transform: rotateZ(-5deg);
1056 }
1057
1058 &:last-child {
1059 transform: rotateZ(5deg);
1060 }
1061 }
1062 }
1063 }
1064 }
1065 }
1066
1067 .pokerPlayButtonsContainer {
1068 position: absolute;
1069 top: 59vh;
1070 left: 50vw;
1071
1072 transform: translate(-50%, -50%);
1073
1074 display: flex;
1075 justify-content: center;
1076 gap: 1rem;
1077
1078 button {
1079 min-width: 110px;
1080 }
1081 }
1082
1083 .cardsInTheMiddleContainer {
1084 position: absolute;
1085 top: 45vh;
1086 left: 50vw;
1087
1088 transform: translate(-50%, -50%);
1089
1090 display: flex;
1091 justify-content: center;
1092
1093 .card {
1094 height: 130px;
1095
1096 position: relative;
1097 margin-inline: 2px;
1098 }
1099 }
1100
1101 .pokerMessagesContainer {
1102 position: absolute;
1103 top: 5vh;
1104 left: 50vw;
1105
1106 transform: translateX(-50%);
1107
1108 &>p:first-child {
1109 font-style: italic;
1110 color: #c1fbaa;
1111 }
1112
1113 &>p:not(:first-child):not(:last-child) {
1114 font-size: 1.2rem;
1115 margin-top: 1rem;
1116 }
1117
1118 &>p:last-child {
1119 margin-top: .5rem;
1120 color: #ccc;
1121 }
1122 }
1123}
Note: See TracBrowser for help on using the repository browser.