Files
immich-folio/app/admin/styles/tokens.css
Ralksta c3f92ca4ec release: v0.15.0 (#585)
Eighteen changes since v0.14.0. See CHANGELOG.md for the full list and the upgrade notes (bump IMAGE_CACHE_VERSION).
2026-09-19 22:24:10 +02:00

75 lines
2.8 KiB
CSS

/* Theme variables — every other sheet here reads them. */
/* Split out of admin.css (#533). Loaded from admin.css in a fixed order —
later sheets override earlier ones, so the order there is the cascade. */
/* ── Theme Variables ───────────────────────────────────────── */
/* .admin-listbox-popup is listed alongside .admin-layout because it is
portalled to <body>, outside the layout subtree. Without its own copy every
var below resolves to nothing there, and the popup paints transparent. */
.admin-layout,
.admin-listbox-popup {
/* Dark mode (default) */
--admin-bg: #111111;
--admin-bg-raised: #1a1a1a;
--admin-bg-elevated: #222222;
--admin-bg-input: #161616;
--admin-border: #2e2e2e;
--admin-border-hover: #444444;
--admin-border-focus: #777777;
--admin-text: #f0f0f0;
--admin-text-secondary: #a0a0a0;
--admin-text-muted: #707070;
--admin-accent: #f59e0b;
/* Focus used to show only as a border colour change from #2e2e2e to
#666666, a contrast of 2.37:1 where WCAG 1.4.11 asks for 3:1 against
adjacent colours, so keyboard users could barely see where they were.
The border value now clears 3:1, and a real ring comes on top: the
accent sits at 8.8:1 on the dark background. */
--admin-focus-ring: 2px solid var(--admin-accent);
/* One height for every control in the header row. */
--admin-control-height: 36px;
--admin-success: #4ade80;
/* Warnings get their own token rather than the accent: a preset may recolour
the accent (studio-modern makes it red), and a warning must not read as an
error because of the theme. */
--admin-warning: #f59e0b;
--admin-error: #f87171;
--admin-error-bg: #2d1111;
--admin-error-border: #5c2020;
--admin-btn-primary-bg: #ffffff;
--admin-btn-primary-text: #000000;
--admin-btn-primary-hover: #e5e5e5;
--admin-overlay: rgba(0, 0, 0, 0.7);
}
[data-theme='light'] .admin-layout,
[data-theme='light'] .admin-listbox-popup {
--admin-bg: #f8f8f8;
--admin-bg-raised: #ffffff;
--admin-bg-elevated: #f0f0f0;
--admin-bg-input: #ffffff;
--admin-border: #e0e0e0;
--admin-border-hover: #c0c0c0;
--admin-border-focus: #7f7f7f;
--admin-text: #1a1a1a;
--admin-text-secondary: #555555;
--admin-text-muted: #888888;
--admin-accent: #d97706;
--admin-success: #16a34a;
--admin-warning: #b45309;
--admin-error: #dc2626;
--admin-error-bg: #fef2f2;
--admin-error-border: #fecaca;
--admin-btn-primary-bg: #1a1a1a;
--admin-btn-primary-text: #ffffff;
--admin-btn-primary-hover: #333333;
--admin-overlay: rgba(0, 0, 0, 0.4);
}
.admin-layout {
min-height: 100vh;
background: var(--admin-bg);
color: var(--admin-text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}