164 lines
4 KiB
CSS
164 lines
4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 214 27.37% 7.55%;
|
|
--foreground: 212 16% 82%;
|
|
--muted: 214 12% 16%;
|
|
--muted-foreground: 214 12% 66%;
|
|
--popover: 214 27% 9%;
|
|
--popover-foreground: 212 16% 92%;
|
|
--card: 214 23.58% 9.03%;
|
|
--card-foreground: 212 16% 87%;
|
|
--border: 214 17% 17%;
|
|
--input: 214 17% 20%;
|
|
--primary: 194.72 85% 45%;
|
|
--primary-foreground: 189 85% 5%;
|
|
--secondary: 221.89 18.13% 22.46%;
|
|
--secondary-foreground: 189 30% 85%;
|
|
--accent: 221.89 18.13% 22.46%;
|
|
--accent-foreground: 214 27% 87%;
|
|
--destructive: 6 96% 59%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--ring: 215.09 100% 98.03%;
|
|
--radius: 0.4rem;
|
|
}
|
|
|
|
.bluelight {
|
|
--background: 230 8% 85%;
|
|
--foreground: 229 26% 28%;
|
|
--muted: 230 12% 81%;
|
|
--muted-foreground: 230 12% 21%;
|
|
--popover: 230 8% 82%;
|
|
--popover-foreground: 229 26% 18%;
|
|
--card: 230 8% 83%;
|
|
--card-foreground: 229 26% 23%;
|
|
--border: 0 0% 80%;
|
|
--input: 0 0% 77%;
|
|
--primary: 223 42% 57%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 223 30% 75%;
|
|
--secondary-foreground: 223 30% 15%;
|
|
--accent: 230 8% 70%;
|
|
--accent-foreground: 230 8% 10%;
|
|
--destructive: 2 82% 30%;
|
|
--destructive-foreground: 2 82% 90%;
|
|
--ring: 223 42% 57%;
|
|
}
|
|
|
|
.cyberpunk {
|
|
--background: 253 41% 19%;
|
|
--foreground: 157 100% 50%;
|
|
--muted: 253 12% 23%;
|
|
--muted-foreground: 253 12% 73%;
|
|
--popover: 253 41% 16%;
|
|
--popover-foreground: 157 100% 60%;
|
|
--card: 253 41% 17%;
|
|
--card-foreground: 157 100% 55%;
|
|
--border: 253 31% 24%;
|
|
--input: 253 31% 27%;
|
|
--primary: 167 100% 50%;
|
|
--primary-foreground: 167 100% 10%;
|
|
--secondary: 167 30% 25%;
|
|
--secondary-foreground: 167 30% 85%;
|
|
--accent: 253 41% 34%;
|
|
--accent-foreground: 254 41% 94%;
|
|
--destructive: 5 92% 45%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--ring: 167 100% 50%;
|
|
}
|
|
|
|
.midnight {
|
|
--background: 0 0% 0%;
|
|
--foreground: 0 0% 100%;
|
|
--muted: 0 0% 0%;
|
|
--muted-foreground: 0 0% 50%;
|
|
--popover: 0 0% 0%;
|
|
--popover-foreground: 0 0% 95%;
|
|
--card: 0 0% 5%;
|
|
--card-foreground: 0 0% 90%;
|
|
--border: 0 0% 25%;
|
|
--input: 0 0% 20%;
|
|
--primary: 158 97% 53%;
|
|
--primary-foreground: 0 0% 0%;
|
|
--secondary: 0 0% 8%;
|
|
--secondary-foreground: 167 0% 85%;
|
|
--accent: 0 0% 12%;
|
|
--accent-foreground: 0 0% 90%;
|
|
--destructive: 360 100% 65%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--ring: 0 0% 70%;
|
|
--radius: 0.4rem;
|
|
}
|
|
|
|
.catppuccin {
|
|
--background: 240 21% 15%;
|
|
--foreground: 226 64% 88%;
|
|
--muted: 240 21% 12%;
|
|
--muted-foreground: 228 17% 64%;
|
|
--popover: 240 21% 12%;
|
|
--popover-foreground: 227 35% 80%;
|
|
--card: 227 35% 80%;
|
|
--card-foreground: 228 24% 72%;
|
|
--border: 234 13% 31%;
|
|
--input: 234 13% 31%;
|
|
--primary: 115 54% 76%;
|
|
--primary-foreground: 240 21% 15%;
|
|
--secondary: 240 21% 12%;
|
|
--secondary-foreground: 228 17% 64%;
|
|
--accent: 237 16% 23%;
|
|
--accent-foreground: 227 35% 80%;
|
|
--destructive: 343 81% 75%;
|
|
--destructive-foreground: 226 64% 88%;
|
|
--ring: 228 24% 72%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
.loader {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.loader div {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
position: absolute;
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 8px;
|
|
border: 8px solid #fff;
|
|
border-radius: 50%;
|
|
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
border-color: #fff transparent transparent transparent;
|
|
}
|
|
.loader div:nth-child(1) {
|
|
animation-delay: -0.45s;
|
|
}
|
|
.loader div:nth-child(2) {
|
|
animation-delay: -0.3s;
|
|
}
|
|
.loader div:nth-child(3) {
|
|
animation-delay: -0.15s;
|
|
}
|
|
@keyframes lds-ring {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
}
|