Last active
May 4, 2026 11:22
-
-
Save Kinark/6def45d7c265ae3436226a0fc7dedf10 to your computer and use it in GitHub Desktop.
VSCode custom CSS snippet for fixing backdrop-filter when using Vibrancy extension.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ----------------------------------------------------------- | |
| * sticky-vibrancy-revival.css (v2 — now with visible headers!) | |
| * ----------------------------------------------------------- */ | |
| /* 1. Nuke the opaque fills so the blur has something to do. */ | |
| .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container, | |
| .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row { | |
| background-color: transparent !important; | |
| } | |
| /* 2. Container becomes its own stacking context. No negative z-index | |
| * shenanigans — we layer *upward* instead of digging downward. */ | |
| .monaco-tree-sticky-container { | |
| position: relative !important; | |
| isolation: isolate; | |
| background: transparent !important; | |
| } | |
| /* 3. Blur layer sits at the bottom of the local stack. */ | |
| .monaco-tree-sticky-container::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| z-index: 0; /* was -1 — that was the bug */ | |
| pointer-events: none; | |
| background-color: rgba(30, 30, 30, 0.55); | |
| -webkit-backdrop-filter: blur(24px) saturate(160%); | |
| backdrop-filter: blur(24px) saturate(160%); | |
| border-bottom: 1px solid var(--vscode-sideBarStickyScroll-border); | |
| } | |
| /* 4. Float the actual sticky rows above the blur layer. */ | |
| .monaco-tree-sticky-container > .monaco-tree-sticky-row, | |
| .monaco-tree-sticky-container > .monaco-tree-sticky-container-shadow { | |
| position: relative; /* needed for z-index to bite */ | |
| z-index: 1; | |
| } | |
| /* 5. Light-theme variant. */ | |
| .vs .monaco-tree-sticky-container::before, | |
| .hc-light .monaco-tree-sticky-container::before { | |
| background-color: rgba(245, 245, 245, 0.55); | |
| } | |
| /* 6. Tame the inner shadow so it doesn't murder the blur edge. */ | |
| .monaco-tree-sticky-container .monaco-tree-sticky-container-shadow { | |
| opacity: 0.35; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment