MediaWiki:Vector.css

From Echoes of the Plum Grove Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Vector skin */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap');
:root {
	--wiki-body-background-image: url(https://echoesoftheplumgrove.wiki.gg/images/8/80/Site-background.jpg);
	--wiki-body-background-color: #312b99;
	--wiki-body-header-bg: #8579b7;
	--wiki-body-header-border: #b191c0;
	--wiki-content-background-color: #454271;
	--wiki-content-background-color-alpha: rgba(69, 66, 113, 0.9);
	--wiki-content-text-color: #f0f0f0;
}
body {
	background: var(--wiki-body-background-image) no-repeat var(--wiki-body-background-color);
	background-size: cover;
	background-attachment: fixed;
}
a, a:visited, .toctogglelabel,
.mw-parser-output a.extiw, .mw-parser-output a.external,
.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
	color: #afafff;
}
.mw-parser-output a.external {
	background: none;
	padding-right: inherit;
}
a.new, a.new:visited, .mw-plusminus-neg {
	color: #ff9b9b;
}
#editpage-copywarn a {
	color: #0645ad;
}
ul {
	list-style-image: none;
}
table {
	display: table;
	white-space: normal;
}
#mw-head-base {
	background: var(--wiki-body-header-bg);
	border-bottom: 8px solid var(--wiki-body-header-border);
}
#mw-page-base {
	background: none;
}
.mw-body, .parsoid-body,
.mw-footer {
	border: none;
	background: var(--wiki-content-background-color-alpha);
	color: var(--wiki-content-text-color);
}
h1, h2, h3, h4, h5, h6,
.mw-footer li {
	color: var(--wiki-content-text-color);
}
#firstHeading {
	font-family: Fredoka, sans-serif;
}
h1, h2 {
	border-color: var(--wiki-body-header-border);
}
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
	background: none;
}
.vector-menu-tabs-legacy li,
.vector-menu-dropdown {
	background: none;
	border: none;
	border-radius: 5px;
	transition: background 0.3s;
}
#left-navigation .vector-menu-tabs-legacy li {
	margin-left: 5px;
}
#right-navigation .vector-menu-tabs-legacy li {
	margin-right: 5px;
}
.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy li a:visited,
.vector-menu-tabs-legacy .selected a,
.vector-menu-tabs-legacy .selected a:visited,
.vector-menu-dropdown .vector-menu-heading,
.vector-menu-dropdown .vector-menu-heading:hover,
.vector-menu-dropdown .vector-menu-heading:focus {
	font-family: Fredoka, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wiki-content-text-color);
	height: unset;
	padding: 0.4em;
	font-size: 1.25em;
	font-weight: 600;
}
.vector-menu-tabs-legacy .selected,
.vector-menu-tabs-legacy li:hover,
.vector-menu-dropdown:hover {
	background: var(--wiki-content-background-color);
}
.vector-menu-tabs-legacy .new a,
.vector-menu-tabs-legacy .new a:visited {
	color: #f99;
	text-shadow: -1px -1px 0 var(--wiki-content-background-color), 1px -1px 0 var(--wiki-content-background-color), -1px 1px 0 var(--wiki-content-background-color), 1px 1px 0 var(--wiki-content-background-color);
}
.vector-menu-dropdown .vector-menu-heading:after {
	display: none;
}
#p-cactions-label .vector-menu-heading-label:after {
	content: ">";
	font-size: 0.75em;
	transform: rotate(90deg);
	display: inline-block;
	margin-left: 7px;
}
.vector-search-box form {
	margin: 0.25em 0 0;
}
.vector-search-box-input {
	background: var(--wiki-content-background-color);
	color: var(--wiki-content-text-color);
	border: none;
	border-radius: 5px;
}
.vector-search-box-input::placeholder {
	color: #c1c0d0;
}
.searchButton[name="go"] {
	filter: invert(1);
}
.vector-menu-tabs .mw-watchlink.icon a {
	font-size: 0;
	padding: 20px 0 15px 0;
	width: 25px;
}
.vector-menu-tabs .mw-watchlink.icon a:before {
	width: 25px;
	top: 5px;
	left: 0;
}
.vector-menu-tabs .mw-watchlink span {
	display: none;
}
.vector-menu-tabs .mw-watchlink.icon a:before,
.vector-menu-tabs #ca-watch.icon a:before,
.vector-menu-tabs #ca-watch.icon:hover a:before,
.vector-menu-tabs #ca-watch.icon:active a:before,
.vector-menu-tabs #ca-watch.icon a:focus:before,
.vector-menu-tabs #ca-unwatch.icon a:before,
.vector-menu-tabs #ca-unwatch.icon:hover a:before,
.vector-menu-tabs #ca-unwatch.icon:active a:before,
.vector-menu-tabs #ca-unwatch.icon a:focus:before {
	background: none;
	content: "☆";
	font-size: 20px;
	color: #fff;
	top: 8px;
	left: 4px;
}
.vector-menu-tabs #ca-watch.icon:hover a:before,
.vector-menu-tabs #ca-unwatch.icon a:before,
.vector-menu-tabs #ca-unwatch.icon a:focus:before {
	content: "★";
}
.vector-menu-tabs #ca-unwatch.icon a.loading:before,
.vector-menu-tabs #ca-watch.icon a.loading:before {
	left: 0px;
	text-align: center;
	transform-origin: 50% calc(50% - 3px);
}
.vector-menu-dropdown .vector-menu-content {
	right: 1px;
	left: unset;
}
#mw-panel {
	position: relative;
	top: -50px;
}
#mw-panel .vector-menu {
	background: #e3cfb2;
	border: 3px solid #bfab84;
	border-radius: 10px;
	margin: 0 0.3em 15px;
	outline: 5px solid #4f391e;
}
#mw-panel .vector-menu li a,
#mw-panel .vector-menu li a:visited {
	font-family: Fredoka, sans-serif;
	color: #4f391e;
}
.vector-menu-portal .vector-menu-heading {
	font-family: Fredoka, sans-serif;
	color: #4f391e;
	background: none;
	border-bottom: 2px solid #7d5f3a;
	width: 85%;
}
.vector-menu-portal .vector-menu-heading {
	font-weight: 600;
	font-size: 14px;
	padding-top: 3px;
	margin-top: 0;
}
#filetoc, .catlinks, .toc, .toccolours, div.thumbinner, #pagehistory li.selected {
	background: #454271;
	border-color: #b191c0;
	outline-color: #b191c0;
}
#pagehistory li.selected {
	color: #fff;
}
.mw-plusminus-pos {
	color: #95ff95;
}
.thumbimage {
	background: none;
	border: none;
}
@media screen and (max-width: 1200px){
	.vector-menu-tabs-legacy li a,
	.vector-menu-tabs-legacy li a:visited,
	.vector-menu-tabs-legacy .selected a,
	.vector-menu-tabs-legacy .selected a:visited,
	.vector-menu-dropdown .vector-menu-heading,
	.vector-menu-dropdown .vector-menu-heading:hover,
	.vector-menu-dropdown .vector-menu-heading:focus {
		font-size: 0.9em;
	}
	.vector-menu-tabs .mw-watchlink.icon a:before,
	.vector-menu-tabs #ca-watch.icon a:before,
	.vector-menu-tabs #ca-watch.icon:hover a:before,
	.vector-menu-tabs #ca-watch.icon:active a:before,
	.vector-menu-tabs #ca-watch.icon a:focus:before,
	.vector-menu-tabs #ca-unwatch.icon a:before,
	.vector-menu-tabs #ca-unwatch.icon:hover a:before,
	.vector-menu-tabs #ca-unwatch.icon:active a:before,
	.vector-menu-tabs #ca-unwatch.icon a:focus:before {
		font-size: 16px;
		top: 6px;
		left: 5px;
	}
	.vector-menu-tabs #ca-unwatch.icon a.loading::before,
	.vector-menu-tabs #ca-watch.icon a.loading::before {
		left: 0px;
		transform-origin: 50% calc(50% - 1px);
	}
	#mw-head-base {
		height: 4.6em;
	}
	.vector-search-box form {
		margin: 0;
	}
	.vector-menu-tabs .mw-watchlink.icon a {
		padding: 15px 0;
	}
	.vector-menu-tabs .mw-watchlink.icon a:before {
		top: 6px;
	}
}
@media screen and (max-width: 982px){
	#left-navigation .vector-menu-tabs-legacy li {
		margin-left: 0px;
	}
	#right-navigation .vector-menu-tabs-legacy li {
		margin-right: 0px;
	}
}
@media screen and (max-width: 720px){
	body {
		overflow-x: hidden;
	}
	#mw-head-base {
		margin-top: 10em;
		margin-left: 0;
		height: 4.5em;
	}
	#left-navigation,
	#right-navigation {
		margin-top: 14.25em;
	}
	#left-navigation {
		margin-left: 5px;
	}
	#p-search {
		position: absolute;
		top: 12.25em;
		left: 20vw;
	}
	.vector-search-box-inner {
		width: 50vw;
		max-width: none;
	}
	.mw-body {
		margin-top: 0;
	}
	#mw-panel {
		position: absolute;
		top: 35px;
		display: flex;
		width: calc(100% - 15px);
		margin-left: 5px;
		background: #e3cfb2;
		border: 3px solid #bfab84;
		border-radius: 10px;
		outline: 5px solid #4f391e;
		margin-top: 162px;
	}
	#p-logo {
		position: absolute;
		top: -162px;
		left: calc(50% - 80px);
	}
	#mw-panel .vector-menu-content {
		display: none;
	}
	#p-logo + .mw-portlet .vector-menu-heading {
		display: inherit;
	}
	.vector-menu-portal .vector-menu-heading {
		border: none;
		width: auto;
		margin: 0;
		padding: 2px 5px;
	}
	#mw-panel .vector-menu {
		margin: 0;
		border: none;
		border-radius: 0;
		outline-width: 0;
		float: left;
		background: none;
	}
	#mw-panel .vector-menu-portal:hover .vector-menu-content {
		position: absolute;
		background: #e3cfb2;
		padding: 0 10px;
		display: block;
	}
}

