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;
}
Live Preview | Reading view
I recommend this topic https://forum.obsidian.md/t/obsidian-css-inspector-workflow/58178 on using the inspector for finding the correct classes of different elements.