113 lines
2.6 KiB
CSS
113 lines
2.6 KiB
CSS
@import "tailwindcss";
|
|
@source '../node_modules/layerchart/dist';
|
|
|
|
@theme {
|
|
--font-sans: "Inter Variable", "sans-serif";
|
|
--font-mono: "JetBrains Mono Variable", "monospace";
|
|
|
|
--animate-avoid: avoid 200ms infinite cubic-bezier(1, 1.65, 0, 1);
|
|
|
|
@keyframes avoid {
|
|
0% {
|
|
transform: translateX(-5px);
|
|
}
|
|
50% {
|
|
transform: translateX(5px);
|
|
}
|
|
100% {
|
|
transform: translateX(-5px);
|
|
}
|
|
}
|
|
|
|
/* Catppuccin Frappe */
|
|
--color-rosewater: #f2d5cf;
|
|
--color-flamingo: #eebebe;
|
|
--color-pink: #f4b8e4;
|
|
--color-mauve: #ca9ee6;
|
|
--color-red: #e78284;
|
|
--color-maroon: #ea999c;
|
|
--color-peach: #ef9f76;
|
|
--color-yellow: #e5c890;
|
|
--color-green: #a6d189;
|
|
--color-teal: #81c8be;
|
|
--color-sky: #99d1db;
|
|
--color-sapphire: #85c1dc;
|
|
--color-blue: #8caaee;
|
|
--color-lavender: #babbf1;
|
|
--color-text: #c6d0f5;
|
|
--color-subtext1: #b5bfe2;
|
|
--color-subtext0: #a5adce;
|
|
--color-overlay2: #949cbb;
|
|
--color-overlay1: #838ba7;
|
|
--color-overlay0: #737994;
|
|
--color-surface2: #626880;
|
|
--color-surface1: #51576d;
|
|
--color-surface0: #414559;
|
|
--color-base: #303446;
|
|
--color-mantle: #292c3c;
|
|
--color-crust: #232634;
|
|
|
|
--color-base-darker: #2b2e3f;
|
|
--color-peach-darker: #695454;
|
|
}
|
|
|
|
body {
|
|
--swup-fade-theme-duration: 0.2s;
|
|
}
|
|
|
|
@utility animate-duration-30s {
|
|
animation-duration: 30s;
|
|
}
|
|
|
|
@utility animate-duration-2s {
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
@utility animate-delay-2s {
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
@utility animate-running {
|
|
animation-play-state: running;
|
|
}
|
|
|
|
@utility animate-pause {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
section {
|
|
@apply bg-base-darker p-4 rounded-lg relative border border-surface0 shadow-md h-min;
|
|
}
|
|
|
|
section.side {
|
|
@apply w-40 font-mono py-2.5;
|
|
}
|
|
|
|
section:has(legend) {
|
|
@apply rounded-tl-none mb-8;
|
|
}
|
|
|
|
section legend {
|
|
@apply bg-base-darker absolute -left-[1px] bottom-full px-2 py-0.5 text-overlay2 font-medium text-xs rounded-t-md border border-surface0 border-b-0 font-sans;
|
|
}
|
|
|
|
.link {
|
|
@apply text-peach underline decoration-peach hover:bg-peach hover:text-base;
|
|
}
|
|
|
|
[data-tooltip] {
|
|
@apply relative z-10;
|
|
}
|
|
|
|
[data-tooltip]::before {
|
|
@apply content-[''] absolute left-1/2 -translate-x-1/2 top-full size-0 border-4 border-transparent border-b-peach opacity-0 scale-75 transition-all duration-200 ease-out origin-bottom;
|
|
}
|
|
|
|
[data-tooltip]::after {
|
|
@apply content-[attr(data-tooltip)] absolute left-1/2 -translate-x-1/2 top-full mt-2 px-2 py-1 bg-peach-darker border border-peach rounded-md text-peach font-medium text-sm opacity-0 scale-75 transition-all duration-200 ease-out origin-top shadow-md whitespace-nowrap select-none pointer-events-none;
|
|
}
|
|
|
|
[data-tooltip]:hover::before,
|
|
[data-tooltip]:hover::after {
|
|
@apply opacity-100 scale-100;
|
|
}
|