Salastil/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-06-15 17:25:26 -04:00
Code Issues Packages Projects Releases Wiki Activity

Edge-dock resize handle: fade accent stripe in on hover

Browse Source 
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).
This commit is contained in:
pewdiepie-archdaemon
2026-06-10 23:18:07 +09:00
parent 1638db9c86
commit 0a3333b961
2 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/modalSnap.js
+3 -3
View File
@@ -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';
static/style.css
+11
View File
@@ -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,