Quelltext der Seite MediaWiki:Vector-2022.css

/* The source's typography rebuilt for Vector 2022.
 *
 * A separate page rather than MediaWiki:Common.css: that one comes from the
 * import and should stay untouched. MediaWiki loads Vector-2022.css on top
 * automatically whenever the vector-2022 skin is active.
 *
 * The values do not come from the source's wiki CSS -- that only styles the
 * main page. They come from the BlueSpiceDiscovery skin itself, which goes away
 * with the migration.
 *
 * Fonts: docker/mediawiki/assets/fonts/, mounted at /assets.
 * Lato is licensed under the SIL Open Font License 1.1.
 */

@font-face {
	font-family: 'Lato';
	src: url(/assets/fonts/Lato-Regular.ttf) format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url(/assets/fonts/Lato-Bold.ttf) format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url(/assets/fonts/Lato-Italic.ttf) format('truetype');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url(/assets/fonts/Lato-BoldItalic.ttf) format('truetype');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

/* --- Body text ------------------------------------------------------------ */
/* The source uses 15px; expressed as 0.9375rem (= 15/16) for Vector. */
body,
.mw-body,
.mw-parser-output,
.vector-body {
	font-family: 'Lato', sans-serif;
}

.mw-body-content {
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* --- Headings ------------------------------------------------------------- */
/* Sizes and weights as in the Discovery theme. Note: BlueSpice draws NO rule
   under h1/h2, whereas Vector does by default. */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {
	font-family: 'Lato', sans-serif;
	color: #252525;
}

.mw-body h1,
.mw-parser-output h1 {
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.5;
	border-bottom: none;
}

.mw-body h2,
.mw-parser-output h2 {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.5;
	border-bottom: none;
	margin: 1.8rem 0;
}

.mw-body h3,
.mw-parser-output h3 {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5;
	margin: 1.6rem 0;
}

.mw-body h4,
.mw-parser-output h4 {
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.5;
}

/* The page title follows the same rule as h1. */
.mw-first-heading,
#firstHeading {
	font-family: 'Lato', sans-serif;
	font-weight: 500;
	color: #252525;
	border-bottom: none;
}


/* --- Colour classes from BlueSpice ---------------------------------------- */
/* BlueSpice's colour picker writes classes like "col-orange-bg" into table
 * cells. The classes are in the imported wikitext, but their rules came from
 * ext.bluespice.visualEditorConnector.colors, which goes away with the
 * migration. Without these rules colour-coded tables look empty.
 *
 * Taken from the running source, selectors adapted to Vector.
 */
/* Background colours (table cells and text highlights) */
.mw-parser-output td.col-black-bg,
.mw-parser-output th.col-black-bg,
.mw-parser-output span.col-black-bg { background-color: #000000; }
.mw-parser-output td.col-blue-bg,
.mw-parser-output th.col-blue-bg,
.mw-parser-output span.col-blue-bg { background-color: #cadaea; }
.mw-parser-output td.col-blue-dark-bg,
.mw-parser-output th.col-blue-dark-bg,
.mw-parser-output span.col-blue-dark-bg { background-color: #b2cff5; }
.mw-parser-output td.col-blue-light-bg,
.mw-parser-output th.col-blue-light-bg,
.mw-parser-output span.col-blue-light-bg { background-color: #e0ecf8; }
.mw-parser-output td.col-blue-navy-bg,
.mw-parser-output th.col-blue-navy-bg,
.mw-parser-output span.col-blue-navy-bg { background-color: #c5cbdb; }
.mw-parser-output td.col-green-bg,
.mw-parser-output th.col-green-bg,
.mw-parser-output span.col-green-bg { background-color: #c5e8c9; }
.mw-parser-output td.col-grey-bg,
.mw-parser-output th.col-grey-bg,
.mw-parser-output span.col-grey-bg { background-color: #787878; }
.mw-parser-output td.col-grey-dark-bg,
.mw-parser-output th.col-grey-dark-bg,
.mw-parser-output span.col-grey-dark-bg { background-color: #434343; }
.mw-parser-output td.col-grey-light-bg,
.mw-parser-output th.col-grey-light-bg,
.mw-parser-output span.col-grey-light-bg { background-color: #d2d2d2; }
.mw-parser-output td.col-grey-medium-bg,
.mw-parser-output th.col-grey-medium-bg,
.mw-parser-output span.col-grey-medium-bg { background-color: #acacac; }
.mw-parser-output td.col-orange-bg,
.mw-parser-output th.col-orange-bg,
.mw-parser-output span.col-orange-bg { background-color: #f7e1b2; }
.mw-parser-output td.col-purple-bg,
.mw-parser-output th.col-purple-bg,
.mw-parser-output span.col-purple-bg { background-color: #f0c6ef; }
.mw-parser-output td.col-red-bg,
.mw-parser-output th.col-red-bg,
.mw-parser-output span.col-red-bg { background-color: #e9c4c4; }
.mw-parser-output td.col-turquoise-bg,
.mw-parser-output th.col-turquoise-bg,
.mw-parser-output span.col-turquoise-bg { background-color: #bddfdf; }
.mw-parser-output td.col-white-bg,
.mw-parser-output th.col-white-bg,
.mw-parser-output span.col-white-bg { background-color: #ffffff; }

/* Text colours */
.mw-parser-output span.col-black,
.mw-parser-output div.col-black { color: #000000; }
.mw-parser-output span.col-blue,
.mw-parser-output div.col-blue { color: #5185b9; }
.mw-parser-output span.col-blue-dark,
.mw-parser-output div.col-blue-dark { color: #0060df; }
.mw-parser-output span.col-blue-light,
.mw-parser-output div.col-blue-light { color: #97bfe7; }
.mw-parser-output span.col-blue-navy,
.mw-parser-output div.col-blue-navy { color: #3e5389; }
.mw-parser-output span.col-green,
.mw-parser-output div.col-green { color: #3fb34c; }
.mw-parser-output span.col-grey,
.mw-parser-output div.col-grey { color: #787878; }
.mw-parser-output span.col-grey-dark,
.mw-parser-output div.col-grey-dark { color: #434343; }
.mw-parser-output span.col-grey-light,
.mw-parser-output div.col-grey-light { color: #d2d2d2; }
.mw-parser-output span.col-grey-medium,
.mw-parser-output div.col-grey-medium { color: #acacac; }
.mw-parser-output span.col-orange,
.mw-parser-output div.col-orange { color: #e49c00; }
.mw-parser-output span.col-purple,
.mw-parser-output div.col-purple { color: #cd41cb; }
.mw-parser-output span.col-red,
.mw-parser-output div.col-red { color: #b73a3a; }
.mw-parser-output span.col-turquoise,
.mw-parser-output div.col-turquoise { color: #259596; }
.mw-parser-output span.col-white,
.mw-parser-output div.col-white { color: #ffffff; }

/* --- No justified text ---------------------------------------------------- */
/* The source's Common.css sets "#mw-content-text p { text-align: justify }" for
 * all content. Justification tears large gaps in narrow columns -- switched off
 * deliberately.
 *
 * The rule MUST use the same id selector. A class selector like
 * ".mw-parser-output p" is less specific and loses against the source's rule no
 * matter how many classes you stack. At equal specificity order decides, and
 * MediaWiki loads this page after Common.css.
 */
#mw-content-text p,
#mw-content-text li,
#mw-content-text td,
#mw-content-text th,
#mw-content-text dd {
	text-align: start;
}