wrong use of "category" in all your Styles on https://userstyles.world/

[paponius]

wrong use of "category" in all your Styles on https://userstyles.world/

[Siriusmart]

ty for telling me that, i will change it once i got home

[Siriusmart]

done, ty again

[paponius]

yes,
now while doing inline search in Stylus on the bbc website, you can find for year 2024 only 5 Styles.
Four are yours and one weird one by some paponius.

There is another thing to consider.
Outside of the UK, bbc.co.uk is redirected to bbc.com, and vice-versa.

I checked what your style would do on .COM,
BBC seems to use a fairly similar and CSS compatible HTML layout, except for the home page, www.bbc.com/.

Your style is hiding pictures there.
This is because they use semi transparent text elements over the <img>.
And following rule will fill them up with solid BG color.

* {
    ...
    background: var(--crust) !important;
    ...
}

I tried to change it to:

:not(.media--overlay *) {
    ...
    background: var(--crust) !important;
    ...
}

which would seem to be a good start,
But now the BBC logo is weird. I don't really see why.
I gave up too quickly, Sorry.

[Siriusmart]

Can you confirm whether removing the last block header svg { would fix the issue or not?

I didn't know why I added that block, it might've been an issue before but it seems like it is no longer needed.

As for the bbc.com thing, it could be solved by regex https://www\.bbc\.co.uk/.*|https://www\.bbc\.com/.*, my system does not support VPNs, so can you just decide whether the last block should be removed?

I'm just to lazy to get a VPN working.

[paponius]

I looked at it again,

header svg is there to invert colors of "B B C" blocks. (logo)
It's sometimes black, when color is inverted from: fill: #fff; or yellowish, which is from inverting color: var(--text).
btw. invert(100) is not correct (it's auto-fixed to 1). You can use invert(1) or invert(100%).

Problem of the logo discoloring

Before changing "*" selector, this are CSS on the BBC logo <svg> element:
(~~ marks overridden rule ~~)

header svg {
  background: transparent !important;
  filter: invert(100) brightness(500%);
}
* {
  border-color: var(--translucent-pink) !important;
  color: var(--text) !important;
 ~~background: var(--crust) !important;~~
 ~~background-image: none !important;~~
  text-decoration-color: var(--blue) !important;
}

background: for svg is used from header svg {} ruleset
It is set to transparent and so inverting it does not change the background color of <svg>

But when you add :not() to "*" as I proposed, the selector will be more specific and its rules will be overriding the svg ruleset:
(it jumps up in devtools)

:not(.media--overlay *) {
  ...
  background: var(--crust) !important;
  background-image: none !important;
}
...
header svg {
  ~~background: transparent !important;~~
  filter: invert(100) brightness(500%);
}

background here is set to var(--crust) and inverted. Which looks bad.

Another horrible hack on hack would be to add more specificity to the svg selector:

header svg:not(.huhu .haha) {
  background: transparent !important;
  filter: invert(100) brightness(500%);
}
:not(.media--overlay *) {
  border-color: var(--translucent-pink) !important;
  color: var(--text) !important;
  ~~background: var(--crust) !important;~~
  ~~background-image: none !important;~~
  text-decoration-color: var(--blue) !important;
}

which works. It will have to be longer each time you add one more :not() to the global "*" rule.

more

The selector :not(.media--overlay *) was only a start. It did not cover all cases.
In the gist I am sending below you'll find more to cover all currently used cases. It does work for current home page. but that might change.

On .com homepage, there are some dark texts. I did not fix that.

Also a headline on both .co.uk and .com: https://www.bbc.co.uk/news/av/uk-68408516
The same problem, this div is covering the text: .ssrcss-lu5ura-PinnableItem

This is saved .com page. Open it in browser and use the Style from gist I am sending on it.
BBC - Homepage (28_02_2024 19_54_37).zip

try to avoid regex where other solutions exist:
@-moz-document domain("bbc.co.uk"), domain("bbc.com") {...}

https://gist.github.com/paponius/1d76e8bd88ff4ce717916c48c61996ae

Can you confirm whether removing the last block header svg { would fix the issue or not?

I didn't know why I added that block, it might've been an issue before but it seems like it is no longer needed.

As for the bbc.com thing, it could be solved by regex https://www\.bbc\.co.uk/.*|https://www\.bbc\.com/.*, my system does not support VPNs, so can you just decide whether the last block should be removed?

I'm just to lazy to get a VPN working.

[Siriusmart]

try out

:root {
    --rosewater: #f5e0dc;
    --flamingo: #f2cdcd;
    --pink: #f5c2e7;
    --mauve: #cba6f7;
    --red: #f38ba8;
    --maroon: #eba0ac;
    --peach: #fab387;
    --yellow: #f9e2af;
    --green: #a6e3a1;
    --teal: #94e2d5;
    --sky: #89dceb;
    --sapphire: #74c7ec;
    --blue: #89b4fa;
    --lavender: #b4befe;
    --text: #cdd6f4;
    --subtext1: #bac2de;
    --subtext0: #a6adc8;
    --overlay2: #9399b2;
    --overlay1: #7f849c;
    --overlay0: #6c7086;
    --surface2: #585b70;
    --surface1: #45475a;
    --surface0: #313244;
    --base: #1e1e2e;
    --mantle: #181825;
    --crust: #11111b;

    --translucent-rosewater: rgba(245, 224, 220, 0.8);
    --translucent-flamingo: rgba(242, 205, 205, 0.8);
    --translucent-pink: rgba(245, 194, 231, 0.8);
    --translucent-mauve: rgba(203, 166, 247, 0.8);
    --translucent-red: rgba(243, 139, 168, 0.8);
    --translucent-maroon: rgba(235, 160, 172, 0.8);
    --translucent-peach: rgba(250, 179, 135, 0.8);
    --translucent-yellow: rgba(249, 226, 175, 0.8);
    --translucent-green: rgba(166, 227, 161, 0.8);
    --translucent-teal: rgba(148, 226, 213, 0.8);
    --translucent-sky: rgba(137, 220, 235, 0.8);
    --translucent-sapphire: rgba(116, 199, 236, 0.8);
    --translucent-blue: rgba(137, 180, 250, 0.8);
    --translucent-lavender: rgba(180, 190, 254, 0.8);
    --translucent-text: rgba(205, 214, 244, 0.8);
    --translucent-subtext1: rgba(186, 194, 222, 0.8);
    --translucent-subtext0: rgba(166, 173, 200, 0.8);
    --translucent-overlay2: rgba(147, 153, 178, 0.8);
    --translucent-overlay1: rgba(127, 132, 156, 0.8);
    --translucent-overlay0: rgba(108, 112, 134, 0.8);
    --translucent-surface2: rgba(88, 91, 112, 0.8);
    --translucent-surface1: rgba(69, 71, 90, 0.8);
    --translucent-surface0: rgba(49, 50, 68, 0.8);
    --translucent-base: rgba(30, 30, 46, 0.8);
    --translucent-mantle: rgba(24, 24, 37, 0.8);
    --translucent-crust: rgba(17, 17, 27, 0.8);

    --barelyvisible-rosewater: rgba(245, 224, 220, 0.1);
    --barelyvisible-flamingo: rgba(242, 205, 205, 0.1);
    --barelyvisible-pink: rgba(245, 194, 231, 0.1);
    --barelyvisible-mauve: rgba(203, 166, 247, 0.1);
    --barelyvisible-red: rgba(243, 139, 168, 0.1);
    --barelyvisible-maroon: rgba(235, 160, 172, 0.1);
    --barelyvisible-peach: rgba(250, 179, 135, 0.1);
    --barelyvisible-yellow: rgba(249, 226, 175, 0.1);
    --barelyvisible-green: rgba(166, 227, 161, 0.1);
    --barelyvisible-teal: rgba(148, 226, 213, 0.1);
    --barelyvisible-sky: rgba(137, 220, 235, 0.1);
    --barelyvisible-sapphire: rgba(116, 199, 236, 0.1);
    --barelyvisible-blue: rgba(137, 180, 250, 0.1);
    --barelyvisible-lavender: rgba(180, 190, 254, 0.1);
    --barelyvisible-text: rgba(205, 214, 244, 0.1);
    --barelyvisible-subtext1: rgba(186, 194, 222, 0.1);
    --barelyvisible-subtext0: rgba(166, 173, 200, 0.1);
    --barelyvisible-overlay2: rgba(147, 153, 178, 0.1);
    --barelyvisible-overlay1: rgba(127, 132, 156, 0.1);
    --barelyvisible-overlay0: rgba(108, 112, 134, 0.1);
    --barelyvisible-surface2: rgba(88, 91, 112, 0.1);
    --barelyvisible-surface1: rgba(69, 71, 90, 0.1);
    --barelyvisible-surface0: rgba(49, 50, 68, 0.1);
    --barelyvisible-base: rgba(30, 30, 46, 0.1);
    --barelyvisible-mantle: rgba(24, 24, 37, 0.1);
    --barelyvisible-crust: rgba(17, 17, 27, 0.1);
}

/* background */
* {
    border-color: var(--translucent-pink) !important;
    color: var(--text) !important;
    background-image: none !important;
    background-color: transparent !important;
    text-decoration-color: var(--blue) !important;
}

body, .lx-card-format .lx-page .lx-o-panel-is-commentary, .lx-card-format .lx-page .lx-o-panel--primary {
    background-color: var(--crust) !important;
}

.media a {
    text-shadow: -1px -1px 0 var(--surface0), 1px -1px 0 var(--surface0), -1px 1px 0 var(--surface0), 1px 1px 0 var(--surface0);
}

.reel--background {
    display: none;
}

img, input, button {
    border-radius: 20px !important;
}

button {
    margin-left: 10px;
}

a:hover {
    color: var(--yellow) !important;
}

*::after:not(button),
*::before:not(button) {
    filter: invert(42%) sepia(93%) saturate(100%) hue-rotate(4deg) brightness(150%) contrast(119%);
}

header svg:not(#brand svg) {
    background: transparent !important;
    filter: invert(100) brightness(500%);
}

[Siriusmart]

The site you provided looks right with this css, but it is impossible for me to make sure if all elements are right. Please confirm if that's true

Since it is not possible for me to maintain the bbc.com styles, so if you can, just contribute a pull request when u fix css on-the-fly or open an issue with the site file attached so I can fix it.

I've got a systematically lazy way to fix these css issues, it called selecting the entire path (such as .lx-card-format .lx-page .lx-o-panel-is-commentary) and use !important to overwrite everything, so in case you would like to fix the css urself, thats how you can do it

[paponius]

Yes, the .com looks fine with the provided code.

It's better than the :not() string I proposed before.
There is also the double override way, instead of *:not(...), place the exceptions below it. Which would also be better, than a lot of :not() selectors.

I don't actually use or recommend neither. I use completely different approach, I don't even use !important, as I like to mix multiple Styles, or even have a "Sub Style".

If you want to check it, look inside any other of my Styles than the BBC or The Guardian, as they use random class names which complicates things.

I can check from time to time if your Style works OK on the BBC.com home page, but I use news aggregator and open articles directly and of course use my own Style for daily readings. But you can also ask me here and I'll check.