From 0a3333b961523748e82209846f1cc2a0400483aa Mon Sep 17 00:00:00 2001 From: pewdiepie-archdaemon Date: Wed, 10 Jun 2026 23:18:07 +0900 Subject: [PATCH] Edge-dock resize handle: fade accent stripe in on hover Transparent at rest, accent gradient animates in on hover with a 0.18s ease transition. Drag affordance + col-resize cursor still work; the stripe just stops bothering you when not touched. Right-side handle mirrors the gradient direction (left-to-right gradient flipped to right-to-left). --- static/js/modalSnap.js | 6 +++--- static/style.css | 11 +++++++++++ 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/static/js/modalSnap.js b/static/js/modalSnap.js index e25cb6628..1e23cdb7f 100644 --- a/static/js/modalSnap.js +++ b/static/js/modalSnap.js @@ -809,10 +809,10 @@ export function makeEdgeDockController(modal, side = 'right', dockClass) { handle.style.bottom = '0'; handle.style.width = '10px'; handle.style.cursor = 'col-resize'; - // Invisible drag affordance — the col-resize cursor still surfaces - // it on hover, but the accent stripe was distracting and felt like - // a misplaced UI element when first noticed. + // Invisible at rest, accent stripe fades in on hover (see + // .edge-dock-resize-handle CSS rule). handle.style.background = 'transparent'; + handle.style.transition = 'background 0.18s ease'; handle.style.pointerEvents = 'auto'; handle.style.touchAction = 'none'; handle.style.display = 'none'; diff --git a/static/style.css b/static/style.css index 683044561..a9f69192c 100644 --- a/static/style.css +++ b/static/style.css @@ -14314,6 +14314,17 @@ body:has(.doc-version-panel:not(.hidden)) .hamburger-btn { /* Selected integration card — class beats inline borderColor reset */ .intg-card.intg-card-active { border-color: var(--accent, var(--red)) !important; } +/* Edge-dock resize handle: invisible at rest, accent stripe animates in + on hover. Inline background:transparent + transition come from + modalSnap.js; this rule paints the accent gradient on hover, beating + the inline style with !important. */ +.edge-dock-resize-handle-left:hover { + background: linear-gradient(to right, transparent 0 3px, color-mix(in srgb, var(--accent, var(--red)) 35%, transparent) 3px 7px, transparent 7px 10px) !important; +} +.edge-dock-resize-handle-right:hover { + background: linear-gradient(to left, transparent 0 3px, color-mix(in srgb, var(--accent, var(--red)) 35%, transparent) 3px 7px, transparent 7px 10px) !important; +} + [data-settings-panel="ai"] .admin-card > h2 > svg, [data-settings-panel="services"] .admin-card > h2 > svg, [data-settings-panel="added-models"] .admin-card > h2 > svg,