Trying to css-format footnotes (in the text, the number of footnote-list and the footnote text).
Things I have tried
The footnote-Text responds to the code, the other 2 not:
/* Stil für den Fußnoten-Text */
.HyperMD-footnote {
color: green;
font-weight: bold;
font-size: 0.9em;
}
/* Stil für die Fußnotennummer im Text */
.footnote {
color: orange;
font-weight: bold;
font-size: 0.9em;
}
/* Stil für die Fußnotennummer in der Fußnotenliste */
.markdown-preview-view .footnote-list > li {
color: orange;
font-weight: bold;
font-size: 1em;
}
I tried too:
.markdown-preview-view .footnote-list{}
.markdown-preview-view .footnote-list > li {}
Is .footnote-list something coming from a community theme? It’s not in the default css.
Here are some options to play around with. These don’t cover everything (hover states, cursor in the footnote reference, etc.) but should get you started.
/* editor and reading view footnote reference in text */
a.footnote-link,
.cm-s-obsidian span.cm-footref.cm-hmd-barelink,
.cm-s-obsidian span.cm-footref.cm-hmd-barelink.cm-formatting {
color: salmon;
}
/* live preview footnote '[^1]:' color */
.cm-s-obsidian .cm-line.HyperMD-footnote span.cm-hmd-footnote .cm-underline {
color: blue;
}
/* editor and reading view footnote text */
.footnotes,
.cm-s-obsidian .cm-line.HyperMD-footnote {
color: olive;
font-weight: bold;
font-size: 0.9em;
}
/* reading view footnote list marker */
.footnotes ol > li::marker {
color: orange;
font-weight: bold;
font-size: 1em;
}
