MediaWiki:Vector.css: Difference between revisions

Revision as of 19:23, 2 November 2026

/* ======================== */
/* GENERIC STYLING          */
/* ======================== */

:root {
	--mainGap:32px;

	/* Header */
	--headerHeight:50px;
	--headerGap:16px;
	--headerButtonSize:16px;
	--headerSpacing:8px;

	--userIconSize:26px;

	/* Logo */
	--logoWidth:350px;
	--logoHeight:150px;
	--logoGap:16px;

	/* Sidebar */
	--sidebarWidth:200px;
	--sidebarGap:16px;
	--sidebarPadding:16px;
	--sidebarHeaderSize:20px;
	--sidebarButtonSize:14px;
	--sidebarSpacing:8px;

	/* Navigation */
	--navigationHeight:50px;
	--navigationButtonSize:16px;

	--watchWidth:50px;
	--watchIconSize:20px;

	--moreIconSize:20px;

	--searchWidth:300px;
	--searchHeight:30px;
	--searchSpacing:8px;
	--searchIconSize:20px;

	/* Content */
	--contentSpacing:24px;

	/* Footer */
	--footerGap:32px;
	--footerButtonSize:14px;
	--footerSpacing:16px;

	--footerLinkSpacing:8px;

	/* Colors */
	--color-base:#DDDDDD;
	--background-color-content-removed:#FF280080;
	--background-color-content-added:#29CC2980;

	--colWhiteDark:#7B7B7B;
	--colWhiteMid:#DDDDDD;
	--colWhiteLight:#FFFFFF;

	--colBlackDark:#181818;
	--colBlackMid:#222222;
	--colBlackLight:#333333;
	--colBlackLighter:#444444;

	--colYellowMid:#FFBB00;
	--colYellowLight:#FFD419;
}

html, body {
	height:unset;
}

body {  
	background-image:url(/images/5/5a/Everybody_Edits_Wiki_Background.png);
	background-color:var(--colBlackDark);
}

/* ======================== */
/* HEADER BAR               */
/* ======================== */

#mw-page-base {
	height:var(--headerHeight);
}

#p-personal {
	top:0px;
	left:0px;
	z-index:1;
	box-shadow:0px 5px 5px rgba(0, 0, 0, 0.5);
	border-bottom:2px solid var(--colWhiteDark);
	background:linear-gradient(var(--colBlackLight), var(--colBlackMid));
	width:100%;
	height:var(--headerHeight);
}

#p-personal div, #p-personal ul {
	height:100%;
}

#p-personal ul {
	display:flex;
	justify-content:flex-end;
	align-items:center;
	gap:var(--headerSpacing);
	padding:0px var(--mainGap);
}

#p-personal ul * {
	margin:0px;
	padding:0px;
	font-weight:bold;
	font-size:var(--headerButtonSize);
}

#p-personal #pt-userpage a {
	display:flex;
	align-items:center;
	background-image:url(/images/f/fe/Smiley_smiley.png);
	background-position:left;
	background-size:contain;
	padding:0px 0px 0px calc(var(--userIconSize) + 4px);
	image-rendering:pixelated;
	min-height:var(--userIconSize);
}

/* ======================== */
/* LOGO                     */
/* ======================== */

#mw-navigation {
	position:absolute;
	top:0px;
	width:100%;
	height:0px;
}

#mw-panel {
	position:unset;
	margin-top:var(--sidebarOffset) !important;
	padding-bottom:var(--mainGap) !important;
	padding:0px;
	width:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
}

#p-logo {
	display:flex;
	position:absolute;
	z-index:1;
	filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
	margin:0px;
	width:100%;
	height:auto;
}

#p-logo a {
	background-image:url(/images/c/c9/Everybody_Edits_Wiki_Logo.png);
	background-size:contain;
	width:var(--logoWidth);
	height:var(--logoHeight);
}

#p-logo a:hover, #p-logo a:focus {
	filter:brightness(1.15);
}

#p-logo a:active {
	filter:brightness(0.85);
}

/* ======================== */
/* CENTERED LOGO            */
/* ======================== */

:root {
	--topOffset:calc(var(--headerHeight) + var(--headerGap) + var(--logoHeight) + var(--logoGap));
	--sidebarOffset:var(--topOffset);
}

#p-logo {
	top:calc(var(--headerHeight) + var(--headerGap));
	justify-content:center;
}

/* ======================== */
/* SIDEBAR                  */
/* ======================== */

