new paste tab: rework number box submenus (#157)
CI / test (pull_request) Successful in 32s
CI / docker (pull_request) Skipped

Give the custom expiry and readable N times submenus a shared boxed
container with proper padding, indent them under their parent option,
and style the number inputs and unit select with palette vars, the
existing radius scale, and the select chevron. No em dashes, no hard
coded colors in new rules.
This commit is contained in:
fen
2026-09-10 09:45:31 -05:00
parent 93fea6ad1c
commit 16cad8796f
2 changed files with 45 additions and 10 deletions
+33
View File
@@ -398,6 +398,39 @@ td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-fami
/* protection section rhythm (#20) */
.protect { display: flex; flex-direction: column; gap: 2px; }
.protect .pw-row { padding: 2px 8px 4px; }
/* submenu number boxes (#157): styled number inputs + unit selects,
padded + indented to line up with parent option labels */
.submenu {
margin: 6px 0 4px 8px;
padding: 8px 10px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.exp-group { display: flex; align-items: center; gap: 8px; }
.num-input {
width: 72px;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface-2); color: var(--fg);
font: inherit; font-size: 21.6px; padding: 6px 10px; outline: none;
-moz-appearance: textfield; appearance: textfield;
}
.num-input::-webkit-outer-spin-button,
.num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-input:focus { border-color: var(--accent); }
.unit-select {
border: 1px solid var(--border); border-radius: var(--radius);
background-color: var(--surface-2); color: var(--muted-fg);
font: inherit; font-size: 21.6px; padding: 6px 28px 6px 10px;
cursor: pointer; outline: none;
appearance: none; -webkit-appearance: none;
background-image: var(--chevron);
background-repeat: no-repeat; background-position: right 10px center;
}
.unit-select:focus { border-color: var(--accent); }
.readable-group { gap: 8px; }
.readable-label { font-size: 19px; color: var(--muted-fg); white-space: nowrap; }
.pw-field {
display: flex; align-items: center; gap: 2px; width: 100%;
border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);