How does whiteboard CSS work?

Questions & Help
,
1

I already have some CSS for adjusting individual images, that (normally) works, but it does not work in the context of the whiteboard. Using the inspector doesn’t really enlighten me as to why – the ‘image in a whiteboard item’ still seems to be an img inside a div inside a content.
I created the item by pasting basic Markdown like !(12345)[/home/me/images/some_image.png]{:height 128, :width 256} with Ctrl+V in Cursor mode, if it matters.

Here is some very basic CSS that is an example of what I’m talking about:

:root {
   --red: #ff5555;
}

.content div[data-refs-self*='".bg-red-500"']  {
  background-color: var(--red);
}

Outside of whiteboard, I can apply this in what, AFAICS, is a common way, by just writing #.bg-red-500 in the content of a block.

This particular rule is not what I want to use for images (although I have tried it, for testing’s sake)
The rule I am currently trying to use is:

.content div[data-refs-self*='".darkc1"'] img {
  filter: brightness(80%) contrast(130%);
}

It seems to me there are two possible explanations:

  • the styling is possible, but I am not using the correct selectors
  • the styling is not possible because the data-refs-self* rule does not work in whiteboard items (which I guess would probably be a bug). Maybe there is an alternate rule which could work.

Anyone have an idea what is actually going on here?