#mw-panel nav {
	box-sizing:border-box;
	margin:0px;
	margin-bottom:var(--sidebarGap);
	margin-left:var(--mainGap);
	border:2px solid var(--colWhiteDark);
	border-radius:5px;
	background:linear-gradient(var(--colBlackLight), var(--colBlackMid));
	padding:var(--sidebarPadding);
	width:var(--sidebarWidth);
}

#mw-panel nav:last-of-type {
	margin-bottom:unset;
}

#mw-panel nav h3 {
	display:block !important;
	margin:0px;
	margin-bottom:var(--sidebarSpacing);
	background:none;
	padding:0px;
	color:var(--colWhiteLight);
	font-size:var(--sidebarHeaderSize);
}

#mw-panel nav div {
	margin:0px;
}

#mw-panel nav ul {
	display:flex;
	flex-direction:column;
	gap:var(--sidebarSpacing);
	padding:0px;
}

#mw-panel nav li {
	padding:0px;
	font-size:var(--sidebarButtonSize);
}

#mw-panel nav a {
	color:var(--colWhiteMid) !important;
}

#mw-panel nav a:hover, #mw-panel nav a:focus {
	color:var(--colWhiteLight) !important;
}

/* ======================== */
/* NAVIGATION TABS          */
/* ======================== */

#mw-head-base {
	box-sizing:border-box;
	margin-top:calc(var(--topOffset) - var(--headerHeight));
	margin-right:var(--mainGap);
	margin-left:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
	border:2px solid var(--colWhiteDark);
	border-radius:5px 5px 0px 0px;
	background:var(--colBlackMid);
	height:var(--navigationHeight);
}

#mw-head {
	height:var(--topOffset);
}

#left-navigation, #right-navigation {
	position:absolute;
	bottom:calc(0px - var(--navigationHeight));
	margin:0px;
	height:var(--navigationHeight);
}

#left-navigation {
	left:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
}

#right-navigation {
	right:var(--mainGap);
}

#left-navigation *, #right-navigation * {
	margin:0px;
	padding:0px;
}

#left-navigation nav, #right-navigation nav, #left-navigation li, #right-navigation li {
	background:none;
}

#left-navigation a, #right-navigation a, #right-navigation #p-cactions, #right-navigation #p-search {
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	margin-right:-2px;
	border:2px solid var(--colWhiteDark);
	border-radius:5px 5px 0px 0px;
	background:var(--colBlackMid);
	padding:0px 8px;
	height:var(--navigationHeight);
}

#left-navigation .selected a, #right-navigation .selected a {
	border-bottom:0px;
	background:var(--colBlackLight);
	padding-bottom:2px;
	color:var(--colWhiteLight) !important;
}

#left-navigation a, #right-navigation a, #right-navigation #p-cactions-label {
	font-weight:bold;
	font-size:var(--navigationButtonSize);
}

.emptyPortlet {
	display:none !important;
}

/* ======================== */
/* NAVIGATION - WATCHLIST   */
/* ======================== */

#right-navigation .mw-watchlink a {
	min-width:var(--watchWidth);
	font-size:0px;
}

#right-navigation .mw-watchlink a:before {
	top:unset;
	left:unset;
	background-size:contain;
	width:100%;
	height:var(--watchIconSize);
}

#right-navigation #ca-watch a:before {
	background-image:url(/images/1/1a/Wiki_Watch_Star.svg);
}

#right-navigation #ca-watch a:hover:before {
	background-image:url(/images/7/77/Wiki_Watch_Star_Hover.svg);
}

#right-navigation #ca-unwatch a:before {
	background-image:url(/images/6/6b/Wiki_Watched_Star.svg);
}

#right-navigation #ca-unwatch a:hover:before {
	background-image:url(/images/3/33/Wiki_Watched_Star_Hover.svg);
}

/* ======================== */
/* NAVIGATION - MORE        */
/* ======================== */

#right-navigation #p-cactions-label {
	display:flex;
	align-items:center;
	outline:none;
	background:none;
	min-height:var(--moreIconSize);
	color:var(--colWhiteLight);
}

#right-navigation #p-cactions-label:after {
	margin-left:4px;
	background-image:url(/images/b/b8/Wiki_More_Arrow.svg);
	background-size:contain;
	width:var(--moreIconSize);
	height:var(--moreIconSize);
}

#right-navigation #p-cactions div {
	left:-2px;
	box-sizing:border-box;
	box-shadow:none;
	border:2px solid var(--colWhiteDark);
	border-radius:0px 0px 5px 5px;
	min-width:calc(100% + 4px);
}

