I have the following css code within my theme:
body:has(.workspace-leaf:not([style^="display: none;"]) .border-8) {
.mod-left-split .workspace-tab-container {
border-right: 2px solid;
border-color: rgba(var(--accent-8), var(--default-transparency));
}
.nav-folder:has(> .tree-item-self[data-path^="8."]):not(:has(> .tree-item-self[data-path*="/"])) {
width: 110%;
}
.mod-root .workspace-tab-header.is-active {
border: 1px solid;
border-color: rgba(var(--accent-8), var(--default-transparency));
margin-bottom: -2px;
}
}
What I am playing around with is using the :has pseudo selector to be able to check for custom css classes in the note properties (in this event “border-8”) and be able to modify elements outside of the note to suit. The end goal would be to modify the title bar or tab based on specific custom css classes in the notes, maybe also affect the side panels as well.
The issue I have is that these cause an enormous lag in the application when dragging files/folders around, as can be seen in the below performance where it results in an ungodly style recalculation cacophony.
Does anyone have any ideas/thoughts on how to optimize this to prevent the lag? (For reference, the AnuPpuccin theme is doing the same thing for me.
