Stat cards custom font colors

[aowdnmp]

Hello, i'm new to budibase and now experimenting. I've created some stat cards that by default have the value shown in blue.
I thought with custom css I was able to oveeride font color for some values that needs to be highlighted in red, for example.
Inspecting the code I found the right names but I'm not able to replace the color with a custom one. Someone knows the correct way to do this? Thanks

.value.svelte-13s6ero {
font-size: 2rem;
font-weight: 600;
margin: 0 1.5rem 1.5rem 1.5rem;
color: var(--spectrum-link-primary-m-text-color);
white-space: pre-wrap;
}

[ConorWebb96]

Hey @aowdnmp,

For this, you'll likely have to use the embed component above your stat card in your component tree. I've attached a screenshot below of this.

The code used inside the embed component looks like the one below.

<style>
.value{
  font-size: 5rem!important;
  font-weight: 600;
  margin: 0 1.5rem 1.5rem 1.5rem;
  color: var(--spectrum-link-primary-m-text-color);
  white-space: pre-wrap;
}
</style>

Make sure to add !important at the end; this will ensure that it overrides the base stylings.

I hope this helps.

[aowdnmp]

Thanks for the swift reply: if I add this everything seems changing, is the a way to change only a single card value inside a page where there are tables and other cards? I put a screen to better explain myself, circled one should be in red:

[ConorWebb96]

Hey @aowdnmp,

I wasn't sure what your structure was, but I've created an example using nth: (child CSS properties).

I am using a repeater for my example. Below is the code; I renamed the repeater to testing test that's how I'm targeting that component specifically.

<style>
.component[data-name="testing test"] .flex-container .component:first-child h3.value {
  background-color: black!important;
}
</style>

[aowdnmp]

Stat Cards have their own "Edit Custom CSS" button in the styles tab. What I'm not able to do is to use its custom css to change just the text color of the value field from blue to red. What am I missing? I would not want to create other layers of other components when there is its own custom css option. With some other components the color of the value will change correctly, with stat cards not. Just asking why custom css in stat card is not working as for other components and if there is a specific syntax to take into account to make custom css working with stat cards. I tried both with text and js but nothing seems overriding their default values...
Thanks!