MediaWiki:Vector.css

/* VCR OSD Mono */
@font-face {
	font-family: 'VHS';
	font-weight: 100;
	font-style: normal;
	src: url("https://static.miraheze.org/ultrakillwiki/b/b5/VCR_OSD_MONO_1.001.woff2") format('woff2'); /* Upload font and replace url a with non-miraheze one */
}

/* BroshKill */
@font-face {
	font-family: 'BroshKill';
	font-weight: 100;
	font-style: normal;
	src: url("https://static.miraheze.org/ultrakillwiki/0/0a/BroshKill-Regular.woff2") format('woff2'); /* Upload font and replace url with a non-miraheze one */
}

.mediawiki {
	background: fixed center/100% 100% url(/images/0/09/BGPlaceHolder.png);
	
	.content-wrapper {
		#mw-head {
			background: #131313;
			border-bottom: solid 6px #D61E1E;
			font-weight: bold;
			
			#left-navigation {
				margin-left: 0;
				padding-left: 11em;
				background: no-repeat 0.5em/10em auto url(/images/e/e6/Site-logo.png);
			}
			
			.vector-menu-dropdown {
				.vector-menu-heading {
					font-weight: bold;
					background: none;
					color: #80BBFF;
					
					&::after {
						display: none;
					}
				}
				
				.vector-menu-content {
					background: #131313;
					border: 3px solid #800000;
					border-top: none;
				}
				
				.mw-list-item a {
					color: #80BBFF;
				}
			}
			
			.vector-menu-tabs-legacy {
				.selected {
					border-bottom: 6px solid #800000;
					a {
						color: plum;
					}
				}
				
				li {
					background: none;
					a {
						color: #80BBFF;
					}
				}
			}
			
			.vector-menu-tabs {
				background: none;
				a {
					background: none;
				}
			}
			
			.vector-search-box-input {
				background: #242424;
				border-color: #343434;
				color: #FFFFFF;
			}
		}
		
		#mw-panel {
			margin-bottom:2em;
			
			.mw-wiki-logo {
				background-image: url(/images/4/4a/Site-favicon.ico);
				background-size: 100%;
			}
			
			.vector-menu-portal {
				color: #FFFFFF;
				background: #242424;
				border-left: solid #343434;
				border-right: solid #343434;
				margin: 0;
				
				&:nth-of-type(2) {
					border-top: solid #343434;
				}
				
				&:last-of-type {
					border-bottom: solid #343434;
				}
				
				.vector-menu-heading {
					color: #FFFFFF;
					text-align: center;
					margin: 0;
					font-size: 100%;
					background-image: linear-gradient(to right, rgba(200,204,209,0) 0, #C8CCD1 33%, #C8CCD1 66%, rgba(200,204,209,0) 100%);
					background-size: 100% 2px;
				}
				
				.vector-menu-content {
					margin-right: 0.5em;
					li {
						font-size: 0.9em;
						line-height: 1;
						
						a {
							color: #80BBFF;
							
							&:visited {
								color: plum;
							}
						}
					}
				}
			}
		}
		
		#content {
			background: #242424;
			border: solid #343434;
			color: #FFFFFF;
			
			#firstHeading {
				color: #FF0000;
				font-family: "BroshKill";
				font-size: 300%;
				text-transform: uppercase;
				margin: 0;
			}
			
			#bodyContent {
				font-size: 0.95em;
				line-height: 1.5;
				
				ul, ol {
					list-style-image: none;
					margin: 0;
				}
					
				li {
					list-style-position: inside;
					margin-bottom: 0;
					
					ul, ol {
						margin-left: 1em;
					}
				}
				
				table {
					display: table;
					white-space: normal;
						
					> caption {
						white-space: nowrap;
					}
						
					&:is(.mw-collapsed, :not(.wikitable)) > caption {
						border-bottom: 1px solid #141414;
					}
					
					:is(th, td):has(> table:only-child) {
						padding: 0;
					}
					
					table {
						width: 100%;
						border-collapse: collapse;
						border-style: hidden;
					}
					
					&.wikitable {
						border: 1px solid #141414;
						color: #FFFFFF;
						background: none;
						
						&.infobox {
							float: right;
							margin: 0 0 0.5em 1em;
							max-width: 25%;
							
							.mw-gallery-slideshow { 
								margin: 0 auto;
								max-width: 200px;
							
								.mw-gallery-slideshow-buttons span:nth-of-type(2) {
									margin: 0;
								}
							}
							
							tr:first-child th:only-child {
								background: #B30000;
								font-size: 1.25em;
							}
							
							th:only-child {
								background: #CC2727;
								font-size: 1.1em;
							}
							
							th:not(:only-child) {
								padding: 0.4em 0.5em;
							}
						}
					}
					
					&.mw-datatable {
						border: 1px solid #141414;
						color: white;
						background: none;
					}
					
					&:is(.wikitable, .mw-datatable) {
						td {
							border: 1px solid #141414;
							background: #414141;
							padding: 0.4em 0.5em;
						}
						
						th {
							border: 1px solid #141414;
							background: #282828;
						}
					}
				}
				
				.infobox {
					.tabber {
						.wikitable.infobox {
							max-width: 100%;
							width: 100%;
						}
						
						:has(> .tabber) {
							width: min-content;
						}
					}
					
					> .tabber {
						float: right;
						margin-left: 16px;
						width: min-content;
					}
				}
				
				img {
					vertical-align: text-bottom;
				}
				
				div.thumbinner {
					background-color: #282828;
					border-color: #141414;
					border-bottom-width: 0.2em;
					padding: 0.75em;
					
					.thumbimage {
						border: none;
					}
					
					.thumbcaption {
						text-align: center;
						padding: 0.5em 0.25em 0;
						
						.magnify {
						  display: none;
						}
					}
				}
				
				.gallery {
					&.mw-gallery-slideshow .gallerybox {
						&.slideshow-current {
							background-color: #242424;
							border: solid #343434;
						}
						
						div {
							max-width: 100%;
						}
					}
					
					&.mw-gallery-packed {
						text-align: left;
						
						.gallerytext {
							text-align: center;
						}
					}
					
					> .gallerybox {
						margin-left: 0px;
					}
				}
				
				/* ToCs */
				#toc {
					padding: 0.5em 1em 0;
					font-size: 100%;
					background: #2B2B2B;
					border: 1px solid #171717;
					border-bottom-width: 0.2em;
					
					#toctogglecheckbox:checked ~ .toctitle {
						border-bottom: none;
					}
					
					.toctitle {
						border-bottom: 2px solid #808080;
						text-align: left;
						
						#mw-toc-heading {
							text-transform: none;
							font-family: "VCR OSD Extended Mono";
							font-size: initial;
							font-weight: 100;
						}
						
						.toctogglespan {
							float: right;
							margin-left: 0.5em;
							
							.toctogglelabel {
								color: #80BBFF;
							}
						}
					}
					
					li.toclevel-1 {
						margin-left: 0;
					}
					
					.tocnumber {
						color: #FFFFFF;
					}
				}
			}
			
			.search-types .current a {
				color: plum;
			}
			
			.mw-highlight-lines pre {
				border: 1px solid #323232;
				box-shadow: inset 2.75em 0 0 #444444;
			}
		}
		
		h1, h2, h3, h4, h5, h6 {
			font-family: "VCR OSD Extended Mono";
			text-transform: uppercase;
			color: white;
			margin: 0.5em 0 0 0;
		}
		
		h1 {
			font-size: 200%;
		}
		
		h2 {
			font-size: 180%;
		}
		
		h3 {
			font-size: 160%;
		}
		
		h4 {
			font-size: 140%;
		}
		
		h5 {
			font-size: 120%;
		}
		
		h6 {
			font-size: 100%;
		}
	}
	
	hr {
		border: 1px #808080;
		border-style: solid none;
		margin: 0.5em 0;
		overflow: hidden;
	}
	
	/* Links */
	a {
		color: #80BBFF;
		
		&:visited {
			color: plum;
		}

		&.new {
			color: red;
		}
		
		&.external:visited {
			color: mediumorchid;
		}
	}
	
	#footer {
		background: #131313;
		border-top: solid 6px #D61E1E;
		color: white;
		margin-left: 0;
		
		padding: 12px;
		box-sizing: border-box;
		position: relative;
		
		display: grid;
		grid-template-columns: [l] 1fr 0fr [r];
		grid-template-rows: [t] auto auto [b];
		z-index: 0;
		
		ul li {
			font-size: inherit;
			line-height: 1.5;
			padding: 0;
			color: gray;
		}
	
		#footer-info {
			font-size: 11px;
			display: contents;
			
			#footer-info-lastmod {
				grid-column: l / span 1;
				grid-row: t / span 1;
				place-self: start;
				margin-bottom: 1em;
			}
			
			#footer-info-copyright {
				grid-column: l / span 1;
				grid-row: span 1 / b;
				place-self: end stretch;
				position: relative;
				padding-right: 100px;
				
				img {
					position: absolute;
					right: 0;
					bottom: -1px;
					height: 33px;
					width: auto;
				}
			}
		}
		
		#footer-icons {
			grid-column: span 1 / r;
			grid-row: t / b;
			place-self: end;
		}
	}
	
	.mw-search-profile-tabs, #mw-searchoptions {
		background: #2B2B2B;
		border: 1px solid #646464;
	}
	
	.mw-changeslist-legend {
	    background-color: #242424;
	}
	
	code, pre, .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
		background: #2B2B2B;
		border: 1px solid #646464;
		color: #FFFFFF;
	}
	
	.diff-context {
	  color: #FFFFFF;
	  background: #2B2B2B;
	  border-color: #646464;
	}
	
	.diff-deletedline {
		border-color: #BF0000;
		background: #161616;
		
		.diffchange {
			background: #600000;
		}
	}
	
	.diff-addedline {
		border-color: #00BF00;
		background: #161616;
		
		.diffchange {
			background: #006000;
		}
	}
	
	.tabs-label {
		background: #646464;
	}
	
	.tabs-tabbox > .tabs-input:checked + .tabs-label {
		background: #2B2B2B;
	}
}