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: Ieeca30d086d8b8705aba96441a576e3d8e127838
This commit is contained in:
Jdrewniak 2024-08-08 14:27:30 -04:00
parent 811e770e9c
commit 83e7a06a52
4 changed files with 33 additions and 27 deletions

View file

@ -138,10 +138,10 @@
html.skin-theme-clientpref-night {
.dark-mode-image-styles();
}
}
@media ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os {
.dark-mode-image-styles();
}
@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os {
.dark-mode-image-styles();
}
}

View file

@ -56,13 +56,15 @@
}
// Night mode
html.skin-theme-clientpref-night {
.minerva-footer-logo img {
.night-mode-invert-image();
@media screen {
html.skin-theme-clientpref-night {
.minerva-footer-logo img {
.night-mode-invert-image();
}
}
}
@media ( prefers-color-scheme: dark ) {
@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os {
.minerva-footer-logo img {
.night-mode-invert-image();

View file

@ -83,20 +83,22 @@
}
// Night mode
html.skin-theme-clientpref-night {
// The following icons use background-image instead of mask-image.
// These can be removed if a fix for T358246 is found.
.minerva-icon.minerva-icon--search-base20,
.minerva-icon.minerva-icon--search,
.page-actions-menu__list .minerva-icon,
.mw-editsection .minerva-icon,
.toggle-list .minerva-icon,
.branding-box img {
.night-mode-invert-image();
@media screen {
html.skin-theme-clientpref-night {
// The following icons use background-image instead of mask-image.
// These can be removed if a fix for T358246 is found.
.minerva-icon.minerva-icon--search-base20,
.minerva-icon.minerva-icon--search,
.page-actions-menu__list .minerva-icon,
.mw-editsection .minerva-icon,
.toggle-list .minerva-icon,
.branding-box img {
.night-mode-invert-image();
}
}
}
@media ( prefers-color-scheme: dark ) {
@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os {
.minerva-icon.minerva-icon--search-base20,
.minerva-icon.minerva-icon--search,

View file

@ -1,16 +1,18 @@
@import 'mediawiki.skin.variables.less';
.skin-theme-clientpref-night {
/**
* FIXME: Can be removed when T369092 is resolved
*/
.ve-ce-branchNode-blockSlug,
body p.ve-ce-branchNode-newSlug {
background-color: rgba( 241, 247, 251, 0.1 );
@media screen {
.skin-theme-clientpref-night {
/**
* FIXME: Can be removed when T369092 is resolved
*/
.ve-ce-branchNode-blockSlug,
body p.ve-ce-branchNode-newSlug {
background-color: rgba( 241, 247, 251, 0.1 );
}
}
}
@media ( prefers-color-scheme: dark ) {
@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os {
/**
* FIXME: Can be removed when T369092 is resolved