mediawiki-extensions-Syntax.../modules/pygments.wrapper.less
Jon Robson 92f155db14 Make syntax highlighting readable in night mode
The existing color of background if set to inherit will not work
in night mode. There does seem to be a background set in pygments.generated
so this probably doesn't need to be defined at all, but I erred on the side
of caution.

When defining a background that is not using a Codex design token
we also want to define a color to avoid the status quo of unreadable
text.

Note: this is a short term fix for making the content readable.
We can theme this in night mode later after further analysis.

Bug: T356956
Change-Id: Ic58482b73e520505bde26a47e74f131dd8a51671
2024-04-16 00:10:42 +00:00

116 lines
2.4 KiB
Plaintext

.mw-highlight {
unicode-bidi: embed;
pre {
/* Use a more commonly found tab size of 4 (e.g. as used in CodeEditor)
instead of the browser-default value of 8 */
-moz-tab-size: 4;
tab-size: 4;
// Position .linenos relative to this container.
// Do not put this on the main container as it is 100%
// and causes it to stack above floated elements (T272853)
position: relative;
}
/* Avoid displaying double borders for nested 'code' elements.
Before we started using the 'code' tag for inline code snippets,
<code><syntaxhighlight enclose=none ...>...</syntaxhighlight></code>
was a common pattern. Continue supporting it in existing content. */
code code& {
background-color: transparent;
border: 0;
padding: 0;
}
/* The nested pre already has a background. T126010 */
div& {
background-color: #f8f8f8;
color: #333;
}
/*
* Don't show a red border around syntax errors. This behavior may be useful
* in code editors, but it is not useful in a wiki environment, especially
* given the longstanding habit of using an existing, mostly-compatible lexer
* to highlight a language for which no lexer exists.
*/
.err {
border: 0;
}
/* Highlight background of whole lines, not just text in them */
.hll {
display: block;
}
&-lines pre,
.content &-lines pre { // Increase specificty over mobile selectors
.mw-content-ltr& {
/* @noflip */
padding-left: 3.5em;
/* @noflip */
box-shadow: inset 2.75em 0 0 #f0f0f0;
.hll {
/* @noflip */
margin-left: -3.5em;
/* @noflip */
padding-left: 3.5em;
}
}
/* stylelint-disable-next-line no-descending-specificity */
.mw-content-rtl& {
/* @noflip */
padding-right: 3.5em;
/* @noflip */
box-shadow: inset -2.75em 0 0 #f0f0f0;
/* stylelint-disable-next-line no-descending-specificity */
.hll {
/* @noflip */
margin-right: -3.5em;
/* @noflip */
padding-right: 3.5em;
}
}
}
.linenos {
position: absolute;
box-sizing: border-box;
width: 2.75em;
background: none;
color: #72777d;
white-space: pre;
.mw-content-ltr& {
/* @noflip */
left: 0;
/* @noflip */
text-align: right;
/* @noflip */
margin-right: 4px;
}
.mw-content-rtl& {
/* @noflip */
right: 0;
/* @noflip */
text-align: left;
/* @noflip */
margin-left: 4px;
}
&::before {
content: attr( data-line );
}
}
a:hover .linenos,
.hll a .linenos {
color: #333;
}
}