133 lines
3.7 KiB
CSS
133 lines
3.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-brand-primary: #b8c7d1;
|
|
--color-brand-contrast: #070707;
|
|
--color-dark-bg: #070707;
|
|
--color-dark-card: #141414;
|
|
--color-dark-header: #101010;
|
|
--color-dark-sidebar: #111111;
|
|
--color-dark-border: #282828;
|
|
--color-dark-input: #1c1c1c;
|
|
--color-dark-text: #f0f0ee;
|
|
--color-dark-muted: #929292;
|
|
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--chart-grid: #222222;
|
|
--chart-axis: #888888;
|
|
--chart-cursor: rgba(255, 255, 255, 0.055);
|
|
--chart-label: #ededed;
|
|
--chart-tooltip-bg: #141414;
|
|
--chart-tooltip-text: #ededed;
|
|
--chart-tooltip-border: transparent;
|
|
--chart-detail-bar: #9ECAE1;
|
|
}
|
|
|
|
html[data-theme='offwhite'] {
|
|
--color-brand-primary: #3f535a;
|
|
--color-brand-contrast: #fbf8f1;
|
|
--color-dark-bg: #f3f0e9;
|
|
--color-dark-card: #fbf8f1;
|
|
--color-dark-header: #f0ece4;
|
|
--color-dark-sidebar: #ebe6dc;
|
|
--color-dark-border: #d8d0c3;
|
|
--color-dark-input: #f1ede5;
|
|
--color-dark-text: #242321;
|
|
--color-dark-muted: #6f6a61;
|
|
--chart-grid: rgba(63, 58, 49, 0.14);
|
|
--chart-axis: #756f66;
|
|
--chart-cursor: rgba(63, 58, 49, 0.08);
|
|
--chart-label: #242321;
|
|
--chart-tooltip-bg: #fbf8f1;
|
|
--chart-tooltip-text: #242321;
|
|
--chart-tooltip-border: #d8d0c3;
|
|
--chart-detail-bar: #3f535a;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background:
|
|
radial-gradient(circle at 18% -8%, rgba(255, 255, 255, 0.035), transparent 30rem),
|
|
radial-gradient(circle at 88% 4%, rgba(184, 199, 209, 0.025), transparent 34rem),
|
|
#070707;
|
|
@apply text-dark-text;
|
|
}
|
|
|
|
html[data-theme='offwhite'] body {
|
|
background:
|
|
radial-gradient(circle at 16% -8%, rgba(255, 255, 255, 0.82), transparent 32rem),
|
|
radial-gradient(circle at 88% 0%, rgba(116, 107, 91, 0.10), transparent 36rem),
|
|
#f3f0e9;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #333333;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.skeleton {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 0.75rem;
|
|
background: color-mix(in srgb, var(--color-dark-input) 82%, var(--color-dark-text) 18%);
|
|
}
|
|
|
|
.skeleton::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
transform: translateX(-100%);
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
color-mix(in srgb, var(--color-dark-text) 14%, transparent),
|
|
transparent
|
|
);
|
|
animation: skeleton-shimmer 1.45s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes skeleton-shimmer {
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
.app-shell {
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0) 24rem),
|
|
radial-gradient(circle at 28% -18%, rgba(255, 255, 255, 0.035), transparent 34rem),
|
|
radial-gradient(circle at 88% 8%, rgba(184, 199, 209, 0.024), transparent 38rem),
|
|
#070707;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .app-shell {
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 24rem),
|
|
radial-gradient(circle at 28% -18%, rgba(255, 255, 255, 0.74), transparent 34rem),
|
|
radial-gradient(circle at 88% 8%, rgba(116, 107, 91, 0.10), transparent 38rem),
|
|
#f3f0e9;
|
|
}
|
|
|
|
.app-content {
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0) 16rem),
|
|
transparent;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .app-content {
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 16rem),
|
|
transparent;
|
|
}
|
|
}
|