mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 15:53:46 +00:00
cffd494107
Unify on using standard OOUI 'linkExternal' icon, which is directly replacing Vector's image without relying on ResourceLoader. Please note that the icon features standard link color `#36c` which is implemented in a later step. Due to the small icon size and the fact that current external link icon is also not using the legacy color, this seems acceptable to move forward with. Also using relative `em` instead of `px` to support user text zoom capabilities and introducing a `@size-indicator` variable to be replaced by WikimediaUI Base variables later. Alternative to I49de3bfff45. Replacing images and image names to make quicker lookup with icon collection possible future-facing. Note that CSSJanus is flipping the `ltr` string in the background image rule to `rtl`, therefore making sure that both icons are available. Bug: T261391 Change-Id: Ibd15517f3adf06010807901e8fb3299e2046a473
154 lines
3.2 KiB
Plaintext
154 lines
3.2 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.
|
|
*
|
|
*/
|
|
|
|
@import './variables.less';
|
|
|
|
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;
|
|
}
|
|
|
|
/* 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,
|
|
&-content h1,
|
|
&-content h2 {
|
|
margin-bottom: 0.25em;
|
|
padding: 0;
|
|
font-family: @font-family-serif;
|
|
line-height: @line-height-heading;
|
|
|
|
// 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;
|
|
}
|
|
|
|
/* Burmese (Myanmar) language headlines would be cropped with set `line-height` */
|
|
/* See T193270 */
|
|
&:lang( my ) {
|
|
line-height: normal;
|
|
}
|
|
}
|
|
|
|
& h1,
|
|
&-content h1 {
|
|
font-size: @font-size-heading-1;
|
|
}
|
|
}
|
|
|
|
.vector-body {
|
|
font-size: @font-size-base;
|
|
// Support IE 9-11, Trident cuts values 2 digits after decimal point.
|
|
// `calc` enables to set correct calculation in place again. See T102364.
|
|
font-size: @font-size-base--trident-hack;
|
|
line-height: @line-height-base;
|
|
|
|
#siteSub {
|
|
font-size: 12.8px; // T311421
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 1em;
|
|
font-size: @font-size-heading-2;
|
|
}
|
|
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 0.3em;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
line-height: @line-height-base;
|
|
}
|
|
|
|
h3 {
|
|
font-size: @font-size-heading-3;
|
|
}
|
|
|
|
h3,
|
|
h4 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
h4,
|
|
h5,
|
|
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.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-ltr-progressive.svg );
|
|
background-position: center right;
|
|
background-repeat: no-repeat;
|
|
background-size: @size-indicator;
|
|
padding-right: 1em;
|
|
}
|