packages/web: allow selecting integer precision in visuals & comparison view

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: Idd4ed0b32ba827254de9c501685d5edb6a6a6964
This commit is contained in:
raf 2026-04-14 09:06:11 +03:00
commit 5af2457177
Signed by: NotAShelf
GPG key ID: 29D95B64378DB4BF
8 changed files with 143 additions and 48 deletions

View file

@ -1628,3 +1628,65 @@ body {
display: none;
}
}
.precision-select {
padding: 0.5rem 1.5rem 0.5rem 0.75rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 0.375rem;
color: var(--text-secondary);
font-size: 0.875rem;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
}
.precision-select:hover {
border-color: var(--text-muted);
color: var(--text-primary);
}
.precision-select:focus {
outline: none;
border-color: var(--accent);
}
.settings-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-primary);
}
.precision-input {
width: 120px;
padding: 0.75rem 1rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
color: var(--text-primary);
font-size: 0.9375rem;
text-align: center;
}
.precision-input:focus {
outline: none;
border-color: var(--accent);
}
/* Hide number input spinners */
.precision-input::-webkit-outer-spin-button,
.precision-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.precision-input[type='number'] {
-moz-appearance: textfield;
}
.settings-hint {
font-size: 0.75rem;
color: var(--text-muted);
}