LyAhn
4cdbc54d18
Add a reset_ai_tags backend command that removes AI-generated tag rows, clears AI tagging metadata, cancels active tagging jobs, and drops queued or failed tagging jobs in the selected scope. Expose reset actions in AI Workspace and the Explore tag manager, refresh gallery/progress/tag state after reset, and add subtle AI source indicators to tag manager rows.
424 lines
13 KiB
CSS
424 lines
13 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::before {
|
|
background: radial-gradient(
|
|
ellipse at center,
|
|
rgba(60, 50, 30, 0.13),
|
|
rgba(60, 50, 30, 0.05) 46%,
|
|
rgba(60, 50, 30, 0) 72%
|
|
) !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"] .tag-manager-header {
|
|
background: rgb(244 242 234 / 0.72) !important;
|
|
border-color: #d8d2c7 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-stat {
|
|
background: rgb(31 41 55 / 0.06) !important;
|
|
color: #5f5a52 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-match {
|
|
background: rgb(37 99 235 / 0.12) !important;
|
|
color: #1d4ed8 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-help,
|
|
html[data-theme="subtle-light"] .tag-manager-empty {
|
|
color: #6f6a61 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-filter {
|
|
background: #fbfaf6 !important;
|
|
border-color: #cfc7b8 !important;
|
|
color: #111827 !important;
|
|
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.64) !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-filter::placeholder {
|
|
color: #8a8378 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-filter:focus {
|
|
background: #fffdfa !important;
|
|
border-color: #7aa2e3 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-reset-button,
|
|
html[data-theme="subtle-light"] .tag-manager-reset-cancel {
|
|
background: #ebe8df !important;
|
|
border-color: #c9c1b4 !important;
|
|
color: #5f5a52 !important;
|
|
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.58) !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-reset-button:hover,
|
|
html[data-theme="subtle-light"] .tag-manager-reset-cancel:hover {
|
|
background: #e2ded3 !important;
|
|
border-color: #b9b0a2 !important;
|
|
color: #24201b !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-reset-button-confirm {
|
|
background: rgb(254 242 242 / 0.95) !important;
|
|
border-color: rgb(220 38 38 / 0.34) !important;
|
|
color: #991b1b !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-reset-button-confirm:hover {
|
|
background: #fee2e2 !important;
|
|
border-color: rgb(220 38 38 / 0.48) !important;
|
|
color: #7f1d1d !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-clear {
|
|
color: #6b645a !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-clear:hover {
|
|
background: rgb(31 41 55 / 0.08) !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-tile {
|
|
background: rgb(251 250 246 / 0.5) !important;
|
|
border-color: rgb(151 141 126 / 0.22) !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-tile:hover,
|
|
html[data-theme="subtle-light"] .tag-manager-tile:focus-within {
|
|
background: rgb(255 253 250 / 0.74) !important;
|
|
border-color: rgb(151 141 126 / 0.36) !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-name {
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-name:hover {
|
|
color: #111827 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-count {
|
|
background: rgb(31 41 55 / 0.07) !important;
|
|
color: #6b645a !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-tile-ai {
|
|
box-shadow: inset 0 1px 0 rgb(14 116 144 / 0.08) !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-count-ai {
|
|
background: rgb(14 116 144 / 0.1) !important;
|
|
border-color: rgb(14 116 144 / 0.18) !important;
|
|
color: #0d5f6f !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-ai-glyph {
|
|
color: #0d5f6f !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-edit-input {
|
|
background: #fffdfa !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-secondary,
|
|
html[data-theme="subtle-light"] .tag-manager-action {
|
|
background: rgb(255 253 250 / 0.92) !important;
|
|
border-color: rgb(31 41 55 / 0.12) !important;
|
|
color: #5f5a52 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-secondary:hover,
|
|
html[data-theme="subtle-light"] .tag-manager-action:hover {
|
|
background: rgb(31 41 55 / 0.06) !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-save {
|
|
color: #1d4ed8 !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-danger,
|
|
html[data-theme="subtle-light"] .tag-manager-action-danger:hover {
|
|
color: #b91c1c !important;
|
|
}
|
|
|
|
html[data-theme="subtle-light"] .tag-manager-empty {
|
|
background: rgb(251 250 246 / 0.42) !important;
|
|
border-color: #d8d2c7 !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);
|
|
}
|