MediaWiki:Common.less

From the Tesseract Wiki, the wiki for all things Marvel Cinematic Universe
Jump to navigation Jump to search
/* =============================================================================
 * This is the root Less file that is parsed to produce [[MediaWiki:Vector.css]].
 * 
 * These styles will be applied to all skins (desktop and mobile).
 * -----------------------------------------------------------------------------
 * Less documentation:    <http://lesscss.org/features/>
 * Gadget:                <https://tesseract.wiki/w/MediaWiki:Gadget-Less.js>
 * Core Less JS:          <https://tesseract.wiki/w/MediaWiki:Gadget-Less-core.js>
 * Non-standard mixins:   <https://tesseract.wiki/w/MediaWiki:Gadget-LessMixins.less>
 * Online Less tester:    <https://lesscss.org/less-preview/>
 * ============================================================================= */
 
 // ===== CSS Variables =====
@common: 'MediaWiki:Common.less';
:root {
	--body-main: #fbfbfb;
	--body-light: #fff;
	--body-mid: #f8f9fa;
	--body-mid-dark: #6ba5c8;
	--body-dark: #246c97;
	--body-mid-darker: #438ab6;
	--body-border: #e6e6e6;
	--body-header-border: #dcdcdc;
	--body-background-color: #f6f6f6;

	--button-background: #438ab5;
	--button-color: @white;
	--button-border: #cb00ff; // todo colour: cb00ff
	--button-dark: #cb00ff;
	--button-light: #cb00ff;

	--sidebar: #a2a9b1;
	--sidebar-mobile: #eaecf0;

	--background-text-color: #54595d;
	--background-link-color: #327ba7;

	--search-box: #fff;

	--link-color: #327ba7;
	--redlink-color: #ba0000;
	--text-color: #36414f;
	--dark-text-color: #fff;
	// todo
	--byline-color: @tundora;
	--subtle-color: #949eaa; //@boulder;

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

	--tsw-blue: #438ab6;

	// 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}/diff.less';              //Revision differences
//@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
@import '@{common}/visualeditor.less';      //VisualEditor

// Templates
@import '@{common}/templates.less';         //Various templates
@import '@{common}/infobox.less';           //Infobox vars
@import '@{common}/documentation.less';     //[[Template:Documentation]]
@import '@{common}/floornumber.less';       //[[Template:FloorNumber]]
@import '@{common}/listen.less';            //[[Template:Listen]]
@import '@{common}/plink.less';             //[[Template:Plink]]
@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}/transcripts.less';       //Transcript pages

// Page specific
@import '@{common}/tiles.less';             //Main page tiles
@import '@{common}/mainpage.less';          //TS Wiki home page
@import '@{common}/prefs.less';             //Wiki preferences theming 
@import '@{common}/specials.less';          //Special pages
//@import '@{common}/sitenotice.less';        //[[MediaWiki:Sitenotice]]
//@import '@{common}/discussions.less';       //[[RS:AD]]
@import '@{common}/tstheme.less';           //[[TS:THEME]]

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