alee/relicario
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat(extension): add shared section-header/glyph-btn/kv-row/fingerprint CSS

Browse Source 
Add four utility classes to both vault.css and popup styles.css for use in
settings/devices/trash/history management surfaces. These provide standardized
styling for section headers, glyph buttons, key-value rows, and fingerprints
that will be used across all revamped panes.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-05-24 18:51:22 -04:00
parent a587965528
commit 367adcedc6
2 changed files with 68 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
extension/src/popup/styles.css
View File

@@ -631,16 +631,6 @@ textarea {
.sig-block--red { border-left-color: #ab2b20; } .sig-block--red { border-left-color: #ab2b20; }
/* --- custom-section rendering (β₂ slice 1) --- */ /* --- custom-section rendering (β₂ slice 1) --- */
.section-header {
margin-top: 14px;
margin-bottom: 4px;
padding-top: 10px;
border-top: 1px solid #21262d;
color: #8b949e;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.section-separator { .section-separator {
margin: 10px 0 4px; margin: 10px 0 4px;
border: 0; border: 0;
@@ -1700,6 +1690,40 @@ textarea {
.relicario-toast--info { background: #1f2d4a; color: #afc8f0; border: 1px solid #1f6feb; } .relicario-toast--info { background: #1f2d4a; color: #afc8f0; border: 1px solid #1f6feb; }
.type-card__desc { font-size: 10px; color: var(--text-muted, #8b949e); margin-top: 2px; } .type-card__desc { font-size: 10px; color: var(--text-muted, #8b949e); margin-top: 2px; }
/* --- Shared utility classes for management surfaces (settings/devices/trash/history) --- */
.section-header {
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
color: var(--text-muted);
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 4px;
margin: 16px 0 10px 0;
font-size: 11px;
}
.section-header:first-child { margin-top: 0; }
.glyph-btn[data-danger]:hover { color: var(--danger); border-color: var(--danger); }
.kv-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 0;
}
.kv-row > .k { color: var(--text-muted); }
.kv-row > .v { color: var(--text); font-variant-numeric: tabular-nums; }
.fingerprint {
font-family: ui-monospace, monospace;
color: var(--text-muted);
font-size: 11px;
word-break: break-all; /* wraps to two lines in popup (~360px) */
line-height: 1.4;
}
/* === Settings layout === */ /* === Settings layout === */
.settings-layout { .settings-layout {
display: flex; display: flex;

44
extension/src/vault/vault.css
View File

@@ -550,16 +550,6 @@ textarea {
.sig-block--red { border-left-color: #ab2b20; } .sig-block--red { border-left-color: #ab2b20; }
/* --- custom-section rendering --- */ /* --- custom-section rendering --- */
.section-header {
margin-top: 14px;
margin-bottom: 4px;
padding-top: 10px;
border-top: 1px solid #21262d;
color: #8b949e;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.section-separator { .section-separator {
margin: 10px 0 4px; margin: 10px 0 4px;
border: 0; border: 0;
@@ -2156,3 +2146,37 @@ textarea {
.relicario-toast--success { background: #1f4a24; color: #aff0b5; border: 1px solid #238636; } .relicario-toast--success { background: #1f4a24; color: #aff0b5; border: 1px solid #238636; }
.relicario-toast--error { background: #4a1f1f; color: #f0afaf; border: 1px solid #ab2b20; } .relicario-toast--error { background: #4a1f1f; color: #f0afaf; border: 1px solid #ab2b20; }
.relicario-toast--info { background: #1f2d4a; color: #afc8f0; border: 1px solid #1f6feb; } .relicario-toast--info { background: #1f2d4a; color: #afc8f0; border: 1px solid #1f6feb; }
/* --- Shared utility classes for management surfaces (settings/devices/trash/history) --- */
.section-header {
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
color: var(--text-muted);
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 4px;
margin: 16px 0 10px 0;
font-size: 11px;
}
.section-header:first-child { margin-top: 0; }
.glyph-btn[data-danger]:hover { color: var(--danger); border-color: var(--danger); }
.kv-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 0;
}
.kv-row > .k { color: var(--text-muted); }
.kv-row > .v { color: var(--text); font-variant-numeric: tabular-nums; }
.fingerprint {
font-family: ui-monospace, monospace;
color: var(--text-muted);
font-size: 11px;
word-break: break-all; /* wraps to two lines in popup (~360px) */
line-height: 1.4;
}