benmichael/gods-eye-view
1
0 Fork 0
mirror of https://github.com/bilawalsidhu/gods-eye-view.git synced 2026-11-14 23:32:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Give a rail's open icon its own island

Browse Source 
With a panel open, a rail's glass is drawn in pieces: one around the open
icon and one for each run of icons above and below it, with a small break
between them. The icons keep their places; the rail's icon spacing grows
from 2 px to 12 px to leave room for the break. The shadow rule for the
old lifted icon is removed.

Co-authored-by: Sameh Khamis <[email protected]>
This commit is contained in:
Manjunath PaparajuandSameh Khamis authored and Sameh Khamis committed 2026-11-14 13:41:07 -08:00
1 parent 9cc2a1811b
commit 422a11d9a4
1 file changed
+81
Download Patch File Download Diff File Expand all files Collapse all files
src/ui/styles/rail-split.css
+81
View File
@@ -162,3 +162,84 @@
background: rgba(0, 212, 255, 0.15);
border-color: rgba(0, 212, 255, 0.28);
}
/* ── The open icon is its own island ──
With a panel open, the rail's glass is drawn in pieces behind its icons:
one piece for the open icon, and one for each run of icons above and below
it. The icons keep their places, open or not; the spacing between them is
what leaves room for the break. */
:is(.gev-panel-rail--left, .gev-panel-rail--right) .ui-rail {
gap: 12px;
}
:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right)
.ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on) {
background: none !important;
border-color: transparent !important;
box-shadow: none !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right)
.ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on)
> .ui-tooltip::before {
position: absolute;
inset: -6px -5px;
z-index: -1;
background: rgba(16, 20, 28, 0.82);
border: solid rgba(255, 255, 255, 0.14);
border-width: 0 1px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
content: '';
pointer-events: none;
}
/* The ends of the rail. */
:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right)
.ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on)
> .ui-tooltip:first-child::before {
top: -5px;
border-top-width: 1px;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right)
.ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on)
> .ui-tooltip:last-child::before {
bottom: -5px;
border-bottom-width: 1px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
}
/* The runs stop short of the open icon. */
:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right)
.ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on)
> .ui-tooltip:has(+ .ui-tooltip > .ui-rail__item--on)::before {
bottom: -1px;
border-bottom-width: 1px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
}
:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right)
.ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on)
> .ui-tooltip:has(> .ui-rail__item--on) + .ui-tooltip::before {
top: -1px;
border-top-width: 1px;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
/* The open icon's own piece. */
:is(body:not(.panels-edge-left) .gev-panel-rail--left, body:not(.panels-edge-right) .gev-panel-rail--right)
.ui-rail--collapsible:not(.ui-rail--expanded):has(.ui-rail__item--on)
> .ui-tooltip:has(> .ui-rail__item--on)::before {
inset: -4px -5px;
border-width: 1px;
border-radius: 14px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}