Improve style of selected item in filetree #398
Conversation
|
@sir-kokabi is attempting to deploy a commit to the Svelte Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| [aria-current='true']::after { | ||
| content: ''; | ||
| position: absolute; | ||
| width: 1rem; | ||
| height: 1rem; | ||
| top: 0.3rem; | ||
| right: calc(-0.6rem - 2px); | ||
| background-color: var(--sk-back-3); | ||
| border: 1px solid var(--sk-back-4); | ||
| transform: translate(0, 0.2rem) rotate(45deg); | ||
| z-index: 2; | ||
| } | ||
|
|
||
| [aria-current='true']:has(:focus-visible)::after, | ||
| :global(.mobile-filetree) [aria-current='true']::after { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
We shouldn't remove this - this adds the indented caret next to the selected file
There was a problem hiding this comment.
I have restored this section, but I believe the small arrow here is unnecessary. It is similar to making a menu item both bold and colorized.
| @@ -188,24 +188,7 @@ | |||
| } | |||
|
|
|||
| [aria-current='true'] { | |||
| color: var(--prime); | |||
| color: hsl(15, 100%, 50%); | |||
There was a problem hiding this comment.
Looks like the root issue here is that the --prime variable no longer exists - I think we should use --sk-theme-1 instead of a hard-coded value
There was a problem hiding this comment.
I've change color to --sk-theme-1.
I've changed the CSS of the filetree component to make the selected item stand out more from the background color. This helps users see and find the selected item better, especially if they have trouble with colors or vision.