Change css on footnotes in edit mode

[sebaseba]

I would like to change the css on my markdown footnotes syntax such that they appear greyed out in edit mode.

The usual syntax I use is:
a) [^id1]
b) [^id2]: Lorem ipsum.

I specifically want to address the appearance of part b in the text.
What is the “css-reference” (not sure how this is called) to this element.

one can change the appearance of level one headers with:

.markdown-preview-view h1 {
    font-size: 20px;
    line-height: 24px;
}

.cm-header-1 {
    font-size: 16pt;
}

I think I need “that” (similar references) to the css-object of those footnotes.
Can someone help me with that? (assuming that’s the way to do it.)

[Erisred]

@sebaseba - You’re looking for the “class name” of the objects you want to target for styling. Here’s a way that works for me:

.HyperMD-footnote, .cm-hmd-footnote {color:var(--text-muted);}

If you don’t like the color shown, change the var(--text-muted) part to any valid variable or color (hex, rgb, etc.) of your choice. The first bit (.HyperMD-footnote) is the class for the footnote text, the second (.cm-hmd-footnote) targets the part in brackets.

Also, I notice a lot of theme authors are overly liberal with the use if important flags, so you may need to add that if the above doesn’t work:

.HyperMD-footnote, .cm-hmd-footnote {color:var(--text-muted) !important;}
Try not to use the important flag unless it’s absolutely necessary. It makes future styling difficult

Hope that helps.

[sebaseba]

That is exactly what I need. Thank you!

How can I account for light and dark theme (using no external theme, but the “default” one, when you don’t select any theme)?

[Erisred]

@sebaseba

How can I account for light and dark theme

@sebaseba - That’s what the variables are for. The default themes each come with their own set of definitions, so the var(--text-muted) part will change with the theme.

If that’s still not faint enough, you can try var(--text-faint), or find another variable that works for you. There are a lot of them included you can try. There’s a forum post listing them all but I can’t find it ATM. If you need it, I’m sure a search will eventually locate it.

For example, in the default light theme, --text-faint will give:

…and in dark mode:

[sebaseba]

Thank you.