T3RM1N4L
296 lines
8.6 KiB
CSS
296 lines
8.6 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;
|
|
}
|
|
.ctp-mocha {
|
|
--background: 240 21% 15%; /*base*/
|
|
--foreground: 226 64% 88%; /*text*/
|
|
--muted: 240 21% 12%; /*mantle*/
|
|
--muted-foreground: 228 17% 64%; /*overlay 2*/
|
|
--popover: 240 21% 12%; /*mantle*/
|
|
--popover-foreground: 227 35% 80%; /*subtext 1*/
|
|
--card: 240 21% 12%; /*mantle*/
|
|
--card-foreground: 228 24% 72%; /*subtext 0*/
|
|
--border: 234 13% 31%; /*surface 1*/
|
|
--input: 234 13% 31%; /*surface 1*/
|
|
--primary: 115 54% 76%; /*green*/
|
|
--primary-foreground: 240 21% 15%; /*base*/
|
|
--secondary: 240 21% 12%; /*mantle*/
|
|
--secondary-foreground: 228 24% 72%; /*subtext 0*/
|
|
--accent: 237 16% 23%; /*surface 0*/
|
|
--accent-foreground: 227 35% 80%; /*subtext 1*/
|
|
--destructive: 343 81% 75%; /*red*/
|
|
--destructive-foreground: 226 64% 88%;/*text*/
|
|
--ring: 228 24% 72%; /*subtext 0*/
|
|
}
|
|
.ctp-latte {
|
|
--background: 220 23% 95%; /* base */
|
|
--foreground: 234 16% 35%;/* text */
|
|
--muted: 220 22% 92%; /* mantle */
|
|
--muted-foreground: 232 10% 53%; /* overlay2 */
|
|
--popover: 220 22% 92%; /* mantle */
|
|
--popover-foreground: 233 13% 41%; /* subtext1 */
|
|
--card: 220 22% 92%; /* mantle */
|
|
--card-foreground: 233 10% 47%; /* subtext0 */
|
|
--border: 225 14% 77%; /* surface1 */
|
|
--input: 225 14% 77%; /* surface1 */
|
|
--primary: 220 91% 54%; /* blue */
|
|
--primary-foreground: 220 23% 95%; /* base */
|
|
--secondary: 220 22% 92%; /* mantle */
|
|
--secondary-foreground: 233 10% 47%; /* subtext0 */
|
|
--accent: 223 16% 83%; /* surface0 */
|
|
--accent-foreground: 233 13% 41%; /* subtext1 */
|
|
--destructive: 347 87% 44%; /* red */
|
|
--destructive-foreground: 234 16% 35%; /* text */
|
|
--ring: 233 10% 47%; /* subtext0 */
|
|
}
|
|
|
|
.ctp-frappe {
|
|
--background: 229 19% 23%; /* base */
|
|
--foreground: 227 70% 87%; /* text */
|
|
--muted: 231 19% 20%; /* mantle */
|
|
--muted-foreground: 228 22% 66%; /* overlay2 */
|
|
--popover: 231 19% 20%; /* mantle */
|
|
--popover-foreground: 227 44% 80%; /* subtext1 */
|
|
--card: 231 19% 20%; /* mantle */
|
|
--card-foreground: 228 29% 73%; /* subtext0 */
|
|
--border: 227 15% 37%; /* surface1 */
|
|
--input: 227 15% 37%; /* surface1 */
|
|
--primary: 222 74% 74%; /* blue */
|
|
--primary-foreground: 229 19% 23%; /* base */
|
|
--secondary: 231 19% 20%; /* mantle */
|
|
--secondary-foreground: 228 29% 73%; /* subtext0 */
|
|
--accent: 230 16% 30%; /* surface0 */
|
|
--accent-foreground: 227 44% 80%; /* subtext1 */
|
|
--destructive: 359 68% 71%; /* red */
|
|
--destructive-foreground: 227 70% 87%; /* text */
|
|
--ring: 228 29% 73%; /* subtext0 */
|
|
}
|
|
.ctp-macchiato {
|
|
--background: 232 23% 18%; /* base */
|
|
--foreground: 227 68% 88%; /* text */
|
|
--muted: 233 23% 15%; /* mantle */
|
|
--muted-foreground: 228 20% 65%; /* overlay2 */
|
|
--popover: 233 23% 15%; /* mantle */
|
|
--popover-foreground: 228 39% 80%; /* subtext1 */
|
|
--card: 233 23% 15%; /* mantle */
|
|
--card-foreground: 227 27% 72%; /* subtext0 */
|
|
--border: 231 16% 34%; /* surface1 */
|
|
--input: 231 16% 34%; /* surface1 */
|
|
--primary: 220 83% 75%; /* blue */
|
|
--primary-foreground: 232 23% 18%; /* base */
|
|
--secondary: 233 23% 15%; /* mantle */
|
|
--secondary-foreground: 227 27% 72%; /* subtext0 */
|
|
--accent: 230 19% 26%; /* surface0 */
|
|
--accent-foreground: 228 39% 80%; /* subtext1 */
|
|
--destructive: 351 74% 73%; /* red */
|
|
--destructive-foreground: 227 68% 88%; /* text */
|
|
--ring: 227 27% 72%; /* subtext0 */
|
|
}
|
|
|
|
.rp-main {
|
|
--background: 249 22% 12%;
|
|
--foreground: 245 50% 91%;
|
|
--muted: 249 12% 47%;
|
|
--muted-foreground: 248 15% 61%;
|
|
--popover: 247 23% 15%;
|
|
--popover-foreground: 245 50% 91%;
|
|
--card: 248 25% 18%;
|
|
--card-foreground: 245 50% 91%;
|
|
--border: 249 15% 28%;
|
|
--input: 249 15% 28%;
|
|
--primary: 267 57% 78%;
|
|
--primary-foreground: 249 22% 12%;
|
|
--secondary: 245 22% 20%;
|
|
--secondary-foreground: 245 50% 91%;
|
|
--accent: 249 15% 28%;
|
|
--accent-foreground: 245 50% 91%;
|
|
--destructive: 343 76% 68%;
|
|
--destructive-foreground: 245 50% 91%;
|
|
--ring: 248 15% 28%;
|
|
}
|
|
|
|
.rp-moon {
|
|
--background: 246 24% 17%;
|
|
--foreground: 245 50% 91%;
|
|
--muted: 249 12% 47%;
|
|
--muted-foreground: 248 15% 61%;
|
|
--popover: 248 24% 20%;
|
|
--popover-foreground: 245 50% 91%;
|
|
--card: 248 21% 26%;
|
|
--card-foreground: 245 50% 91%;
|
|
--border: 247 16% 30%;
|
|
--input: 247 16% 30%;
|
|
--primary: 267 57% 78%;
|
|
--primary-foreground: 246 24% 17%;
|
|
--secondary: 248 21% 26%;
|
|
--secondary-foreground: 245 50% 91%;
|
|
--accent: 247 16% 30%;
|
|
--accent-foreground: 245 50% 91%;
|
|
--destructive: 343 76% 68%;
|
|
--destructive-foreground: 245 50% 91%;
|
|
--ring: 247 16% 30%;
|
|
}
|
|
|
|
.rp-dawn {
|
|
--background: 32 57% 95%;
|
|
--foreground: 248 19% 40%;
|
|
--muted: 257 9% 61%;
|
|
--muted-foreground: 248 12% 52%;
|
|
--popover: 35 100% 98%;
|
|
--popover-foreground: 248 19% 40%;
|
|
--card: 33 43% 91%;
|
|
--card-foreground: 248 19% 40%;
|
|
--border: 10 9% 86%;
|
|
--input: 10 9% 86%;
|
|
--primary: 268 21% 57%;
|
|
--primary-foreground: 32 57% 95%;
|
|
--secondary: 33 43% 91%;
|
|
--secondary-foreground: 248 19% 40%;
|
|
--accent: 10 9% 86%;
|
|
--accent-foreground: 248 19% 40%;
|
|
--destructive: 343 35% 55%;
|
|
--destructive-foreground: 248 19% 40%;
|
|
--ring: 10 9% 86%;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|
|
}
|