mediawiki-skins-Vector/resources/skins.vector.styles/typography.less
Bartosz Dziewoński 3c2602b682 Add styles for new heading HTML
Add CSS to support new HTML markup for headings with section edit
links, which will soon be used by Parsoid page views (T269630)
and by the old parser (T13555). Keep the old rules to provide
temporary support for cached page HTML and emergency opt-outs,
as well as permanent support for plain headings on special pages
and in Parsoid edit mode HTML.

See documentation page for further explanation:
https://www.mediawiki.org/wiki/Heading_HTML_changes

Depends-On: I44587461582d648b56ef0c9c7ae0c322895c69c2
Bug: T13555
Bug: T269630
Change-Id: I62d7e8ad7d8f25d145ec1f33230d6043982aec1e
2023-11-17 20:36:56 +00:00

191 lines
4 KiB
Plaintext

/*
* Vector's common typography rules,
* including whitespace with `margin` & `padding` and list bullets
* as part of typographic styles. Iconography wouldn't belong here.
*
*/
html {
font-size: @font-size-root;
}
html,
body {
font-family: @font-family-sans;
}
ul {
// `list-style-image` sits on `ul` as it inherits and we don't need to worry about `ol`.
// No need for PNG fallback. Fallback is browser default (a smaller, also black, circle).
list-style-image: url( images/bullet-icon.svg );
}
pre,
.mw-code {
line-height: @line-height-code;
}
.mw-jump-link:not( :focus ) {
.mixin-screen-reader-text;
.user-select( none );
}
/* Use unscoped selector to allow edit sections outside of .mw-body-content and .vector-body (T160269) */
.mw-editsection,
.mw-editsection-like {
font-family: @font-family-sans;
}
/* Main content area, including siteNotice, indicators, categories, firstHeading and `.vector-body`. */
.mw-body {
// h1's can exist outside of `.mw-body-content` so some heading styles
// therefore need to be defined in `.mw-body` as well.
& h1,
& .mw-heading1,
&-content h1,
&-content .mw-heading1,
&-content h2,
&-content .mw-heading2 {
margin-bottom: 0.25em;
padding: 0;
font-family: @font-family-serif;
line-height: @line-height-xx-small;
// Fallback heading font for scripts which render poorly in `@font-family-serif`.
// See T73240
&:lang( ja ), /* See T65817 */
&:lang( he ), /* See T65843 and T65844 */
&:lang( ko ) { /* See T65827 */
font-family: @font-family-sans--fallback;
}
&:lang( ckb ) { /* See T306317 */
font-family: 'Scheherazade', @font-family-serif;
}
/* Burmese (Myanmar) language headlines would be cropped with set `line-height` */
/* See T193270 */
&:lang( my ) {
line-height: normal;
}
}
& h1,
& .mw-heading1,
&-content h1,
&-content .mw-heading1 {
font-size: @font-size-heading-1;
}
}
// T335625 - Move siteSub into common.less to prevent it from being feature-flagged
// and overriding on-wiki modifications.
#siteSub {
// By default the sitesub (i.e. tagline) is hidden as it was hidden in Vector legacy but site styles can reveal.
display: none;
}
.vector-body {
font-size: var( --font-size-medium );
line-height: @line-height-base;
#siteSub {
font-size: unit( @font-size-small, rem ); // T311421
}
.mw-heading1,
h1 {
margin-top: 1em;
}
.mw-heading2,
h2 {
margin-top: 1em;
font-size: @font-size-heading-2;
}
.mw-heading3,
h3,
.mw-heading4,
h4,
.mw-heading5,
h5,
.mw-heading6,
h6 {
margin-top: 0.3em;
margin-bottom: 0;
padding-bottom: 0;
line-height: @line-height-base;
}
.mw-heading3,
h3 {
font-size: @font-size-heading-3;
}
.mw-heading3,
h3,
.mw-heading4,
h4 {
font-weight: bold;
}
.mw-heading4,
h4,
.mw-heading5,
h5,
.mw-heading6,
h6 {
font-size: @font-size-reset; // Reset.
}
.toc h2 {
font-family: @font-family-sans;
font-size: @font-size-reset; // Reset.
}
p {
margin: 0.5em 0;
}
blockquote {
border-left: @border-start-blockquote;
padding: @padding-blockquote;
// Ensure not to inherit whitespace mashing margins on child elements.
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
}
// External links
// Use of `a` element selector for limiting generic class scope due to `.external` widespread usage.
.mw-parser-output {
a {
// Deal with long links (T327334, inspired by Minerva solution T62387)
word-wrap: break-word;
}
a.external {
// Use copy of Codex/OOUI WikimediaUI theme's 'linkExternal' icon in progressive color.
// Note that CSSJanus is flipping the `ltr` in the URL to `rtl`.
// Therefore make sure that both icons are available and up-to-date.
background-image: url( images/link-external-small-ltr-progressive.svg );
background-position: center right;
background-repeat: no-repeat;
// Equivalent of `12px` at calculation base of `14px` is `0.857em`.
background-size: 0.857em;
padding-right: 1em;
// See T330712 for better understanding of this class and any future changes.
&.free {
word-break: break-all;
}
}
}