source: styles/globals.css@ ace7865

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

Finished Roulette
  • Property mode set to 100644
File size: 22.6 KB
RevLine 
[87614a5]1@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap);
[6568bde]2html,
3body {
4 padding: 0;
5 margin: 0;
[87614a5]6 font-family: 'Inter', sans-serif;
[ace7865]7 overflow: hidden;
[6568bde]8}
9
10a {
11 color: inherit;
12 text-decoration: none;
13}
14
15* {
[87614a5]16 -webkit-box-sizing: border-box;
17 box-sizing: border-box;
[6568bde]18}
[87614a5]19
20p, h1, h3 {
21 margin: 0;
22}
23
24.app {
25 color: white;
26 letter-spacing: 1px;
27 width: 100vw;
28 height: 100vh;
29 margin: auto;
30 overflow: hidden;
31 background-size: cover;
32 background-repeat: no-repeat;
33 background-position: 0% 50%;
34 text-align: center;
35}
36
37/**
38 * Component <- Header
39 */
40header.header {
41 display: -webkit-box;
42 display: -ms-flexbox;
43 display: flex;
44 -webkit-box-pack: justify;
45 -ms-flex-pack: justify;
46 justify-content: space-between;
47 -webkit-box-align: center;
48 -ms-flex-align: center;
49 align-items: center;
50 width: 92vw;
51 margin: auto;
52 margin-top: 20px;
53}
54
55header.header .logo {
56 width: 80px;
57 aspect-ratio: 1;
58 border-radius: 100%;
59 background-image: url("/images/logo.png");
60 background-size: cover;
61 border: 2px solid rgba(255, 255, 255, 0.2);
62 cursor: pointer;
63}
64
65header.header h2 {
66 cursor: pointer;
67}
68
69header.header nav ul {
70 display: -webkit-box;
71 display: -ms-flexbox;
72 display: flex;
73 -webkit-box-orient: horizontal;
74 -webkit-box-direction: normal;
75 -ms-flex-direction: row;
76 flex-direction: row;
77 list-style-type: none;
78}
79
80header.header nav ul li {
81 margin-right: 4rem;
82}
83
84header.header nav ul li:last-child {
85 margin-right: 0;
86}
87
[64dc53b]88header.header nav.mainHeaderNavigation ul li {
89 cursor: pointer;
90}
91
[87614a5]92/**
93 * Component <- Full Width Text
94 *
95 * Used in "Welcome To Caessino"
96 */
97.fullwidthText {
98 width: 100vw;
99 display: -webkit-box;
100 display: -ms-flexbox;
101 display: flex;
102 -webkit-box-orient: vertical;
103 -webkit-box-direction: normal;
104 -ms-flex-direction: column;
105 flex-direction: column;
106 -webkit-box-pack: center;
107 -ms-flex-pack: center;
108 justify-content: center;
109 -webkit-box-align: center;
110 -ms-flex-align: center;
111 align-items: center;
112 margin-top: 40px;
113 padding: 15px 0 20px 0;
114 background-color: rgba(0, 0, 0, 0.6);
115}
116
117.fullwidthText h1 {
118 color: #FFD700;
119 font-weight: lighter;
120 font-size: 2.5rem;
121}
122
123.fullwidthText h3 {
124 margin-top: 15px;
125 font-weight: lighter;
126}
127
128/**
129 * Component <- Alert
130 *
131 * Similar to Full Width Text
132 */
133.alert {
[ace7865]134 z-index: 30;
[87614a5]135 width: 100vw;
136 display: -webkit-box;
137 display: -ms-flexbox;
138 display: flex;
139 -webkit-box-orient: vertical;
140 -webkit-box-direction: normal;
141 -ms-flex-direction: column;
142 flex-direction: column;
143 -webkit-box-pack: center;
144 -ms-flex-pack: center;
145 justify-content: center;
146 -webkit-box-align: center;
147 -ms-flex-align: center;
148 align-items: center;
149 padding: 20px 0 25px 0;
150 background-color: rgba(0, 0, 0, 0.9);
151 position: absolute;
152 -webkit-transform: translateY(-70%);
153 transform: translateY(-70%);
154 -webkit-transition: '.5s linear';
155 transition: '.5s linear';
156}
157
158.alert h1 {
159 color: #FFD700;
160 font-weight: lighter;
161 font-size: 2.5rem;
162}
163
164.alert h3 {
165 margin-top: 10px;
166 font-weight: lighter;
167}
168
169.alert button {
170 width: 500px;
171 margin-top: 20px;
172}
173
174/**
175 * Component <- Notification
176 *
177 * Displayed fixed in the top right corner
178 */
179.notification {
180 position: fixed;
181 top: 40px;
182 right: 30px;
183 width: 500px;
184 min-height: 200px;
185 display: -webkit-box;
186 display: -ms-flexbox;
187 display: flex;
188 -webkit-box-orient: vertical;
189 -webkit-box-direction: normal;
190 -ms-flex-direction: column;
191 flex-direction: column;
192 -webkit-box-pack: center;
193 -ms-flex-pack: center;
194 justify-content: center;
195 -webkit-box-align: end;
196 -ms-flex-align: end;
197 align-items: flex-end;
198 font-size: 2rem;
199 padding: 20px;
200 border-radius: 15px;
201 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
202 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
203}
204
205.notification svg {
206 cursor: pointer;
207}
208
209.notification > div {
210 -webkit-box-flex: 1;
211 -ms-flex: 1;
212 flex: 1;
213 width: 100%;
214 display: -webkit-box;
215 display: -ms-flexbox;
216 display: flex;
217 -webkit-box-pack: center;
218 -ms-flex-pack: center;
219 justify-content: center;
220 -webkit-box-align: center;
221 -ms-flex-align: center;
222 align-items: center;
223 font-size: 1.5rem;
224 margin-bottom: 1.2rem;
225 text-align: center;
226}
227
228/**
229 * Component <- Game Circle
230 *
231 * Used in Landing Page -> to display the games in circles
232 */
233.gameCircles {
234 display: -webkit-box;
235 display: -ms-flexbox;
236 display: flex;
237 -webkit-box-orient: horizontal;
238 -webkit-box-direction: normal;
239 -ms-flex-direction: row;
240 flex-direction: row;
241 -webkit-box-pack: justify;
242 -ms-flex-pack: justify;
243 justify-content: space-between;
244 -webkit-box-align: center;
245 -ms-flex-align: center;
246 align-items: center;
247 width: 92vw;
248 margin: auto;
249 margin-top: 50px;
250}
251
252.gameCircles .gameCircle {
253 -webkit-transition: all .2s linear;
254 transition: all .2s linear;
255 cursor: pointer;
256 display: -webkit-box;
257 display: -ms-flexbox;
258 display: flex;
259 -webkit-box-orient: vertical;
260 -webkit-box-direction: normal;
261 -ms-flex-direction: column;
262 flex-direction: column;
263 -webkit-box-pack: center;
264 -ms-flex-pack: center;
265 justify-content: center;
266 -webkit-box-align: center;
267 -ms-flex-align: center;
268 align-items: center;
269}
270
271.gameCircles .gameCircle .circleLarge {
272 -webkit-transition: all .2s linear;
273 transition: all .2s linear;
274 width: 22vw;
275 aspect-ratio: 1;
276 border-radius: 100%;
277 background: -webkit-gradient(linear, left bottom, right top, from(#ffd900cc), to(#B65714));
278 background: linear-gradient(to top right, #ffd900cc, #B65714);
279 opacity: .95;
280 display: -webkit-box;
281 display: -ms-flexbox;
282 display: flex;
283 -webkit-box-orient: vertical;
284 -webkit-box-direction: normal;
285 -ms-flex-direction: column;
286 flex-direction: column;
287}
288
289.gameCircles .gameCircle .circleLarge .circle {
290 border-radius: 100%;
291 width: 98%;
292 background-size: cover;
293 margin: auto;
294 aspect-ratio: 1;
295}
296
297.gameCircles .gameCircle h3 {
298 -webkit-transition: all .2s linear;
299 transition: all .2s linear;
300 font-weight: lighter;
301 margin-top: 30px;
302 opacity: 0;
303}
304
305.gameCircles .gameCircle h1.loading {
306 color: white;
307 position: absolute;
308 width: 100vw;
309 top: 50vh;
310 left: 50vw;
311 -webkit-transform: translate(-50%, -50%);
312 transform: translate(-50%, -50%);
313 font-size: 5rem;
314 z-index: 10;
315}
316
317.gameCircles .gameCircle:hover .circleLarge {
318 -webkit-transform: scale(1.1);
319 transform: scale(1.1);
320 opacity: 1;
321}
322
323.gameCircles .gameCircle:hover h3 {
324 opacity: 1;
325}
326
327.gameCircles:hover .gameCircle .circleLarge {
328 opacity: 1 !important;
329}
330
331/**
332 * Full Screen Overlay
333 */
334.fullscreen {
335 position: fixed;
336 top: 0;
337 left: 0;
338 width: 100vw;
339 height: 100vh;
340 background: -webkit-gradient(linear, left top, right top, from(#0B932E), to(#097625));
341 background: linear-gradient(to right, #0B932E, #097625);
342 color: #ead24d;
343}
344
345.fs-centered > div {
346 position: fixed;
347 top: 50vh;
348 left: 50vw;
349 -webkit-transform: translate(-50%, -50%);
350 transform: translate(-50%, -50%);
351}
352
353.fs-inputs-container > div {
354 margin: auto;
355 margin-top: 2.4rem;
356 width: -webkit-fit-content;
357 width: -moz-fit-content;
358 width: fit-content;
359 display: -webkit-box;
360 display: -ms-flexbox;
361 display: flex;
362 -webkit-box-orient: vertical;
363 -webkit-box-direction: normal;
364 -ms-flex-direction: column;
365 flex-direction: column;
366 -webkit-box-pack: center;
367 -ms-flex-pack: center;
368 justify-content: center;
369 -webkit-box-align: center;
370 -ms-flex-align: center;
371 align-items: center;
372}
373
374.fs-inputs-container > div > span {
375 margin-bottom: .5rem;
376 font-size: 1.5rem;
377}
378
379.fs-inputs-container > div > input {
380 margin-bottom: 2rem;
[64dc53b]381 padding-left: 4px;
382 padding-right: 4px;
[87614a5]383 font-size: 2rem;
384}
385
386.statsScreen svg {
387 cursor: pointer;
388 font-size: 2.5rem;
389 color: white;
390}
391
392.statsScreen > div h1 {
393 font-size: 2.5rem;
394 margin-bottom: 5rem;
395}
396
397.statsScreen > div p {
398 display: -webkit-box;
399 display: -ms-flexbox;
400 display: flex;
401 -webkit-box-pack: justify;
402 -ms-flex-pack: justify;
403 justify-content: space-between;
404 font-size: 1.5rem;
405 margin-bottom: 1rem;
406}
407
408.statsScreen > div p:nth-child(2n) {
409 color: white;
410}
411
412.statsScreen > div p span {
413 margin-left: 5rem;
414}
415
416.manageCreditsScreen svg {
417 cursor: pointer;
418 font-size: 2.5rem;
419 color: white;
420}
421
422.manageCreditsScreen > div h1 {
423 font-size: 1.5rem;
424 margin-bottom: 1rem;
425}
426
427.manageCreditsScreen > div p {
428 margin-bottom: 5rem;
429 color: white;
430}
431
432.manageCreditsScreen > div button {
433 width: 100%;
434}
435
436.inlineAlert {
437 cursor: pointer;
438 background-color: #ffdddd;
439 padding: .8rem 2.4rem;
440 border-radius: 15px;
441 color: #ff0000;
442 font-size: 1.8rem !important;
443 font-weight: 100;
444 letter-spacing: -.030em;
445}
446
447/**
448 * Component <- Loading
449 */
450.loadingScreen h1 {
451 font-size: 5rem;
452}
453
454/**
455 * Component <- RegisterScreen
456 */
457/**
458 * Primary Thingies
459 */
460.primaryButton {
461 background: -webkit-gradient(linear, left top, right top, from(#0B932E), to(#097625));
462 background: linear-gradient(to right, #0B932E, #097625);
463 color: #ead24d;
464 outline: none;
465 border: none;
466 border-radius: 10px;
467 font-size: 1.5rem;
468 font-weight: bold;
469 padding: 5px 20px;
470 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
471 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
472 cursor: pointer;
473 -webkit-transition: all .2s linear;
474 transition: all .2s linear;
475}
476
477.primaryButton:hover {
478 -webkit-transform: scale(1.1) rotateZ(-1deg);
479 transform: scale(1.1) rotateZ(-1deg);
480}
481
482.primaryButton:active {
483 -webkit-transition: .05s linear;
484 transition: .05s linear;
485 -webkit-transform: scale(1) rotateZ(-1deg);
486 transform: scale(1) rotateZ(-1deg);
487}
488
489.secondaryButton {
490 background: -webkit-gradient(linear, left top, right top, from(#4d99ea), to(#4d99ea));
491 background: linear-gradient(to right, #4d99ea, #4d99ea);
492 color: white;
493 outline: none;
494 border: none;
495 border-radius: 10px;
496 font-size: 1.5rem;
497 font-weight: bold;
498 padding: 5px 20px;
499 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
500 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
501 cursor: pointer;
502 -webkit-transition: all .2s linear;
503 transition: all .2s linear;
504}
505
506.secondaryButton:hover {
507 -webkit-transform: scale(1.1) rotateZ(-1deg);
508 transform: scale(1.1) rotateZ(-1deg);
509}
510
511.secondaryButton:active {
512 -webkit-transition: .05s linear;
513 transition: .05s linear;
514 -webkit-transform: scale(1) rotateZ(-1deg);
515 transform: scale(1) rotateZ(-1deg);
516}
517
[9bd09b0]518.tertiaryButton {
519 background: -webkit-gradient(linear, left top, right top, from(#484848), to(#6a6a6a));
520 background: linear-gradient(to right, #484848, #6a6a6a);
521 color: white;
522 outline: none;
523 border: none;
524 border-radius: 10px;
525 font-size: 1.5rem;
526 font-weight: bold;
527 padding: 5px 20px;
528 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
529 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
530 cursor: pointer;
531 -webkit-transition: all .2s linear;
532 transition: all .2s linear;
533}
534
535.tertiaryButton:hover {
536 background: -webkit-gradient(linear, left top, right top, from(#6e6e6e), to(#a0a0a0));
537 background: linear-gradient(to right, #6e6e6e, #a0a0a0);
538}
539
540.tertiaryButton:active {
541 -webkit-transition: .05s linear;
542 transition: .05s linear;
543 background: -webkit-gradient(linear, left top, right top, from(#484848), to(#6a6a6a));
544 background: linear-gradient(to right, #484848, #6a6a6a);
545}
546
[87614a5]547/**
548 * Input Sliders
549 */
550.primarySlider {
551 -webkit-appearance: none;
552 width: 250px;
553 height: 10px;
554 background: #0B932E;
555 outline: none;
556 border-radius: 10px;
557 -webkit-transition: .2s;
558 -webkit-transition: opacity .2s;
559 transition: opacity .2s;
560 -webkit-box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
561 box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
562}
563
564.primarySlider:hover {
565 opacity: 1;
566}
567
568.primarySlider::-webkit-slider-thumb {
569 -webkit-appearance: none;
570 appearance: none;
571 outline: none;
572 border: none;
573 width: 35px;
574 height: 35px;
575 border-radius: 50%;
576 background: url("/images/gold-coin.png");
577 background-size: contain;
578 background-color: #ead24d;
579 cursor: pointer;
580}
581
582.primarySlider::-moz-range-thumb {
583 -moz-appearance: none;
584 appearance: none;
585 outline: none;
586 border: none;
587 width: 35px;
588 height: 35px;
589 border-radius: 50%;
590 background: url("/images/gold-coin.png");
591 background-size: contain;
592 background-color: #ead24d;
593 cursor: pointer;
594}
595
596/**
597 * Scrollbar
598 */
599/* width */
600::-webkit-scrollbar {
601 width: 15px;
602}
603
604/* Track */
605::-webkit-scrollbar-track {
606 background: #0B932E;
607}
608
609/* Handle */
610::-webkit-scrollbar-thumb {
611 background: #ead24d;
612}
613
614/* Handle on hover */
615::-webkit-scrollbar-thumb:hover {
616 background: #efcb00;
617}
618
619/**
620 * File <- Blackjack Main
621 */
622.blackjackButtons {
623 position: absolute;
624 left: 0;
625 top: 90vh;
626 width: 100vw;
627 height: 10vh;
628 overflow: hidden;
629}
630
631.blackjackButtons > div {
632 display: -webkit-box;
633 display: -ms-flexbox;
634 display: flex;
635 -webkit-box-orient: horizontal;
636 -webkit-box-direction: normal;
637 -ms-flex-direction: row;
638 flex-direction: row;
639 -webkit-box-pack: center;
640 -ms-flex-pack: center;
641 justify-content: center;
642 -webkit-box-align: center;
643 -ms-flex-align: center;
644 align-items: center;
645 -webkit-transition: .5s ease-in-out;
646 transition: .5s ease-in-out;
647}
648
649.blackjackButtons > div > button {
650 width: 300px;
651}
652
653.blackjackButtons > div > button:nth-child(2) {
654 margin-left: 30px;
655}
656
657.blackjackCards .card {
658 aspect-ratio: 400/560;
659 height: 150px;
660 background-size: contain;
661 position: absolute;
662 -webkit-transition: .5s ease-in-out;
663 transition: .5s ease-in-out;
664 border-radius: 10px;
665 border: 1px solid black;
666}
667
668.blackjackDisplayBet {
669 position: absolute;
670 -webkit-transform: translate(-50%, -50%);
671 transform: translate(-50%, -50%);
672 left: 51vw;
673 top: 63.5vh;
674}
675
676.blackjackSideBetsModal {
677 z-index: 20;
678 -webkit-box-orient: vertical !important;
679 -webkit-box-direction: normal !important;
680 -ms-flex-direction: column !important;
681 flex-direction: column !important;
682 position: fixed;
683 left: 50vw;
684 top: 45vh;
685 width: 41vw;
686 height: 80vh;
687 padding: 10px;
688 -webkit-transform: translate(-50%, -50%);
689 transform: translate(-50%, -50%);
690 background: -webkit-gradient(linear, left top, right top, from(#0B932Ec0), to(#097625e0));
691 background: linear-gradient(to right, #0B932Ec0, #097625e0);
692 -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
693 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
694 border-radius: 20px;
695 overflow-y: scroll;
696}
697
698.blackjackSideBetsModal .blackjackSideBetSelect {
699 display: -webkit-box;
700 display: -ms-flexbox;
701 display: flex;
702 -webkit-box-orient: vertical;
703 -webkit-box-direction: normal;
704 -ms-flex-direction: column;
705 flex-direction: column;
706 width: 100%;
707}
708
709.blackjackSideBetsModal .blackjackSideBetSelect:first-child {
710 margin-top: 10rem;
711}
712
713.blackjackSideBetsModal .blackjackSideBetSelect h1 {
714 margin-bottom: 1rem;
715 color: #ead24d;
716}
717
718.blackjackSideBetsModal .blackjackSideBetSelect > div {
719 text-align: left;
720}
721
722.blackjackSideBetsModal .blackjackSideBetSelect > div p {
723 margin-bottom: 1rem;
724 padding: 10px 20px;
725 border-radius: 5px;
726 cursor: pointer;
727 -webkit-transition: all .25s linear;
728 transition: all .25s linear;
729}
730
731.blackjackSideBetsModal .blackjackSideBetSelect > div p span {
732 font-size: 1.2rem;
733 color: #ead24d;
734}
735
736.blackjackSideBetsModal .blackjackSideBetSelect > div p:hover {
737 color: #ead24d;
738 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
739 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
740}
741
742.blackjackSideBetsChooseCreditsModal {
743 z-index: 20;
744 -webkit-box-orient: vertical !important;
745 -webkit-box-direction: normal !important;
746 -ms-flex-direction: column !important;
747 flex-direction: column !important;
748 position: fixed;
749 left: 50vw;
750 top: 45vh;
751 width: 41vw;
752 height: 80vh;
753 padding: 10px;
754 -webkit-transform: translate(-50%, -50%);
755 transform: translate(-50%, -50%);
756 background: -webkit-gradient(linear, left top, right top, from(#00000080), to(#00000080));
757 background: linear-gradient(to right, #00000080, #00000080);
758 -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
759 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
760 border-radius: 20px;
761}
762
763.blackjackSideBetsChooseCreditsModal p {
764 margin-bottom: 1rem;
765 padding: 10px 20px;
766 border-radius: 5px;
767 -webkit-transition: all .25s linear;
768 transition: all .25s linear;
769}
770
771.blackjackSideBetsChooseCreditsModal p span {
772 font-size: 1.2rem;
773 color: white;
774}
[9bd09b0]775
776/**
777 * File <- Roulette Main
778 */
779.rouletteMainContainer {
780 background-color: #006600;
781}
782
783#rouletteBetsImg {
784 position: absolute;
785 top: 65%;
786 left: 59%;
787 -webkit-transform: translate(-50%, -50%);
788 transform: translate(-50%, -50%);
789 width: 50vw;
790 height: auto;
791 cursor: url(/gold-coin.cur), auto;
792}
793
794#rouletteWheelImg {
795 position: absolute;
796 top: 60%;
797 left: 18%;
[ace7865]798 -webkit-transition: all .5s ease-in-out;
799 transition: all .5s ease-in-out;
[9bd09b0]800 width: 450px;
801 height: auto;
802}
803
804.rouletteInfoText {
805 position: absolute;
806 top: 15%;
807 width: 100vw;
808 text-align: center;
809 font-size: 1.1rem;
810}
811
812.roulettePlayersContainer {
813 position: absolute;
814 top: 15%;
815 right: 4%;
816 width: 10vw;
817 height: 80vh;
818 -webkit-box-shadow: 0 0 10px rgba(10, 148, 45, 0.25);
819 box-shadow: 0 0 10px rgba(10, 148, 45, 0.25);
820 padding: 1rem;
821 display: -ms-grid;
822 display: grid;
823 -ms-grid-rows: (minmax(0, 1fr))[2];
824 grid-template-rows: repeat(2, minmax(0, 1fr));
825 overflow-x: hidden;
826 overflow-y: scroll;
827}
828
829.roulettePlayersContainer p {
830 word-wrap: break-word;
831 margin-top: .5rem;
832}
833
834.rouletteTimer {
835 position: absolute;
836 top: calc((60% + 450px) / 2);
837 left: calc(18.5%);
838 -webkit-transform: translate(-50%, -50%);
839 transform: translate(-50%, -50%);
[ace7865]840 display: -webkit-box;
841 display: -ms-flexbox;
842 display: flex;
843 -webkit-box-orient: vertical;
844 -webkit-box-direction: normal;
845 -ms-flex-direction: column;
846 flex-direction: column;
847 -webkit-box-pack: center;
848 -ms-flex-pack: center;
849 justify-content: center;
850 -webkit-box-align: center;
851 -ms-flex-align: center;
852 align-items: center;
853 gap: 5px;
[9bd09b0]854 font-size: 2.5rem;
855 color: black;
856}
857
858.rouletteBetModal {
859 z-index: 20;
860 -webkit-box-orient: vertical;
861 -webkit-box-direction: normal;
862 -ms-flex-direction: column;
863 flex-direction: column;
864 -webkit-box-pack: center;
865 -ms-flex-pack: center;
866 justify-content: center;
867 -webkit-box-align: center;
868 -ms-flex-align: center;
869 align-items: center;
870 position: fixed;
871 left: 0;
872 top: 0;
873 width: 100vw;
874 height: 100vh;
875 background: #000000c0;
876}
877
878.rouletteBetModal p {
879 margin-bottom: 1rem;
880 padding: 10px 20px;
881 border-radius: 5px;
882 -webkit-transition: all .25s linear;
883 transition: all .25s linear;
884}
885
886.rouletteBetModal p span {
887 font-size: 1.2rem;
888 color: #ead24d;
889}
890
[ace7865]891/**
892 * Spin effect on the roulette wheel
893 */
894.spin {
895 -webkit-animation: spinner 4s infinite;
896 animation: spinner 4s infinite;
897 -webkit-animation-timing-function: ease-in-out;
898 animation-timing-function: ease-in-out;
899}
900
901@-webkit-keyframes spinner {
902 0% {
903 -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
904 transform: translate(-50%, -50%) rotateZ(0deg);
905 }
906 10% {
907 -webkit-transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
908 transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
909 }
910 20% {
911 -webkit-transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
912 transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
913 }
914 30% {
915 -webkit-transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
916 transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
917 }
918 40% {
919 -webkit-transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
920 transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
921 }
922 50% {
923 -webkit-transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
924 transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
925 }
926 60% {
927 -webkit-transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
928 transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
929 }
930 70% {
931 -webkit-transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
932 transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
933 }
934 80% {
935 -webkit-transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
936 transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
937 }
938 90% {
939 -webkit-transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
940 transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
941 }
942 100% {
943 -webkit-transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
944 transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
945 }
946}
947
948@keyframes spinner {
949 0% {
950 -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
951 transform: translate(-50%, -50%) rotateZ(0deg);
952 }
953 10% {
954 -webkit-transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
955 transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
956 }
957 20% {
958 -webkit-transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
959 transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
960 }
961 30% {
962 -webkit-transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
963 transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
964 }
965 40% {
966 -webkit-transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
967 transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
968 }
969 50% {
970 -webkit-transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
971 transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
972 }
973 60% {
974 -webkit-transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
975 transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
976 }
977 70% {
978 -webkit-transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
979 transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
980 }
981 80% {
982 -webkit-transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
983 transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
984 }
985 90% {
986 -webkit-transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
987 transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
988 }
989 100% {
990 -webkit-transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
991 transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
992 }
993}
994
[9bd09b0]995/**
996 * File <- Poker Main
997 */
[87614a5]998/*# sourceMappingURL=globals.css.map */
Note: See TracBrowser for help on using the repository browser.