WickedGov:Main Page/styles.css: Difference between revisions

From WickedGov, the Massachusetts civics wiki
Jump to navigation Jump to search
more subdued darkmode colors
expand
 
(4 intermediate revisions by the same user not shown)
Line 19: Line 19:
}
}


/* Derived from enwikipedia */
#mp-welcome h1,
#mp-column-container h2,
#mp-welcome .mw-heading1,
#mp-column-container .mw-heading2 {
font-size: inherit;
font-weight: inherit;
font-family: inherit;
display: inline;
border: none;
}


/* "Welcome to WickedGov!" */
/* "Welcome to WickedGov!" */
Line 108: Line 119:
margin-top: 0.5em;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-bottom: 0.5em;
border: 0;
border: none;
background-color: transparent;
background-color: transparent;
}
}
Line 132: Line 143:
box-sizing: border-box;
box-sizing: border-box;
padding: 0.25em 0.9em;
padding: 0.25em 0.9em;
margin-top: 0.25em;
}
}
html.skin-theme-clientpref-night #mp-content {
html.skin-theme-clientpref-night #mp-content {
Line 138: Line 150:
.mp-divider {
.mp-divider {
display: block;
display: block;
border: none;
height: 1px;
margin-top: 0.5em;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-bottom: 0.5em;

Latest revision as of 00:05, 14 January 2025

/* __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;
}

/* Derived from enwikipedia */
#mp-welcome h1,
#mp-column-container h2,
#mp-welcome .mw-heading1,
#mp-column-container .mw-heading2 {
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	display: inline;
	border: none;
}

/* "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: #000033;
}

/* 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;
}

/* 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: #000033;
	}
}

/* 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: none;
		background-color: transparent;
	}
	html.skin-theme-clientpref-os #mp-featurednews,
	html.skin-theme-clientpref-os #mp-featuredarticle, 
	html.skin-theme-clientpref-os #mp-topbox, 
	html.skin-theme-clientpref-os #mp-stats,
	html.skin-theme-clientpref-night #mp-featurednews,
	html.skin-theme-clientpref-night #mp-featuredarticle,
	html.skin-theme-clientpref-night #mp-topbox,
	html.skin-theme-clientpref-night #mp-stats {
		background-color: transparent;
	}
	#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;
		margin-top: 0.25em;
	}
	html.skin-theme-clientpref-night #mp-content {
		background-color: transparent;
	}
	.mp-divider {
		display: block;
		border: none;
		height: 1px;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		clear: both;
	}
}