source: styles/globals.scss@ 3a783f2

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

Finished poker and added ball to roulette
  • Property mode set to 100644
File size: 17.5 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#rouletteBall {
775 position: absolute;
776 top: 87.5%;
777 left: 17.5%;
778
779 width: 1rem;
780}
781
782#rouletteBetsImg {
783 position: absolute;
784 top: 65%;
785 left: 59%;
786
787 transform: translate(-50%, -50%);
788
789 width: 50vw;
790 height: auto;
791
792 cursor: url(/gold-coin.cur), auto;
793}
794
795#rouletteWheelImg {
796 position: absolute;
797 top: 60%;
798 left: 18%;
799
800 transition: all .5s ease-in-out;
801
802 width: 450px;
803 height: auto;
804}
805
806.rouletteInfoText {
807 position: absolute;
808 top: 15%;
809
810 width: 100vw;
811
812 text-align: center;
813
814 font-size: 1.1rem;
815}
816
817.roulettePlayersContainer {
818 position: absolute;
819 top: 15%;
820 right: 4%;
821
822 width: 10vw;
823 height: 80vh;
824
825 box-shadow: 0 0 10px rgba(10, 148, 45, .25);
826
827 padding: 1rem;
828
829 display: grid;
830 grid-template-rows: repeat(2, minmax(0, 1fr));
831
832 overflow-x: hidden;
833 overflow-y: scroll;
834
835 p {
836 word-wrap: break-word;
837 margin-top: .5rem;
838 }
839}
840
841.rouletteTimer {
842 position: absolute;
843 top: calc((60% + 450px) / 2);
844 left: calc(18.5%);
845
846 transform: translate(-50%, -50%);
847
848 display: flex;
849 flex-direction: column;
850 justify-content: center;
851 align-items: center;
852 gap: 5px;
853
854 font-size: 2.5rem;
855
856 color: black;
857}
858
859.rouletteBetModal {
860 z-index: 20;
861
862 flex-direction: column;
863 justify-content: center;
864 align-items: center;
865
866 position: fixed;
867 left: 0;
868 top: 0;
869
870 width: 100vw;
871 height: 100vh;
872
873 background: #000000c0;
874
875 p {
876 margin-bottom: 1rem;
877
878 padding: 10px 20px;
879 border-radius: 5px;
880
881 transition: all .25s linear;
882
883 span {
884 font-size: 1.2rem;
885 color: #ead24d;
886 }
887 }
888}
889
890.pokerRaiseModal {
891 z-index: 20;
892
893 flex-direction: column;
894 justify-content: center;
895 align-items: center;
896
897 position: fixed;
898 left: 0;
899 top: 0;
900
901 width: 100vw;
902 height: 100vh;
903
904 background: #000000c0;
905
906 p {
907 margin-bottom: 1rem;
908
909 padding: 10px 20px;
910 border-radius: 5px;
911
912 transition: all .25s linear;
913
914 span {
915 font-size: 1.2rem;
916 color: #ead24d;
917 }
918 }
919}
920
921/**
922 * Spin effect on the roulette wheel
923 */
924.spin {
925 animation: spinner 4s infinite;
926 animation-timing-function: ease-in-out;
927}
928
929@keyframes spinner {
930 0% {
931 transform: translate(-50%, -50%) rotateZ(0deg);
932 }
933 10% {
934 transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
935 }
936 20% {
937 transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
938 }
939 30% {
940 transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
941 }
942 40% {
943 transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
944 }
945 50% {
946 transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
947 }
948 60% {
949 transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
950 }
951 70% {
952 transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
953 }
954 80% {
955 transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
956 }
957 90% {
958 transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
959 }
960 100% {
961 transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
962 }
963}
964
965/**
966 * File <- Poker Main
967 */
968.pokerMainContainer {
969 .pokerPickATableContainer {
970 position: absolute;
971 left: 0;
972 top: 0;
973 width: 100vw;
974 height: 100vh;
975
976 background-color: #111;
977
978 display: flex;
979 flex-direction: column;
980 justify-content: center;
981 align-items: center;
982 gap: 5rem;
983
984 .createATable {
985 &>input {
986 margin-bottom: 2rem;
987
988 padding-left: 4px;
989 padding-right: 4px;
990
991 font-size: 1.5rem;
992
993 margin-right: 1rem;
994
995 border-radius: .5rem;
996 }
997 }
998
999 &>div:not(.createATable) {
1000 &>h3 {
1001 margin-bottom: 1rem;
1002 }
1003
1004 &>div {
1005 display: flex;
1006 flex-direction: column;
1007 align-items: center;
1008 gap: 2rem;
1009
1010 width: 100vw;
1011 max-height: 45vh;
1012 padding-block: 2rem;
1013
1014 overflow-x: hidden;
1015 overflow-y: scroll;
1016
1017 &>div {
1018 box-shadow: 0 5px 25px #4d99eaaa;
1019
1020 width: 60vw;
1021
1022 padding: 1rem 3rem;
1023 border-radius: .5rem;
1024
1025 cursor: pointer;
1026
1027 display: grid;
1028 grid-template-columns: repeat(4, minmax(0, 1fr));
1029 place-items: center;
1030
1031 transition: all .2s ease-out;
1032
1033 &:hover {
1034 transform: scale(1.05);
1035 box-shadow: 0 10px 35px #4d99eaaa;
1036 }
1037 }
1038 }
1039 }
1040 }
1041
1042 .pokerChairsContainer {
1043 .pokerChair {
1044 position: absolute;
1045
1046 transform: translate(-50%, -50%);
1047
1048 width: 110px;
1049 aspect-ratio: 1;
1050
1051 border-radius: 50%;
1052
1053 border: 5px solid #ead24daa;
1054 background-color: black;
1055
1056 display: grid;
1057 place-items: center;
1058
1059 font-size: .8rem;
1060
1061 &.onTurn {
1062 border: 5px dotted #ead24d;
1063 background-color: #ead24d55;
1064 }
1065
1066 &.folded {
1067 border: 5px solid rgba(59, 59, 59, 0.667);
1068 background-color: rgba(59, 59, 59, 0.667);
1069 }
1070
1071 &>div {
1072 p {
1073 margin-block: 2px;
1074 }
1075 }
1076
1077 .pokerPlayerCardsContainer {
1078 position: relative;
1079
1080 &>div {
1081 position: absolute;
1082 top: -2vh;
1083
1084 transform: translate(-50%, -50%);
1085
1086 display: flex;
1087
1088 .card {
1089 height: 80px;
1090
1091 margin-inline: -1rem;
1092
1093 position: relative;
1094
1095 &:first-child {
1096 transform: rotateZ(-5deg);
1097 }
1098
1099 &:last-child {
1100 transform: rotateZ(5deg);
1101 }
1102 }
1103 }
1104 }
1105 }
1106 }
1107
1108 .pokerPotContainer {
1109 position: absolute;
1110 top: 57vh;
1111 left: 50vw;
1112
1113 transform: translate(-50%, -50%);
1114 }
1115
1116 .pokerPlayButtonsContainer {
1117 position: absolute;
1118 top: 62vh;
1119 left: 50vw;
1120
1121 transform: translate(-50%, -50%);
1122
1123 display: flex;
1124 justify-content: center;
1125 gap: 1rem;
1126
1127 button {
1128 min-width: 110px;
1129 }
1130 }
1131
1132 .cardsInTheMiddleContainer {
1133 position: absolute;
1134 top: 45vh;
1135 left: 50vw;
1136
1137 transform: translate(-50%, -50%);
1138
1139 display: flex;
1140 justify-content: center;
1141
1142 .card {
1143 height: 130px;
1144
1145 position: relative;
1146 margin-inline: 2px;
1147 }
1148 }
1149
1150 .pokerMessagesContainer {
1151 position: absolute;
1152 top: 5vh;
1153 left: 50vw;
1154
1155 transform: translateX(-50%);
1156
1157 &>p:first-child {
1158 font-style: italic;
1159 color: #c1fbaa;
1160 }
1161
1162 &>p:not(:first-child):not(:last-child) {
1163 font-size: 1.2rem;
1164 margin-top: 1rem;
1165 }
1166
1167 &>p:last-child {
1168 margin-top: .5rem;
1169 color: #ccc;
1170 }
1171 }
1172}
Note: See TracBrowser for help on using the repository browser.