#right-navigation #p-cactions a {
	border:none;
	border-radius:0px;
	background:var(--colBlackMid);
}

/* ======================== */
/* NAVIGATION - SEARCH      */
/* ======================== */

#right-navigation #p-search {
	margin:0px;
}

#simpleSearch {
	width:var(--searchWidth);
	min-width:unset;
	max-width:unset;
	height:var(--searchHeight);
}

#simpleSearch #searchInput {
	box-sizing:border-box;
	padding:0px calc(var(--searchIconSize) + var(--searchSpacing) * 2) 0px var(--searchSpacing);
	height:100%;
}

#simpleSearch #searchButton {
	top:calc((var(--searchHeight) - var(--searchIconSize)) / 2);
	right:var(--searchSpacing);
	opacity:unset;
	background-image:url(/images/e/ee/Wiki_Search.svg);
	background-size:contain;
	width:var(--searchIconSize);
	min-width:unset;
	height:var(--searchIconSize);
}

/* ======================== */
/* MAIN CONTENT             */
/* ======================== */

#content {
	margin-top:0px;
	margin-right:var(--mainGap);
	margin-left:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
	box-shadow:0px 5px 5px rgba(0, 0, 0, 0.5);
	border:2px solid var(--colWhiteDark);
	border-top:0px;
	border-radius:0px 0px 5px 5px;
	background: linear-gradient(var(--colBlackLight) 0px, var(--colBlackMid) 54px);
	padding:var(--contentSpacing);
	color:var(--colWhiteMid);
}

/* ======================== */
/* FOOTER                   */
/* ======================== */

#footer {
	display:flex;
	position:relative;
	flex-direction:column;
	margin-top:var(--footerGap);
	margin-right:var(--mainGap);
	margin-bottom:var(--mainGap);
	margin-left:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
	border:2px solid var(--colWhiteDark);
	border-radius:5px;
	background:linear-gradient(var(--colBlackLight), var(--colBlackMid));
	padding:var(--mainGap);
}

#footer li {
	margin:0px;
	margin-bottom:var(--footerSpacing);
}

#footer #footer-places {
	display:flex;
	gap:var(--footerLinkSpacing);
	font-weight:bold;
}

#footer #footer-places li {
	margin:0px;
}

#footer #footer-icons {
	display:none;
}

#footer * {
	margin:0px;
	padding:0px;
	color:var(--colWhiteMid);
	font-size:var(--footerButtonSize);
	line-height:normal !important;
}

/* ================================================ */
/* PAGE CONTENTS - WELCOME TO HELL                  */
/* ================================================ */
/* Most of this is converting singular elements to  */
/* dark mode, though many of these also include     */
/* wiki-specific styling. Copu at your own risk.    */
/* ================================================ */

/* Links */
a, #toc label, .mw-collapsible-text {
	color:var(--colYellowMid) !important;
	text-decoration:none;
}

a:hover, a:focus, #toc label:hover, #toc label:focus, .mw-collapsible-text:hover, .mw-collapsible-text:focus {
	color:var(--colYellowLight) !important;
	text-decoration:underline 0.1em;
	text-underline-offset:0.1em;
}

a:visited {
	color:#EB8C40 !important;
}

a:visited:hover {
	color:#FFA559 !important;
}

a.new {
	color:#FF2800 !important;
}

a.new:hover, a.new:focus {
	color:#FF4119 !important;
}

a.new:visited {
	color:#EB1D40 !important;
}

a.new:visited:hover {
	color:#FF3659 !important;
}

.mw-parser-output a.external {
	background-image:url(/images/b/ba/Wiki_External_Link.svg);
}

.mw-helplink-icon {
	background:var(--colYellowMid) !important;
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
	color:var(--colWhiteLight);
}

/* Lists */
ul {
	list-style-image:none;
}

/* Code */
pre, code, .mw-code {
	border:none;
	border-radius:5px;
	background:var(--colBlackLight);
	color:var(--colWhiteMid);
}

/* Inputs and textareas */
.mw-input input, #wpSummary, textarea, #simpleSearch #searchInput {
	border:2px solid var(--colWhiteDark) !important;
	border-radius:5px !important;
	background:var(--colBlackLight) !important;
	color:var(--colWhiteMid) !important;
}

/* Buttons and checkboxes */
.oo-ui-buttonElement-button, input[type="checkbox"] + span {
	border:2px solid var(--colWhiteDark) !important;
	border-radius:5px !important;
	background-color:var(--colBlackLight) !important;
	color:var(--colWhiteMid) !important;
	transition:none !important;
	box-shadow:none !important;
}

