fix(theme): dark-theme login box, feedback messages, and nav logout link

- Override the Login plugin's white #grav-login box to use dark theme tokens
- Style flash/form notices (.notices, #messages .toast) globally on-theme;
  override markdown-notices' bright per-colour variant backgrounds so error/
  success/warning messages stay dark with a coloured left border
- Add a Logout link to the main nav (authenticated-only, plain nav style);
  no login link in the menu

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Rw9Tceo6DSzVqWKkjVJpHZ
This commit is contained in:
2026-07-08 23:56:04 +02:00
co-authored by Claude Opus 4.8
parent 02fa4e94a7
commit 874645db32
2 changed files with 58 additions and 0 deletions
+57
View File
@@ -791,8 +791,65 @@ body::after {
.feed-map-link:hover { color: var(--color-accent-hover); }
/* ── Feedback / notification messages ────────────────────────────────────────── */
/* Grav renders feedback two ways and the theme styled neither globally:
- Form/flash messages as <div class="notices success|error|warning green|red|yellow">
(Form plugin form-messages.html.twig; also markdown-notices output).
- Plain flash messages as #messages .toast .toast-error|success|warning (quark
partials/messages.html.twig, resolved since this theme has none of its own).
Without these rules they fell back to light admonition boxes that clash with the
dark theme (first noticed on /login). Kept on-theme with a status-coloured
left border. */
.notices,
#messages .toast {
padding: 1rem 1.1rem;
border-radius: var(--radius-md);
font-size: var(--text-base);
margin: 0 0 var(--space-5);
background: var(--color-canvas);
color: var(--color-ink);
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-accent);
}
.notices p,
#messages .toast p { margin: 0; }
/* markdown-notices sets bright per-colour backgrounds on .notices.red / .yellow /
.green / .blue at (0,2,0). Override each variant at equal specificity (this
sheet loads later) so the dark canvas + cream text always win — only the
left-border colour signals status. */
.notices.error, .notices.red,
.notices.success, .notices.green,
.notices.warning, .notices.yellow,
.notices.blue,
#messages .toast-error,
#messages .toast-success,
#messages .toast-warning {
background: var(--color-canvas);
color: var(--color-ink);
border-left-width: 4px;
border-left-style: solid;
}
.notices.error, .notices.red,
#messages .toast-error { border-left-color: var(--color-error); }
.notices.success, .notices.green,
#messages .toast-success { border-left-color: var(--color-accent); }
.notices.warning, .notices.yellow,
#messages .toast-warning { border-left-color: #c98a2e; }
.notices.blue { border-left-color: var(--color-accent); }
/* ── Login form ─────────────────────────────────────────────────────────────── */
/* Neutralise the Login plugin's built-in white box (#grav-login in
plugin://login/css/login.css) so the wrapper matches the dark theme. */
#grav-login {
background: var(--color-canvas);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-ink);
}
.login-form { max-width: 400px; margin: var(--space-8) auto; padding: 0 var(--space-4); }
.login-form .form-field { margin-bottom: var(--space-5); }
.login-form .form-label label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); }