Custom styling white appears transparent in nested divs (all other colours work)

[Thorned_Rose]

What I’m trying to do

I have a vault for running a TTRPG game. I wanted Fantasy Statblock style callouts but using pure markdown with CSS styling. So I started by creating a custom callout that embeds the creature note within it:

> [!statbox]
> ![[Acid Burrower]]

That works all fine. I am able to customise how it’s rendered with CSS all fine. The issue is with a specific part of the embedded note. The note itself also contains a custom callout which I named “corestats”. It has most of everything stripped out of it so it’s fairly plain text. Again, this works.

The but is that the nested call out cannot have a white background. Literally any other colour will work. But as soon as I try to set it to white, it shows as transparent (shows the background colour of the callout it’s nested within) :

(Please excuse the double up text in the call outs and some nonsense stuff in the CSS snippet, WIP and I’m only using these notes as tests).

Things I have tried

I have tried using rgba colour instead. Same result, background-color: rgba(255,255,255,1) !important; will not display but background-color: rgba(100,250,200,1) !important; will (or almost* any other colour that ISN’T white).

For example, if I do

.callout[data-callout="statbox"] .callout[data-callout="corestats"] {
	background-color: #F0A !important;
	opacity: 1 !important;
}

I get:

It’s just white that appears as transparent. And I have no idea why.

I tried a variety of colours - #FFFFFE also appears transparent. So does #FFFFEE, #FFFEEE, #FFEEEE and #FEEEEE but #EEEEEE displays the correct colour. As does #EFFFFF.

It’s so weird, it’s like if the colour is similar to white, but not quite (hex code starts with an ‘F’) it will display transparent, but other light colours display fine.

Anyone know why this is happening and how I can fix it? Thanks!

[ariehen]

Without having the full css for both callouts to look at, as well as knowing your theme and other settings, etc., this is just a guess, but you could be running into the mix-blend-mode that’s set by default for callouts.

Give something like this a try to see how it goes:

.callout[data-callout="statbox"] {
    background-color: moccasin; 
}

.callout[data-callout="corestats"] {
    background-color: orange; 
}

.callout[data-callout="statbox"] .callout[data-callout="corestats"] {
    background-color: #fff;
    mix-blend-mode: normal; 
}

With mix-blend-mode: normal in the snippet,

without it:

---

If you wanted to set this globally for all callouts, you could use

body {
    --callout-blend-mode: normal; 
}

[Thorned_Rose]

@ariehen

mix-blend-mode: normal

Amazing, THANK YOU so much! Been tearing my hair out on this for much of the day. That’s exactly it!
Here’s the result:

And sorry, I realise I forgot to say that I am using Obsidian’s Default, Light theme.

Just in case this is useful for anyone else coming across this thread, here’s the full (WIP) CSS:

.markdown-source-view.is-live-preview,
.markdown-reading-view {

	.callout[data-callout="statbox"] {
		padding: 0;
		background-color: #f4efe7;
		border: 2px solid #8c7233;
		corner-shape: bevel;
		border-radius: 6px;
		box-shadow: none;
		margin: 0;
		margin-left: 0.5em;
		width: auto;
		min-width: 15vw;
		max-width: 21vw !important;
		float: right !important;
	}

	.callout[data-callout="statbox"] .callout-title :is(.callout-icon, .callout-title-inner) {
		display: none;
	}

	.callout[data-callout="statbox"] .callout-content {
		padding: 0.5em;
		margin: 0;
	}

	.callout[data-callout="statbox"] .markdown-embed {
		border-inline-start: unset; //Get rid of the left border
	}

	.callout[data-callout="statbox"] .embed-title {
		font-family: Eveleth Clean Regular;
		font-size: unset;
		font-size: 125%;
		text-transform: uppercase;
		text-align: left;
		margin: 0;
		padding: 2px;
	}

	.callout[data-callout="statbox"] .markdown-embed-content {
		padding: 0.75em;
	}

	.callout[data-callout="statbox"] :is(h1, h2, h3, h4, h5, h6) {
		font-family: Questa Sans;
		font-weight: bold;
		font-size: unset;
		font-size: 125%;
		text-transform: uppercase;
		text-align: left;
		margin: 0;
		padding: 2px;
	}

	.callout[data-callout="statbox"] p {
		text-align: left;
	}

	.callout[data-callout="statbox"] .internal-embed, .callout[data-callout="statbox"] img {
		margin: auto;
		padding: auto;
		text-align: center;
	}

	@media print {
		.callout[data-callout="statbox"] {
			max-width: 400px;
		}
	}

/* The corestats formatting */

	.callout[data-callout="corestats"] {
		background: #FFF;
		opacity: 1;
		border-top: 2px solid #8c7233;
		border-bottom: 2px solid #8c7233;
		border-radius:0;
		padding: 0;
	}

	.callout[data-callout="corestats"] .callout-title :is(.callout-icon, .callout-title-inner) {
		display: none;
	}

	.callout[data-callout="corestats"] p {
		margin: 0.25em;
		padding: 0 1em 0 1em;
	}

	.callout[data-callout="corestats"] hr {
		border-top: 2px dotted #8c7233;
		margin:0;
	}
/* Alter the padding when it's nested within a statbox */
	.callout[data-callout="statbox"] .callout[data-callout="corestats"] p {
		padding: 0;
	}

	.callout[data-callout="statbox"] .callout[data-callout="corestats"] {
		background-color: #FFFFFF !important;
		opacity: 1 !important;
		mix-blend-mode: normal;
	}

}

Credit to SlRvb - This snippet started out life as part of the ITS Theme many moons ago: Obsidian--ITS-Theme/Snippets/S - Callouts.css at main · SlRvb/Obsidian--ITS-Theme · GitHub

(Just bear in mind that a number of things, like the fonts, I have hard coded because I just use this on my system and I’m not worried about making it compatible or flexible.)