MediaWiki:Common.less: Difference between revisions

/* =============================================================================
 * This is the root Less file that is parsed to produce [[MediaWiki:Common.css]].
 * 
 * These styles will be applied to all skins (desktop and mobile).
 * -----------------------------------------------------------------------------
 * Less documentation:    <http://lesscss.org/features/>
 * Gadget:                <https://meta.weirdgloop.org/w/MediaWiki:Gadget-Less.js>
 * Core Less JS:          <https://meta.weirdgloop.org/w/MediaWiki:Gadget-Less-core.js>
 * Non-standard mixins:   <https://meta.weirdgloop.org/w/MediaWiki:Gadget-LessMixins.less>
 * Online Less tester:    <https://lesscss.org/less-preview/>
 * ============================================================================= */

// ===== CSS Variables =====
@common: 'MediaWiki:Common.less';
:root {
	--body-main: #fdfcfc;
    --body-light: #e7e5e4;
    --body-mid: #ad9e9a;
    --body-dark: #6d5b54;
    --body-darker: #47403d;
    --body-border: #bdb2ae;
	--body-background-color: #173a4d;

	--button-background: #605443;
	--button-color: @white;
	--button-border: #3c352a;
	--button-dark: #18140c;
	--button-light: #3a301d;

	--sidebar: #cfc08d;

	--background-text-color: #e2dbc8;
	--background-link-color: #e2bd8a;

	--search-box: #efeee6;

	--link-color: #8b694f;
	--table-header-link: #c7b8b3;
	--redlink-color: #cd4343; /* #ba0000  old */
	--text-color: #2F2828; /* @mine-shaft */
	--byline-color: @silver;
	--subtle-color: #afa19a; /* old: @boulder; */

	--admin-blue: #332e75;
	--bearcat-green: #13592e;
	--awb-purple: #933b96;

	--rsw-blue: #438ab6;
	--osrsw-brown: #605443;

	// used for gallery & thumbs
	--thumb-bg: var(--body-light);
	--thumb-caption-bg: var(--body-dark);

	// for sourceeditor - CodeMirror and WikiEditor's that are only available on
	// desktop are also here to not fragment the vars across many files
	--sourceeditor-input-background: @white;
	--sourceeditor-background: var(--body-light);
	--sourceeditor-background-secondary: var(--body-light); // used on .editOptions
	--sourceeditor-border: var(--body-mid);
	--codemirror-gutter-background: var(--body-mid);
}

// ===== Imports =====
// include fonts first
@import '@{common}/mixins.less';
@import '@{common}/fonts.less';             // Font definitions and font stack definitions
@import '@{common}/variables.less';         // Less variables
@import '@{common}/elements.less';          // HTML elements
@import '@{common}/links.less';             // Link colours

// Interface
@import '@{common}/interface.less';         // MW common elements
@import '@{common}/wikitables.less';        // .wikitable class and etc
@import '@{common}/files.less';             // Files, galleries
@import '@{common}/diff.less';              // Revision differences
@import '@{common}/notifications.less';     
@import '@{common}/pagepreviews.less';      // Page preview popups
@import '@{common}/smw.less';               // Semantic MediaWiki
@import '@{common}/tabber.less';            // <tabber>
@import '@{common}/ooui.less';              // OOUI Customisations
@import '@{common}/visualeditor.less';      // VisualEditor

// Templates
@import '@{common}/templates.less';         // Various templates
@import '@{common}/documentation.less';     // [[Template:Documentation]]
@import '@{common}/infobox.less';           // Infobox vars
@import '@{common}/references.less';        // <references>
@import '@{common}/messagebox.less';		// Messagebox templates

// Page specific
@import '@{common}/tiles.less';             // Main page tiles
@import '@{common}/mainpage.less';          // Main page 
@import '@{common}/prefs.less';             // Wiki preferences theming 
@import '@{common}/specials.less';          // Special pages
@import '@{common}/bstheme.less';           // [[BS:THEME]]

// ===== Miscellaneous =====
// hide certain links in sidebar tools
#t-print,
#t-permalink {
	display: none;
}

#filetoc {
	border-radius: @border-radius;
	background: @BODY_MID;
	border-color: transparent;
	margin: 0.5em auto;
	text-align: center;
	box-shadow: @box-shadow;
}

// Galleries
li.gallerybox div.thumb {
	border: none;
	background-color: var(--thumb-bg);
}

.smwfact {
	display: none;
}

// applies to mobile talk pages, and smw??
.list-header {
	background-color: var(--body-mid);
	color: inherit;
}

// Source editor w/o syntaxhighlight; also applies to mobile in case JS is
// turned off
.editOptions {
	color: var(--text-color);
	background-color: var(--sourceeditor-background-secondary);
	border-color: var(--sourceeditor-border);
}

// .json pages
.mw-json {
	th,
	td {
		border-color: var(--wikitable-border);
	}

	// instead of selecting `tr`, do this to avoid dealing with mw-json-* classes
	td {
		background: var(--wikitable-bg);
	}

	th {
		background: var(--wikitable-header-bg);
	}
}