style(ext/vault): mirror color tokens, focus ring, required-pill class

Same :root block and .req-pill rule as popup/styles.css so the two
stylesheets share visual tokens. Vault input focus migrated to
:focus-visible + box-shadow ring.

Plan 2026-04-30 fullscreen UX phase 1 task 3.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-04-30 20:39:46 -04:00
parent e5875249bf
commit f0d8758a80

View File

@@ -1,5 +1,31 @@
/* relicario vault — terminal dark theme (tab layout) */
:root {
/* Brand */
--accent: #d2ab43;
--accent-soft: rgba(210, 171, 67, 0.18);
--accent-strong: #aa812a;
/* Surfaces */
--bg-page: #0d1117;
--bg-pane: #161b22;
--bg-elevated: #21262d;
--border-subtle: #30363d;
/* Text */
--text: #c9d1d9;
--text-muted: #8b949e;
--text-dim: #484f58;
/* Status */
--danger: #ab2b20;
--danger-bg: #791111;
--success: #6cb37a;
/* Focus */
--focus-ring: 0 0 0 2px rgba(210, 171, 67, 0.35);
}
* {
margin: 0;
padding: 0;
@@ -61,6 +87,20 @@ body {
font-weight: 600;
}
.req-pill {
display: inline-block;
font-size: 9px;
padding: 1px 5px;
background: var(--accent-soft);
color: var(--accent);
border-radius: 2px;
margin-left: 6px;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
}
.secondary {
color: #8b949e;
}
@@ -133,8 +173,10 @@ input, textarea, select {
transition: border-color 0.15s;
}
input:focus, textarea:focus, select:focus {
border-color: #d2ab43;
input:focus-visible, textarea:focus-visible, select:focus-visible {
border-color: var(--accent);
box-shadow: var(--focus-ring);
outline: none;
}
input::placeholder, textarea::placeholder {