|
7 | 7 | @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
|
8 | 8 |
|
9 | 9 | :root {
|
10 |
| - --layout: #fffbde; |
11 |
| - --text-color: #333; |
| 10 | + --layout: #fffbde; |
| 11 | + --text-color: #333; |
12 | 12 | }
|
13 | 13 |
|
14 | 14 | .ui-cookie {
|
15 |
| - padding: 0; |
16 |
| - margin: 0; |
17 |
| - font-family: Arial, sans-serif; |
18 |
| - font-size: 14px; |
19 |
| - color: var(--text-color); |
20 |
| - background-color: var(--layout); |
| 15 | + padding: 0; |
| 16 | + margin: 0; |
| 17 | + font-family: Arial, sans-serif; |
| 18 | + font-size: 14px; |
| 19 | + color: var(--text-color); |
| 20 | + background-color: var(--layout); |
21 | 21 | }
|
22 | 22 |
|
23 | 23 | .ui-cookie splash-screen .icon {
|
24 |
| - width: 15rem; |
25 |
| - animation: splash-screen 2s infinite ease-in-out; |
| 24 | + width: 15rem; |
| 25 | + animation: splash-screen 2s infinite ease-in-out; |
26 | 26 | }
|
27 | 27 |
|
28 | 28 | .ui-cookie splash-screen h1 {
|
29 |
| - font-family: "Press Start 2P", cursive; |
30 |
| - text-align: center; |
31 |
| - font-size: 1.5rem; |
32 |
| - color: #fdd388; |
33 |
| - font-weight: bold; |
34 |
| - text-shadow: 1px 1px #7c3d18; |
35 |
| - cursor: pointer; |
36 |
| - animation: reveal forwards ease-out; |
| 29 | + font-family: "Press Start 2P", cursive; |
| 30 | + text-align: center; |
| 31 | + font-size: 1.5rem; |
| 32 | + color: #fdd388; |
| 33 | + font-weight: bold; |
| 34 | + text-shadow: 1px 1px #7c3d18; |
| 35 | + cursor: pointer; |
| 36 | + animation: reveal forwards ease-out; |
37 | 37 | }
|
38 | 38 |
|
39 | 39 | @keyframes reveal {
|
40 |
| - 0% { |
41 |
| - opacity: 0; |
42 |
| - transform: translateY(-20px); |
43 |
| - } |
44 |
| - 100% { |
45 |
| - opacity: 1; |
46 |
| - transform: translateY(0); |
47 |
| - } |
| 40 | + 0% { |
| 41 | + opacity: 0; |
| 42 | + transform: translateY(-20px); |
| 43 | + } |
| 44 | + 100% { |
| 45 | + opacity: 1; |
| 46 | + transform: translateY(0); |
| 47 | + } |
48 | 48 | }
|
49 | 49 |
|
50 | 50 | @keyframes splash-screen {
|
51 |
| - 0%, |
52 |
| - 100% { |
53 |
| - transform: translateY(0); |
54 |
| - opacity: 1; |
55 |
| - } |
56 |
| - 25% { |
57 |
| - transform: translateY(-8px); |
58 |
| - opacity: 0.8; |
59 |
| - } |
60 |
| - 50% { |
61 |
| - transform: translateY(-15px); |
62 |
| - opacity: 1; |
63 |
| - } |
64 |
| - 75% { |
65 |
| - transform: translateY(-8px); |
66 |
| - opacity: 0.8; |
67 |
| - } |
| 51 | + 0%, |
| 52 | + 100% { |
| 53 | + transform: translateY(0); |
| 54 | + opacity: 1; |
| 55 | + } |
| 56 | + 25% { |
| 57 | + transform: translateY(-8px); |
| 58 | + opacity: 0.8; |
| 59 | + } |
| 60 | + 50% { |
| 61 | + transform: translateY(-15px); |
| 62 | + opacity: 1; |
| 63 | + } |
| 64 | + 75% { |
| 65 | + transform: translateY(-8px); |
| 66 | + opacity: 0.8; |
| 67 | + } |
68 | 68 | }
|
0 commit comments