WickedGov:Main Page/styles.css

/* __NOINDEX__ */

/* Further styles are located in MediaWiki:Common.css */

/* Box containing welcome message, and stats box */
#mp-topbox, #mp-stats {
	clear: both;
	margin: 0.2em 0;
	width: 100%;
	border: 1px solid #a2a9b1;
	background-color: #f7f7f7;
	box-sizing: border-box;
	padding: 0.25em 0.9em;
	text-align: center;
}
html.skin-theme-clientpref-night #mp-topbox,
html.skin-theme-clientpref-night #mp-stats {
	background-color: transparent;
}


/* "Welcome to WickedGov!" */
#mp-welcome {
	font-size: 175%;
}

/* "Anyone can edit WickedGov..." */
#mp-anyone {
	font-size: 90%;
}

#mp-column-container {
	display: flex;
	padding: 0;
}

/* Featured article and featured news boxes */
#mp-featuredarticle, #mp-featurednews {
	margin:0.2em 0;
	padding: 0.25em 0.9em;
	border: 1px solid #a2a9b1;
}
#mp-featuredarticle {
	flex: 1 1 55%;
	float: left;
	background-color: #eeffee;
}
html.skin-theme-clientpref-night #mp-featuredarticle {
	background-color: #003300;
}

#mp-featurednews {
	flex: 1 1 45%;
	float: right;
	background-color: #eeeeff;
}
html.skin-theme-clientpref-night #mp-featurednews {
	background-color: #000066;
}

/* Headers for featured article and news boxes */
#mp-featuredarticle-header, #mp-featurednews-header {
		float: none;
		font-size: 120%;
		margin-bottom: 0.5em;

}

/* Statistics */
#mp-stats {
	text-align: center;
}

/* Only show dividers on small screens */
.mp-divider {
	display: none;
}
/* For smaller screens */
@media screen and (max-width: 768px) {
	#mp-column-container {
		display: block;
		clear: both;
		margin: 0;
	}
	#mp-featuredarticle,
	#mp-featurednews,
	#mp-topbox,
	#mp-stats {
		clear: both;
		float: none;
		padding: 0;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		border: 0;
		background-color: inherit;
	}
	#mp-featuredarticle-header,
	#mp-featurednews-header {
		text-align: center;
	}
	#mp-content {
		clear: both;
		width: 100%;
		border: 1px solid #a2a9b1;
		background-color: #f7f7f7;
		box-sizing: border-box;
		padding: 0.25em 0.9em;
	}
	html.skin-theme-clientpref-night #mp-content {
		background-color: transparent;
	}
	.mp-divider {
		display: block;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		clear: both;
	}
}

/* OS dark mode */
@media screen and ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os #mp-topbox,
	html.skin-theme-clientpref-os #mp-stats,
	html.skin-theme-clientpref-os #mp-content {
		background-color: transparent;
	}
	html.skin-theme-clientpref-os #mp-featuredarticle {
		background-color: #003300;
	}
	html.skin-theme-clientpref-os #mp-featurednews {
		background-color: #000066;
	}
}