1 | @import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap);
|
---|
2 | html,
|
---|
3 | body {
|
---|
4 | padding: 0;
|
---|
5 | margin: 0;
|
---|
6 | font-family: 'Inter', sans-serif;
|
---|
7 | overflow: hidden;
|
---|
8 | }
|
---|
9 |
|
---|
10 | a {
|
---|
11 | color: inherit;
|
---|
12 | text-decoration: none;
|
---|
13 | }
|
---|
14 |
|
---|
15 | * {
|
---|
16 | -webkit-box-sizing: border-box;
|
---|
17 | box-sizing: border-box;
|
---|
18 | }
|
---|
19 |
|
---|
20 | p, 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 | */
|
---|
40 | header.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 | position: relative;
|
---|
54 | z-index: 5;
|
---|
55 | }
|
---|
56 |
|
---|
57 | header.header .logo {
|
---|
58 | width: 80px;
|
---|
59 | aspect-ratio: 1;
|
---|
60 | border-radius: 100%;
|
---|
61 | background-image: url("/images/logo.png");
|
---|
62 | background-size: cover;
|
---|
63 | border: 2px solid rgba(255, 255, 255, 0.2);
|
---|
64 | cursor: pointer;
|
---|
65 | }
|
---|
66 |
|
---|
67 | header.header h2 {
|
---|
68 | cursor: pointer;
|
---|
69 | }
|
---|
70 |
|
---|
71 | header.header nav ul {
|
---|
72 | display: -webkit-box;
|
---|
73 | display: -ms-flexbox;
|
---|
74 | display: flex;
|
---|
75 | -webkit-box-orient: horizontal;
|
---|
76 | -webkit-box-direction: normal;
|
---|
77 | -ms-flex-direction: row;
|
---|
78 | flex-direction: row;
|
---|
79 | list-style-type: none;
|
---|
80 | }
|
---|
81 |
|
---|
82 | header.header nav ul li {
|
---|
83 | margin-right: 4rem;
|
---|
84 | }
|
---|
85 |
|
---|
86 | header.header nav ul li:last-child {
|
---|
87 | margin-right: 0;
|
---|
88 | }
|
---|
89 |
|
---|
90 | header.header nav.mainHeaderNavigation ul li {
|
---|
91 | cursor: pointer;
|
---|
92 | }
|
---|
93 |
|
---|
94 | /**
|
---|
95 | * Component <- Full Width Text
|
---|
96 | *
|
---|
97 | * Used in "Welcome To Caessino"
|
---|
98 | */
|
---|
99 | .fullwidthText {
|
---|
100 | width: 100vw;
|
---|
101 | display: -webkit-box;
|
---|
102 | display: -ms-flexbox;
|
---|
103 | display: flex;
|
---|
104 | -webkit-box-orient: vertical;
|
---|
105 | -webkit-box-direction: normal;
|
---|
106 | -ms-flex-direction: column;
|
---|
107 | flex-direction: column;
|
---|
108 | -webkit-box-pack: center;
|
---|
109 | -ms-flex-pack: center;
|
---|
110 | justify-content: center;
|
---|
111 | -webkit-box-align: center;
|
---|
112 | -ms-flex-align: center;
|
---|
113 | align-items: center;
|
---|
114 | margin-top: 40px;
|
---|
115 | padding: 15px 0 20px 0;
|
---|
116 | background-color: rgba(0, 0, 0, 0.6);
|
---|
117 | }
|
---|
118 |
|
---|
119 | .fullwidthText h1 {
|
---|
120 | color: #FFD700;
|
---|
121 | font-weight: lighter;
|
---|
122 | font-size: 2.5rem;
|
---|
123 | }
|
---|
124 |
|
---|
125 | .fullwidthText h3 {
|
---|
126 | margin-top: 15px;
|
---|
127 | font-weight: lighter;
|
---|
128 | }
|
---|
129 |
|
---|
130 | /**
|
---|
131 | * Component <- Alert
|
---|
132 | *
|
---|
133 | * Similar to Full Width Text
|
---|
134 | */
|
---|
135 | .alert {
|
---|
136 | z-index: 30;
|
---|
137 | width: 100vw;
|
---|
138 | display: -webkit-box;
|
---|
139 | display: -ms-flexbox;
|
---|
140 | display: flex;
|
---|
141 | -webkit-box-orient: vertical;
|
---|
142 | -webkit-box-direction: normal;
|
---|
143 | -ms-flex-direction: column;
|
---|
144 | flex-direction: column;
|
---|
145 | -webkit-box-pack: center;
|
---|
146 | -ms-flex-pack: center;
|
---|
147 | justify-content: center;
|
---|
148 | -webkit-box-align: center;
|
---|
149 | -ms-flex-align: center;
|
---|
150 | align-items: center;
|
---|
151 | padding: 20px 0 25px 0;
|
---|
152 | background-color: rgba(0, 0, 0, 0.9);
|
---|
153 | position: absolute;
|
---|
154 | -webkit-transform: translateY(-70%);
|
---|
155 | transform: translateY(-70%);
|
---|
156 | -webkit-transition: '.5s linear';
|
---|
157 | transition: '.5s linear';
|
---|
158 | }
|
---|
159 |
|
---|
160 | .alert h1 {
|
---|
161 | color: #FFD700;
|
---|
162 | font-weight: lighter;
|
---|
163 | font-size: 2.5rem;
|
---|
164 | }
|
---|
165 |
|
---|
166 | .alert h3 {
|
---|
167 | margin-top: 10px;
|
---|
168 | font-weight: lighter;
|
---|
169 | }
|
---|
170 |
|
---|
171 | .alert button {
|
---|
172 | width: 500px;
|
---|
173 | margin-top: 20px;
|
---|
174 | }
|
---|
175 |
|
---|
176 | /**
|
---|
177 | * Component <- Notification
|
---|
178 | *
|
---|
179 | * Displayed fixed in the top right corner
|
---|
180 | */
|
---|
181 | .notification {
|
---|
182 | z-index: 30;
|
---|
183 | position: fixed;
|
---|
184 | top: 40px;
|
---|
185 | right: 30px;
|
---|
186 | width: 500px;
|
---|
187 | min-height: 200px;
|
---|
188 | display: -webkit-box;
|
---|
189 | display: -ms-flexbox;
|
---|
190 | display: flex;
|
---|
191 | -webkit-box-orient: vertical;
|
---|
192 | -webkit-box-direction: normal;
|
---|
193 | -ms-flex-direction: column;
|
---|
194 | flex-direction: column;
|
---|
195 | -webkit-box-pack: center;
|
---|
196 | -ms-flex-pack: center;
|
---|
197 | justify-content: center;
|
---|
198 | -webkit-box-align: end;
|
---|
199 | -ms-flex-align: end;
|
---|
200 | align-items: flex-end;
|
---|
201 | font-size: 2rem;
|
---|
202 | padding: 20px;
|
---|
203 | border-radius: 15px;
|
---|
204 | -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
205 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
206 | }
|
---|
207 |
|
---|
208 | .notification svg {
|
---|
209 | cursor: pointer;
|
---|
210 | }
|
---|
211 |
|
---|
212 | .notification > div {
|
---|
213 | -webkit-box-flex: 1;
|
---|
214 | -ms-flex: 1;
|
---|
215 | flex: 1;
|
---|
216 | width: 100%;
|
---|
217 | display: -webkit-box;
|
---|
218 | display: -ms-flexbox;
|
---|
219 | display: flex;
|
---|
220 | -webkit-box-pack: center;
|
---|
221 | -ms-flex-pack: center;
|
---|
222 | justify-content: center;
|
---|
223 | -webkit-box-align: center;
|
---|
224 | -ms-flex-align: center;
|
---|
225 | align-items: center;
|
---|
226 | font-size: 1.5rem;
|
---|
227 | margin-bottom: 1.2rem;
|
---|
228 | text-align: center;
|
---|
229 | }
|
---|
230 |
|
---|
231 | /**
|
---|
232 | * Component <- Game Circle
|
---|
233 | *
|
---|
234 | * Used in Landing Page -> to display the games in circles
|
---|
235 | */
|
---|
236 | .gameCircles {
|
---|
237 | display: -webkit-box;
|
---|
238 | display: -ms-flexbox;
|
---|
239 | display: flex;
|
---|
240 | -webkit-box-orient: horizontal;
|
---|
241 | -webkit-box-direction: normal;
|
---|
242 | -ms-flex-direction: row;
|
---|
243 | flex-direction: row;
|
---|
244 | -webkit-box-pack: justify;
|
---|
245 | -ms-flex-pack: justify;
|
---|
246 | justify-content: space-between;
|
---|
247 | -webkit-box-align: center;
|
---|
248 | -ms-flex-align: center;
|
---|
249 | align-items: center;
|
---|
250 | width: 92vw;
|
---|
251 | margin: auto;
|
---|
252 | margin-top: 50px;
|
---|
253 | }
|
---|
254 |
|
---|
255 | .gameCircles .gameCircle {
|
---|
256 | -webkit-transition: all .2s linear;
|
---|
257 | transition: all .2s linear;
|
---|
258 | cursor: pointer;
|
---|
259 | display: -webkit-box;
|
---|
260 | display: -ms-flexbox;
|
---|
261 | display: flex;
|
---|
262 | -webkit-box-orient: vertical;
|
---|
263 | -webkit-box-direction: normal;
|
---|
264 | -ms-flex-direction: column;
|
---|
265 | flex-direction: column;
|
---|
266 | -webkit-box-pack: center;
|
---|
267 | -ms-flex-pack: center;
|
---|
268 | justify-content: center;
|
---|
269 | -webkit-box-align: center;
|
---|
270 | -ms-flex-align: center;
|
---|
271 | align-items: center;
|
---|
272 | }
|
---|
273 |
|
---|
274 | .gameCircles .gameCircle .circleLarge {
|
---|
275 | -webkit-transition: all .2s linear;
|
---|
276 | transition: all .2s linear;
|
---|
277 | width: 22vw;
|
---|
278 | aspect-ratio: 1;
|
---|
279 | border-radius: 100%;
|
---|
280 | background: -webkit-gradient(linear, left bottom, right top, from(#ffd900cc), to(#B65714));
|
---|
281 | background: linear-gradient(to top right, #ffd900cc, #B65714);
|
---|
282 | opacity: .95;
|
---|
283 | display: -webkit-box;
|
---|
284 | display: -ms-flexbox;
|
---|
285 | display: flex;
|
---|
286 | -webkit-box-orient: vertical;
|
---|
287 | -webkit-box-direction: normal;
|
---|
288 | -ms-flex-direction: column;
|
---|
289 | flex-direction: column;
|
---|
290 | }
|
---|
291 |
|
---|
292 | .gameCircles .gameCircle .circleLarge .circle {
|
---|
293 | border-radius: 100%;
|
---|
294 | width: 98%;
|
---|
295 | background-size: cover;
|
---|
296 | margin: auto;
|
---|
297 | aspect-ratio: 1;
|
---|
298 | }
|
---|
299 |
|
---|
300 | .gameCircles .gameCircle h3 {
|
---|
301 | -webkit-transition: all .2s linear;
|
---|
302 | transition: all .2s linear;
|
---|
303 | font-weight: lighter;
|
---|
304 | margin-top: 30px;
|
---|
305 | opacity: 0;
|
---|
306 | }
|
---|
307 |
|
---|
308 | .gameCircles .gameCircle h1.loading {
|
---|
309 | color: white;
|
---|
310 | position: absolute;
|
---|
311 | width: 100vw;
|
---|
312 | top: 50vh;
|
---|
313 | left: 50vw;
|
---|
314 | -webkit-transform: translate(-50%, -50%);
|
---|
315 | transform: translate(-50%, -50%);
|
---|
316 | font-size: 5rem;
|
---|
317 | z-index: 10;
|
---|
318 | }
|
---|
319 |
|
---|
320 | .gameCircles .gameCircle:hover .circleLarge {
|
---|
321 | -webkit-transform: scale(1.1);
|
---|
322 | transform: scale(1.1);
|
---|
323 | opacity: 1;
|
---|
324 | }
|
---|
325 |
|
---|
326 | .gameCircles .gameCircle:hover h3 {
|
---|
327 | opacity: 1;
|
---|
328 | }
|
---|
329 |
|
---|
330 | .gameCircles:hover .gameCircle .circleLarge {
|
---|
331 | opacity: 1 !important;
|
---|
332 | }
|
---|
333 |
|
---|
334 | /**
|
---|
335 | * Full Screen Overlay
|
---|
336 | */
|
---|
337 | .fullscreen {
|
---|
338 | position: fixed;
|
---|
339 | top: 0;
|
---|
340 | left: 0;
|
---|
341 | width: 100vw;
|
---|
342 | height: 100vh;
|
---|
343 | background: -webkit-gradient(linear, left top, right top, from(#0B932E), to(#097625));
|
---|
344 | background: linear-gradient(to right, #0B932E, #097625);
|
---|
345 | color: #ead24d;
|
---|
346 | z-index: 10;
|
---|
347 | }
|
---|
348 |
|
---|
349 | .fs-centered > div {
|
---|
350 | position: fixed;
|
---|
351 | top: 50vh;
|
---|
352 | left: 50vw;
|
---|
353 | -webkit-transform: translate(-50%, -50%);
|
---|
354 | transform: translate(-50%, -50%);
|
---|
355 | }
|
---|
356 |
|
---|
357 | .top-to-bottom-centered {
|
---|
358 | overflow-y: scroll;
|
---|
359 | }
|
---|
360 |
|
---|
361 | .top-to-bottom-centered > div {
|
---|
362 | padding-block: 2rem;
|
---|
363 | width: 70vw;
|
---|
364 | margin-inline: auto;
|
---|
365 | display: -webkit-box;
|
---|
366 | display: -ms-flexbox;
|
---|
367 | display: flex;
|
---|
368 | -webkit-box-orient: vertical;
|
---|
369 | -webkit-box-direction: normal;
|
---|
370 | -ms-flex-direction: column;
|
---|
371 | flex-direction: column;
|
---|
372 | gap: 4rem;
|
---|
373 | }
|
---|
374 |
|
---|
375 | .top-to-bottom-centered > div .link {
|
---|
376 | color: #fff3ae;
|
---|
377 | text-decoration: underline;
|
---|
378 | cursor: pointer;
|
---|
379 | }
|
---|
380 |
|
---|
381 | .top-to-bottom-centered > div h3 {
|
---|
382 | font-size: 1.5rem;
|
---|
383 | text-align: center;
|
---|
384 | }
|
---|
385 |
|
---|
386 | .fs-inputs-container > div {
|
---|
387 | margin: auto;
|
---|
388 | margin-top: 2.4rem;
|
---|
389 | width: -webkit-fit-content;
|
---|
390 | width: -moz-fit-content;
|
---|
391 | width: fit-content;
|
---|
392 | display: -webkit-box;
|
---|
393 | display: -ms-flexbox;
|
---|
394 | display: flex;
|
---|
395 | -webkit-box-orient: vertical;
|
---|
396 | -webkit-box-direction: normal;
|
---|
397 | -ms-flex-direction: column;
|
---|
398 | flex-direction: column;
|
---|
399 | -webkit-box-pack: center;
|
---|
400 | -ms-flex-pack: center;
|
---|
401 | justify-content: center;
|
---|
402 | -webkit-box-align: center;
|
---|
403 | -ms-flex-align: center;
|
---|
404 | align-items: center;
|
---|
405 | }
|
---|
406 |
|
---|
407 | .fs-inputs-container > div > span {
|
---|
408 | margin-bottom: .5rem;
|
---|
409 | font-size: 1.5rem;
|
---|
410 | }
|
---|
411 |
|
---|
412 | .fs-inputs-container > div > input {
|
---|
413 | margin-bottom: 2rem;
|
---|
414 | padding-left: 4px;
|
---|
415 | padding-right: 4px;
|
---|
416 | font-size: 2rem;
|
---|
417 | }
|
---|
418 |
|
---|
419 | .statsScreen svg {
|
---|
420 | cursor: pointer;
|
---|
421 | font-size: 2.5rem;
|
---|
422 | color: white;
|
---|
423 | }
|
---|
424 |
|
---|
425 | .statsScreen > div h1 {
|
---|
426 | font-size: 2.5rem;
|
---|
427 | margin-bottom: 5rem;
|
---|
428 | }
|
---|
429 |
|
---|
430 | .statsScreen > div p {
|
---|
431 | display: -webkit-box;
|
---|
432 | display: -ms-flexbox;
|
---|
433 | display: flex;
|
---|
434 | -webkit-box-pack: justify;
|
---|
435 | -ms-flex-pack: justify;
|
---|
436 | justify-content: space-between;
|
---|
437 | font-size: 1.5rem;
|
---|
438 | margin-bottom: 1rem;
|
---|
439 | }
|
---|
440 |
|
---|
441 | .statsScreen > div p:nth-child(2n) {
|
---|
442 | color: white;
|
---|
443 | }
|
---|
444 |
|
---|
445 | .statsScreen > div p span {
|
---|
446 | margin-left: 5rem;
|
---|
447 | }
|
---|
448 |
|
---|
449 | .manageCreditsScreen .inlineAlert {
|
---|
450 | font-size: 1.5rem !important;
|
---|
451 | cursor: auto;
|
---|
452 | }
|
---|
453 |
|
---|
454 | .manageCreditsScreen svg {
|
---|
455 | z-index: 100;
|
---|
456 | cursor: pointer;
|
---|
457 | font-size: 2.5rem;
|
---|
458 | color: white;
|
---|
459 | }
|
---|
460 |
|
---|
461 | .manageCreditsScreen > div {
|
---|
462 | top: 0%;
|
---|
463 | -webkit-transform: translate(-50%, 0);
|
---|
464 | transform: translate(-50%, 0);
|
---|
465 | width: 100%;
|
---|
466 | }
|
---|
467 |
|
---|
468 | .manageCreditsScreen > div h2 {
|
---|
469 | font-size: 1.5rem;
|
---|
470 | margin-bottom: 1rem;
|
---|
471 | }
|
---|
472 |
|
---|
473 | .manageCreditsScreen > div p {
|
---|
474 | margin-bottom: 5rem;
|
---|
475 | color: white;
|
---|
476 | }
|
---|
477 |
|
---|
478 | .manageCreditsScreen > div button span {
|
---|
479 | color: white;
|
---|
480 | }
|
---|
481 |
|
---|
482 | .manageCreditsScreen > div > div:not(.main) {
|
---|
483 | margin-top: 5vh;
|
---|
484 | height: 15vh;
|
---|
485 | }
|
---|
486 |
|
---|
487 | .manageCreditsScreen > div > div.main {
|
---|
488 | height: 70vh;
|
---|
489 | display: -webkit-box;
|
---|
490 | display: -ms-flexbox;
|
---|
491 | display: flex;
|
---|
492 | }
|
---|
493 |
|
---|
494 | .manageCreditsScreen > div > div.main > div {
|
---|
495 | -webkit-box-flex: 1;
|
---|
496 | -ms-flex: 1;
|
---|
497 | flex: 1;
|
---|
498 | display: -webkit-box;
|
---|
499 | display: -ms-flexbox;
|
---|
500 | display: flex;
|
---|
501 | -webkit-box-orient: vertical;
|
---|
502 | -webkit-box-direction: normal;
|
---|
503 | -ms-flex-direction: column;
|
---|
504 | flex-direction: column;
|
---|
505 | -webkit-box-pack: center;
|
---|
506 | -ms-flex-pack: center;
|
---|
507 | justify-content: center;
|
---|
508 | -webkit-box-align: center;
|
---|
509 | -ms-flex-align: center;
|
---|
510 | align-items: center;
|
---|
511 | }
|
---|
512 |
|
---|
513 | .manageCreditsScreen > div > div.main > div .fs-inputs-container {
|
---|
514 | width: 40%;
|
---|
515 | }
|
---|
516 |
|
---|
517 | .manageCreditsScreen > div > div.main > div .fs-inputs-container > div {
|
---|
518 | width: 100%;
|
---|
519 | }
|
---|
520 |
|
---|
521 | .manageCreditsScreen > div > div.main > div .fs-inputs-container > div label {
|
---|
522 | color: white;
|
---|
523 | }
|
---|
524 |
|
---|
525 | .manageCreditsScreen > div > div.main > div .fs-inputs-container > div span {
|
---|
526 | color: #ead24d;
|
---|
527 | }
|
---|
528 |
|
---|
529 | .manageCreditsScreen > div > div.main > div .fs-inputs-container > div input {
|
---|
530 | font-size: 1.2rem;
|
---|
531 | width: 100%;
|
---|
532 | text-align: center;
|
---|
533 | }
|
---|
534 |
|
---|
535 | .complainScreen .inlineAlert {
|
---|
536 | cursor: auto;
|
---|
537 | }
|
---|
538 |
|
---|
539 | .complainScreen > div > div textarea {
|
---|
540 | background-color: #c3ffd2;
|
---|
541 | width: 50vw;
|
---|
542 | height: 40vh;
|
---|
543 | font-size: 2rem;
|
---|
544 | margin-top: 1rem;
|
---|
545 | margin-bottom: 3rem;
|
---|
546 | }
|
---|
547 |
|
---|
548 | .inlineAlert {
|
---|
549 | cursor: pointer;
|
---|
550 | background-color: #ffdddd;
|
---|
551 | padding: .8rem 2.4rem;
|
---|
552 | border-radius: 15px;
|
---|
553 | color: #ff0000;
|
---|
554 | font-size: 1.8rem !important;
|
---|
555 | font-weight: 100;
|
---|
556 | letter-spacing: -.030em;
|
---|
557 | }
|
---|
558 |
|
---|
559 | /**
|
---|
560 | * Component <- Loading
|
---|
561 | */
|
---|
562 | .loadingScreen h1 {
|
---|
563 | font-size: 5rem;
|
---|
564 | }
|
---|
565 |
|
---|
566 | .lostConnectionScreen > div {
|
---|
567 | text-align: center;
|
---|
568 | }
|
---|
569 |
|
---|
570 | .lostConnectionScreen h3 {
|
---|
571 | font-size: 2rem;
|
---|
572 | margin-bottom: 1rem;
|
---|
573 | }
|
---|
574 |
|
---|
575 | .lostConnectionScreen h3:nth-child(2) {
|
---|
576 | color: white;
|
---|
577 | }
|
---|
578 |
|
---|
579 | .activateScreen > div {
|
---|
580 | text-align: center;
|
---|
581 | }
|
---|
582 |
|
---|
583 | .activateScreen h3 {
|
---|
584 | font-size: 2rem;
|
---|
585 | margin-bottom: 1rem;
|
---|
586 | }
|
---|
587 |
|
---|
588 | .activateScreen h3:nth-child(1) {
|
---|
589 | color: white;
|
---|
590 | }
|
---|
591 |
|
---|
592 | .activateScreen button {
|
---|
593 | font-size: 1.8rem;
|
---|
594 | margin-top: 8rem;
|
---|
595 | }
|
---|
596 |
|
---|
597 | /**
|
---|
598 | * Component <- LoginScreen
|
---|
599 | */
|
---|
600 | .loginScreen.admin {
|
---|
601 | z-index: 50;
|
---|
602 | }
|
---|
603 |
|
---|
604 | .liveGamesMegaContainer {
|
---|
605 | margin-top: 3rem;
|
---|
606 | display: -webkit-box;
|
---|
607 | display: -ms-flexbox;
|
---|
608 | display: flex;
|
---|
609 | -webkit-box-orient: vertical;
|
---|
610 | -webkit-box-direction: normal;
|
---|
611 | -ms-flex-direction: column;
|
---|
612 | flex-direction: column;
|
---|
613 | gap: 8rem;
|
---|
614 | }
|
---|
615 |
|
---|
616 | .liveGamesMegaContainer .liveGamesContainer {
|
---|
617 | display: -webkit-box;
|
---|
618 | display: -ms-flexbox;
|
---|
619 | display: flex;
|
---|
620 | -webkit-box-orient: vertical;
|
---|
621 | -webkit-box-direction: normal;
|
---|
622 | -ms-flex-direction: column;
|
---|
623 | flex-direction: column;
|
---|
624 | -webkit-box-align: start;
|
---|
625 | -ms-flex-align: start;
|
---|
626 | align-items: flex-start;
|
---|
627 | gap: 2rem;
|
---|
628 | }
|
---|
629 |
|
---|
630 | .liveGamesMegaContainer .liveGamesContainer h3 {
|
---|
631 | color: white;
|
---|
632 | }
|
---|
633 |
|
---|
634 | .liveGamesMegaContainer .liveGamesContainer > div {
|
---|
635 | width: 100%;
|
---|
636 | padding: 2rem;
|
---|
637 | -webkit-transition: all .2s linear;
|
---|
638 | transition: all .2s linear;
|
---|
639 | -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
---|
640 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
---|
641 | }
|
---|
642 |
|
---|
643 | .liveGamesMegaContainer .liveGamesContainer > div:hover {
|
---|
644 | -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
645 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
646 | }
|
---|
647 |
|
---|
648 | .liveGamesMegaContainer .liveGamesContainer > div h6 {
|
---|
649 | margin-inline: 0;
|
---|
650 | margin-block: .5rem;
|
---|
651 | color: #ead24d;
|
---|
652 | font-weight: normal;
|
---|
653 | font-size: 1.2rem;
|
---|
654 | text-align: center;
|
---|
655 | }
|
---|
656 |
|
---|
657 | .liveGamesMegaContainer .liveGamesContainer > div h6 span {
|
---|
658 | color: white;
|
---|
659 | }
|
---|
660 |
|
---|
661 | .liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame {
|
---|
662 | display: -webkit-box;
|
---|
663 | display: -ms-flexbox;
|
---|
664 | display: flex;
|
---|
665 | }
|
---|
666 |
|
---|
667 | .liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div {
|
---|
668 | -webkit-box-flex: 1;
|
---|
669 | -ms-flex: 1;
|
---|
670 | flex: 1;
|
---|
671 | display: -webkit-box;
|
---|
672 | display: -ms-flexbox;
|
---|
673 | display: flex;
|
---|
674 | -webkit-box-orient: vertical;
|
---|
675 | -webkit-box-direction: normal;
|
---|
676 | -ms-flex-direction: column;
|
---|
677 | flex-direction: column;
|
---|
678 | }
|
---|
679 |
|
---|
680 | .liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div:nth-child(1) {
|
---|
681 | -webkit-box-align: start;
|
---|
682 | -ms-flex-align: start;
|
---|
683 | align-items: flex-start;
|
---|
684 | }
|
---|
685 |
|
---|
686 | .liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div:nth-child(2) {
|
---|
687 | -webkit-box-align: center;
|
---|
688 | -ms-flex-align: center;
|
---|
689 | align-items: center;
|
---|
690 | }
|
---|
691 |
|
---|
692 | .liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div:nth-child(2) > div {
|
---|
693 | -webkit-box-orient: vertical;
|
---|
694 | -webkit-box-direction: normal;
|
---|
695 | -ms-flex-direction: column;
|
---|
696 | flex-direction: column;
|
---|
697 | -webkit-box-pack: center;
|
---|
698 | -ms-flex-pack: center;
|
---|
699 | justify-content: center;
|
---|
700 | }
|
---|
701 |
|
---|
702 | .liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div:nth-child(3) {
|
---|
703 | -webkit-box-align: end;
|
---|
704 | -ms-flex-align: end;
|
---|
705 | align-items: flex-end;
|
---|
706 | }
|
---|
707 |
|
---|
708 | .liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div:nth-child(3) h5 {
|
---|
709 | margin-inline: 4rem;
|
---|
710 | }
|
---|
711 |
|
---|
712 | .liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div p {
|
---|
713 | margin-top: 1rem;
|
---|
714 | font-size: 1.5rem;
|
---|
715 | }
|
---|
716 |
|
---|
717 | .liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div h5 {
|
---|
718 | font-size: 5rem;
|
---|
719 | font-weight: 100;
|
---|
720 | font-style: italic;
|
---|
721 | margin-inline: 3rem;
|
---|
722 | margin-block: 0;
|
---|
723 | display: -webkit-box;
|
---|
724 | display: -ms-flexbox;
|
---|
725 | display: flex;
|
---|
726 | -webkit-box-align: center;
|
---|
727 | -ms-flex-align: center;
|
---|
728 | align-items: center;
|
---|
729 | }
|
---|
730 |
|
---|
731 | .liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div > div {
|
---|
732 | display: -webkit-box;
|
---|
733 | display: -ms-flexbox;
|
---|
734 | display: flex;
|
---|
735 | margin-inline: 2.5rem;
|
---|
736 | }
|
---|
737 |
|
---|
738 | .liveGamesMegaContainer .liveGamesContainer > div.liveBlackjackGame > div > div .card {
|
---|
739 | margin-inline: -2.5rem;
|
---|
740 | position: relative;
|
---|
741 | }
|
---|
742 |
|
---|
743 | .liveGamesMegaContainer .liveGamesContainer > div .cardsOnTable, .liveGamesMegaContainer .liveGamesContainer > div .cards {
|
---|
744 | display: -webkit-box;
|
---|
745 | display: -ms-flexbox;
|
---|
746 | display: flex;
|
---|
747 | margin-inline: 2.5rem;
|
---|
748 | }
|
---|
749 |
|
---|
750 | .liveGamesMegaContainer .liveGamesContainer > div .cardsOnTable .card, .liveGamesMegaContainer .liveGamesContainer > div .cards .card {
|
---|
751 | margin-inline: -2.5rem;
|
---|
752 | position: relative;
|
---|
753 | }
|
---|
754 |
|
---|
755 | .liveGamesMegaContainer .liveGamesContainer > div .cardsOnTable {
|
---|
756 | display: -webkit-box;
|
---|
757 | display: -ms-flexbox;
|
---|
758 | display: flex;
|
---|
759 | -webkit-box-pack: center;
|
---|
760 | -ms-flex-pack: center;
|
---|
761 | justify-content: center;
|
---|
762 | }
|
---|
763 |
|
---|
764 | .liveGamesMegaContainer .liveGamesContainer > div .cards .card {
|
---|
765 | margin-inline: -1.6rem;
|
---|
766 | height: 100px;
|
---|
767 | }
|
---|
768 |
|
---|
769 | .liveGamesMegaContainer .liveGamesContainer > div .playerInLiveRouletteGame, .liveGamesMegaContainer .liveGamesContainer > div .playerInLivePokerGame {
|
---|
770 | display: -webkit-box;
|
---|
771 | display: -ms-flexbox;
|
---|
772 | display: flex;
|
---|
773 | -webkit-box-align: center;
|
---|
774 | -ms-flex-align: center;
|
---|
775 | align-items: center;
|
---|
776 | }
|
---|
777 |
|
---|
778 | .liveGamesMegaContainer .liveGamesContainer > div .playerInLiveRouletteGame > div, .liveGamesMegaContainer .liveGamesContainer > div .playerInLivePokerGame > div {
|
---|
779 | -webkit-box-flex: 1;
|
---|
780 | -ms-flex: 1;
|
---|
781 | flex: 1;
|
---|
782 | }
|
---|
783 |
|
---|
784 | .liveGamesMegaContainer .liveGamesContainer > div .playerInLivePokerGame {
|
---|
785 | margin-block: .8rem;
|
---|
786 | }
|
---|
787 |
|
---|
788 | .complaintsScreen {
|
---|
789 | z-index: 20;
|
---|
790 | }
|
---|
791 |
|
---|
792 | .complaintsScreen .complaint {
|
---|
793 | width: 100%;
|
---|
794 | padding: 2rem;
|
---|
795 | -webkit-transition: all .2s linear;
|
---|
796 | transition: all .2s linear;
|
---|
797 | -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
---|
798 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
---|
799 | }
|
---|
800 |
|
---|
801 | .complaintsScreen .complaint:hover {
|
---|
802 | -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
803 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
804 | }
|
---|
805 |
|
---|
806 | .complaintsScreen .complaint:nth-child(2n+1) {
|
---|
807 | color: white;
|
---|
808 | }
|
---|
809 |
|
---|
810 | .complaintsScreen .complaint > div:nth-child(1) {
|
---|
811 | display: -webkit-box;
|
---|
812 | display: -ms-flexbox;
|
---|
813 | display: flex;
|
---|
814 | -webkit-box-pack: justify;
|
---|
815 | -ms-flex-pack: justify;
|
---|
816 | justify-content: space-between;
|
---|
817 | -webkit-box-align: center;
|
---|
818 | -ms-flex-align: center;
|
---|
819 | align-items: center;
|
---|
820 | }
|
---|
821 |
|
---|
822 | .complaintsScreen .complaint > div:nth-child(1) > * {
|
---|
823 | -webkit-box-flex: 1;
|
---|
824 | -ms-flex: 1;
|
---|
825 | flex: 1;
|
---|
826 | }
|
---|
827 |
|
---|
828 | .complaintsScreen .complaint > div:nth-child(1) > div {
|
---|
829 | display: -webkit-box;
|
---|
830 | display: -ms-flexbox;
|
---|
831 | display: flex;
|
---|
832 | -webkit-box-pack: end;
|
---|
833 | -ms-flex-pack: end;
|
---|
834 | justify-content: flex-end;
|
---|
835 | }
|
---|
836 |
|
---|
837 | .complaintsScreen .complaint textarea {
|
---|
838 | width: 100%;
|
---|
839 | height: 7rem;
|
---|
840 | margin-top: .5rem;
|
---|
841 | font-size: 1.2rem;
|
---|
842 | padding: .4rem;
|
---|
843 | background-color: #c3ffd2;
|
---|
844 | }
|
---|
845 |
|
---|
846 | .complaintsScreen .complaint .answering {
|
---|
847 | margin-top: 1rem;
|
---|
848 | }
|
---|
849 |
|
---|
850 | .complaintsScreen .complaint .answering > div {
|
---|
851 | display: -webkit-box;
|
---|
852 | display: -ms-flexbox;
|
---|
853 | display: flex;
|
---|
854 | -webkit-box-pack: end;
|
---|
855 | -ms-flex-pack: end;
|
---|
856 | justify-content: flex-end;
|
---|
857 | margin-top: 1rem;
|
---|
858 | }
|
---|
859 |
|
---|
860 | .complaintsScreen .complaint .primaryButton, .complaintsScreen .complaint .secondaryButton {
|
---|
861 | font-size: 1rem;
|
---|
862 | }
|
---|
863 |
|
---|
864 | .liveGamesScreen {
|
---|
865 | z-index: 20;
|
---|
866 | }
|
---|
867 |
|
---|
868 | .dashboardScreen.admin .fs-inputs-container {
|
---|
869 | -webkit-transform: translate(-50%, -75%);
|
---|
870 | transform: translate(-50%, -75%);
|
---|
871 | }
|
---|
872 |
|
---|
873 | .dashboardScreen.admin .fs-inputs-container > div {
|
---|
874 | gap: 10rem;
|
---|
875 | }
|
---|
876 |
|
---|
877 | .dashboardScreen.admin .fs-inputs-container > div > div {
|
---|
878 | width: 50vw;
|
---|
879 | display: -webkit-box;
|
---|
880 | display: -ms-flexbox;
|
---|
881 | display: flex;
|
---|
882 | -ms-flex-pack: distribute;
|
---|
883 | justify-content: space-around;
|
---|
884 | }
|
---|
885 |
|
---|
886 | /**
|
---|
887 | * Primary Thingies
|
---|
888 | */
|
---|
889 | .primaryButton {
|
---|
890 | background: -webkit-gradient(linear, left top, right top, from(#0B932E), to(#097625));
|
---|
891 | background: linear-gradient(to right, #0B932E, #097625);
|
---|
892 | color: #ead24d;
|
---|
893 | outline: none;
|
---|
894 | border: none;
|
---|
895 | border-radius: 10px;
|
---|
896 | font-size: 1.5rem;
|
---|
897 | font-weight: bold;
|
---|
898 | padding: 5px 20px;
|
---|
899 | -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
900 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
901 | cursor: pointer;
|
---|
902 | -webkit-transition: all .2s linear;
|
---|
903 | transition: all .2s linear;
|
---|
904 | }
|
---|
905 |
|
---|
906 | .primaryButton:hover {
|
---|
907 | -webkit-transform: scale(1.1) rotateZ(-1deg);
|
---|
908 | transform: scale(1.1) rotateZ(-1deg);
|
---|
909 | }
|
---|
910 |
|
---|
911 | .primaryButton:active {
|
---|
912 | -webkit-transition: .05s linear;
|
---|
913 | transition: .05s linear;
|
---|
914 | -webkit-transform: scale(1) rotateZ(-1deg);
|
---|
915 | transform: scale(1) rotateZ(-1deg);
|
---|
916 | }
|
---|
917 |
|
---|
918 | .secondaryButton {
|
---|
919 | background: -webkit-gradient(linear, left top, right top, from(#4d99ea), to(#4d99ea));
|
---|
920 | background: linear-gradient(to right, #4d99ea, #4d99ea);
|
---|
921 | color: white;
|
---|
922 | outline: none;
|
---|
923 | border: none;
|
---|
924 | border-radius: 10px;
|
---|
925 | font-size: 1.5rem;
|
---|
926 | font-weight: bold;
|
---|
927 | padding: 5px 20px;
|
---|
928 | -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
929 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
930 | cursor: pointer;
|
---|
931 | -webkit-transition: all .2s linear;
|
---|
932 | transition: all .2s linear;
|
---|
933 | }
|
---|
934 |
|
---|
935 | .secondaryButton:hover {
|
---|
936 | -webkit-transform: scale(1.1) rotateZ(-1deg);
|
---|
937 | transform: scale(1.1) rotateZ(-1deg);
|
---|
938 | }
|
---|
939 |
|
---|
940 | .secondaryButton:active {
|
---|
941 | -webkit-transition: .05s linear;
|
---|
942 | transition: .05s linear;
|
---|
943 | -webkit-transform: scale(1) rotateZ(-1deg);
|
---|
944 | transform: scale(1) rotateZ(-1deg);
|
---|
945 | }
|
---|
946 |
|
---|
947 | .tertiaryButton {
|
---|
948 | background: -webkit-gradient(linear, left top, right top, from(#484848), to(#6a6a6a));
|
---|
949 | background: linear-gradient(to right, #484848, #6a6a6a);
|
---|
950 | color: white;
|
---|
951 | outline: none;
|
---|
952 | border: none;
|
---|
953 | border-radius: 10px;
|
---|
954 | font-size: 1.5rem;
|
---|
955 | font-weight: bold;
|
---|
956 | padding: 5px 20px;
|
---|
957 | -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
958 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
959 | cursor: pointer;
|
---|
960 | -webkit-transition: all .2s linear;
|
---|
961 | transition: all .2s linear;
|
---|
962 | }
|
---|
963 |
|
---|
964 | .tertiaryButton:hover {
|
---|
965 | background: -webkit-gradient(linear, left top, right top, from(#6e6e6e), to(#a0a0a0));
|
---|
966 | background: linear-gradient(to right, #6e6e6e, #a0a0a0);
|
---|
967 | }
|
---|
968 |
|
---|
969 | .tertiaryButton:active {
|
---|
970 | -webkit-transition: .05s linear;
|
---|
971 | transition: .05s linear;
|
---|
972 | background: -webkit-gradient(linear, left top, right top, from(#484848), to(#6a6a6a));
|
---|
973 | background: linear-gradient(to right, #484848, #6a6a6a);
|
---|
974 | }
|
---|
975 |
|
---|
976 | /**
|
---|
977 | * Input Sliders
|
---|
978 | */
|
---|
979 | .primarySlider {
|
---|
980 | -webkit-appearance: none;
|
---|
981 | width: 250px;
|
---|
982 | height: 10px;
|
---|
983 | background: #0B932E;
|
---|
984 | outline: none;
|
---|
985 | border-radius: 10px;
|
---|
986 | -webkit-transition: .2s;
|
---|
987 | -webkit-transition: opacity .2s;
|
---|
988 | transition: opacity .2s;
|
---|
989 | -webkit-box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
|
---|
990 | box-shadow: 0 5px 25px rgba(234, 210, 77, 0.25);
|
---|
991 | }
|
---|
992 |
|
---|
993 | .primarySlider:hover {
|
---|
994 | opacity: 1;
|
---|
995 | }
|
---|
996 |
|
---|
997 | .primarySlider::-webkit-slider-thumb {
|
---|
998 | -webkit-appearance: none;
|
---|
999 | appearance: none;
|
---|
1000 | outline: none;
|
---|
1001 | border: none;
|
---|
1002 | width: 35px;
|
---|
1003 | height: 35px;
|
---|
1004 | border-radius: 50%;
|
---|
1005 | background: url("/images/gold-coin.png");
|
---|
1006 | background-size: contain;
|
---|
1007 | background-color: #ead24d;
|
---|
1008 | cursor: pointer;
|
---|
1009 | }
|
---|
1010 |
|
---|
1011 | .primarySlider::-moz-range-thumb {
|
---|
1012 | -moz-appearance: none;
|
---|
1013 | appearance: none;
|
---|
1014 | outline: none;
|
---|
1015 | border: none;
|
---|
1016 | width: 35px;
|
---|
1017 | height: 35px;
|
---|
1018 | border-radius: 50%;
|
---|
1019 | background: url("/images/gold-coin.png");
|
---|
1020 | background-size: contain;
|
---|
1021 | background-color: #ead24d;
|
---|
1022 | cursor: pointer;
|
---|
1023 | }
|
---|
1024 |
|
---|
1025 | /**
|
---|
1026 | * Scrollbar
|
---|
1027 | */
|
---|
1028 | /* width */
|
---|
1029 | ::-webkit-scrollbar {
|
---|
1030 | width: 15px;
|
---|
1031 | }
|
---|
1032 |
|
---|
1033 | /* Track */
|
---|
1034 | ::-webkit-scrollbar-track {
|
---|
1035 | background: #0B932E;
|
---|
1036 | }
|
---|
1037 |
|
---|
1038 | /* Handle */
|
---|
1039 | ::-webkit-scrollbar-thumb {
|
---|
1040 | background: #ead24d;
|
---|
1041 | }
|
---|
1042 |
|
---|
1043 | /* Handle on hover */
|
---|
1044 | ::-webkit-scrollbar-thumb:hover {
|
---|
1045 | background: #efcb00;
|
---|
1046 | }
|
---|
1047 |
|
---|
1048 | /**
|
---|
1049 | * File <- Blackjack Main
|
---|
1050 | */
|
---|
1051 | .blackjackButtons {
|
---|
1052 | position: absolute;
|
---|
1053 | left: 0;
|
---|
1054 | top: 90vh;
|
---|
1055 | width: 100vw;
|
---|
1056 | height: 10vh;
|
---|
1057 | overflow: hidden;
|
---|
1058 | }
|
---|
1059 |
|
---|
1060 | .blackjackButtons > div {
|
---|
1061 | display: -webkit-box;
|
---|
1062 | display: -ms-flexbox;
|
---|
1063 | display: flex;
|
---|
1064 | -webkit-box-orient: horizontal;
|
---|
1065 | -webkit-box-direction: normal;
|
---|
1066 | -ms-flex-direction: row;
|
---|
1067 | flex-direction: row;
|
---|
1068 | -webkit-box-pack: center;
|
---|
1069 | -ms-flex-pack: center;
|
---|
1070 | justify-content: center;
|
---|
1071 | -webkit-box-align: center;
|
---|
1072 | -ms-flex-align: center;
|
---|
1073 | align-items: center;
|
---|
1074 | -webkit-transition: .5s ease-in-out;
|
---|
1075 | transition: .5s ease-in-out;
|
---|
1076 | }
|
---|
1077 |
|
---|
1078 | .blackjackButtons > div > button {
|
---|
1079 | width: 300px;
|
---|
1080 | }
|
---|
1081 |
|
---|
1082 | .blackjackButtons > div > button:nth-child(2) {
|
---|
1083 | margin-left: 30px;
|
---|
1084 | }
|
---|
1085 |
|
---|
1086 | .card {
|
---|
1087 | aspect-ratio: 400/560;
|
---|
1088 | height: 150px;
|
---|
1089 | background-size: contain;
|
---|
1090 | position: absolute;
|
---|
1091 | -webkit-transition: .5s ease-in-out;
|
---|
1092 | transition: .5s ease-in-out;
|
---|
1093 | border-radius: 10px;
|
---|
1094 | border: 1px solid black;
|
---|
1095 | }
|
---|
1096 |
|
---|
1097 | .blackjackDisplayBet {
|
---|
1098 | position: absolute;
|
---|
1099 | -webkit-transform: translate(-50%, -50%);
|
---|
1100 | transform: translate(-50%, -50%);
|
---|
1101 | left: 51vw;
|
---|
1102 | top: 63.5vh;
|
---|
1103 | }
|
---|
1104 |
|
---|
1105 | .blackjackSideBetsModal {
|
---|
1106 | z-index: 20;
|
---|
1107 | -webkit-box-orient: vertical !important;
|
---|
1108 | -webkit-box-direction: normal !important;
|
---|
1109 | -ms-flex-direction: column !important;
|
---|
1110 | flex-direction: column !important;
|
---|
1111 | position: fixed;
|
---|
1112 | left: 50vw;
|
---|
1113 | top: 45vh;
|
---|
1114 | width: 41vw;
|
---|
1115 | height: 80vh;
|
---|
1116 | padding: 10px;
|
---|
1117 | -webkit-transform: translate(-50%, -50%);
|
---|
1118 | transform: translate(-50%, -50%);
|
---|
1119 | background: -webkit-gradient(linear, left top, right top, from(#0B932Ec0), to(#097625e0));
|
---|
1120 | background: linear-gradient(to right, #0B932Ec0, #097625e0);
|
---|
1121 | -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
|
---|
1122 | box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
|
---|
1123 | border-radius: 20px;
|
---|
1124 | overflow-y: scroll;
|
---|
1125 | }
|
---|
1126 |
|
---|
1127 | .blackjackSideBetsModal .blackjackSideBetSelect {
|
---|
1128 | display: -webkit-box;
|
---|
1129 | display: -ms-flexbox;
|
---|
1130 | display: flex;
|
---|
1131 | -webkit-box-orient: vertical;
|
---|
1132 | -webkit-box-direction: normal;
|
---|
1133 | -ms-flex-direction: column;
|
---|
1134 | flex-direction: column;
|
---|
1135 | width: 100%;
|
---|
1136 | }
|
---|
1137 |
|
---|
1138 | .blackjackSideBetsModal .blackjackSideBetSelect:first-child {
|
---|
1139 | margin-top: 10rem;
|
---|
1140 | }
|
---|
1141 |
|
---|
1142 | .blackjackSideBetsModal .blackjackSideBetSelect h1 {
|
---|
1143 | margin-bottom: 1rem;
|
---|
1144 | color: #ead24d;
|
---|
1145 | }
|
---|
1146 |
|
---|
1147 | .blackjackSideBetsModal .blackjackSideBetSelect > div {
|
---|
1148 | text-align: left;
|
---|
1149 | }
|
---|
1150 |
|
---|
1151 | .blackjackSideBetsModal .blackjackSideBetSelect > div p {
|
---|
1152 | margin-bottom: 1rem;
|
---|
1153 | padding: 10px 20px;
|
---|
1154 | border-radius: 5px;
|
---|
1155 | cursor: pointer;
|
---|
1156 | -webkit-transition: all .25s linear;
|
---|
1157 | transition: all .25s linear;
|
---|
1158 | }
|
---|
1159 |
|
---|
1160 | .blackjackSideBetsModal .blackjackSideBetSelect > div p span {
|
---|
1161 | font-size: 1.2rem;
|
---|
1162 | color: #ead24d;
|
---|
1163 | }
|
---|
1164 |
|
---|
1165 | .blackjackSideBetsModal .blackjackSideBetSelect > div p:hover {
|
---|
1166 | color: #ead24d;
|
---|
1167 | -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
1168 | box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
|
---|
1169 | }
|
---|
1170 |
|
---|
1171 | .blackjackSideBetsChooseCreditsModal {
|
---|
1172 | z-index: 20;
|
---|
1173 | -webkit-box-orient: vertical !important;
|
---|
1174 | -webkit-box-direction: normal !important;
|
---|
1175 | -ms-flex-direction: column !important;
|
---|
1176 | flex-direction: column !important;
|
---|
1177 | position: fixed;
|
---|
1178 | left: 50vw;
|
---|
1179 | top: 45vh;
|
---|
1180 | width: 41vw;
|
---|
1181 | height: 80vh;
|
---|
1182 | padding: 10px;
|
---|
1183 | -webkit-transform: translate(-50%, -50%);
|
---|
1184 | transform: translate(-50%, -50%);
|
---|
1185 | background: -webkit-gradient(linear, left top, right top, from(#00000080), to(#00000080));
|
---|
1186 | background: linear-gradient(to right, #00000080, #00000080);
|
---|
1187 | -webkit-box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
|
---|
1188 | box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
|
---|
1189 | border-radius: 20px;
|
---|
1190 | }
|
---|
1191 |
|
---|
1192 | .blackjackSideBetsChooseCreditsModal p {
|
---|
1193 | margin-bottom: 1rem;
|
---|
1194 | padding: 10px 20px;
|
---|
1195 | border-radius: 5px;
|
---|
1196 | -webkit-transition: all .25s linear;
|
---|
1197 | transition: all .25s linear;
|
---|
1198 | }
|
---|
1199 |
|
---|
1200 | .blackjackSideBetsChooseCreditsModal p span {
|
---|
1201 | font-size: 1.2rem;
|
---|
1202 | color: white;
|
---|
1203 | }
|
---|
1204 |
|
---|
1205 | /**
|
---|
1206 | * File <- Roulette Main
|
---|
1207 | */
|
---|
1208 | .rouletteMainContainer {
|
---|
1209 | background-color: #006600;
|
---|
1210 | }
|
---|
1211 |
|
---|
1212 | #rouletteBall {
|
---|
1213 | position: absolute;
|
---|
1214 | top: 87.5%;
|
---|
1215 | left: 17.5%;
|
---|
1216 | width: 1rem;
|
---|
1217 | }
|
---|
1218 |
|
---|
1219 | #rouletteBetsImg {
|
---|
1220 | position: absolute;
|
---|
1221 | top: 65%;
|
---|
1222 | left: 59%;
|
---|
1223 | -webkit-transform: translate(-50%, -50%);
|
---|
1224 | transform: translate(-50%, -50%);
|
---|
1225 | width: 50vw;
|
---|
1226 | height: auto;
|
---|
1227 | cursor: url(/gold-coin.cur), auto;
|
---|
1228 | }
|
---|
1229 |
|
---|
1230 | #rouletteWheelImg {
|
---|
1231 | position: absolute;
|
---|
1232 | top: 60%;
|
---|
1233 | left: 18%;
|
---|
1234 | -webkit-transition: all .5s ease-in-out;
|
---|
1235 | transition: all .5s ease-in-out;
|
---|
1236 | width: 450px;
|
---|
1237 | height: auto;
|
---|
1238 | }
|
---|
1239 |
|
---|
1240 | .rouletteInfoText {
|
---|
1241 | position: absolute;
|
---|
1242 | top: 15%;
|
---|
1243 | width: 100vw;
|
---|
1244 | text-align: center;
|
---|
1245 | font-size: 1.1rem;
|
---|
1246 | }
|
---|
1247 |
|
---|
1248 | .roulettePlayersContainer {
|
---|
1249 | position: absolute;
|
---|
1250 | top: 15%;
|
---|
1251 | right: 4%;
|
---|
1252 | width: 10vw;
|
---|
1253 | height: 80vh;
|
---|
1254 | -webkit-box-shadow: 0 0 10px rgba(10, 148, 45, 0.25);
|
---|
1255 | box-shadow: 0 0 10px rgba(10, 148, 45, 0.25);
|
---|
1256 | padding: 1rem;
|
---|
1257 | display: -ms-grid;
|
---|
1258 | display: grid;
|
---|
1259 | -ms-grid-rows: (minmax(0, 1fr))[2];
|
---|
1260 | grid-template-rows: repeat(2, minmax(0, 1fr));
|
---|
1261 | overflow-x: hidden;
|
---|
1262 | overflow-y: scroll;
|
---|
1263 | }
|
---|
1264 |
|
---|
1265 | .roulettePlayersContainer p {
|
---|
1266 | word-wrap: break-word;
|
---|
1267 | margin-top: .5rem;
|
---|
1268 | }
|
---|
1269 |
|
---|
1270 | .rouletteTimer {
|
---|
1271 | position: absolute;
|
---|
1272 | top: calc((60% + 450px) / 2);
|
---|
1273 | left: calc(18.5%);
|
---|
1274 | -webkit-transform: translate(-50%, -50%);
|
---|
1275 | transform: translate(-50%, -50%);
|
---|
1276 | display: -webkit-box;
|
---|
1277 | display: -ms-flexbox;
|
---|
1278 | display: flex;
|
---|
1279 | -webkit-box-orient: vertical;
|
---|
1280 | -webkit-box-direction: normal;
|
---|
1281 | -ms-flex-direction: column;
|
---|
1282 | flex-direction: column;
|
---|
1283 | -webkit-box-pack: center;
|
---|
1284 | -ms-flex-pack: center;
|
---|
1285 | justify-content: center;
|
---|
1286 | -webkit-box-align: center;
|
---|
1287 | -ms-flex-align: center;
|
---|
1288 | align-items: center;
|
---|
1289 | gap: 5px;
|
---|
1290 | font-size: 2.5rem;
|
---|
1291 | color: black;
|
---|
1292 | }
|
---|
1293 |
|
---|
1294 | .rouletteBetModal {
|
---|
1295 | z-index: 20;
|
---|
1296 | -webkit-box-orient: vertical;
|
---|
1297 | -webkit-box-direction: normal;
|
---|
1298 | -ms-flex-direction: column;
|
---|
1299 | flex-direction: column;
|
---|
1300 | -webkit-box-pack: center;
|
---|
1301 | -ms-flex-pack: center;
|
---|
1302 | justify-content: center;
|
---|
1303 | -webkit-box-align: center;
|
---|
1304 | -ms-flex-align: center;
|
---|
1305 | align-items: center;
|
---|
1306 | position: fixed;
|
---|
1307 | left: 0;
|
---|
1308 | top: 0;
|
---|
1309 | width: 100vw;
|
---|
1310 | height: 100vh;
|
---|
1311 | background: #000000c0;
|
---|
1312 | }
|
---|
1313 |
|
---|
1314 | .rouletteBetModal p {
|
---|
1315 | margin-bottom: 1rem;
|
---|
1316 | padding: 10px 20px;
|
---|
1317 | border-radius: 5px;
|
---|
1318 | -webkit-transition: all .25s linear;
|
---|
1319 | transition: all .25s linear;
|
---|
1320 | }
|
---|
1321 |
|
---|
1322 | .rouletteBetModal p span {
|
---|
1323 | font-size: 1.2rem;
|
---|
1324 | color: #ead24d;
|
---|
1325 | }
|
---|
1326 |
|
---|
1327 | .pokerRaiseModal {
|
---|
1328 | z-index: 20;
|
---|
1329 | -webkit-box-orient: vertical;
|
---|
1330 | -webkit-box-direction: normal;
|
---|
1331 | -ms-flex-direction: column;
|
---|
1332 | flex-direction: column;
|
---|
1333 | -webkit-box-pack: center;
|
---|
1334 | -ms-flex-pack: center;
|
---|
1335 | justify-content: center;
|
---|
1336 | -webkit-box-align: center;
|
---|
1337 | -ms-flex-align: center;
|
---|
1338 | align-items: center;
|
---|
1339 | position: fixed;
|
---|
1340 | left: 0;
|
---|
1341 | top: 0;
|
---|
1342 | width: 100vw;
|
---|
1343 | height: 100vh;
|
---|
1344 | background: #000000c0;
|
---|
1345 | }
|
---|
1346 |
|
---|
1347 | .pokerRaiseModal p {
|
---|
1348 | margin-bottom: 1rem;
|
---|
1349 | padding: 10px 20px;
|
---|
1350 | border-radius: 5px;
|
---|
1351 | -webkit-transition: all .25s linear;
|
---|
1352 | transition: all .25s linear;
|
---|
1353 | }
|
---|
1354 |
|
---|
1355 | .pokerRaiseModal p span {
|
---|
1356 | font-size: 1.2rem;
|
---|
1357 | color: #ead24d;
|
---|
1358 | }
|
---|
1359 |
|
---|
1360 | /**
|
---|
1361 | * Spin effect on the roulette wheel
|
---|
1362 | */
|
---|
1363 | .spin {
|
---|
1364 | -webkit-animation: spinner 4s infinite;
|
---|
1365 | animation: spinner 4s infinite;
|
---|
1366 | -webkit-animation-timing-function: ease-in-out;
|
---|
1367 | animation-timing-function: ease-in-out;
|
---|
1368 | }
|
---|
1369 |
|
---|
1370 | @-webkit-keyframes spinner {
|
---|
1371 | 0% {
|
---|
1372 | -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
|
---|
1373 | transform: translate(-50%, -50%) rotateZ(0deg);
|
---|
1374 | }
|
---|
1375 | 10% {
|
---|
1376 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
|
---|
1377 | transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
|
---|
1378 | }
|
---|
1379 | 20% {
|
---|
1380 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
|
---|
1381 | transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
|
---|
1382 | }
|
---|
1383 | 30% {
|
---|
1384 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
|
---|
1385 | transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
|
---|
1386 | }
|
---|
1387 | 40% {
|
---|
1388 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
|
---|
1389 | transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
|
---|
1390 | }
|
---|
1391 | 50% {
|
---|
1392 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
|
---|
1393 | transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
|
---|
1394 | }
|
---|
1395 | 60% {
|
---|
1396 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
|
---|
1397 | transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
|
---|
1398 | }
|
---|
1399 | 70% {
|
---|
1400 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
|
---|
1401 | transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
|
---|
1402 | }
|
---|
1403 | 80% {
|
---|
1404 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
|
---|
1405 | transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
|
---|
1406 | }
|
---|
1407 | 90% {
|
---|
1408 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
|
---|
1409 | transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
|
---|
1410 | }
|
---|
1411 | 100% {
|
---|
1412 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
|
---|
1413 | transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
|
---|
1414 | }
|
---|
1415 | }
|
---|
1416 |
|
---|
1417 | @keyframes spinner {
|
---|
1418 | 0% {
|
---|
1419 | -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
|
---|
1420 | transform: translate(-50%, -50%) rotateZ(0deg);
|
---|
1421 | }
|
---|
1422 | 10% {
|
---|
1423 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
|
---|
1424 | transform: translate(-50%, -50%) rotateZ(calc(20 * 360deg));
|
---|
1425 | }
|
---|
1426 | 20% {
|
---|
1427 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
|
---|
1428 | transform: translate(-50%, -50%) rotateZ(calc(38 * 360deg));
|
---|
1429 | }
|
---|
1430 | 30% {
|
---|
1431 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
|
---|
1432 | transform: translate(-50%, -50%) rotateZ(calc(54 * 360deg));
|
---|
1433 | }
|
---|
1434 | 40% {
|
---|
1435 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
|
---|
1436 | transform: translate(-50%, -50%) rotateZ(calc(78 * 360deg));
|
---|
1437 | }
|
---|
1438 | 50% {
|
---|
1439 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
|
---|
1440 | transform: translate(-50%, -50%) rotateZ(calc(90 * 360deg));
|
---|
1441 | }
|
---|
1442 | 60% {
|
---|
1443 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
|
---|
1444 | transform: translate(-50%, -50%) rotateZ(calc(100 * 360deg));
|
---|
1445 | }
|
---|
1446 | 70% {
|
---|
1447 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
|
---|
1448 | transform: translate(-50%, -50%) rotateZ(calc(108 * 360deg));
|
---|
1449 | }
|
---|
1450 | 80% {
|
---|
1451 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
|
---|
1452 | transform: translate(-50%, -50%) rotateZ(calc(116 * 360deg));
|
---|
1453 | }
|
---|
1454 | 90% {
|
---|
1455 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
|
---|
1456 | transform: translate(-50%, -50%) rotateZ(calc(120 * 360deg));
|
---|
1457 | }
|
---|
1458 | 100% {
|
---|
1459 | -webkit-transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
|
---|
1460 | transform: translate(-50%, -50%) rotateZ(calc(122 * 360deg));
|
---|
1461 | }
|
---|
1462 | }
|
---|
1463 |
|
---|
1464 | /**
|
---|
1465 | * File <- Poker Main
|
---|
1466 | */
|
---|
1467 | .pokerMainContainer .pokerPickATableContainer {
|
---|
1468 | position: absolute;
|
---|
1469 | left: 0;
|
---|
1470 | top: 0;
|
---|
1471 | width: 100vw;
|
---|
1472 | height: 100vh;
|
---|
1473 | background-color: #111;
|
---|
1474 | display: -webkit-box;
|
---|
1475 | display: -ms-flexbox;
|
---|
1476 | display: flex;
|
---|
1477 | -webkit-box-orient: vertical;
|
---|
1478 | -webkit-box-direction: normal;
|
---|
1479 | -ms-flex-direction: column;
|
---|
1480 | flex-direction: column;
|
---|
1481 | -webkit-box-pack: center;
|
---|
1482 | -ms-flex-pack: center;
|
---|
1483 | justify-content: center;
|
---|
1484 | -webkit-box-align: center;
|
---|
1485 | -ms-flex-align: center;
|
---|
1486 | align-items: center;
|
---|
1487 | gap: 5rem;
|
---|
1488 | }
|
---|
1489 |
|
---|
1490 | .pokerMainContainer .pokerPickATableContainer .createATable > input {
|
---|
1491 | margin-bottom: 2rem;
|
---|
1492 | padding-left: 4px;
|
---|
1493 | padding-right: 4px;
|
---|
1494 | font-size: 1.5rem;
|
---|
1495 | margin-right: 1rem;
|
---|
1496 | border-radius: .5rem;
|
---|
1497 | }
|
---|
1498 |
|
---|
1499 | .pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > h3 {
|
---|
1500 | margin-bottom: 1rem;
|
---|
1501 | }
|
---|
1502 |
|
---|
1503 | .pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > div {
|
---|
1504 | display: -webkit-box;
|
---|
1505 | display: -ms-flexbox;
|
---|
1506 | display: flex;
|
---|
1507 | -webkit-box-orient: vertical;
|
---|
1508 | -webkit-box-direction: normal;
|
---|
1509 | -ms-flex-direction: column;
|
---|
1510 | flex-direction: column;
|
---|
1511 | -webkit-box-align: center;
|
---|
1512 | -ms-flex-align: center;
|
---|
1513 | align-items: center;
|
---|
1514 | gap: 2rem;
|
---|
1515 | width: 100vw;
|
---|
1516 | max-height: 45vh;
|
---|
1517 | padding-block: 2rem;
|
---|
1518 | overflow-x: hidden;
|
---|
1519 | overflow-y: scroll;
|
---|
1520 | }
|
---|
1521 |
|
---|
1522 | .pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > div > div {
|
---|
1523 | -webkit-box-shadow: 0 5px 25px #4d99eaaa;
|
---|
1524 | box-shadow: 0 5px 25px #4d99eaaa;
|
---|
1525 | width: 60vw;
|
---|
1526 | padding: 1rem 3rem;
|
---|
1527 | border-radius: .5rem;
|
---|
1528 | cursor: pointer;
|
---|
1529 | display: -ms-grid;
|
---|
1530 | display: grid;
|
---|
1531 | -ms-grid-columns: (minmax(0, 1fr))[4];
|
---|
1532 | grid-template-columns: repeat(4, minmax(0, 1fr));
|
---|
1533 | place-items: center;
|
---|
1534 | -webkit-transition: all .2s ease-out;
|
---|
1535 | transition: all .2s ease-out;
|
---|
1536 | }
|
---|
1537 |
|
---|
1538 | .pokerMainContainer .pokerPickATableContainer > div:not(.createATable) > div > div:hover {
|
---|
1539 | -webkit-transform: scale(1.05);
|
---|
1540 | transform: scale(1.05);
|
---|
1541 | -webkit-box-shadow: 0 10px 35px #4d99eaaa;
|
---|
1542 | box-shadow: 0 10px 35px #4d99eaaa;
|
---|
1543 | }
|
---|
1544 |
|
---|
1545 | .pokerMainContainer .pokerChairsContainer .pokerChair {
|
---|
1546 | position: absolute;
|
---|
1547 | -webkit-transform: translate(-50%, -50%);
|
---|
1548 | transform: translate(-50%, -50%);
|
---|
1549 | width: 110px;
|
---|
1550 | aspect-ratio: 1;
|
---|
1551 | border-radius: 50%;
|
---|
1552 | border: 5px solid #ead24daa;
|
---|
1553 | background-color: black;
|
---|
1554 | display: -ms-grid;
|
---|
1555 | display: grid;
|
---|
1556 | place-items: center;
|
---|
1557 | font-size: .8rem;
|
---|
1558 | }
|
---|
1559 |
|
---|
1560 | .pokerMainContainer .pokerChairsContainer .pokerChair.onTurn {
|
---|
1561 | border: 5px dotted #ead24d;
|
---|
1562 | background-color: #ead24d55;
|
---|
1563 | }
|
---|
1564 |
|
---|
1565 | .pokerMainContainer .pokerChairsContainer .pokerChair.folded {
|
---|
1566 | border: 5px solid rgba(59, 59, 59, 0.667);
|
---|
1567 | background-color: rgba(59, 59, 59, 0.667);
|
---|
1568 | }
|
---|
1569 |
|
---|
1570 | .pokerMainContainer .pokerChairsContainer .pokerChair > div p {
|
---|
1571 | margin-block: 2px;
|
---|
1572 | }
|
---|
1573 |
|
---|
1574 | .pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer {
|
---|
1575 | position: relative;
|
---|
1576 | }
|
---|
1577 |
|
---|
1578 | .pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div {
|
---|
1579 | position: absolute;
|
---|
1580 | top: -2vh;
|
---|
1581 | -webkit-transform: translate(-50%, -50%);
|
---|
1582 | transform: translate(-50%, -50%);
|
---|
1583 | display: -webkit-box;
|
---|
1584 | display: -ms-flexbox;
|
---|
1585 | display: flex;
|
---|
1586 | }
|
---|
1587 |
|
---|
1588 | .pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div .card {
|
---|
1589 | height: 80px;
|
---|
1590 | margin-inline: -1rem;
|
---|
1591 | position: relative;
|
---|
1592 | }
|
---|
1593 |
|
---|
1594 | .pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div .card:first-child {
|
---|
1595 | -webkit-transform: rotateZ(-5deg);
|
---|
1596 | transform: rotateZ(-5deg);
|
---|
1597 | }
|
---|
1598 |
|
---|
1599 | .pokerMainContainer .pokerChairsContainer .pokerChair .pokerPlayerCardsContainer > div .card:last-child {
|
---|
1600 | -webkit-transform: rotateZ(5deg);
|
---|
1601 | transform: rotateZ(5deg);
|
---|
1602 | }
|
---|
1603 |
|
---|
1604 | .pokerMainContainer .pokerPotContainer {
|
---|
1605 | position: absolute;
|
---|
1606 | top: 57vh;
|
---|
1607 | left: 50vw;
|
---|
1608 | -webkit-transform: translate(-50%, -50%);
|
---|
1609 | transform: translate(-50%, -50%);
|
---|
1610 | }
|
---|
1611 |
|
---|
1612 | .pokerMainContainer .pokerPlayButtonsContainer {
|
---|
1613 | position: absolute;
|
---|
1614 | top: 62vh;
|
---|
1615 | left: 50vw;
|
---|
1616 | -webkit-transform: translate(-50%, -50%);
|
---|
1617 | transform: translate(-50%, -50%);
|
---|
1618 | display: -webkit-box;
|
---|
1619 | display: -ms-flexbox;
|
---|
1620 | display: flex;
|
---|
1621 | -webkit-box-pack: center;
|
---|
1622 | -ms-flex-pack: center;
|
---|
1623 | justify-content: center;
|
---|
1624 | gap: 1rem;
|
---|
1625 | }
|
---|
1626 |
|
---|
1627 | .pokerMainContainer .pokerPlayButtonsContainer button {
|
---|
1628 | min-width: 110px;
|
---|
1629 | }
|
---|
1630 |
|
---|
1631 | .pokerMainContainer .cardsInTheMiddleContainer {
|
---|
1632 | position: absolute;
|
---|
1633 | top: 45vh;
|
---|
1634 | left: 50vw;
|
---|
1635 | -webkit-transform: translate(-50%, -50%);
|
---|
1636 | transform: translate(-50%, -50%);
|
---|
1637 | display: -webkit-box;
|
---|
1638 | display: -ms-flexbox;
|
---|
1639 | display: flex;
|
---|
1640 | -webkit-box-pack: center;
|
---|
1641 | -ms-flex-pack: center;
|
---|
1642 | justify-content: center;
|
---|
1643 | }
|
---|
1644 |
|
---|
1645 | .pokerMainContainer .cardsInTheMiddleContainer .card {
|
---|
1646 | height: 130px;
|
---|
1647 | position: relative;
|
---|
1648 | margin-inline: 2px;
|
---|
1649 | }
|
---|
1650 |
|
---|
1651 | .pokerMainContainer .pokerMessagesContainer {
|
---|
1652 | position: absolute;
|
---|
1653 | top: 5vh;
|
---|
1654 | left: 50vw;
|
---|
1655 | -webkit-transform: translateX(-50%);
|
---|
1656 | transform: translateX(-50%);
|
---|
1657 | }
|
---|
1658 |
|
---|
1659 | .pokerMainContainer .pokerMessagesContainer > p:first-child {
|
---|
1660 | font-style: italic;
|
---|
1661 | color: #c1fbaa;
|
---|
1662 | }
|
---|
1663 |
|
---|
1664 | .pokerMainContainer .pokerMessagesContainer > p:not(:first-child):not(:last-child) {
|
---|
1665 | font-size: 1.2rem;
|
---|
1666 | margin-top: 1rem;
|
---|
1667 | }
|
---|
1668 |
|
---|
1669 | .pokerMainContainer .pokerMessagesContainer > p:last-child {
|
---|
1670 | margin-top: .5rem;
|
---|
1671 | color: #ccc;
|
---|
1672 | }
|
---|
1673 | /*# sourceMappingURL=globals.css.map */ |
---|