277 lines
8.4 KiB
CSS
277 lines
8.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
@custom-variant light-theme (&:is(html[data-theme="subtle-light"] *));
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--color-gray-950);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
html[data-theme="conventional-dark"] {
|
|
--color-gray-950: #1f1f1f;
|
|
--color-gray-900: #252525;
|
|
--color-gray-800: #303030;
|
|
--color-gray-700: #444444;
|
|
--color-gray-600: #666666;
|
|
--color-gray-500: #858585;
|
|
--color-gray-400: #a3a3a3;
|
|
--color-gray-300: #c4c4c4;
|
|
--color-gray-200: #dddddd;
|
|
--color-gray-100: #eeeeee;
|
|
background: #1f1f1f;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] {
|
|
--color-white: #18202c;
|
|
--color-gray-950: #e9e7e2;
|
|
--color-gray-900: #dedbd4;
|
|
--color-gray-800: #cfcbc3;
|
|
--color-gray-700: #aea99f;
|
|
--color-gray-600: #817b72;
|
|
--color-gray-500: #655f57;
|
|
--color-gray-400: #514b44;
|
|
--color-gray-300: #403b35;
|
|
--color-gray-200: #302c28;
|
|
--color-gray-100: #24211e;
|
|
/* Pastel accent shades are tuned for dark UIs and wash out on the light
|
|
chrome (e.g. "Update check failed" in amber). Darken the ones used as
|
|
coloured text/icons so they stay readable. Media surfaces reset these to
|
|
the bright originals below, so on-photo overlays keep their signal colours.
|
|
Remapping the variable (not the utility) also covers opacity variants such
|
|
as text-amber-300/90. */
|
|
--color-amber-200: #b45309;
|
|
--color-amber-300: #b45309;
|
|
--color-amber-400: #b45309;
|
|
--color-red-200: #b91c1c;
|
|
--color-red-300: #b91c1c;
|
|
--color-red-400: #b91c1c;
|
|
--color-rose-300: #be123c;
|
|
--color-rose-400: #be123c;
|
|
--color-emerald-200: #047857;
|
|
--color-emerald-300: #047857;
|
|
--color-emerald-400: #047857;
|
|
--color-sky-300: #0369a1;
|
|
--color-blue-300: #1d4ed8;
|
|
--color-blue-400: #1d4ed8;
|
|
--color-violet-300: #6d28d9;
|
|
--color-violet-400: #6d28d9;
|
|
background: #e9e7e2;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .media-dark-surface {
|
|
--color-white: #ffffff;
|
|
--color-black: #000000;
|
|
--color-gray-950: #030712;
|
|
--color-gray-900: #111827;
|
|
--color-gray-800: #1f2937;
|
|
--color-gray-700: #374151;
|
|
--color-gray-600: #4b5563;
|
|
--color-gray-500: #6b7280;
|
|
--color-gray-400: #9ca3af;
|
|
--color-gray-300: #d1d5db;
|
|
--color-gray-200: #e5e7eb;
|
|
--color-gray-100: #f3f4f6;
|
|
/* Restore the bright accent originals the light theme darkened, so coloured
|
|
overlays on photos/video (ratings, failed badges, the lightbox region tool)
|
|
keep their signal colours instead of going dark-on-dark. */
|
|
--color-amber-200: oklch(92.4% 0.12 95.746);
|
|
--color-amber-300: oklch(87.9% 0.169 91.605);
|
|
--color-amber-400: oklch(82.8% 0.189 84.429);
|
|
--color-red-200: oklch(88.5% 0.062 18.334);
|
|
--color-red-300: oklch(80.8% 0.114 19.571);
|
|
--color-red-400: oklch(70.4% 0.191 22.216);
|
|
--color-rose-300: oklch(81% 0.117 11.638);
|
|
--color-rose-400: oklch(71.2% 0.194 13.428);
|
|
--color-emerald-200: oklch(90.5% 0.093 164.15);
|
|
--color-emerald-300: oklch(84.5% 0.143 164.978);
|
|
--color-emerald-400: oklch(76.5% 0.177 163.223);
|
|
--color-sky-300: oklch(82.8% 0.111 230.318);
|
|
--color-blue-300: oklch(80.9% 0.105 251.813);
|
|
--color-blue-400: oklch(70.7% 0.165 254.624);
|
|
--color-violet-300: oklch(81.1% 0.111 293.571);
|
|
--color-violet-400: oklch(70.2% 0.183 293.541);
|
|
}
|
|
|
|
/* The lightbox keeps its dark canvas + backdrop (via .media-dark-surface on the
|
|
root), but the metadata panel is chrome and should follow the active theme.
|
|
In subtle-light it lives inside the dark-surface root, so re-light it here by
|
|
remapping the palette on the panel itself. Tailwind v4 resolves every colour
|
|
utility through a --color-* variable, so remapping the variables re-themes the
|
|
whole subtree — including accents — without a single !important. */
|
|
html[data-theme="subtle-light"] .lightbox-panel {
|
|
--color-white: #18202c;
|
|
--color-gray-950: #e9e7e2;
|
|
--color-gray-900: #dedbd4;
|
|
--color-gray-800: #cfcbc3;
|
|
--color-gray-700: #aea99f;
|
|
--color-gray-600: #817b72;
|
|
--color-gray-500: #655f57;
|
|
--color-gray-400: #514b44;
|
|
--color-gray-300: #403b35;
|
|
--color-gray-200: #302c28;
|
|
--color-gray-100: #24211e;
|
|
/* Pastel accents are tuned for a dark panel; darken them for the light one. */
|
|
--color-amber-300: #b45309;
|
|
--color-amber-400: #b45309;
|
|
--color-sky-300: #0369a1;
|
|
--color-emerald-300: #047857;
|
|
--color-rose-300: #be123c;
|
|
--color-rose-400: #be123c;
|
|
--color-red-300: #b91c1c;
|
|
--color-violet-300: #6d28d9;
|
|
--color-violet-400: #6d28d9;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-view {
|
|
background:
|
|
radial-gradient(ellipse at top, rgb(59 130 246 / 0.08), transparent 48%),
|
|
radial-gradient(ellipse at 80% 75%, rgb(16 185 129 / 0.07), transparent 42%),
|
|
#f4f2ea !important;
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-header {
|
|
background: #f4f2ea !important;
|
|
border-color: #d8d2c7 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-title {
|
|
color: #111827 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-subtitle,
|
|
html[data-theme="subtle-light"] .explore-empty {
|
|
color: #7a746b !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-mode-toggle {
|
|
background: #ece8dd !important;
|
|
border-color: #d0c8ba !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-mode-button {
|
|
background: transparent !important;
|
|
color: #4b5563 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-mode-button:hover {
|
|
background: #e0dbcf !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-mode-button.bg-white\/10 {
|
|
background: #d8d4ca !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-cluster-grid {
|
|
background-image: radial-gradient(circle, rgb(31 41 55 / 0.18) 1px, transparent 1px) !important;
|
|
opacity: 0.16 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-cluster-card {
|
|
background: #fbfaf6 !important;
|
|
border-color: #d8d2c7 !important;
|
|
box-shadow: 0 14px 36px rgb(28 25 23 / 0.18) !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-cluster-card:hover {
|
|
box-shadow: 0 18px 44px rgb(28 25 23 / 0.22) !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-cluster-overlay {
|
|
/* A cream wash over the photo read as a faded, foggy haze. Use a gentle dark
|
|
scrim instead — the same natural "photo caption" vignette the dark theme
|
|
uses — with light text on top (label/count rules below). */
|
|
background: linear-gradient(
|
|
to top,
|
|
rgb(17 18 22 / 0.82),
|
|
rgb(17 18 22 / 0.34) 38%,
|
|
transparent 66%
|
|
) !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-cluster-label {
|
|
color: rgb(255 255 255 / 0.62) !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-cluster-count {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-tag-word:hover {
|
|
background: #e8e2d6 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .explore-spinner {
|
|
border-color: rgb(17 24 39 / 0.18) !important;
|
|
border-top-color: rgb(17 24 39 / 0.55) !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .feature-scope-trigger {
|
|
background: #f8f6ef !important;
|
|
border-color: #d0c8ba !important;
|
|
color: #4b5563 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .feature-scope-trigger:hover,
|
|
html[data-theme="subtle-light"] .feature-scope-dropdown:has(.feature-scope-menu) .feature-scope-trigger {
|
|
background: #ece8dd !important;
|
|
border-color: #bfb6a7 !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .feature-scope-menu {
|
|
background: #fbfaf6 !important;
|
|
border-color: #d0c8ba !important;
|
|
color: #1f2937 !important;
|
|
box-shadow: 0 18px 44px rgb(28 25 23 / 0.2) !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .feature-scope-option {
|
|
color: #4b5563 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .feature-scope-option:hover {
|
|
background: #ece8dd !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .feature-scope-option.bg-white\/6 {
|
|
background: #d8d4ca !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.explore-cluster-card,
|
|
.explore-cluster-card img {
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: color-mix(in srgb, var(--color-white, #fff) 12%, transparent);
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: color-mix(in srgb, var(--color-white, #fff) 22%, transparent);
|
|
}
|