MediaWiki:Common.css: Difference between revisions

Revision as of 10:13, 6 March 2025

/* =============================================================================
 * 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: #e2dbc8;
	--body-light: #d8ccb4;
	--body-mid: #d0bd97;
	--body-dark: #b8a282;
	--body-border: #94866d;
	--body-background-color: #c0a886;

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

	--sidebar: #cfc08d;

	--background-text-color: #444;
	--background-link-color: #52351e;

	--search-box: #efeee6;

	--link-color: #936039;
	--redlink-color: #ba0000;
	--text-color: @black;
	--byline-color: @tundora;
	--subtle-color: @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-mid);

	// 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
@import '@{common}/highlight.less';         // Usergroup highlighting

// Interface
@import '@{common}/interface.less';         // MW common elements
@import '@{common}/wikitables.less';        // .wikitable class and etc
//@import '@{common}/cookies.less';         // Do you accept these cookies?
@import '@{common}/charts.less';            // ChartJS hide config
@import '@{common}/diff.less';              // Revision differences
//@import '@{common}/itemcompare.less';     // Item compare css
//@import '@{common}/announcement.less';    // Mainpage annnouncement pill (unused rn)
@import '@{common}/notifications.less';     
@import '@{common}/pagepreviews.less';      // Page preview popups
@import '@{common}/smw.less';               // Semantic MediaWiki
@import '@{common}/tabber.less';            // <tabber>
@import '@{common}/tooltips.less';
@import '@{common}/ooui.less';              // OOUI Customisations
// Kartographer customisations - previously at /dooglemaps.less, currently being
// imported here as as of 2022/8/22 it gets loaded before default styles instead
@import 'MediaWiki:Kartographer.less';      // currently broken on its css page
@import '@{common}/visualeditor.less';      // VisualEditor

// Templates
@import '@{common}/templates.less';         // Various templates
@import '@{common}/infobox.less';           // Infobox vars
@import '@{common}/coins.less';             // [[Template:Coins]]
@import '@{common}/documentation.less';     // [[Template:Documentation]]
@import '@{common}/fairycode.less';         // [[Template:Fairycode]]
@import '@{common}/floornumber.less';       // [[Template:FloorNumber]]
@import '@{common}/listen.less';            // [[Template:Listen]]
@import '@{common}/plink.less';             // [[Template:Plink]]
//@import '@{common}/pohroom.less';         // [[Template:POH Room]] - converted to TemplateStyles
@import '@{common}/questdetails.less';      // [[Template:Quest details]]
@import '@{common}/references.less';        // <references>
@import '@{common}/editnotice.less';        // [[Template:Editnotice]]
@import '@{common}/messagebox.less';        // Messagebox templates
@import '@{common}/poll.less';              // Ajax poll styles
//@import '@{common}/skilltraining.less';   // Skilltraining class
@import '@{common}/storage.less';           // Storage templates; [[Template:Inventory]], [[Template:Equipment]], and related templates
@import '@{common}/transcripts.less';       // Transcript pages

// Page specific
@import '@{common}/tiles.less';             // Main page tiles
@import '@{common}/mainpage.less';          // OSRS Wiki home page
@import '@{common}/prefs.less';             // Wiki preferences theming 
@import '@{common}/specials.less';          // Special pages
@import '@{common}/sitenotice.less';        // [[MediaWiki:Sitenotice]]
@import '@{common}/mmg.less';               // [[Money making guides]]
//@import '@{common}/oswf.less';            // [[RS:OSWF]] - unused
//@import '@{common}/rstheme.less';         // [[RS:THEME]] - converted to TemplateStyles
@import '@{common}/gemw.less';              // GE charts and Exchange ns pages

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

// calculator script config
.jcConfig {
	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);
}

// "updated since your last visit" notice when checking watchlisted page hist
.updatedmarker {
	background-color: @caper;
	// static colour instead of inheriting, prob dont want to change across themes
	color: darken( @san-felix, 10% )
}

// .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);
	}
}

// Temporary global feature flag for leagues
.leagues-global-flag {
	display: none !important;
}