SOLVED: Footnote highlight color cannot be changed anymore

Basement
1

In Preview, when one clicks on a footnote link the cursor jumps to the text at the bottom of the page where the footnote’s text is, AND highlights the footnote for a brief moment. Then, when one clicks on the little return arrow, one is taken back to the original position in the text above, AND that position is briefly highlighted. The default highlight color is yellow.

I have used this code successfully, until 0.9.13:

.markdown-preview-view .mod-highlighted {
  color: var(--base3);
  background-color: var(--base4);
}

Now, the default color seems to be unalaterable.

2

I don’t have a quick way of testing this, but I think you should be able to add !important to your styling to override other styles. Like this:

.markdown-preview-view .mod-highlighted {
  color: var(--base3) !important;
  background-color: var(--base4) !important;
}
3

@ryanjamurphy: thanks for the suggestion. Unfortunately, it did not do anything.

Someone else had this problem too - cannot remember who it was - so I thought it was a bug. After filing a bug report WhiteNoise told me I should put this in the Help section.

I don’t know how it can be established if this is a bug, but it seems it cannot be solved this way.

4

@Klaas
Target with .is-flashing like so:

.is-flashing {
  color: var(--base3);
  background-color: var(--base4);
}

The !important tag is not necessary here.
This also assumes you are defining the variables somewhere. I don’t think those are part of core.

1 Like
5

@Erisred: thanks for your feedback !! Late yesterday I proudly found (:muscle:) that solution in the dev tools too, but I have another issue with that. BTW, as you may have guessed, I am a newbie at CSS.

Anyway, this is how I need to have it set up this way:

.footnotes {
  font-size: small;
}

.is-flashing {
  transition: background-color 1s ease;
  background-color: orange;
}

.footnotes {
  font-size: small;
}

.is-flashing allows me to set the color, but …… I also need both font-size blocks.

Without the 1st font-size block the custom color code does not work.
Without the 2nd font-size block the footnote font-size goes to default.

Why do I need the 2 identical font-size code blocks? How can can I fix this?

6

Hmm. You shouldn’t need the two identical declarations. Is there a way to describe what you’re hoping to achieve?

7

@ryanjamurphy: with the “flashing” code I have changed the color of the highlight when one clicks on a footnote superscript (or on the little return arrow), and with the .footnotes code I just want to change the font-size.

I agree I should not need those 2 declarations, but if I don’t have 1 of them my objectives are not achieved. In other words, with 1 of the ‘.footnotes’ declarations either the font-size works, or the highlight color works, but not both.

I even thought it might be the “flashing” code because I copied it directly from the dev tools to my CSS sheet. But I also deleted that code from my CSS and copy/pasted it from a plain text editor. Makes no difference.

1 Like
8

Thanks for posting this just before I went to bed. I think I dreamed in css all night :stuck_out_tongue:

I tried your code on an empty .css file, and did NOT need to declare the font size twice. Once was enough, and it worked both before and after the flash color.
There must be something messing with your footnotes.

Things you might try:

  1. If font: small isn’t deprecated, it probably should be. Try setting your font size explicitly, as in font-size: 12px; or font-size: 80%; - perhaps this is enough to override whatever is causing the issue.
  2. Adjust the individual elements in the footnotes one at a time. Perhaps the global .footnotes class is your problem. Here’s what my footnotes look like right now:
.footnotes-list {font-size:12px;}
.markdown-preview-section .footnotes {font-size: 80%;font-family:var(--font-monospace);}
.footnotes p {margin-top: 0px;margin-bottom:5px;}

…and how they look (preview on left):

image
image1580×756 169 KB

I don’t much care for the monospace font here, but it hasn’t bothered me enough to change it yet :slight_smile:

I do know from these forums that you’re aiming for WYSIWYM, and this breaks that. But if it works, then we’ve at least learned something and have an approach at a fix. Let me know how it goes!

2 Likes
9

@Erisred: your suggestions for my funny .footnotes snippets I needed in duplicate did not work. So I commented them out and added your last snippet. And that, in combination with the earlier one, works fine for what I want !

Just out of curiosity: in your last code snippet you have used font-size twice.

  1. What is the difference?
  2. Why do you use px for one and % for the other?
1 Like
10

@Klaas
.footnotes-list targets the editor, and .markdown-preview-section .footnotes targets preview.
I don’t use footnotes often, so I haven’t settled on a final theme yet.

I made a small discovery. If you’d like to style them in tandem, use this:

.markdown-preview-section .footnotes, pre.HyperMD-footnote.CodeMirror-line {
  font-size: 12px;
  font-family: var(--font-monospace);
}

Again, .markdown-preview-section .footnotes targets preview
and pre.HyperMD-footnote.CodeMirror-line targets editor
I would change my first snips to these as well, since they target the elements more explicitly, so less chance of deprecation or crossover code from other things.

If you use a font-size, they will be the same. Or, use a % to scale them similarly, although they start at different sizes in core. You’d need to play with margins and padding if you want them identical.

2 Likes
11

Ah, that does not apply to me because I use inline footnotes because I don’t need to worry about numbering. I use footnotes a lot, and I found that when I use conventional ones, and I add new ones in between, the numbering between Edit and Preview is off, therefore confusing.

Thanks a lot for your explanation and patience.

2 Likes