Hi good afternoon everyone. I am using the following snippet to add a header level next to the headers in my notes:
/*reading*/
:is(h1) {
position: relative;
&::before {
--indicator-offset: 18px;
--indicator-alignment: center;
content: var(--indicator);
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: var(--indicator-alignment);
color: var(--text-faint);
/*font-size: var(--font-text-size);*/
font-size: var(--font-text-size);
font-size: 12px;
translate: calc(-100% - var(--indicator-offset)) 0;
}
}
:is(h2, h3) {
position: relative;
&::before {
--indicator-offset: 17px;
--indicator-alignment: center;
content: var(--indicator);
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: var(--indicator-alignment);
color: var(--text-faint);
/*font-size: var(--font-text-size);*/
font-size: var(--font-text-size);
font-size: 12px;
translate: calc(-100% - var(--indicator-offset)) 0;
}
}
:is(h4, h5, h6){
position: relative;
&::before {
--indicator-offset: 15px;
--indicator-alignment: center;
content: var(--indicator);
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: var(--indicator-alignment);
color: var(--text-faint);
/*font-size: var(--font-text-size);*/
font-size: var(--font-text-size);
font-size: 12px;
translate: calc(-100% - var(--indicator-offset)) 0;
}
}
/*editing*/
.HyperMD-header {
position: relative;
&::before {
--indicator-alignment: center;
content: var(--indicator);
position: absolute;
top: 16px;
bottom: 0;
display: flex;
align-items: var(--indicator-alignment);
color: var(--text-faint);
/*font-size: var(--font-text-size);*/
font-size: 12px;
translate: calc(-100% - var(--indicator-offset)) 0;
}
}
:is(.HyperMD-header-1, h1) {
--indicator-offset: 15px;
--indicator: "H1 ";
}
:is(.HyperMD-header-2, h2) {
--indicator-offset: 14px;
--indicator: "H2 ";
}
:is(.HyperMD-header-3, h3) {
--indicator-offset: 14px;
--indicator: "H3 ";
}
:is(.HyperMD-header-4, h4) {
--indicator-offset: 12px;
--indicator: "H4 ";
}
:is(.HyperMD-header-5, h5) {
--indicator-offset: 12px;
--indicator: "H5 ";
}
:is(.HyperMD-header-6, h6) {
--indicator-offset: 12px;
--indicator: "H6 ";
}
This is how it looks:
However I encountered the following issue: The snippet also targets UI elements from obsidian e.g.
And even in canvas cards (which is very annoying since only half of the header level is visible):
Is there any way to make this snippet only target headers inside actual notes (without having to use a helper class).
Thanks in advance for any help