source: styles/globals.scss@ 87614a5

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

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