.oo-ui-buttonElement-button:hover, input[type="checkbox"]:hover + span {
	background-color:var(--colBlackLighter) !important;
}

.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button, input[type="checkbox"]:checked + span {
	background-color:var(--colYellowMid) !important;
	color:#000000 !important;
}

.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button:hover, input[type="checkbox"]:checked:hover + span {
	background-color:var(--colYellowLight) !important;
}

input[type="checkbox"]:checked + span {
	background-image:url(/images/9/92/Wiki_Check.svg) !important;
}

/* Warning boxes */
.cdx-message {
	margin-bottom:10px;
}

/* Table of Contents */
#toc, #catlinks {
	border:2px solid var(--colWhiteDark);
	border-radius:5px;
	background:var(--colBlackLight);
	color:var(--colWhiteMid);
}

#toc .tocnumber, .mw-collapsible-toggle:before, .mw-collapsible-toggle:after {
	color:var(--colWhiteMid);
}

/* Tables */
table.wikitable, table.wikitable th, table.wikitable td {
	border:2px solid var(--colWhiteDark);
	background:var(--colBlackMid);
	color:var(--colWhiteMid);
}

table.wikitable th {
	background:var(--colBlackLight);
	color:var(--colWhiteLight);
}

/* Sortable tables */
.headerSort {
	background-image:url(/images/0/06/Wiki_Sort_Both.svg) !important;
}

.headerSort.headerSortUp {
	background-image:url(/images/d/db/Wiki_Sort_Up.svg) !important;
}

.headerSort.headerSortDown {
	background-image:url(/images/e/ee/Wiki_Sort_Down.svg) !important;
}

/* Collapsible tables */
.mw-collapsible-toggle {
	margin-left:5px;
}

/* Thumbnails */
figure {
	display:block !important;
	border:2px solid var(--colWhiteDark) !important;
	border-radius:5px;
	background:var(--colBlackMid) !important;
	padding:6px;
	width:min-content;
}

figure a:after, figure figcaption:before {
	display:none;
}

figure img {
	margin:0px 0px 3px !important;
	border:2px solid var(--colWhiteDark) !important;
}

figure figcaption {
	display:block !important;
	border:none !important;
	background:none !important;
	padding:0px !important;
}

/* Galleries */
li.gallerybox div.thumb {
	border:2px solid var(--colWhiteDark);
	border-radius:5px;
	background:var(--colBlackMid);
}

/* Categories */
#catlinks div>a {
	font-weight:bold;
}

/* Wiki editor */
.wikiEditor-ui-view {
	border:none !important;
}

#wpTextbox1 {
	border-radius:0px !important;
}

.ext-WikiEditor-ResizingDragBar {
	border:2px solid var(--colWhiteDark);
	border-top:0px;
	border-bottom:0px;
	background:var(--colBlackLight);
}

.editOptions {
	border:2px solid var(--colWhiteDark);
	border-radius:0px 0px 5px 5px !important;
	background:var(--colBlackMid);
	color:var(--colWhiteMid);
}

/* Code editor */
.ace_editor .ace_cursor {
	color:var(--colWhiteMid);
}

.ace_editor .ace_line, .ace_editor .ace_selection {
	filter:invert(1);
}

.ace_editor .ace_scroller {
	background:var(--colBlackMid);
}

.ace_editor .ace_active-line {
	background:var(--colBlackLight) !important;
}

.ace_editor .ace_gutter {
	background:var(--colBlackLight);
	color:var(--colWhiteDark);
}

.ace_editor .ace_gutter-active-line {
	background:var(--colBlackLighter) !important;
}

.ace_editor .ace_info {
	background-image:url(/images/a/a0/Wiki_Code_Info.png) !important;
}

/* Page history */
.mw-plusminus-pos {
	color:#29CC29;
}

.mw-plusminus-neg {
	color:#FF2800;
}

#pagehistory li.selected {
	outline:none;
	border-radius:5px;
	background:var(--colBlackLight);
	color:unset;
}

table.diff .diff-context {
	background:none;
	color:unset;
}

table.diff .diff-context, table.diff .diff-deletedline, table.diff .diff-addedline {
	line-height:2;
}

/* Recent changes */
details {
	border:2px solid var(--colWhiteDark) !important;
	border-radius:5px !important;
	background:var(--colBlackMid) !important;
}