/* Main Page */
.mainpage-container {
	display: grid;
	grid-template-columns: 100%;
}
.mainpage-box {
	border: 3px solid #b191c0;
	background: #454271;
	border-radius: 5px;
	padding: 5px 10px;
	margin-bottom: 10px;
}
.mainpage-center {
	text-align: center;
}
.mainpage-header {
	text-align: center;
	font-family: Fredoka, sans-serif;
	font-size: 1.5em;
	font-weight: 600;
}
.mainpage-sitename {
	white-space: nowrap;
}
.mainpage-container li.gallerybox {
	vertical-align: middle;
}
@media screen and (min-width: 1200px){
	.mainpage-container {
		grid-template-columns: 40% 59%;
		justify-content: space-between;
	}
	.mainpage-box:nth-child(2) {
		grid-row-start: span 2;
	}
}

/* Infoboxes */
:root {
	--pi-background: #e3cfb2;
	--pi-secondary-background: #e3cfb2;
	--pi-border-color: #bfab84;
}
.portable-infobox {
	font-size: 0.88em;
	border: 3px solid #bfab84;
	border-radius: 10px;
	outline: 5px solid #4f391e;
}
.portable-infobox, .portable-infobox h1, .portable-infobox h2, .portable-infobox h3, .portable-infobox h4, .portable-infobox h5, .portable-infobox h6 {
	font-family: Fredoka, sans-serif;
	color: #4f391e;
}
.portable-infobox .pi-title,
.portable-infobox .pi-data-label {
	font-weight: 600;
}
Retrieved from "https://echoesoftheplumgrove.wiki.gg/index.php?title=MediaWiki:Vector.css&oldid=227"