289 lines
8.0 KiB
CSS
289 lines
8.0 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%);
|
|
}
|
|
}
|
|
|
|
.refresh-progress {
|
|
animation: refresh-progress-slide 1.05s ease-in-out infinite;
|
|
box-shadow: 0 0 12px color-mix(in srgb, var(--color-brand-primary) 38%, transparent);
|
|
}
|
|
|
|
.refreshing-content {
|
|
opacity: 0.72;
|
|
transition: opacity 180ms ease;
|
|
}
|
|
|
|
@keyframes refresh-progress-slide {
|
|
0% {
|
|
transform: translateX(-120%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(320%);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
html,
|
|
body,
|
|
#root {
|
|
min-width: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.app-content {
|
|
scroll-padding-bottom: 5rem;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.app-content .overflow-x-auto {
|
|
overscroll-behavior-x: contain;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--color-dark-border) transparent;
|
|
}
|
|
|
|
.app-content .overflow-x-auto::-webkit-scrollbar {
|
|
height: 5px;
|
|
}
|
|
|
|
.app-content input,
|
|
.app-content select,
|
|
.app-content textarea {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
html[data-theme='offwhite'] .text-red-300,
|
|
html[data-theme='offwhite'] .text-red-400 {
|
|
color: #b42318 !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .text-amber-100,
|
|
html[data-theme='offwhite'] .text-amber-200,
|
|
html[data-theme='offwhite'] .text-amber-300,
|
|
html[data-theme='offwhite'] .text-amber-400 {
|
|
color: #9a6700 !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .text-sky-200,
|
|
html[data-theme='offwhite'] .text-sky-300,
|
|
html[data-theme='offwhite'] .text-sky-400,
|
|
html[data-theme='offwhite'] .text-sky-500 {
|
|
color: #0369a1 !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .text-emerald-300,
|
|
html[data-theme='offwhite'] .text-emerald-400,
|
|
html[data-theme='offwhite'] .text-emerald-500 {
|
|
color: #047857 !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .text-purple-300,
|
|
html[data-theme='offwhite'] .text-purple-400,
|
|
html[data-theme='offwhite'] .text-purple-500 {
|
|
color: #7e22ce !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .text-zinc-300,
|
|
html[data-theme='offwhite'] .text-zinc-400 {
|
|
color: #5f5a52 !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .bg-red-400\/10,
|
|
html[data-theme='offwhite'] .bg-red-500\/10 {
|
|
background-color: rgba(180, 35, 24, 0.12) !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .bg-amber-400\/10,
|
|
html[data-theme='offwhite'] .bg-amber-500\/10 {
|
|
background-color: rgba(154, 103, 0, 0.12) !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .bg-sky-400\/10,
|
|
html[data-theme='offwhite'] .bg-sky-500\/10 {
|
|
background-color: rgba(3, 105, 161, 0.12) !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .bg-emerald-400\/10,
|
|
html[data-theme='offwhite'] .bg-emerald-500\/10 {
|
|
background-color: rgba(4, 120, 87, 0.12) !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .bg-purple-400\/10,
|
|
html[data-theme='offwhite'] .bg-purple-500\/10 {
|
|
background-color: rgba(126, 34, 206, 0.12) !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .bg-zinc-500\/10 {
|
|
background-color: rgba(95, 90, 82, 0.11) !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .border-red-400\/25,
|
|
html[data-theme='offwhite'] .border-red-400\/30,
|
|
html[data-theme='offwhite'] .border-red-400\/35,
|
|
html[data-theme='offwhite'] .border-red-500\/30 {
|
|
border-color: rgba(180, 35, 24, 0.28) !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .border-amber-400\/20,
|
|
html[data-theme='offwhite'] .border-amber-400\/25,
|
|
html[data-theme='offwhite'] .border-amber-400\/30,
|
|
html[data-theme='offwhite'] .border-amber-400\/35,
|
|
html[data-theme='offwhite'] .border-amber-500\/30 {
|
|
border-color: rgba(154, 103, 0, 0.30) !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .border-sky-400\/20,
|
|
html[data-theme='offwhite'] .border-sky-400\/25,
|
|
html[data-theme='offwhite'] .border-sky-400\/30,
|
|
html[data-theme='offwhite'] .border-sky-400\/35 {
|
|
border-color: rgba(3, 105, 161, 0.30) !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .border-emerald-400\/25,
|
|
html[data-theme='offwhite'] .border-emerald-400\/30,
|
|
html[data-theme='offwhite'] .border-emerald-400\/35,
|
|
html[data-theme='offwhite'] .border-emerald-500\/30 {
|
|
border-color: rgba(4, 120, 87, 0.30) !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .border-purple-400\/25,
|
|
html[data-theme='offwhite'] .border-purple-400\/30 {
|
|
border-color: rgba(126, 34, 206, 0.28) !important;
|
|
}
|
|
|
|
html[data-theme='offwhite'] .border-zinc-500\/30,
|
|
html[data-theme='offwhite'] .border-zinc-500\/35 {
|
|
border-color: rgba(95, 90, 82, 0.28) !important;
|
|
}
|
|
}
|