pesde/website/src/app.css
2024-10-29 19:05:50 +01:00

92 lines
2.1 KiB
CSS

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
:root {
--color-background: 255 245 230;
--color-card: 245 230 210;
--color-card-hover: 240 225 205;
--color-border: 200 180 160;
--color-header: 250 234 215;
--color-body: 84 70 50;
--color-heading: 70 55 35;
--color-light: 0 0 0;
--color-input-bg: 245 230 210;
--color-input-border: 180 160 140;
--color-placeholder: 130 90 40;
--color-primary: 120 70 10;
--color-primary-hover: 255 172 42;
--color-primary-bg: 241 157 30;
--color-primary-fg: 10 7 4;
--shiki-foreground: rgb(var(--color-heading));
--shiki-background: rgb(var(--color-card));
--shiki-token-constant: color-mix(in srgb, rgb(120 140 230), rgb(var(--color-light)) 50%);
--shiki-token-string: rgb(var(--color-heading));
--shiki-token-comment: rgb(var(--color-body));
--shiki-token-keyword: color-mix(in srgb, rgb(var(--color-primary)), rgb(var(--color-light)) 50%);
--shiki-token-parameter: rgb(var(--color-heading));
--shiki-token-function: rgb(var(--color-primary));
--shiki-token-string-expression: color-mix(
in srgb,
rgb(120 230 140),
rgb(var(--color-light)) 50%
);
--shiki-token-punctuation: rgb(var(--color-heading));
--shiki-token-link: rgb(var(--color-primary));
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: 10 7 4;
--color-card: 28 22 17;
--color-card-hover: 40 32 25;
--color-border: 28 22 17;
--color-header: 20 16 12;
--color-body: 198 167 140;
--color-heading: 227 213 200;
--color-light: 255 255 255;
--color-input-bg: 20 13 8;
--color-input-border: 78 60 40;
--color-placeholder: 169 147 128;
--color-primary: 241 157 30;
--color-primary-hover: 255 172 42;
--color-primary-bg: 241 157 30;
--color-primary-fg: 10 7 4;
}
}
html {
scroll-padding-top: theme(spacing.24);
color-scheme: light dark;
}
body {
background-color: theme(colors.background);
color: theme(colors.body);
}
@keyframes cursor-blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}