Fix forced light mode background-color applied to the wrong element

Changes for T356956 applied the styles in the wrong place.

`<div class="mw-highlight">` should have no background (and we need
to override the default Pygments styles that add it).

`<div class="mw-highlight"><pre>` and `<code class="mw-highlight">`
should have background (and we need to override core MediaWiki styles
that adapt to light/dark mode with forced light mode colors).

Bug: T365927
Change-Id: I473203b12673f7bc004f953ab33fe36fb897e095
This commit is contained in:
Bartosz Dziewoński 2024-08-29 20:35:48 +02:00
parent a8a6329362
commit 91f3235ed9

View file

@ -10,13 +10,18 @@
// Do not put this on the main container as it is 100%
// and causes it to stack above floated elements (T272853)
position: relative;
background-color: #f8f8f8;
color: #333;
}
/* The nested pre already has a background. T126010 */
code&,
div& {
background-color: inherit;
}
// Override light/dark mode colors for <code> and <pre> with forced light mode colors.
// The syntax highlighting palette does not support dark mode yet (T365926).
// Make sure to style the <pre> and not the <div class="mw-highlight"> (T365927).
code&,
div& pre {
background-color: #f8f8f8;
color: #333;
}
@ -47,6 +52,7 @@
display: block;
}
/* stylelint-disable-next-line no-descending-specificity */
&-lines pre,
.content &-lines pre { // Increase specificty over mobile selectors