Hoe CSS juist niet toe te passen

[Chip.]

Mijn vraag
Hoe zorg je ervoor dat op bepaalde CSS eigenschappen van html elementen binnen een tag juist niet toegepast worden?

Ik heb de onderstaande custom CSS op Tweakers. En deze laat alles eigenlijk goed zien. Echter wanneer ik een video, bijvoorbeeld bij reviews: OnePlus 8 en 8 Pro - Wie veel inzet, speelt hoog spel, op volledig scherm laat afspelen invert hij ook van deze video de kleuren. Bij standard formaat doet hij dit niet.

Hoe zorg ik ervoor dat wanneer de youtube video op volledig scherm afgespeeld wordt de CSS niet wordt toegepast?

code:

html,
img,
#menubar,
#tracker,
.ankeiler .title,
.ankeiler .meta,
iframe,
.popup,
.scoreButton,
#heroBlock,
#bottom {
    filter: invert(95%)hue-rotate(180deg);
}

:not(html5-video-player) {}

iframe[id*="datawrapper"] {
    filter: hue-rotate(180deg);
}

body {
    background: #343535;
}

#heroBlock {
    opacity: 0.5;
}

.scoreButton {
    opacity: 0.8
}

body div.fpAnkeiler {
    background-color: #d5e5f9;
}

#bottom div.hr {
    background-color: #343535;
}

Normaal;


Geinverteerde kleuren bij fullscreen:

[ Voor 23% gewijzigd door Chip. op 04-05-2020 22:51 ]

[Hahn]

Misschien dat je met :not iets kunt. Maar heb je een screenshot van je veranderingen in actie? Dat praat nog wat makkelijker.

[Chip.]

Hahn schreef op maandag 4 mei 2020 @ 21:47:
Misschien dat je met :not iets kunt. Maar heb je een screenshot van je veranderingen in actie? Dat praat nog wat makkelijker.

Heb twee plaatjes toegevoegd. Normaal worden de kleuren niet geinverteerd, wat dus de bedoeling is. Bij fullscreen gebeurd dit wel.

Ja heb naar ":not" gekeken alleen nog niet gelukt om dit correct toe te passen. Wanneer ik het doe op een van de classes van de video; html5-video-player ytp-exp-marker-tooltip ytp-dni ytp-embed ytp-embed-playlist ytp-title-enable-channel-logo ytp-large-width-mode ad-created paused-mode ytp-expand-pause-overlay ytp-fullscreen ytp-big-mode

[ Voor 9% gewijzigd door Chip. op 04-05-2020 22:54 ]

[Hahn]

Je probeert Tweakers dus een dark theme te geven door kleuren te inverten? Waarschijnlijk is het veel praktischer om de gewenste onderdelen een (donkere) achtergrondkleur te geven, en niet met invert te werken.

[Voutloos]

Om :not te laten werken moet je het ook wel heel nauwkeurig opschrijven en geen enkele (!) selector alsnog laten matchen.

Ik denk dat je beter een specifieke positieve selector voor videos kan toevoegen welke ‘filter:none’ (of waarde ‘unset’?) doet.

[Knutselsmurf]

En als je de videos nogmaals inverteert? Wellicht is dat eenvoudiger dan deze te proberen uit te sluiten

[boe2]

Explicit voor je video element een aparte css regel schrijven die filter weer leegmaakt. Done.

[crisp]

Wellicht iets als

Cascading Stylesheet:

iframe:fullscreen { filter: none; }

[Chip.]

crisp schreef op woensdag 6 mei 2020 @ 21:42:
Wellicht iets als

Cascading Stylesheet:

iframe:fullscreen { filter: none; }

Thanks! Dit werkt!