Prevent dark-mode styles from affecting print media

Prevents dark-mode styles from affecting print media
by adding `@media screen` to dark-mode related styles.

Bug: T371331
Change-Id: Ide900a3e24a03d83f8e4ce51f89655cf5bb7e9b8
This commit is contained in:
Jdrewniak 2024-08-08 17:24:33 -04:00
parent 280e9fb6a7
commit b7cbd0dd4f

View file

@ -440,23 +440,25 @@
} }
// Apply night mode styles that can't be handled with CSS variables, i.e. anything with rgba() // Apply night mode styles that can't be handled with CSS variables, i.e. anything with rgba()
html.skin-theme-clientpref-night { @media screen {
.mwe-popups.mwe-popups-no-image-pointer::before { html.skin-theme-clientpref-night {
.mwe-popups-border-pointer-top( 8px, 10px, rgba( 255, 255, 255, 0.07 ), 0 ); .mwe-popups.mwe-popups-no-image-pointer::before {
} .mwe-popups-border-pointer-top( 8px, 10px, rgba( 255, 255, 255, 0.07 ), 0 );
}
.mwe-popups-extract[ dir='ltr' ]::after { .mwe-popups-extract[ dir='ltr' ]::after {
/* @noflip */ /* @noflip */
background-image: linear-gradient( to right, transparent, @background-color-base 50% ); background-image: linear-gradient( to right, transparent, @background-color-base 50% );
} }
.mwe-popups-extract[ dir='rtl' ]::after { .mwe-popups-extract[ dir='rtl' ]::after {
/* @noflip */ /* @noflip */
background-image: linear-gradient( to left, transparent, @background-color-base 50% ); background-image: linear-gradient( to left, transparent, @background-color-base 50% );
}
} }
} }
@media ( prefers-color-scheme: dark ) { @media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os { html.skin-theme-clientpref-os {
.mwe-popups.mwe-popups-no-image-pointer::before { .mwe-popups.mwe-popups-no-image-pointer::before {
.mwe-popups-border-pointer-top( 8px, 10px, rgba( 255, 255, 255, 0.07 ), 0 ); .mwe-popups-border-pointer-top( 8px, 10px, rgba( 255, 255, 255, 0.07 ), 0 );