shi.gg
The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
1@import 'tailwindcss';
2@import "tw-animate-css";
3
4@custom-variant dark (&:is(.dark *));
5
6:root {
7 --font-outfit: 'Outfit', sans-serif;
8 --font-noto-sans-jp: 'Noto Sans JP', sans-serif;
9}
10
11.dark {
12 --wamellow: #ffffff0d;
13 --wamellow-100: #ffffff1a;
14 --wamellow-200: #ffffff33;
15
16 --background-rgb: rgb(1, 0, 4);
17 --wamellow-rgb: rgba(255, 255, 255, 0.16);
18
19 --foreground: 210 20% 98%;
20
21 --card: 224 71.4% 4.1%;
22 --card-foreground: 210 20% 98%;
23
24 --popover: 260 3% 4.1%;
25 --popover-foreground: 210 20% 98%;
26
27 --primary: 0 0% 100%;
28 --primary-foreground: 220.9 39.3% 89%;
29
30 --secondary: 258 89% 66%;
31 --secondary-foreground: 210 20% 98%;
32
33 --flat: var(--secondary);
34 --flat-foreground: 270 59% 85%;
35
36 --muted: 260 3% 16%;
37 --muted-foreground: 217 10% 65%;
38
39 --accent: 258 89% 66%;
40 --accent-foreground: 210 20% 98%;
41
42 --destructive: 0 62.8% 40.6;
43 --destructive-foreground: 210 20% 98%;
44
45 --border: 260 3% 16%;
46 --input: 260 3% 16%;
47 --ring: 258 89% 66%;
48 --separator: 0 0% 100%;
49
50 --chart-1: 220 70% 50%;
51 --chart-2: 160 60% 45%;
52 --chart-3: 30 80% 55%;
53 --chart-4: 280 65% 60%;
54 --chart-5: 340 75% 55%;
55}
56
57@theme {
58 --color-blurple: #5865f2;
59 --color-blurple-dark: #454fbf;
60 --color-discord-gray: #1c1d23;
61 --color-foreground: hsl(var(--foreground));
62
63 --color-wamellow: var(--wamellow);
64
65 --color-wamellow-100: var(--wamellow-100);
66
67 --color-wamellow-200: var(--wamellow-200);
68
69 --color-card: hsl(var(--card));
70 --color-card-foreground: hsl(var(--card-foreground));
71
72 --color-popover: hsl(var(--popover));
73 --color-popover-foreground: hsl(var(--popover-foreground));
74
75 --color-primary: hsl(var(--primary));
76 --color-primary-foreground: hsl(var(--primary-foreground));
77
78 --color-secondary: hsl(var(--secondary));
79 --color-secondary-foreground: hsl(var(--secondary-foreground));
80
81 --color-flat: hsl(var(--flat));
82 --color-flat-foreground: hsl(var(--flat-foreground));
83
84 --color-muted: hsl(var(--muted));
85 --color-muted-foreground: hsl(var(--muted-foreground));
86
87 --color-accent: hsl(var(--accent));
88 --color-accent-foreground: hsl(var(--accent-foreground));
89
90 --color-destructive: hsl(var(--destructive));
91 --color-destructive-foreground: hsl(var(--destructive-foreground));
92
93 --color-border: hsl(var(--border));
94 --color-input: hsl(var(--input));
95 --color-ring: hsl(var(--ring));
96 --color-separator: hsl(var(--separator));
97
98 --color-chart-1: hsl(var(--chart-1));
99 --color-chart-2: hsl(var(--chart-2));
100 --color-chart-3: hsl(var(--chart-3));
101 --color-chart-4: hsl(var(--chart-4));
102 --color-chart-5: hsl(var(--chart-5));
103
104 --width-128: 32rem;
105 --width-160: 40rem;
106
107 --text-xxs: 0.6rem;
108 --text-medium: 1rem;
109
110 --leading-medium: 1.5rem;
111
112 --animate-progress: progress 1s infinite linear;
113 --animate-accordion-down: accordion-down 0.2s ease-out;
114 --animate-accordion-up: accordion-up 0.2s ease-out;
115
116 --transform-origin-left-right: 0% 50%;
117
118 @keyframes progress {
119 0% {
120 transform: translateX(0) scaleX(0);
121 }
122
123 40% {
124 transform: translateX(0) scaleX(0.4);
125 }
126
127 100% {
128 transform: translateX(100%) scaleX(0.5);
129 }
130 }
131
132 @keyframes accordion-down {
133 from {
134 height: 0;
135 }
136
137 to {
138 height: var(--radix-accordion-content-height);
139 }
140 }
141
142 @keyframes accordion-up {
143 from {
144 height: var(--radix-accordion-content-height);
145 }
146
147 to {
148 height: 0;
149 }
150 }
151}
152
153@layer base {
154
155 *,
156 ::after,
157 ::before,
158 ::backdrop,
159 ::file-selector-button {
160 border-color: var(--color-gray-200, currentcolor);
161 }
162
163 * {
164 @apply border-border;
165 }
166
167 svg {
168 @apply shrink-0;
169 }
170
171 button {
172 @apply cursor-pointer
173 }
174
175 html {
176 background: var(--background-rgb);
177 }
178
179 body {
180 font-family: var(--font-outfit), var(--font-noto-sans-jp), sans-serif;
181 scroll-behavior: smooth;
182 min-height: 100svh;
183 }
184}
185
186div[id="bg"] {
187 background-image: linear-gradient(175deg, rgb(66, 42, 126) 0%, var(--background-rgb) 75%);
188}
189
190@keyframes ScaleBlink {
191 50% {
192 transform: scale(1.2) rotate(12deg);
193 }
194}
195
196.svg-max svg {
197 height: 100%;
198 width: 100%;
199}
200
201.scrollbar-none::-webkit-scrollbar {
202 display: none;
203}
204
205.scrollbar-none {
206 -ms-overflow-style: none;
207 scrollbar-width: none;
208}
209
210::selection {
211 background-color: rgba(139, 92, 246, 0.6);
212}
213
214::-webkit-scrollbar {
215 width: 4px;
216 background: var(--background-rgb);
217}
218
219::-webkit-scrollbar-thumb {
220 background: rgba(139, 92, 246, 0.6);
221 border-radius: 2px;
222}
223
224::-webkit-scrollbar-thumb:hover {
225 background: rgb(139, 92, 246, 1);
226}
227
228.animate-scroll {
229 border: 2px solid rgb(139, 92, 246, 1);
230 height: 2.2rem;
231 position: relative;
232 width: 20px;
233}
234
235.animate-scroll-wheel {
236 animation: scroll 2.5s ease infinite;
237 background: rgb(139, 92, 246, 1);
238 border-radius: 1rem;
239 height: 0.5rem;
240 left: calc(50% - 1.5px);
241 position: absolute;
242 right: 50%;
243 top: 8px;
244 width: 3px;
245}
246
247@keyframes scroll {
248 0% {
249 transform: translateY(0);
250 }
251
252 50% {
253 transform: translateY(0.5rem);
254 }
255
256 51% {
257 opacity: 1;
258 }
259
260 100% {
261 opacity: 0;
262 transform: translateY(0);
263 }
264}
265
266.animate-guilds {
267 animation: updown 7s ease-in-out infinite;
268}
269
270@keyframes updown {
271 0% {
272 transform: translateY(0);
273 }
274
275 50% {
276 transform: translateY(1.1rem);
277 }
278
279 100% {
280 transform: translateY(0);
281 }
282}
283
284.animate-guilds-2 {
285 animation: downup 8s ease-in-out infinite;
286}
287
288@keyframes downup {
289 0% {
290 transform: translateY(0);
291 }
292
293 50% {
294 transform: translateY(-1rem);
295 }
296
297 100% {
298 transform: translateY(0);
299 }
300}
301
302.shake {
303 position: relative;
304 animation: shake 60ms infinite alternate;
305}
306
307@keyframes shake {
308 0% {
309 margin-right: 0px
310 }
311
312 50% {
313 transform: rotate(1deg);
314 }
315
316 80% {
317 transform: rotate(-1deg);
318 }
319
320 100% {
321 margin-right: 10px
322 }
323
324}
325
326audio {
327 max-height: 2rem;
328}
329
330td:has(audio) {
331 padding: 1px !important;
332}
333
334body[data-scroll-locked] {
335 position: static !important;
336}