/* * gallery.css — gallery grid, theme variables, and shared UI components. * * Defines the full color system for both light and dark modes using CSS * custom properties on :root (light) and [data-theme="dark"]. The data-theme * attribute is set by theme.js at runtime and by an inline script in base.html * to prevent a flash of unstyled content (FOUC) on page load. * * Key concepts: * - All colors are CSS variables (--bg-primary, --text-primary, etc.). * Components reference these variables rather than hardcoded colors so * theme switching works without touching component styles. * - .is-filtered-out uses display:none (not opacity/visibility) so filtered * items take no space in the grid — this keeps gaps uniform. * - Text thumbnails render server-sanitized HTML inside a clipped card and * inherit the parent page's theme variables without an embedded document. * - .link-chip is shared by caption links in the viewer and by gallery.js * link-URL items; styles live here rather than viewer.css because the * chip style is also used in text post thumbnails. * * Relations: * - static/photos/js/theme.js — sets data-theme on * - media_app/templates/media_app/base.html — FOUC prevention script * - media_app/templates/media_app/home.html — grid markup and initialization * - static/photos/css/viewer.css — viewer-specific styles; imports none */ /* === Theme Variables — sourced from THEME context processor via base.html === */ /* Light mode vars are set in base.html