MediaWiki:Common.css/src/base.scss

@use 'lib';
/***********************************************************************************************************
 * base css styles for both interface and content box: font, color, etc.
 ***********************************************************************************************************/

/** Font **/
html, body {
	font-family: Helvetica, Arial, sans-serif;
	color: var(--theme-text-color);
}

/* Text color */
#content {
	color: var(--theme-text-color);
}

html {
	background: var(--theme-site-background);
	/* always show scroll bar for short page.
	 * By doing this page background size won't change when expand/collapse sidebar sections.
	 */
	overflow-y: scroll;
}

body {
	font-size: var(--font-size);
	line-height: var(--line-height);
}

ul, ol {
	margin: 2px 0 2px 1.5em;
}

ul {
	list-style-image: none;
}

li {
	margin: 0 0 2px 0;
}

small {
	font-size: var(--font-size-s);
	line-height: var(--line-height-s);
}

sup, sub {
	font-size: var(--font-size-s);
}

/* Code styling, overriding styles from here:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/REL1_39/resources/src/mediawiki.skinning/elements.less#164
 * (not sure about the purpose of ".mw-code", it only seems to be used on very
 * long Lua pages like [[Module:Exclusive/data]])
 * (looks like ".mw-code" can also be used manually on pages to mimic <pre>
 * styling while still respecting wikicode; see [[Help:Displaying code text]]) */
pre, code, .mw-code {
	color: var(--theme-text-color);
	border: 1px solid var(--theme-box-border-color-light);
}
pre, .mw-code {
	background-color: var(--theme-box-background);
}

/* Break really long words when they overflow to the next line.
 * By default this is only applied to pre and .mw-code, not code:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/REL1_39/resources/src/mediawiki.skinning/elements.less#177 */
code {
	word-wrap: break-word;
}

fieldset {
	border-width: 2px;
	border-color: var(--theme-border-color);
}


/** link color **/

/* Self-links aren't real links, they're not clickable.
 * Hence, they shouldn't change color when hovered over like real links, as that is counter-intuitive.
 * We should not use :not(.selflink) since it increases the priority and make it is difficult to override
 * link styles for certain elements (e.g. in wiki.gg header).
 */
a,
a.selflink:hover, a.selflink:active{
	text-decoration: none;
	color: var(--theme-link-color);
}
a:visited{
	color: var(--theme-link-color-visited);
}
a:hover, a:active{
	text-decoration: underline;
	color: var(--theme-link-color-hover);
}

/** red link **/
/* we don't really need to mark you have "visited" an inexistent page */
a.new, a.new:visited{
	color: var(--theme-link-color-redlink);
}

button, input[type=submit]{

}

/* Blockquotes, overriding styles from here:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+/refs/heads/master/resources/common/typography.less */
.vector-body blockquote {
	border-left-color: var(--oouihelper--themerelated-lighter-transparent);
	padding-left: 24px;
}

/*********************************************************************************************************/

input, button{
	color: var(--theme-control-text-color);
	caret-color: var(--theme-text-color);
}
input[type=submit]{
	color: var(--theme-control-text-color);
}
::placeholder {
	color: var(--theme-text-color-placeholder);
}

/* Link color */
.mw-parser-output a.external,
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw,
.mw-parser-output a.extiw:visited,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
	color: var(--theme-link-color);
}

/* "Note text" color */
.note-text {
	color: var(--theme-text-color-note);
}

.pixel img, .pixel,
#mw-imagepage-section-filehistory img {
	image-rendering: pixelated; /*for chrome*/
	image-rendering: crisp-edges; /*for firefox*/
}

/* overwriting styles from here:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/REL1_39/resources/src/mediawiki.skinning/elements.less#230 */
.small {
	font-size: 85%;
}

.fullwidth, .full-width {
	width: 100%;
}

.nowrap {
	white-space: nowrap;
}

/* The default ".center" class has a "width:100%" style, see here:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/REL1_39/resources/src/mediawiki.skinning/elements.less#219
 * We don't always want that, so we're using a different, new class name. */
.aligncenter,
.align-center {
	text-align: center;
}

.alignleft,
.align-left{
	text-align: left;
}

.alignright,
.align-right {
	text-align: right;
}

/* clear fix for float block */
.clearfix {
	*zoom: 1;
}
.clearfix::before,
.clearfix::after {
	content: " ";
	display: table;
}
.clearfix::after {
	clear: both;
}

/* floating */
.float-right{
	float: right;
	margin: 0 0 var(--layout-gap) var(--layout-gap);
}
.float-left{
	float: left;
	margin: 0 var(--layout-gap) var(--layout-gap) 0;
}

/* Facilitate inline scary transclusion */
.scary-transclusion p, .scary-transclusion .mw-parser-output {
	display: inline;
}

/* hide last empty paragraph at the end */
div.mw-parser-output > p:last-child > br:only-child{
	display: none;
}

.block{
	display: block;
}
.inline{
	display: inline;
}
.inline-block{
	display: inline-block;
}

/* Theme-aware color for icons (black for light themes, white for dark themes) */
.blackwhite-icon {
	filter: var(--ooui--icon-normal-filter);
}

/* Invert for dark theme -- deprecated, please use ".blackwhite-icon" */
.dark-invert {
	filter: invert(1);
}

/* Invert class */
.invert {
	filter: invert(1);
}

/* overwriting styles from here:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/REL1_39/resources/src/mediawiki.skinning/elements.less#55 */
hr {
	height: 0;
	background: none;
	border-top: 1px solid var(--theme-hr-color-top);
	border-bottom: 1px solid var(--theme-hr-color-bottom);
	margin: 4px 0;

	&.space {
		height: 4px;
		background: none;
		border: 0;
	}

	&.incell-border {
		/* border inside a table cell */
		margin: 0.7em 0;
		background-color: var(--theme-box-border-color);
	}
}

.page-content  {
	.vertical-align-top * {
		vertical-align: top;
	}
	
	.vertical-align-bottom * {
		vertical-align: bottom;
	}
}