Respect folder hierarchy when highlighting tree items

[pedromzadeh]

Description

It would be a huge visual improvement if tree items were highlighted according to the hierarchy they belong to.

For example, the dropdown lines respect the hierarchy:

But highlighted items, whether hovering or selected, do not:

Improved Behavior

Highlighting tree items, whether hovering or selected, according to the directory hierarchy they belong to.

[AnubisNekhet]

I'm afraid this cannot be achieved with CSS due to the usage of !important statements in inline styling. For reference:

[pedromzadeh]

Can it not be achieved at all in Obsidian, or just given the constraints of this theme?

I was about to reference the work on AnuPpuccin, and then I realized you’re the developer! I think your handling of the file explorer is pretty good. When rainbow folders are enabled, highlighted items are bounded by hierarchy. And when rainbow isn’t enabled, your boxes do span the whole tree’s width, but you have them opaque so it’s still clear where I am w.r.t the parent directory.

[mbeckrich]

If it's being done inline and with an !important declaration, it's both from the app and can't be superseded by the theme. I will look at some ways to better clarify hierarchy and location in the file tree as part of the theme rewrite, though -- thanks for the feedback!

[wsm6636]

Can I ask how to change the colour when selected, I want it not to be spread out but to show an outer border

[mbeckrich]

I apologize for the delay on this -- I am having some health issues that have left me unable to work for the time-being. I am hoping to get a diagnosis in April and that whatever the cause is has some decent treatment options! Then I will be back to active development here.

Can I ask how to change the colour when selected, I want it not to be spread out but to show an outer border

If I understand correctly, try snippet something like (this is very hacky, I apologize):

.theme-dark:not(.css-settings-manager) body:not(.is-grabbing) .tree-item-self.is-active:hover, 
.theme-dark:not(.css-settings-manager) .tree-item-self.is-active, 
.theme-light:not(.css-settings-manager) body:not(.is-grabbing) .tree-item-self.is-active:hover, 
.theme-light:not(.css-settings-manager) .tree-item-self.is-active, 
.ctp-full-palette body:not(.is-grabbing) .tree-item-self.is-active:hover, 
.ctp-full-palette .tree-item-self.is-active {
    color: rgb(205, 214, 244); /*ctp-text*/
    background-color: inherit;
    outline: solid 1px rgb(203, 166, 247); /*ctp-mauve*/
}

You're going to encounter the issue of the indentation marker. This occurs in the default theme as well, but will be more noticeable here using the colors of Catppuccin.

[wsm6636]

对于此事的拖延，我深表歉意——我有一些健康问题，导致我暂时无法工作。我希望在四月得到诊断，无论是什么原因都有一些不错的治疗选择！然后我会回到这里积极开发。

我可以问一下如何在选择时更改颜色，我希望它不展开而是显示外边框

如果我理解正确，请尝试摘录类似的内容（这非常hacky，我很抱歉）：

.theme-dark:not(.css-settings-manager) body:not(.is-grabbing) .tree-item-self.is-active:hover, 
.theme-dark:not(.css-settings-manager) .tree-item-self.is-active, 
.theme-light:not(.css-settings-manager) body:not(.is-grabbing) .tree-item-self.is-active:hover, 
.theme-light:not(.css-settings-manager) .tree-item-self.is-active, 
.ctp-full-palette body:not(.is-grabbing) .tree-item-self.is-active:hover, 
.ctp-full-palette .tree-item-self.is-active {
  color: rgb(205, 214, 244); /*ctp-text*/
  background-color: inherit;
  outline: solid 1px rgb(203, 166, 247); /*ctp-mauve*/
}

您将遇到缩进标记的问题。这种情况也会发生在默认主题中，但在使用 Catppuccin 颜色时会更加明显。

thank you very much. it is working !!!