/* ========================================================================== Theme token layer (dark mode) -------------------------------------------------------------------------- A semantic CSS custom-property layer sits on top of the stylesheet so the whole UI can be re-themed from one place. Every color further down the file references a var(--…) token; there are no bare hex/rgb color literals in the rules below (only inside these :root token blocks). LIGHT is the default and reproduces the historical appearance exactly. DARK applies when: - the user explicitly selects Dark -> :root[data-theme="dark"] - the user is on Auto and the OS is dark -> @media + [data-theme="auto"] - no JS / no stored choice and the OS is dark -> @media + :not([data-theme]) The theme is set synchronously in an inline script (see base.html), which stamps data-theme on before paint to avoid a flash (FOUC). The DARK token block is intentionally duplicated across the explicit selector and the prefers-color-scheme media query — that is the standard, build-free way to express "dark, and also dark-when-OS-says-so". ========================================================================== */ :root { color-scheme: light; /* Surfaces */ --color-bg: #fff; /* page / body background */ --color-surface: #fff; /* cards, dialogs, menus, inputs */ --color-surface-2: #f6f7f9; /* subtle inset panels (extract, summary) */ --color-surface-3: #f5f5f5; /* code chips, table head fills */ --color-header-bg: #2b3a55; /* top nav bar + dropdown menu */ /* Text */ --color-text: #1a1a1a; /* primary body text */ --color-text-muted: #555; /* secondary meta text */ --color-text-subtle: #888; /* tertiary / disabled-ish text */ --color-text-faint: #999; /* faintest hints (never, empty) */ --color-on-header: #d7deec; /* text on the dark header */ --color-on-header-strong: #fff; --color-on-accent: #fff; /* text on an accent-filled button */ /* Borders */ --color-border: #ddd; /* default hairline */ --color-border-subtle: #eee; /* faint list dividers */ --color-border-strong: #ccc; /* icon buttons, thumbnails */ --color-border-blue: #cdd5e3; /* blue-tinted borders (panels, chips) */ /* Accent / brand */ --color-accent: #2b3a55; --color-accent-hover: #33425b; --color-link: #1565c0; --color-link-hover: #0d47a1; --color-accent-soft-bg: #eef1f6; /* blue-tint chip / hover fills */ --color-accent-soft-bg-hover: #dde6f3; --color-accent-soft-border: #c7d2e2; /* Header accents */ --color-header-badge-bg: rgba(255, 255, 255, 0.1); --color-nav-hover-bg: rgba(255, 255, 255, 0.12); /* Status: danger (reds) */ --color-danger-text: #b00020; --color-danger-text-deep: #a12622; --color-danger-bg: #fdecea; --color-danger-border: #f1c0c0; /* Status: warning (ambers) */ --color-warning-text: #8a6d00; --color-warning-bg: #fdf3d0; --color-warning-bg-soft: #fff6e5; --color-warning-border: #ecdfb4; /* Status: success (greens) */ --color-success-text: #1b6e2e; --color-success-bg: #e6f4ea; --color-success-border: #c8e6c9; /* Info (light blue flashes) */ --color-info-bg: #eef4ff; --color-info-border: #cdddf7; /* Highlight (priority-term marker) */ --color-highlight-bg: #fff3bf; /* Star toggle (My Sources) */ --color-star: #b9921f; --color-star-hover: #d6a715; --color-star-on: #e0a800; /* Badges (source types) */ --color-badge-rss-bg: #d4e5f7; --color-badge-rss-text: #1565c0; --color-badge-crawl-bg: #f3e5f5; --color-badge-crawl-text: #6a1b9a; --color-badge-mechanism-bg: #e8edf5; --color-badge-mechanism-text: #33425b; --color-badge-manual-bg: #ede7d4; --color-badge-manual-text: #7a5c00; --color-badge-count-bg: #d32f2f; /* nav "Publish" notification bubble */ /* Shadows / overlays */ --shadow-sm: rgba(0, 0, 0, 0.15); --shadow-md: rgba(0, 0, 0, 0.25); --shadow-lg: rgba(0, 0, 0, 0.3); --color-backdrop: rgba(0, 0, 0, 0.45); } /* --- DARK tokens: explicit user override --------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #14171c; --color-surface: #1c2129; --color-surface-2: #232a34; --color-surface-3: #232a34; --color-header-bg: #1a2130; --color-text: #e6e8eb; --color-text-muted: #a4abb6; --color-text-subtle: #8b93a0; --color-text-faint: #6f7783; --color-on-header: #c4ccdb; --color-on-header-strong: #fff; --color-on-accent: #fff; --color-border: #2c3440; --color-border-subtle: #262d38; --color-border-strong: #3a4452; --color-border-blue: #34405a; --color-accent: #34507d; --color-accent-hover: #3f5d90; --color-link: #6aa9ec; --color-link-hover: #8dc0f5; --color-accent-soft-bg: #262f3f; --color-accent-soft-bg-hover: #2f3a4e; --color-accent-soft-border: #3a4761; --color-header-badge-bg: rgba(255, 255, 255, 0.08); --color-nav-hover-bg: rgba(255, 255, 255, 0.1); --color-danger-text: #f28b8b; --color-danger-text-deep: #f0a19b; --color-danger-bg: #3a1f1f; --color-danger-border: #5a2e2e; --color-warning-text: #e6c15a; --color-warning-bg: #33290f; --color-warning-bg-soft: #2c250f; --color-warning-border: #4d3f1a; --color-success-text: #6fce8b; --color-success-bg: #16301f; --color-success-border: #285238; --color-info-bg: #1a2436; --color-info-border: #2c3d59; --color-highlight-bg: #4d4413; --color-star: #d6a715; --color-star-hover: #f0c02a; --color-star-on: #f0c02a; --color-badge-rss-bg: #1c3350; --color-badge-rss-text: #7fb4ee; --color-badge-crawl-bg: #35234a; --color-badge-crawl-text: #c497e6; --color-badge-mechanism-bg: #273349; --color-badge-mechanism-text: #9db3d6; --color-badge-manual-bg: #3a331f; --color-badge-manual-text: #d3ba75; --color-badge-count-bg: #e5555b; /* nav "Publish" notification bubble */ --shadow-sm: rgba(0, 0, 0, 0.5); --shadow-md: rgba(0, 0, 0, 0.6); --shadow-lg: rgba(0, 0, 0, 0.7); --color-backdrop: rgba(0, 0, 0, 0.65); } /* --- DARK tokens: Auto (or no stored choice) following a dark OS ---------- */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"], :root:not([data-theme]) { color-scheme: dark; --color-bg: #14171c; --color-surface: #1c2129; --color-surface-2: #232a34; --color-surface-3: #232a34; --color-header-bg: #1a2130; --color-text: #e6e8eb; --color-text-muted: #a4abb6; --color-text-subtle: #8b93a0; --color-text-faint: #6f7783; --color-on-header: #c4ccdb; --color-on-header-strong: #fff; --color-on-accent: #fff; --color-border: #2c3440; --color-border-subtle: #262d38; --color-border-strong: #3a4452; --color-border-blue: #34405a; --color-accent: #34507d; --color-accent-hover: #3f5d90; --color-link: #6aa9ec; --color-link-hover: #8dc0f5; --color-accent-soft-bg: #262f3f; --color-accent-soft-bg-hover: #2f3a4e; --color-accent-soft-border: #3a4761; --color-header-badge-bg: rgba(255, 255, 255, 0.08); --color-nav-hover-bg: rgba(255, 255, 255, 0.1); --color-danger-text: #f28b8b; --color-danger-text-deep: #f0a19b; --color-danger-bg: #3a1f1f; --color-danger-border: #5a2e2e; --color-warning-text: #e6c15a; --color-warning-bg: #33290f; --color-warning-bg-soft: #2c250f; --color-warning-border: #4d3f1a; --color-success-text: #6fce8b; --color-success-bg: #16301f; --color-success-border: #285238; --color-info-bg: #1a2436; --color-info-border: #2c3d59; --color-highlight-bg: #4d4413; --color-star: #d6a715; --color-star-hover: #f0c02a; --color-star-on: #f0c02a; --color-badge-rss-bg: #1c3350; --color-badge-rss-text: #7fb4ee; --color-badge-crawl-bg: #35234a; --color-badge-crawl-text: #c497e6; --color-badge-mechanism-bg: #273349; --color-badge-mechanism-text: #9db3d6; --color-badge-manual-bg: #3a331f; --color-badge-manual-text: #d3ba75; --color-badge-count-bg: #e5555b; /* nav "Publish" notification bubble */ --shadow-sm: rgba(0, 0, 0, 0.5); --shadow-md: rgba(0, 0, 0, 0.6); --shadow-lg: rgba(0, 0, 0, 0.7); --color-backdrop: rgba(0, 0, 0, 0.65); } } /* === END THEME TOKENS — no raw color literals below this line === */ :root { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; } body { margin: 0; background: var(--color-bg); color: var(--color-text); } .site-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; background: var(--color-header-bg); color: var(--color-on-accent); gap: 1.5rem; } .site-header-brand { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; white-space: nowrap; color: inherit; text-decoration: none; cursor: pointer; } .site-header-brand strong { color: var(--color-on-accent); user-select: none; } .site-header-brand:hover { opacity: 0.8; } .groong-logo { height: 28px; width: 28px; object-fit: contain; } .site-header-version { display: flex; align-items: center; margin-left: auto; font-size: 0.75rem; } .version-badge { background: var(--color-header-badge-bg); padding: 0.3rem 0.6rem; border-radius: 3px; font-family: monospace; color: var(--color-on-header); } .version-overlay { position: fixed; bottom: 1rem; right: 1rem; background: var(--color-link); border: 1px solid var(--color-nav-hover-bg); border-radius: 4px; padding: 0.35rem 0.6rem; font-size: 0.6rem; font-family: monospace; color: var(--color-on-accent); z-index: 1000; white-space: nowrap; display: flex; align-items: center; gap: 0.3rem; text-decoration: none; cursor: pointer; } .version-overlay:hover, .version-overlay:focus { background: var(--color-link-hover); } .version-overlay code { color: var(--color-on-header); background: var(--shadow-sm); padding: 0.1rem 0.25rem; border-radius: 2px; } .version-badge code { color: var(--color-on-header); background: var(--shadow-sm); padding: 0.1rem 0.3rem; border-radius: 2px; font-size: 0.85em; } .site-user { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; } .logout-form { display: inline; margin: 0; } .site-main { padding: 1.25rem; max-width: 60rem; } /* Full-width pages (e.g. the wide, many-column admin Sources table) opt out of the default 60rem content column and fill the browser window. */ .site-main--full { max-width: none; } .login { max-width: 22rem; margin: 3rem auto; padding: 0 1rem; } .login-form { display: flex; flex-direction: column; gap: 0.35rem; } .login-form input { padding: 0.5rem; margin-bottom: 0.5rem; font-size: 1rem; } .login-form button { padding: 0.55rem; font-size: 1rem; cursor: pointer; } .form-error { color: var(--color-danger-text); font-weight: 600; } .login-note { margin-top: 1rem; font-size: 0.85rem; color: var(--color-text-muted); } /* Sign in with Google (TICKET-049) */ .google-signin { display: block; text-align: center; padding: 0.55rem; margin-bottom: 0.75rem; font-size: 1rem; font-weight: 600; color: var(--color-text); text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 4px; cursor: pointer; } .google-signin:hover { background: var(--color-surface-2); } .login-divider { display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0; color: var(--color-text-subtle); font-size: 0.85rem; } .login-divider::before, .login-divider::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); } /* --- Discovery queue (TICKET-009) --- */ .queue-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .btn { display: inline-block; box-sizing: border-box; padding: 0.35rem 0.7rem; font-family: inherit; font-size: 0.9rem; /* Explicit so and