mirror of
https://github.com/Donkie/Spoolman.git
synced 2026-10-22 01:52:17 -05:00
client_v2: stop the alpha slider tiling colour under its border
A `background` shorthand resets background-origin to the padding box, so the slider's gradient was sized to the padding box but painted out under its 1px border — and backgrounds repeat, so the strip under the border showed the far edge of the next tile: a hairline of full-opacity colour down the transparent end. It surfaced wherever the border doesn't cover that strip exactly, i.e. Firefox at fractional display scaling. Anchor every layer to the border box, and keep the colour gradient from repeating at all.
This commit is contained in:
1 parent
948c95866d
commit
fb723f0af8
2 files changed
+12
-2
No files matched your search
@@ -96,9 +96,11 @@
|
||||
}
|
||||
// Transparent-to-opaque gradient over a checkerboard, so the slider previews
|
||||
// what it controls. Falls back to grey until the row holds a real colour.
|
||||
// `border-box no-repeat` keeps the gradient from tiling a hairline of full
|
||||
// colour under the border at the transparent end — see ALPHA_CHECKER.
|
||||
function alphaTrack(h: string): string {
|
||||
const rgb = normalizeHex(h)?.slice(0, 6) ?? '9AA0A6';
|
||||
return `background:linear-gradient(to right,#${rgb}00,#${rgb}FF),${ALPHA_CHECKER}`;
|
||||
return `background:linear-gradient(to right,#${rgb}00,#${rgb}FF) border-box no-repeat,${ALPHA_CHECKER}`;
|
||||
}
|
||||
function addColor() {
|
||||
list.push('');
|
||||
|
||||
@@ -45,9 +45,17 @@ export function withAlpha(h: string, alpha: number): string {
|
||||
* transparent instead of as a different color. Deliberately theme-independent
|
||||
* (the usual white/grey of every color picker) and composited over white, which
|
||||
* also previews how the filament looks against a printed label.
|
||||
*
|
||||
* Every layer is anchored to the border box. A `background` shorthand resets
|
||||
* `background-origin` to the padding box, so on a bordered element the layers
|
||||
* would be sized to the padding box but painted out under the border — and
|
||||
* since backgrounds repeat, the strip under the border shows the far edge of
|
||||
* the next tile. On a colour gradient that is a hairline of full-opacity colour
|
||||
* down the transparent end, visible wherever the border doesn't perfectly cover
|
||||
* it (Firefox at fractional display scaling).
|
||||
*/
|
||||
export const ALPHA_CHECKER =
|
||||
'conic-gradient(#cfcfcf 0 25%, #0000 0 50%, #cfcfcf 0 75%, #0000 0) 0 0/6px 6px, #fff';
|
||||
'conic-gradient(#cfcfcf 0 25%, #0000 0 50%, #cfcfcf 0 75%, #0000 0) 0 0/6px 6px border-box, #fff';
|
||||
|
||||
export function hexRgb(h: string): [number, number, number] {
|
||||
let s = (h || '#888').replace('#', '');
|
||||
|
||||
Reference in new issue
Block a user