For people to recreate the existing look with userstyle.css we will need both a .selected class and a .notebook-level-[x] class added. Right now you cannot tell what level a notebook is with CSS only since it is only being applied visually with inline styles.
Regardless, I vote no background, except for a selected state, with > v symbols on the left. (aka option M + a selected state). With this option, I think it will also look better to move the symbols for “tags” and “notebooks” the left as well.
I would prefer the icons of “Notebooks” and “Tags” in @uxamanda’s design to have the same brightness as the text (#5F5F5F), for two reasons:
To visually unindent them
These icons are not controls (in fact, the entire line is currently a control, but that could be changed)
And wouldn’t it be more logical to indent “All notes” including its icon and to make that icon brighter as well, so that it aligns “Notebooks” and “Tags” and their icons?
That all makes sense to me. Sadly I mocked it up by editing in the dev tools so it is hard to recreate and show with your fixes, but I agree with all of your edits.
For those who still want the colour gradient, there’s a class list-item-depth-$DEPTH on each sidebar item, which can be used to style the item depending on the depth.
I enjoy the new layout via @uxamanda 's user stylesheets, thanks for bringing this up, I actually thought it would be in your category !Onvindbaar but glad we found it.
Been enjoying this update, thank you. I really wish there was a class to target the selected Notebook. It’s one of the only colors I have in my theme, so it would be great if it was targetable.
Ideally something as simple as a selected or active:
class="list-item-container selected"
We could reuse the same class in both the notebook and notes lists since it’s easy to distinguish between those in CSS.