1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5@layer base {
6 :root {
7 --background: 222.2 84% 4.9%;
8 --foreground: 210 40% 98%;
9
10 --muted: 217.2 32.6% 17.5%;
11 --muted-foreground: 215 20.2% 65.1%;
12
13 --popover: 222.2 84% 4.9%;
14 --popover-foreground: 210 40% 98%;
15
16 --card: 222.2 84% 4.9%;
17 --card-foreground: 210 40% 98%;
18
19 --border: 217.2 32.6% 17.5%;
20 --input: 217.2 32.6% 17.5%;
21
22 --primary: 210 40% 98%;
23 --primary-foreground: 222.2 47.4% 11.2%;
24
25 --secondary: 217.2 32.6% 17.5%;
26 --secondary-foreground: 210 40% 98%;
27
28 --accent: 217.2 32.6% 17.5%;
29 --accent-foreground: 210 40% 98%;
30
31 --destructive: 0 62.8% 30.6%;
32 --destructive-foreground: 0 85.7% 97.3%;
33
34 --ring: 217.2 32.6% 17.5%;
35
36 --radius: 0.5rem;
37 }
38}
39
40@layer base {
41 * {
42 @apply border-border;
43 }
44 body {
45 @apply bg-background text-foreground;
46 }
47}
48
49.loading svg polyline {
50 fill: none;
51 stroke-width: 3;
52 stroke-linecap: round;
53 stroke-linejoin: round;
54}
55
56.loading svg polyline#back {
57 fill: none;
58 stroke: #ff4d5033;
59}
60
61.loading svg polyline#front {
62 fill: none;
63 stroke: #ff4d4f;
64 stroke-dasharray: 48, 144;
65 stroke-dashoffset: 192;
66 animation: dash_682 1.4s linear infinite;
67}
68
69@keyframes dash_682 {
70 72.5% {
71 opacity: 0;
72 }
73
74 to {
75 stroke-dashoffset: 0;
76 }
77}
78
79.newtons-cradle {
80 --uib-size: 50px;
81 --uib-speed: 1.2s;
82 --uib-color: #474554;
83 position: relative;
84 display: -webkit-box;
85 display: -ms-flexbox;
86 display: flex;
87 -webkit-box-align: center;
88 -ms-flex-align: center;
89 align-items: center;
90 -webkit-box-pack: center;
91 -ms-flex-pack: center;
92 justify-content: center;
93 width: var(--uib-size);
94 height: var(--uib-size);
95}
96
97.newtons-cradle__dot {
98 position: relative;
99 display: -webkit-box;
100 display: -ms-flexbox;
101 display: flex;
102 -webkit-box-align: center;
103 -ms-flex-align: center;
104 align-items: center;
105 height: 100%;
106 width: 25%;
107 -webkit-transform-origin: center top;
108 -ms-transform-origin: center top;
109 transform-origin: center top;
110}
111
112.newtons-cradle__dot::after {
113 content: "";
114 display: block;
115 width: 100%;
116 height: 25%;
117 border-radius: 50%;
118 background-color: white;
119}
120
121.newtons-cradle__dot:first-child {
122 -webkit-animation: swing var(--uib-speed) linear infinite;
123 animation: swing var(--uib-speed) linear infinite;
124}
125
126.newtons-cradle__dot:last-child {
127 -webkit-animation: swing2 var(--uib-speed) linear infinite;
128 animation: swing2 var(--uib-speed) linear infinite;
129}
130
131@-webkit-keyframes swing {
132 0% {
133 -webkit-transform: rotate(0deg);
134 transform: rotate(0deg);
135 -webkit-animation-timing-function: ease-out;
136 animation-timing-function: ease-out;
137 }
138
139 25% {
140 -webkit-transform: rotate(70deg);
141 transform: rotate(70deg);
142 -webkit-animation-timing-function: ease-in;
143 animation-timing-function: ease-in;
144 }
145
146 50% {
147 -webkit-transform: rotate(0deg);
148 transform: rotate(0deg);
149 -webkit-animation-timing-function: linear;
150 animation-timing-function: linear;
151 }
152}
153
154@keyframes swing {
155 0% {
156 -webkit-transform: rotate(0deg);
157 transform: rotate(0deg);
158 -webkit-animation-timing-function: ease-out;
159 animation-timing-function: ease-out;
160 }
161
162 25% {
163 -webkit-transform: rotate(70deg);
164 transform: rotate(70deg);
165 -webkit-animation-timing-function: ease-in;
166 animation-timing-function: ease-in;
167 }
168
169 50% {
170 -webkit-transform: rotate(0deg);
171 transform: rotate(0deg);
172 -webkit-animation-timing-function: linear;
173 animation-timing-function: linear;
174 }
175}
176
177@-webkit-keyframes swing2 {
178 0% {
179 -webkit-transform: rotate(0deg);
180 transform: rotate(0deg);
181 -webkit-animation-timing-function: linear;
182 animation-timing-function: linear;
183 }
184
185 50% {
186 -webkit-transform: rotate(0deg);
187 transform: rotate(0deg);
188 -webkit-animation-timing-function: ease-out;
189 animation-timing-function: ease-out;
190 }
191
192 75% {
193 -webkit-transform: rotate(-70deg);
194 transform: rotate(-70deg);
195 -webkit-animation-timing-function: ease-in;
196 animation-timing-function: ease-in;
197 }
198}
199
200@keyframes swing2 {
201 0% {
202 -webkit-transform: rotate(0deg);
203 transform: rotate(0deg);
204 -webkit-animation-timing-function: linear;
205 animation-timing-function: linear;
206 }
207
208 50% {
209 -webkit-transform: rotate(0deg);
210 transform: rotate(0deg);
211 -webkit-animation-timing-function: ease-out;
212 animation-timing-function: ease-out;
213 }
214
215 75% {
216 -webkit-transform: rotate(-70deg);
217 transform: rotate(-70deg);
218 -webkit-animation-timing-function: ease-in;
219 animation-timing-function: ease-in;
220 }
221}