Make the wrapper div for code block create a block formatting
context. This changes how floated content is laid out: previously
the wrapper was taking 100% width and tried to wrap text around the
floated content, now its width is limited by the width of floated
content. This way absolutely positioned elements inside the code
block (like the copy buttons) won't overlap the floated content.
We've had this problem before when adding line numbers (T272853),
and the workaround we used there won't work for the copy buttons.
It also lets us remove the background-color override, previously
needed to avoid it leaking outside the code block (T126010).
Bug: T40932
Change-Id: I7f51ea78d7fcf07358c6ee45275b2bae2e1cbeb8
This includes some changes to the colors in light mode to make them
match Codex tokens.
Bug: T365926
Change-Id: Ifa5d762bffa3c4ebdcfa451cc4a9965cd7b1b064
Update the CSS generation script to generate styles for both light and
dark modes. The Pygments style 'default' is used for light mode, as
before, and 'monokai' for dark mode.
Bug: T365926
Change-Id: I0cc1f9a10d4ff8e0c279a12cacbb1c300225328f
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 overrides the default skin rule for pre elements as seen
on [[mw:MediaWiki-Docker%2FExtension%2FWikiLambda]]
Bug: T356956
Change-Id: I0a28323f4269e7afb89dce78927e048734f15a49
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
The outer wrapper is 100% width, so making it position:relative
causes it to stack above floated elements.
Bug: T272853
Change-Id: I20a73b5086ebb03673f0435e27ca93432dcd000c
These rules were being kept for cached content, but were
actually breaking Firefox by triggering a multi-part selection.
Bug: T271614
Change-Id: I83fb4aab88fe1f34bc59d1da18ae8a6a4838a831
Content blocks always output a directionality class. It defaults
to LTR as most code is LTR, but it is allowed to set it to RTL
by adding a dir attribute to the <syntaxhiglight> block.
Use this class to do CSS flipping instead of CSSJanus, as this
class indicates the direction of the code.
Bug: T271792
Change-Id: I084550c2775febf13596addfb3598d6ae1afa2db
* direction:ltr default is not required as every block
gets an mw-content-ltr/rtl class and dir=ltr/rtl attr
* float rules for line numbers are no longer used as
they are now position:absolute
Change-Id: I417ae969bf969b7cb25fbcf9ca3b1457c7bc6549
no-descending-specificity:
Expected selector ".mw-highlight.mw-content-ltr .linenos" to come before
selector ".mw-highlight a:hover .linenos"
Change-Id: Ib8bd3dcc83058c6935b6b6c472554e3c1fa01eda
* Render a solid gutter that can take 3-4 digit line numbers
* Position line numbers absolutely in the gutter
* Add padding to code so that it doesn't wrap into the gutter
Change-Id: I7abb87452ad61808dad32b41c1d2d86b8ababb28
This makes them unselectable in more browsers as the
user-select fix isn't supported everywhere (e.g. Safari).
Bug: T32773
Change-Id: I274632a1055e1f85679fbb29c81629104cc8b222
