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

feat(ext/popup): generator-popover component (Random + BIP39)

Browse Source
This commit is contained in:
adlee-was-taken
2026-04-24 19:24:19 -04:00
parent af432de320
commit 8a16482b9c
3 changed files with 535 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -588,3 +588,64 @@ textarea {
width: 100%; font-size: 11px; font-family: inherit;
}
.disclosure__body .add-section:hover { border-color: #484f58; color: #c9d1d9; }
/* --- generator popover (β₂ slice 4) --- */
.generator-popover {
position: absolute; z-index: 9999999;
background: #161b22; border: 1px solid #30363d; border-radius: 6px;
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
padding: 14px; min-width: 300px; max-width: 340px;
font-size: 11px; font-family: system-ui, sans-serif; color: #c9d1d9;
}
.generator-popover .gen-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
}
.generator-popover .gen-title { font-size: 11px; font-weight: 600; color: #8b949e; text-transform: lowercase; letter-spacing: 0.08em; }
.generator-popover .gen-close {
background: transparent; border: 0; color: #8b949e; cursor: pointer;
font-size: 14px; padding: 2px 6px;
}
.generator-popover .gen-row {
display: flex; align-items: center; gap: 8px; margin: 6px 0;
}
.generator-popover .gen-row__label {
color: #8b949e; width: 70px; flex-shrink: 0;
font-size: 10px; text-transform: lowercase;
}
.generator-popover .gen-toggle-group {
display: flex; gap: 0; border: 1px solid #30363d; border-radius: 3px; overflow: hidden;
}
.generator-popover .gen-toggle-group button {
background: transparent; border: 0; color: #8b949e;
padding: 3px 10px; cursor: pointer; font: inherit; font-size: 10px;
}
.generator-popover .gen-toggle-group button.active { background: #1f6feb; color: #fff; }
.generator-popover .gen-slider { flex: 1; }
.generator-popover .gen-slider + span {
color: #c9d1d9; font-variant-numeric: tabular-nums;
font-family: monospace; min-width: 24px; text-align: right;
}
.generator-popover .gen-check-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 4px 16px; margin: 6px 0; font-size: 11px;
}
.generator-popover .gen-check-grid label {
display: flex; align-items: center; gap: 6px;
}
.generator-popover .gen-preview {
margin: 10px 0 8px; padding: 8px 10px;
background: #0d1117; border: 1px solid #30363d; border-radius: 4px;
font-family: "SF Mono", "JetBrains Mono", monospace; color: #c9d1d9;
display: flex; justify-content: space-between; align-items: center; gap: 8px;
word-break: break-all;
}
.generator-popover .gen-preview__regen {
flex-shrink: 0; background: transparent; border: 0;
color: #58a6ff; cursor: pointer; font-size: 12px;
}
.generator-popover .gen-actions {
display: grid; grid-template-columns: 1fr 1fr;
gap: 6px; margin-top: 10px;
}
.generator-popover .gen-actions .btn { font-size: 11px; padding: 5px 10px; }