Open d9k opened 9 months ago
My quiet-outline-plugin-mod.css
snippet (can be added in Obisidan options -> Appearance -> CSS snippets)
/** Headers color */
.quiet-outline .n-tree .n-tree-node.level-1 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-1 > .n-tree-node-content .n-tree-node-content__text a.tag {
color: var(--h1-color);
}
.quiet-outline .n-tree .n-tree-node.level-2 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-2 > .n-tree-node-content .n-tree-node-content__text a.tag{
color: var(--h2-color);
}
.quiet-outline .n-tree .n-tree-node.level-3 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-3 > .n-tree-node-content .n-tree-node-content__text a.tag{
color: var(--h3-color);
}
.quiet-outline .n-tree .n-tree-node.level-4 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-4 > .n-tree-node-content .n-tree-node-content__text a.tag{
color: var(--h4-color);
}
.quiet-outline .n-tree .n-tree-node.level-5 > .n-tree-node-content .n-tree-node-content__text,
.quiet-outline .n-tree .n-tree-node.level-5 > .n-tree-node-content .n-tree-node-content__text a.tag{
color: var(--h5-color);
}
/** Selected node */
.quiet-outline .n-tree-node.located {
background-color: #16332d;
}
.quiet-outline .n-tree-node.located p {
font-weight: 400;
}
.quiet-outline .n-tree-node.located p {
color: unset;
}
Also see my CSS snippet to fix headers style in Obsidian for reference:
Main feature is that code, tags and links inside headers are the same color as the header containing them.
My
quiet-outline-plugin-mod.css
snippet (can be added in Obisidan options -> Appearance -> CSS snippets)/** Headers color */ .quiet-outline .n-tree .n-tree-node.level-1 > .n-tree-node-content .n-tree-node-content__text, .quiet-outline .n-tree .n-tree-node.level-1 > .n-tree-node-content .n-tree-node-content__text a.tag { color: var(--h1-color); } .quiet-outline .n-tree .n-tree-node.level-2 > .n-tree-node-content .n-tree-node-content__text, .quiet-outline .n-tree .n-tree-node.level-2 > .n-tree-node-content .n-tree-node-content__text a.tag{ color: var(--h2-color); } .quiet-outline .n-tree .n-tree-node.level-3 > .n-tree-node-content .n-tree-node-content__text, .quiet-outline .n-tree .n-tree-node.level-3 > .n-tree-node-content .n-tree-node-content__text a.tag{ color: var(--h3-color); } .quiet-outline .n-tree .n-tree-node.level-4 > .n-tree-node-content .n-tree-node-content__text, .quiet-outline .n-tree .n-tree-node.level-4 > .n-tree-node-content .n-tree-node-content__text a.tag{ color: var(--h4-color); } .quiet-outline .n-tree .n-tree-node.level-5 > .n-tree-node-content .n-tree-node-content__text, .quiet-outline .n-tree .n-tree-node.level-5 > .n-tree-node-content .n-tree-node-content__text a.tag{ color: var(--h5-color); } /** Selected node */ .quiet-outline .n-tree-node.located { background-color: #16332d; } .quiet-outline .n-tree-node.located p { font-weight: 400; } .quiet-outline .n-tree-node.located p { color: unset; }
Thanks, it works well.
Please add option to apply headers colors from theme (
--h1-color
,--h2-color
, ...etc)It's much easier to see current level and navigate:
Also selected header font weight must not differ from font weight of non-selected items. Because different font weight of selected item forces quiet outline tree markup to "jump" back and forth on scrolling: 1-line item sometimes becomes 2-lines item on different font weight