MediaWiki:Minerva.less: Difference between revisions

/* =============================================================================
 * This is the root Less file that is parsed to produce [[MediaWiki:Minerva.css]].
 * 
 * These styles will be applied to the Minerva skin (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/>
 * ============================================================================= */


@dir: 'MediaWiki:Minerva.less';
@common: 'MediaWiki:Common.less';

// ===== IMPORTS =====
@import '@{common}/mixins.less';
@import '@{dir}/fonts.less';              // font imports and font stack definitions
@import '@{common}/variables.less';       // colors, shadows, etc.
@import '@{dir}/elements.less';           // HTML elements

// skin modifications
@import '@{dir}/interface.less';          // skin/chrome changes
@import '@{dir}/files.less';              // Files, galleries
@import '@{dir}/specials.less';           // special pages
@import '@{dir}/diff.less';               // [[Special:MobileDiff]]

// templates
@import '@{dir}/infobox.less';
@import '@{dir}/tiles.less';
@import '@{dir}/navbox.less';

// page-specific styles
@import '@{dir}/mainpage.less';           // main page (obviously)

// ===== Other =====
// minerva doesnt set a bg since it 100%s all tables
.wikitable {
	background: none;
	box-shadow: none;

	tbody {
		background: var(--body-light);
	}
}

// Table of Contents
.toc {
	background-color: var(--body-light);
	border-color: var(--body-border);
}

#filetoc li {
	display: inline;
	padding-right: 2em;
}

// Sitenotice stuff
.mw-dismissable-notice-body {
	margin: 0;

	.mw-dismissable-notice-close-parent {
		border-radius: 0 !important;
		font-size: .75em;
	}
}

:root {
	--thumb-image-background: var(--body-light);
	--thumb-caption-background: var(--body-dark);
}

.content {
	// image thumbnails
	.thumbinner {
		background-color: var(--thumb-bg);
	}
	
	.thumbimage {
		border: 1px solid transparent;
		border-bottom: none;
	}
	
	.thumbcaption {
		margin: 0;
		padding: 4px 6px !important; // minerva has !important
		color: inherit;
		background: var(--thumb-caption-bg);
	}
	
	// minerva sets a margin: 1em 0 to all tables
	table.messagebox {
		margin: 0.5em auto;
	}
	
	// fix for plink/table images often shrinking into nothingness
	table a > img {
		max-width: inherit !important;
		height: inherit !important;
	}
	
	// the above would make images inside infobox really large
	// if they don't have a specified width/height
	.infobox a > img {
		max-width: 100% !important;
		height: auto !important;
	}
	
	// override above to make infobox-bonuses scrollable
	.infobox-bonuses a > img {
		max-width: inherit !important;
		height: inherit !important;
	}
}