mirror of
https://github.com/nimbold/Firelink.git
synced 2026-08-26 02:27:14 +00:00
fix(ui): restore rounded sidebar depth
This commit is contained in:
+36
-8
@@ -1280,6 +1280,7 @@ html[data-list-density="relaxed"] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.app-sidebar-shell {
|
.app-sidebar-shell {
|
||||||
|
position: relative;
|
||||||
padding-block: 10px;
|
padding-block: 10px;
|
||||||
padding-inline-start: 10px;
|
padding-inline-start: 10px;
|
||||||
background: hsl(var(--statusbar-bg));
|
background: hsl(var(--statusbar-bg));
|
||||||
@@ -1295,6 +1296,26 @@ html[data-list-density="relaxed"] {
|
|||||||
padding-inline-end: 10px;
|
padding-inline-end: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Keep the rounded depth cue in the stable sidebar layer. Keeping it on the
|
||||||
|
shell avoids stale compositing when the sibling workspace swaps pages. */
|
||||||
|
.app-sidebar-shell::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
inset-inline-start: 10px;
|
||||||
|
inset-inline-end: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
border-radius: var(--window-corner-radius);
|
||||||
|
box-shadow: 2px 0 12px hsl(0 0% 0% / 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-sidebar-shell--right::after {
|
||||||
|
inset-inline-start: 0;
|
||||||
|
inset-inline-end: 10px;
|
||||||
|
box-shadow: -2px 0 12px hsl(0 0% 0% / 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-resize-handle {
|
.sidebar-resize-handle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 18px;
|
top: 18px;
|
||||||
@@ -1344,8 +1365,21 @@ html[data-list-density="relaxed"] {
|
|||||||
border-radius: var(--window-corner-radius);
|
border-radius: var(--window-corner-radius);
|
||||||
|
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 0 1px 0 hsl(0 0% 100% / 0.045),
|
inset 0 1px 0 hsl(0 0% 100% / 0.045);
|
||||||
2px 0 10px hsl(0 0% 0% / 0.20);
|
}
|
||||||
|
|
||||||
|
/* A regular material gives the sidebar depth while keeping the content
|
||||||
|
readable across themes. The opaque declaration above remains the
|
||||||
|
fallback for platforms without backdrop-filter support. */
|
||||||
|
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
||||||
|
.app-sidebar-panel {
|
||||||
|
background: hsl(var(--sidebar-panel-bg) / 0.86);
|
||||||
|
backdrop-filter: blur(22px) saturate(1.12);
|
||||||
|
-webkit-backdrop-filter: blur(22px) saturate(1.12);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 hsl(0 0% 100% / 0.08),
|
||||||
|
inset 0 -1px 0 hsl(0 0% 0% / 0.05);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -3362,12 +3396,6 @@ html[dir="rtl"] input[type="number"] {
|
|||||||
unicode-bidi: isolate;
|
unicode-bidi: isolate;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-sidebar-shell--right .app-sidebar-panel {
|
|
||||||
box-shadow:
|
|
||||||
inset 0 1px 0 hsl(0 0% 100% / 0.045),
|
|
||||||
-2px 0 10px hsl(0 0% 0% / 0.20);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-sidebar-shell--left .app-sidebar-panel {
|
.app-sidebar-shell--left .app-sidebar-panel {
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|||||||
Reference in New Issue
Block a user