Custom Less causes issues

DaleZ

The issue

I added some code to Custom CSS in Admin Dashboard, the origin CSS code is:

background: padding-box linear-gradient(var(--button-bg), var(--button-bg)), border-box linear-gradient(#ffffff40 90%, #00000040 100%), border-box var(--button-bg);

Then in frontend it turns into:

background: padding-box linear-gradient(var(--button-bg), var(--button-bg)), border-box linear-gradient(#fff 40 90%, #000 40 100%), border-box var(--button-bg);

It's corrupted. I think the Less preprocessor may causes this problem.

Flarum information

~~But is that useful?~~

Flarum core: 1.8.1
PHP version: 8.2.8
MySQL version: 8.0.11

Sorry for forgetting type a correct title😞

clarkwinkelmann

DaleZ I'm not familiar with this issue, I wasn't even aware CSS allowed alpha in hex values (I assume that's what this is?)

Any reason not to use rgba? rgba(255,255,255,0.4)

DaleZ

clarkwinkelmann SychO Thanks for your advice! Because it's shorter, I prefer hex.
If hex doesn't work, I'll try rgba.
P.S.: alpha in hex really works.

DaleZ

Besides the way of SychO clarkwinkelmann provided, there're two another ways to solve the problem:

Use the fade() function.

Example: fade(#000, 24%) -> Return: rgba(0,0,0,0.24)

Use ~"content" to avoid parsing from Less.

Example: ~"#00000040" -> Return: #00000040

SychO

yea, CSS alpha hex values won't work, use the rgba format