Has anything changed? My custom CSS isn't working as it did a couple days ago

[fccfc5d245c]

For instance, I had the text of the articles set to blue using the system font, I haven't touched the CSS (and I have disabled all extensions), and now it's grey and uses a different font. My code is an amateurish hack, but it worked. Any idea of what happened or how to fix it?

I'm attaching the before and after screenshots (lucky for me, I made a screenshot to show Commafeed to a friend to explain to him what RSS is and why he should use it):

And my custom CSS:

/* COLOURS */
:root {
    --mast-in-base: rgb(6,0,17);
    --mast-in-primary: rgb(82,201,255);
    --mast-in-secondary: rgb(255,97,0);
    --mast-in-highlight: rgb(239,192,27);
    --mast-in-shadow: #340054;
    --fondo-plano: rgb(6,0,17); /* mismo que mast-in-base */
}

:root {
    --mast-base-color: var(--mast-in-base);
    --mast-primary-color: var(--mast-in-primary);
    --mast-secondary-color: var(--mast-in-secondary);
    --mast-shadow-color: var(--mast-in-shadow);
    --mast-highlight-color: var(--mast-in-highlight);
    --fondo-planoo: var(--fondo-plano);
}

/* TOP BAR */
/* Background */
.right-scroll-bar-position > div > .mantine-Group-root {
    background-color: var(--mast-in-base);
}
/* Logo */
.mantine-Center-root .mantine-Title-root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--mast-in-highlight);
    /*background-color: black;*/
    font-size: 14px;
    text-align: center;
}
/* button + */
.mantine-Group-root .mantine-Group-root .mantine-ActionIcon-icon path {
    color: var(--mast-in-highlight);
}
/* buttons, text*/
.mantine-Center-root .mantine-Group-root > .mantine-UnstyledButton-root .mantine-Button-label {
    color: var(--mast-in-highlight);
}
/* buttons, icon */
.mantine-Center-root .mantine-Group-root > .mantine-UnstyledButton-root path {
    color: var(--mast-in-primary);
}

/* LEFT PANEL */
.mantine-AppShell-navbar {
background-color: var(--mast-in-base);
-webkit-text-fill-color: var(--mast-in-highlight);
text-align: left;
text-decoration-color: var(--mast-in-primary);
text-decoration: none;
/* search bar */
.mantine-TextInput-input {
font-family: system-ui;
text-transform: uppercase;
-webkit-text-fill-color: var(--mast-in-base);
text-decoration-color: var(--mast-in-base);
text-decoration: none;
font-size: 20px;
background-color: var(--mast-in-highlight);
}
/*loupe icon*/
.mantine-TextInput-section path {
    color: var(--mast-in-base);
}
/* float: right; */
/* display: grid; */
/* padding: 14px 16px; */
}

/* FLOATING SEARCH PANEL */
.mantine-Spotlight-search {
font-family: system-ui;
text-transform: uppercase;
-webkit-text-fill-color: var(--mast-in-base);
text-decoration-color: var(--mast-in-base);
text-decoration: none;
font-size: 20px;
background-color: var(--mast-in-highlight);
}


/* READING PANEL */
/* section */
.mantine-Title-root {
    color: var(--mast-in-highlight);
}
body {
background-color: var(--mast-in-base); /* funciona */
color: var(--mast-in-primary); /* funciona */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* funciona */
font-size: 20px; /* funciona */
}
/* BUTTONS*/
/* edit button*/
.mantine-AppShell-main .mantine-Group-root path {
    color: var(--mast-in-highlight);
}
/* text buttons */
.mantine-Paper-root > div > .mantine-Group-root > .mantine-UnstyledButton-root .mantine-Button-label {
    color: var(--mast-in-highlight);
}
.mantine-Button-label {
    color: var(--mast-in-highlight);
}
/* icon buttons */
.mantine-Button-section path {
    color: var(--mast-in-highlight);
}


/* WTF is this? */
.spinner {
padding:0 16px 0 0;
}
# feed-accordion .entry-buttons {
margin-top: 10px;
}
# feed-accordion .entry-body-content {
max-width: 1360px;
}
.entry-body img {
margin-bottom: 15px !important;
margin: 0 auto;
}

[Athou]

I don't think I changed anything UI related recently, but I see you rely a lot on Mantine classes. Mantine is the component library CommaFeed is using and is updated very frequently. I don't have control over the classes it adds to the components. Could it be that?

In any case, if you need me to add CSS classes to components to ease CSS customization, let me know which ones.

[fccfc5d245c]

That might be it, yes. And I'd really appreciate if you made customization easier, but I'd feel bad asking you to work on something that will only benefit me :)

I relied on Mantine classes because that's what I know and it seemed to work, but if you point me in the general direction of a better alternative, I'll learn how to make it work. Thank you!