mirror of https://github.com/VERT-sh/VERT.git
96 lines
2.0 KiB
SCSS
96 lines
2.0 KiB
SCSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@import url(@fontsource/lexend/400.css);
|
|
@import url(@fontsource/lexend/500.css);
|
|
@import url(@fontsource/azeret-mono/600.css);
|
|
|
|
:root {
|
|
--font-body: "Lexend", system-ui, -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
|
|
"Helvetica Neue", sans-serif;
|
|
--font-display: "Azeret Mono", var(--font-body);
|
|
--transition: linear(
|
|
0,
|
|
0.006,
|
|
0.025 2.8%,
|
|
0.101 6.1%,
|
|
0.539 18.9%,
|
|
0.721 25.3%,
|
|
0.849 31.5%,
|
|
0.937 38.1%,
|
|
0.968 41.8%,
|
|
0.991 45.7%,
|
|
1.006 50.1%,
|
|
1.015 55%,
|
|
1.017 63.9%,
|
|
1.001
|
|
);
|
|
}
|
|
|
|
@mixin light {
|
|
--accent-bg: hsl(303, 73%, 81%);
|
|
--accent-fg: hsl(0, 0, 10%);
|
|
--bg: hsl(0, 0%, 100%);
|
|
--fg: hsl(0, 0%, 10%);
|
|
--fg-muted: hsl(0, 0%, 50%);
|
|
--fg-muted-alt: hsl(0, 0%, 75%);
|
|
--fg-highlight: hsl(303, 52%, 42%);
|
|
--fg-failure: hsl(0, 67%, 49%);
|
|
}
|
|
|
|
@mixin dark {
|
|
--accent-bg: hsl(303, 73%, 35%);
|
|
--accent-fg: hsl(0, 0%, 90%);
|
|
--bg: hsl(0, 0%, 10%);
|
|
--fg: hsl(0, 0%, 90%);
|
|
--fg-muted: hsl(0, 0%, 65%);
|
|
--fg-muted-alt: hsl(0, 0%, 50%);
|
|
--fg-highlight: hsl(303, 52%, 60%);
|
|
--fg-failure: hsl(0, 67%, 80%);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
@include dark;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
body {
|
|
@include light;
|
|
}
|
|
}
|
|
|
|
body.light {
|
|
@include light;
|
|
}
|
|
|
|
body.dark {
|
|
@include dark;
|
|
}
|
|
|
|
body {
|
|
@apply text-foreground bg-background font-body overflow-x-hidden;
|
|
width: 100vw;
|
|
}
|
|
|
|
@layer components {
|
|
select {
|
|
@apply appearance-none;
|
|
}
|
|
|
|
.btn {
|
|
@apply font-display flex items-center justify-center overflow-hidden relative cursor-pointer px-4 border-2 border-solid bg-background border-foreground-muted-alt rounded-xl p-2 focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none;
|
|
transition:
|
|
opacity 0.2s ease,
|
|
transform 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.btn-highlight {
|
|
@apply bg-accent-background text-accent-foreground border-accent-background;
|
|
}
|
|
}
|