german/houseplan-card
1
0
Fork 0
mirror of https://github.com/Matysh/houseplan-card synced 2026-10-03 21:28:59 +00:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

Show spectrum on hue slider

Browse Source 
Issue: #192
User-Visible: yes
This commit is contained in:
Sergey Matyunin
2026-08-19 07:28:37 +00:00
committed by claude[bot]
parent a55ba3de8b
commit a75c729d87
13 changed files with 322 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hp-color-opacity.ts
+33
View File
@@ -233,6 +233,29 @@ export class HpColorOpacity extends LitElement {
}
.hue-range {
accent-color: var(--hp-picker-hue, #f00);
--hp-picker-hue-track: linear-gradient(to right,
#f00 0%, #ff0 16.667%, #0f0 33.333%, #0ff 50%,
#00f 66.667%, #f0f 83.333%, #f00 100%);
}
.hue-range::-webkit-slider-runnable-track {
height: 10px;
box-sizing: border-box;
border: 1px solid var(--divider-color, #666);
border-radius: 999px;
background: var(--hp-picker-hue-track);
}
.hue-range::-moz-range-track {
height: 10px;
box-sizing: border-box;
border: 1px solid var(--divider-color, #666);
border-radius: 999px;
background: var(--hp-picker-hue-track);
}
.hue-range::-moz-range-progress {
height: 10px;
border: 0;
border-radius: 999px;
background: transparent;
}
input[type='text'],
input[type='number'] {
@@ -276,6 +299,16 @@ export class HpColorOpacity extends LitElement {
@media (prefers-reduced-motion: reduce) {
.picker { transition: none !important; }
}
@media (forced-colors: active) {
.hue-range::-webkit-slider-runnable-track {
border-color: ButtonText;
background: Canvas;
}
.hue-range::-moz-range-track {
border-color: ButtonText;
background: Canvas;
}
}
`;
connectedCallback(): void {