105 lines
1.8 KiB
CSS
105 lines
1.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
|
|
@layer base {
|
|
@font-face {
|
|
font-family: 'Karrik';
|
|
src: url('/fonts/Karrik.woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Fira Code';
|
|
src: url('/fonts/FiraCode.woff2');
|
|
}
|
|
|
|
:root {
|
|
--gradient: linear-gradient(to top left, hsl(258 85% 67%), hsl(258 60% 40%));
|
|
|
|
--background: 255 14.81% 10.59%;
|
|
--foreground: 284 4.7% 97.05%;
|
|
|
|
--muted: 258 15% 17%;
|
|
--muted-foreground: 284 4.7% 54.1%;
|
|
|
|
--popover: 256.36 14.29% 15.1%;
|
|
--popover-foreground: 284 4.7% 97.05%;
|
|
|
|
--card: 256.36 14.29% 15.1%;
|
|
--card-foreground: 284 4.7% 97.05%;
|
|
|
|
--border: 258 15% 17%;
|
|
--input: 258 15% 17%;
|
|
|
|
--primary: 258 85% 67%;
|
|
--primary-foreground: 284 4.7% 97.05%;
|
|
|
|
--secondary: 258 60% 40%;
|
|
--secondary-foreground: 284 4.7% 97.05%;
|
|
|
|
--accent: 258 60% 40%;
|
|
--accent-foreground: 284 4.7% 97.05%;
|
|
|
|
--destructive: 7 100% 67%;
|
|
--destructive-foreground: 284 4.7% 97.05%;
|
|
|
|
--ring: 258 85% 67%;
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
|
|
::selection {
|
|
background-color: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
@apply w-2;
|
|
@apply h-2;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply !bg-muted;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply rounded-sm !bg-muted-foreground/30;
|
|
}
|
|
|
|
/* Firefox */
|
|
/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
|
|
html {
|
|
scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
|
|
}
|
|
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.hide-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.antialised {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.bg-gradient {
|
|
background: var(--gradient);
|
|
}
|
|
}
|