alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move test toggle zones outside border, improve span handle hit areas
Some checks failed
Validate / validate (push) Failing after 8s
Details

Browse Source 
Separate test edge toggles into dedicated elements outside the
calibration preview border so they don't conflict with span bar
interactions. Expand span handle hit areas to 16px with 4px visible
indicators. Increase canvas padding to 36px on all sides and
reposition tick labels outside toggle zones.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-09 02:48:14 +03:00
parent 2b953e2e3e
commit 9fc15e3213
3 changed files with 110 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
server/src/wled_controller/static/style.css
View File

@@ -920,10 +920,10 @@ input:-webkit-autofill:focus {
#calibration-preview-canvas {
position: absolute;
top: -18px;
left: -32px;
width: calc(100% + 64px);
height: calc(100% + 36px);
top: -36px;
left: -36px;
width: calc(100% + 72px);
height: calc(100% + 72px);
pointer-events: none;
z-index: 3;
}
@@ -1001,20 +1001,52 @@ input:-webkit-autofill:focus {
font-size: 11px;
color: var(--text-secondary);
background: rgba(128, 128, 128, 0.15);
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s;
transition: background 0.2s;
z-index: 2;
user-select: none;
}
.preview-edge:hover {
background: rgba(128, 128, 128, 0.3);
/* Edge test toggle zones — positioned outside the container border */
.edge-toggle {
position: absolute;
cursor: pointer;
z-index: 1;
background: rgba(128, 128, 128, 0.08);
border: 1px solid rgba(128, 128, 128, 0.15);
border-radius: 3px;
transition: background 0.2s, box-shadow 0.2s;
}
.preview-edge.active {
color: white;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
.edge-toggle:hover {
background: rgba(128, 128, 128, 0.25);
}
.toggle-top {
top: -12px;
left: 56px;
right: 56px;
height: 12px;
}
.toggle-bottom {
bottom: -12px;
left: 56px;
right: 56px;
height: 12px;
}
.toggle-left {
left: -12px;
top: 36px;
bottom: 36px;
width: 12px;
}
.toggle-right {
right: -12px;
top: 36px;
bottom: 36px;
width: 12px;
}
.edge-top {
@@ -1123,17 +1155,23 @@ input:-webkit-autofill:focus {
right: 2px;
}
/* Resize handles */
/* Resize handles — large transparent hit area with narrow visible strip */
.edge-span-handle {
position: absolute;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(76, 175, 80, 0.7);
border-radius: 2px;
background: transparent;
z-index: 2;
opacity: 0;
transition: opacity 0.15s;
}
.edge-span-handle::after {
content: '';
position: absolute;
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(76, 175, 80, 0.7);
border-radius: 2px;
}
.edge-span-bar:hover .edge-span-handle {
opacity: 1;
}
@@ -1141,39 +1179,55 @@ input:-webkit-autofill:focus {
/* Horizontal handles */
.edge-top .edge-span-handle,
.edge-bottom .edge-span-handle {
top: 2px;
bottom: 2px;
width: 6px;
top: 0;
bottom: 0;
width: 16px;
cursor: ew-resize;
}
.edge-top .edge-span-handle::after,
.edge-bottom .edge-span-handle::after {
top: 3px;
bottom: 3px;
left: 6px;
width: 4px;
}
.edge-top .edge-span-handle-start,
.edge-bottom .edge-span-handle-start {
left: 0;
left: -8px;
}
.edge-top .edge-span-handle-end,
.edge-bottom .edge-span-handle-end {
right: 0;
right: -8px;
}
/* Vertical handles */
.edge-left .edge-span-handle,
.edge-right .edge-span-handle {
left: 2px;
right: 2px;
height: 6px;
left: 0;
right: 0;
height: 16px;
cursor: ns-resize;
}
.edge-left .edge-span-handle::after,
.edge-right .edge-span-handle::after {
left: 3px;
right: 3px;
top: 6px;
height: 4px;
}
.edge-left .edge-span-handle-start,
.edge-right .edge-span-handle-start {
top: 0;
top: -8px;
}
.edge-left .edge-span-handle-end,
.edge-right .edge-span-handle-end {
bottom: 0;
bottom: -8px;
}
/* Ensure LED input is above span bar */