source: styles/globals.scss@ 4a1a3ca

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

Code cleanings
  • Property mode set to 100644
File size: 10.6 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
13a {
14 color: inherit;
15 text-decoration: none;
16}
17
18* {
19 box-sizing: border-box;
20}
21
22// my code below:
23p, h1, h3 {
24 margin: 0;
25}
26
27.app {
28 color: white;
29
30 letter-spacing: 1px;
31
32 width: 100vw;
33 height: 100vh;
34
35 margin: auto;
36
37 overflow: hidden;
38
39 background-size: cover;
40 background-repeat: no-repeat;
41 background-position: 0% 50%;
42
43 text-align: center;
44}
45
46/**
47 * Component <- Header
48 */
49header.header {
50 display: flex;
51 justify-content: space-between;
52 align-items: center;
53
54 width: 92vw;
55 margin: auto;
56 margin-top: 20px;
57
58 .logo {
59 width: 80px;
60 aspect-ratio: 1;
61 border-radius: 100%;
62
63 background-image: url("/images/logo.png");
64 background-size: cover;
65
66 border: 2px solid rgba(255, 255, 255, 0.2);
67
68 cursor: pointer;
69 }
70
71 h2 {
72 cursor: pointer;
73 }
74
75 nav {
76 ul {
77 display: flex;
78 flex-direction: row;
79 list-style-type: none;
80
81 li {
82 margin-right: 4rem;
83
84 &:last-child {
85 margin-right: 0;
86 }
87 }
88 }
89
90 &.mainHeaderNavigation {
91 ul {
92 li {
93 cursor: pointer;
94 }
95 }
96 }
97 }
98}
99
100/**
101 * Component <- Full Width Text
102 *
103 * Used in "Welcome To Caessino"
104 */
105.fullwidthText {
106 width: 100vw;
107
108 display: flex;
109 flex-direction: column;
110 justify-content: center;
111 align-items: center;
112
113 margin-top: 40px;
114
115 padding: 15px 0 20px 0;
116
117 background-color: rgba(0, 0, 0, .6);
118
119 h1 {
120 color: #FFD700;
121 font-weight: lighter;
122 font-size: 2.5rem;
123 }
124
125 h3 {
126 margin-top: 15px;
127 font-weight: lighter;
128 }
129}
130
131/**
132 * Component <- Alert
133 *
134 * Similar to Full Width Text
135 */
136.alert {
137 width: 100vw;
138
139 display: flex;
140 flex-direction: column;
141 justify-content: center;
142 align-items: center;
143
144 padding: 20px 0 25px 0;
145
146 background-color: rgba(0, 0, 0, .9);
147
148 position: absolute;
149 top: 50vh;
150
151 transform: translateY(-70%);
152
153 transition: '.5s linear';
154
155 h1 {
156 color: #FFD700;
157 font-weight: lighter;
158 font-size: 2.5rem;
159 }
160
161 h3 {
162 margin-top: 10px;
163 font-weight: lighter;
164 }
165
166 button {
167 width: 500px;
168 margin-top: 20px;
169 }
170}
171
172/**
173 * Component <- Notification
174 *
175 * Displayed fixed in the top right corner
176 */
177.notification {
178 position: fixed;
179 top: 40px;
180 right: 30px;
181
182 width: 500px;
183 min-height: 200px;
184
185 display: flex;
186 flex-direction: column;
187 justify-content: center;
188 align-items: flex-end;
189
190 svg {
191 cursor: pointer;
192 }
193
194 &>div {
195 flex: 1;
196
197 width: 100%;
198
199 display: flex;
200 justify-content: center;
201 align-items: center;
202
203 font-size: 1.5rem;
204
205 margin-bottom: 1.2rem;
206
207 text-align: center;
208 }
209
210 font-size: 2rem;
211
212 padding: 20px;
213 border-radius: 15px;
214
215 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
216}
217
218/**
219 * Component <- Game Circle
220 *
221 * Used in Landing Page -> to display the games in circles
222 */
223.gameCircles {
224 display: flex;
225 flex-direction: row;
226 justify-content: space-between;
227 align-items: center;
228
229 width: 92vw;
230 margin: auto;
231 margin-top: 50px;
232
233 .gameCircle {
234 transition: all .2s linear;
235 cursor: pointer;
236
237 display: flex;
238 flex-direction: column;
239 justify-content: center;
240 align-items: center;
241
242 .circleLarge {
243 transition: all .2s linear;
244
245 width: 22vw;
246 aspect-ratio: 1;
247
248 border-radius: 100%;
249
250 background: linear-gradient(to top right, #ffd900cc, #B65714);
251 opacity: .95;
252
253 display: flex;
254 flex-direction: column;
255
256 .circle {
257 border-radius: 100%;
258 width: 98%;
259 background-size: cover;
260 margin: auto;
261 aspect-ratio: 1;
262 }
263 }
264
265 h3 {
266 transition: all .2s linear;
267
268 font-weight: lighter;
269 margin-top: 30px;
270
271 opacity: 0;
272 }
273
274 h1.loading {
275 color: white;
276 position: absolute;
277 width: 100vw;
278 top: 50vh;
279 left: 50vw;
280 transform: translate(-50%, -50%);
281
282 font-size: 5rem;
283
284 z-index: 10;
285 }
286
287 &:hover {
288 .circleLarge {
289 transform: scale(1.1);
290 opacity: 1;
291 }
292
293 h3 {
294 opacity: 1;
295 }
296 }
297 }
298
299 &:hover {
300 .gameCircle {
301 .circleLarge {
302 opacity: 1 !important;
303 }
304 }
305 }
306}
307
308/**
309 * Full Screen Overlay
310 */
311.fullscreen {
312 position: fixed;
313 top: 0;
314 left: 0;
315
316 width: 100vw;
317 height: 100vh;
318
319 background: linear-gradient(to right, #0B932E, #097625);
320 color: #ead24d;
321}
322
323.fs-centered {
324 &>div {
325 position: fixed;
326 top: 50vh;
327 left: 50vw;
328 transform: translate(-50%, -50%);
329 }
330}
331
332.fs-inputs-container {
333 &>div {
334 margin: auto;
335 margin-top: 2.4rem;
336 width: fit-content;
337
338 display: flex;
339 flex-direction: column;
340 justify-content: center;
341 align-items: center;
342
343 &>span {
344 margin-bottom: .5rem;
345
346 font-size: 1.5rem;
347 }
348
349 &>input {
350 margin-bottom: 2rem;
351
352 padding-left: 4px;
353 padding-right: 4px;
354
355 font-size: 2rem;
356 }
357 }
358}
359
360.statsScreen {
361 svg {
362 cursor: pointer;
363 font-size: 2.5rem;
364 color: white;
365 }
366
367 &>div {
368 h1 {
369 font-size: 2.5rem;
370 margin-bottom: 5rem;
371 }
372
373 p {
374 display: flex;
375 justify-content: space-between;
376
377 font-size: 1.5rem;
378 margin-bottom: 1rem;
379
380 &:nth-child(2n) {
381 color: white;
382 }
383
384 span {
385 margin-left: 5rem;
386 }
387 }
388 }
389}
390
391.manageCreditsScreen {
392 svg {
393 cursor: pointer;
394 font-size: 2.5rem;
395 color: white;
396 }
397
398 &>div {
399 h1 {
400 font-size: 1.5rem;
401 margin-bottom: 1rem;
402 }
403
404 p {
405 margin-bottom: 5rem;
406 color: white;
407 }
408
409 button {
410 width: 100%;
411 }
412 }
413}
414
415.inlineAlert {
416 cursor: pointer;
417
418 background-color: #ffdddd;
419 padding: .8rem 2.4rem;
420 border-radius: 15px;
421
422 color: #ff0000;
423 font-size: 1.8rem !important;
424 font-weight: 100;
425 letter-spacing: -.030em;
426}
427
428/**
429 * Component <- Loading
430 */
431.loadingScreen {
432 h1 {
433 font-size: 5rem;
434 }
435}
436
437/**
438 * Component <- RegisterScreen
439 */
440
441/**
442 * Primary Thingies
443 */
444.primaryButton {
445 background: linear-gradient(to right, #0B932E, #097625);
446 color: #ead24d;
447
448 outline: none;
449 border: none;
450 border-radius: 10px;
451
452 font-size: 1.5rem;
453 font-weight: bold;
454 padding: 5px 20px;
455
456 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
457
458 cursor: pointer;
459 transition: all .2s linear;
460
461 &:hover {
462 transform: scale(1.1) rotateZ(-1deg);
463 // padding: 10px 20px;
464 }
465
466 &:active {
467 transition: .05s linear;
468 transform: scale(1) rotateZ(-1deg);
469 }
470}
471
472.secondaryButton {
473 background: linear-gradient(to right, #4d99ea, #4d99ea);
474 color: white;
475
476 outline: none;
477 border: none;
478 border-radius: 10px;
479
480 font-size: 1.5rem;
481 font-weight: bold;
482 padding: 5px 20px;
483
484 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
485
486 cursor: pointer;
487 transition: all .2s linear;
488
489 &:hover {
490 transform: scale(1.1) rotateZ(-1deg);
491 // padding: 10px 20px;
492 }
493
494 &:active {
495 transition: .05s linear;
496 transform: scale(1) rotateZ(-1deg);
497 }
498}
499
500/**
501 * Input Sliders
502 */
503.primarySlider {
504 -webkit-appearance: none;
505 width: 250px;
506 height: 10px;
507 background: #0B932E;
508 outline: none;
509 border-radius: 10px;
510 -webkit-transition: .2s;
511 transition: opacity .2s;
512
513 box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
514}
515
516.primarySlider:hover {
517 opacity: 1;
518}
519
520.primarySlider::-webkit-slider-thumb {
521 -webkit-appearance: none;
522 appearance: none;
523 outline: none;
524 border: none;
525 width: 35px;
526 height: 35px;
527 border-radius: 50%;
528 background: url("/images/gold-coin.png");
529 background-size: contain;
530 background-color: #ead24d;
531 cursor: pointer;
532}
533
534.primarySlider::-moz-range-thumb {
535 appearance: none;
536 outline: none;
537 border: none;
538 width: 35px;
539 height: 35px;
540 border-radius: 50%;
541 background: url("/images/gold-coin.png");
542 background-size: contain;
543 background-color: #ead24d;
544 cursor: pointer;
545}
546
547/**
548 * Scrollbar
549 */
550
551/* width */
552::-webkit-scrollbar {
553 width: 15px;
554}
555
556/* Track */
557::-webkit-scrollbar-track {
558 background: #0B932E;
559}
560
561/* Handle */
562::-webkit-scrollbar-thumb {
563 background: #ead24d;
564}
565
566/* Handle on hover */
567::-webkit-scrollbar-thumb:hover {
568 background: #efcb00;
569}
570
571/**
572 * File <- Blackjack Main
573 * Components <- PlayButtons, Cards
574 */
575.blackjackButtons {
576 position: absolute;
577
578 left: 0;
579 top: 90vh;
580
581 width: 100vw;
582 height: 10vh;
583
584 overflow: hidden;
585
586 &>div {
587 display: flex;
588 flex-direction: row;
589 justify-content: center;
590 align-items: center;
591
592 transition: .5s ease-in-out;
593
594 &>button {
595 width: 300px;
596 }
597
598 &>button:nth-child(2) {
599 margin-left: 30px;
600 }
601 }
602}
603
604.blackjackCards {
605 .card {
606 aspect-ratio: 400/560;
607 height: 150px;
608
609 background-size: contain;
610
611 position: absolute;
612
613 transition: .5s ease-in-out;
614
615 border-radius: 10px;
616
617 border: 1px solid black;
618 }
619}
620
621.blackjackDisplayBet {
622 position: absolute;
623
624 transform: translate(-50%, -50%);
625
626 left: 51vw;
627 top: 63.5vh;
628}
629
630.blackjackSideBetsModal {
631 z-index: 20;
632
633 flex-direction: column !important;
634
635 position: fixed;
636 left: 50vw;
637 top: 45vh;
638
639 width: 41vw;
640 height: 80vh;
641
642 padding: 10px;
643
644 transform: translate(-50%, -50%);
645
646 background: linear-gradient(to right, #0B932Ec0, #097625e0);
647
648 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
649
650 border-radius: 20px;
651
652 overflow-y: scroll;
653
654 .blackjackSideBetSelect {
655 &:first-child {
656 margin-top: 10rem;
657 }
658
659 display: flex;
660 flex-direction: column;
661 width: 100%;
662
663 h1 {
664 margin-bottom: 1rem;
665
666 color: #ead24d;
667 }
668
669 &>div {
670 text-align: left;
671
672 p {
673 margin-bottom: 1rem;
674
675 padding: 10px 20px;
676 border-radius: 5px;
677
678 cursor: pointer;
679
680 transition: all .25s linear;
681
682 span {
683 font-size: 1.2rem;
684 color: #ead24d;
685 }
686
687 &:hover {
688 color: #ead24d;
689 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
690 }
691 }
692 }
693 }
694}
695
696.blackjackSideBetsChooseCreditsModal {
697 z-index: 20;
698
699 flex-direction: column !important;
700
701 position: fixed;
702 left: 50vw;
703 top: 45vh;
704
705 width: 41vw;
706 height: 80vh;
707
708 padding: 10px;
709
710 transform: translate(-50%, -50%);
711
712 background: linear-gradient(to right, #00000080, #00000080);
713
714 box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
715
716 border-radius: 20px;
717
718 p {
719 margin-bottom: 1rem;
720
721 padding: 10px 20px;
722 border-radius: 5px;
723
724 transition: all .25s linear;
725
726 span {
727 font-size: 1.2rem;
728 color: white;
729 }
730 }
731}
Note: See TracBrowser for help on using the repository browser.