fix(app): fade filetree guide lines on hover

This commit is contained in:
David Hill
2026-01-26 19:01:25 +00:00
parent 010ed55590
commit c6febd8ddd
2 changed files with 4 additions and 4 deletions

View File

@@ -198,9 +198,9 @@ export default function FileTree(props: {
<Collapsible.Content class="relative pt-0.5">
<div
classList={{
"absolute top-0 bottom-0 w-px pointer-events-none bg-border-weak-base": true,
"opacity-100": expanded() && deep() === level,
"opacity-50": !(expanded() && deep() === level),
"absolute top-0 bottom-0 w-px pointer-events-none bg-border-weak-base opacity-0 transition-opacity duration-150 ease-out motion-reduce:transition-none": true,
"group-hover/filetree:opacity-100": expanded() && deep() === level,
"group-hover/filetree:opacity-50": !(expanded() && deep() === level),
}}
style={`left: ${Math.max(0, 8 + level * 12 - 4) + 8}px`}
/>

View File

@@ -2626,7 +2626,7 @@ export default function Page() {
<Show when={layout.fileTree.opened()}>
<div class="relative shrink-0 h-full" style={{ width: `${layout.fileTree.width()}px` }}>
<div class="h-full border-l border-border-weak-base flex flex-col overflow-hidden">
<div class="h-full border-l border-border-weak-base flex flex-col overflow-hidden group/filetree">
<Tabs
variant="pill"
value={fileTreeTab()}