mediawiki-extensions-Visual.../modules/ve-mw/init/styles/ve.init.mw.DesktopArticleTarget-vector.css
Bartosz Dziewoński 69147ce3bc Fix Vector wikitext surface padding overrides when using custom browser font-size
In order to get the desired padding, the `em` values were pre-multiplied
by the parent font-size, which was assumed to be `0.875em` for normal
surfaces and `(13.3333/16)em` for wikitext surfaces. (That should have
been `(13/16em)`, by the way, but that's a negligible difference.)

Unfortunately, the font-size for wikitext surfaces is actually `13px`.
Unlike `em`, `px` values are not affected by custom browser font-size,
so when one was set, the final padding was all out of whack.

Use `rem` units instead to respect the custom browser font-size,
without getting problems due to the parent element font-size.
We don't need separate rules for .ve-ui-mwWikitextSurface now.

Bug: T222217
Change-Id: Ib7ffbf09d5aa23fddb894aa3b081ec993ddcee2d
2019-09-18 22:24:47 +02:00

67 lines
2.3 KiB
CSS

/*!
* VisualEditor MediaWiki Initialization DesktopArticleTarget Vector skin styles.
*
* @copyright 2011-2019 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/* stylelint-disable-next-line selector-class-pattern */
.ve-activated .vectorTabs .selected {
box-shadow: inset 0 -1px 0 #e1f1fc;
}
.ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface {
/*
In order to allow placing the text cursor to the start or end of the text by
clicking in the margin area, we expand the outer boundary of the surface
outside the parent container using negative margin. Then we shrink the visible
rendering by applying inner padding. The end result is that the content is
the same width as in read mode, except with the padding around it now being
part of it instead of its parent, thus making it treat the area as part
of content editable.
Use `rem` units. This lets us respect custom browser font-size (like `em`),
but isn't affected by the parent element font-size, which may be defined in
`px` due to `.mw-editfont-monospace` and similar classes. (T222217)
*/
margin: 0 -1rem;
}
.ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface .ve-ce-attachedRootNode,
.ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface .ve-ui-surface-placeholder {
padding: 0 1rem;
}
.mw-body .ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface .ve-ui-surface-placeholder > * {
/* Fix margin overlap */
margin-top: 0;
/* Placeholder doesn't need a border as well */
border: 0;
}
/* Main document debug bar */
.ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface > .ve-ui-debugBar {
padding: 1rem;
padding-bottom: 0;
margin-top: 1rem;
}
/* High-definition-specific styles (because Vector adds 1em to the leftNav if width is 982px+ */
@media screen and ( min-width: 982px ) {
.ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface {
margin: 0 -1.5rem;
}
.ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface .ve-ce-attachedRootNode,
.ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface .ve-ui-surface-placeholder {
padding: 0 1.5rem;
}
/* Main document debug bar */
.ve-init-mw-desktopArticleTarget .ve-init-mw-target-surface > .ve-ui-debugBar {
padding: 1.5rem;
padding-bottom: 0;
margin-top: 1.5rem;
}
}