MediaWiki:Vector.css: Difference between revisions

From Everybody Edits Wiki
Jump to navigation Jump to search
← Older editNewer edit →
no more flash of unstyled bg
Update to Vector-refresh
Line 1: Line 1:
/* This file needs to be redone so bad. Eventual MediaWiki upgrade is going to ruin everything anyway */
/* ================================================ */
/* Content */
/* VECTOR REFRESH - a MediaWiki skin by Liam Stone  */
/* ================================================ */
/* This works as a drop-in add-on for Vector Legacy */
/* (2010). Simply replace the contents of the page  */
/* MediaWiki:Vector.css, and modify as needed. =)  */
/* ================================================ */


body {
/* ======================== */
  background-color: #181818; 
/* GENERIC STYLING          */
  background-image: url(https://wiki.everybodyedits.com/images/5/5a/Everybody_Edits_Wiki_Background.png);
/* ======================== */
}


#content {
:root {
  position: relative !important;
--mainGap:32px;
  margin: 0px 20px 0px 200px !important;
  background: linear-gradient(#333333 0px, #222222 54px) !important;
  border: 2px solid #7B7B7B !important;
  border-radius: 0px 0px 5px 5px !important;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
  color: #DDDDDD;
  z-index: 1 !important;
}


/* Headers */
/* Header */
--headerHeight:64px;
--headerGap:32px;
--headerButtonSize:14px;
--headerSpacing:8px;


h1, h2, h3, h4, h5, h6 {
--userIconSize:20px;
  color: #FFFFFF;
}


/* Link colors */
/* Logo */
--logoWidth:200px;
--logoHeight:200px;
--logoGap:32px;


a, .mw-body a.external, .mw-body a.extiw, div.vectorTabs li a, #preftoc a {
/* Sidebar */
  color: #FFBB00;
--sidebarWidth:200px;
}
--sidebarGap:16px;
--sidebarPadding:16px;
--sidebarHeaderSize:20px;
--sidebarButtonSize:14px;
--sidebarSpacing:8px;


a:hover, .mw-body a.external:hover, .mw-body a.extiw:hover, div.vectorTabs li a:hover, #preftoc a:hover {
/* Navigation */
  color: #FFD419;
--navigationHeight:50px;
}
--navigationButtonSize:16px;


a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited {
--watchWidth:50px;
  color: #EB8C40;
--watchIconSize:20px;
}


a:visited:hover, .mw-body a.external:visited:hover, .mw-body a.extiw:visited:hover {
--moreIconSize:20px;
  color: #FFA559;
}


a.new, #p-personal a.new, div.vectorTabs li.new a, div.vectorTabs li.new a:visited {
--searchWidth:300px;
  color: #FF2800;
--searchHeight:30px;
}
--searchSpacing:8px;
--searchIconSize:20px;


a.new:hover, #p-personal a.new:hover, div.vectorTabs li.new a:hover, div.vectorTabs li.new a:visited:hover {
/* Content */
  color: #FF4119;
--contentSpacing:24px;
}


a.new:visited, #p-personal a.new:visited {
/* Footer */
  color: #EB1D40;
--footerGap:32px;
}
--footerButtonSize:14px;
--footerSpacing:16px;


a.new:visited:hover, #p-personal a.new:visited:hover {
--footerLinkSpacing:8px;
  color: #FF3659;
}
}


/* List bullets */
html, body {
 
height:unset;
ul {
  list-style-image: none !important;
}
}


/* Various textbox colors */
/* ======================== */
/* HEADER BAR              */
/* ======================== */


#wpTextbox1 {
#mw-page-base {
  background: #222222 !important;
height:var(--headerHeight);
  color: #DDDDDD !important;
  border: 2px solid #7B7B7B !important;
  border-radius: 5px 5px 0px 0px !important;
  border-bottom: 0px !important;
}
}


pre, code {
#p-personal {
  background: #333333 !important;
top:0px;
  color: #DDDDDD !important;
left:0px;
  border: 2px solid #7B7B7B !important;
z-index:1;
  border-radius: 5px !important;
background:#BBBBBB;
width:100%;
height:var(--headerHeight);
}
}


.mw-ui-input, #simpleSearch {
#p-personal div, #p-personal ul {
  background: #222222 !important;
height:100%;
  color: #DDDDDD !important;
  box-sizing: border-box;
  border: 2px solid #7B7B7B !important;
  border-radius: 5px !important;
}
}


.editOptions {
#p-personal ul {
  background: #333333 !important;
display:flex;
  border: 2px solid #7B7B7B !important;
justify-content:flex-end;
  border-radius: 0px 0px 5px 5px !important;
align-items:center;
gap:var(--headerSpacing);
padding:0px var(--mainGap);
}
}


#catlinks, #filetoc {
#p-personal ul * {
  background: #333333 !important;
margin:0px;
  color: #DDDDDD;
padding:0px;
  border: 2px solid #7B7B7B !important;
font-size:var(--headerButtonSize);
  border-radius: 5px !important;
}
}


fieldset {
#p-personal #pt-userpage a {
  border: 2px solid #7B7B7B !important;
display:flex;
  border-radius: 5px !important;
align-items:center;
  margin: 0px 0px 10px !important;
background-position:left;
background-size:contain;
padding:0px 0px 0px calc(var(--userIconSize) + 4px);
min-height:var(--userIconSize);
}
}


/* Table of contents */
/* ======================== */
/* LOGO                    */
/* ======================== */


#toc {
#mw-navigation {
  background: linear-gradient(#333333, #222222) !important;
position:absolute;
  border: 2px solid #7B7B7B !important;
top:0px;
  border-radius: 5px !important;
width:100%;
  padding: 10px !important;
height:0px;
}
}


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


/* Tables */
#p-logo {
 
display:flex;
table.wikitable, .mw-datatable td, .mw-datatable th, table.mw_metadata td, table.mw_metadata th {
position:absolute;
  background: #333333;
z-index:1;
  color: #DDDDDD;
filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
  border: 2px solid #7B7B7B;
margin:0px;
width:100%;
height:auto;
}
}


.mw-datatable tr:hover td {
#p-logo a {
  background: #444444;
background-size:contain;
width:var(--logoWidth);
height:var(--logoHeight);
}
}


table.wikitable > tr > th, table.wikitable > * > tr > th {
#p-logo a:hover, #p-logo a:focus {
  background: #222222;
filter:brightness(1.15);
  color: #DDDDDD;
}
}


table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
#p-logo a:active {
  border: 2px solid #7B7B7B;
filter:brightness(0.85);
}
}


/* Top nav */
/* ======================== */
/* SIDEBAR LOGO            */
/* ======================== */


#p-personal {
/* :root {
  display: flex;
--topOffset:calc(var(--headerHeight) + var(--headerGap));
  align-items: center;
--sidebarOffset:calc(var(--logoHeight) / (var(--logoWidth) / var(--sidebarWidth)) + var(--sidebarGap) * 2);
  justify-content: right;
  height: 38px;
  background: linear-gradient(#333333, #222222) !important;
  border-bottom: 2px solid #7B7B7B !important;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
  width: 100%;
  top: 0px;
  right: 0px;
}
}


#p-personal ul, #p-personal li {
#p-logo {
  padding: 0px;
top:var(--sidebarGap);
  display: flex;
left:var(--mainGap);
  align-items: center;
}
}


#p-personal li {
#p-logo, #p-logo a {
  font-size: 1em;
width:var(--sidebarWidth);
  margin: 0px 10px 0px 0px;
height:calc(var(--logoHeight) / (var(--logoWidth) / var(--sidebarWidth)));
  font-weight: bold;
} */
}


#pt-userpage {
/* ======================== */
  background-image: url(https://wiki.everybodyedits.com/images/f/fe/Smiley_smiley.png);
/* CENTERED LOGO            */
  padding-left:28px !important;
/* ======================== */
  height:26px;
  image-rendering: pixelated;
}


#mw-page-base {
:root {
  background: none !important;
--topOffset:calc(var(--headerHeight) + var(--headerGap) + var(--logoHeight) + var(--logoGap));
--sidebarOffset:var(--topOffset);
}
}


#mw-head-base {
#p-logo {
  height: 38px !important;
top:calc(var(--headerHeight) + var(--headerGap));
  margin: 112px 20px 0px 200px !important;
justify-content:center;
  background: #222222 !important;
  border: 2px solid #7B7B7B !important;
  border-radius: 5px 5px 0px 0px !important;
  border-bottom: 0px !important;
}
}


#mw-head {
/* ======================== */
  height: 232px !important;
/* SIDEBAR                  */
}
/* ======================== */


#mw-navigation {
#mw-panel nav {
  position: absolute !important;
box-sizing:border-box;
  top: 0px !important;
margin:0px;
  width: 100% !important;
margin-bottom:var(--sidebarGap);
  height: 0px !important;
margin-left:var(--mainGap);
background:#DDDDDD;
padding:var(--sidebarPadding);
width:var(--sidebarWidth);
}
}


/* Tabs */
#mw-panel nav:last-of-type {
 
margin-bottom:unset;
#left-navigation {
  margin: 0px 0px 0px 200px !important;
  position: absolute !important;
  bottom: 0px !important;
  left: 0px !important;
}
}


#right-navigation {
#mw-panel nav h3 {
  margin: 0px 20px 0px 0px !important;
display:block !important;
  position: absolute !important;
margin:0px;
  bottom: 0px !important;
margin-bottom:var(--sidebarSpacing);
  right: 0px !important;
background:none;
  height: 40px !important;
padding:0px;
font-size:var(--sidebarHeaderSize);
}
}


.vectorTabs, .vectorTabs ul, .vectorTabs span, #preftoc li {
#mw-panel nav div {
  background-image: none !important;
margin:0px;
}
}


div.vectorTabs {
#mw-panel nav ul {
  padding-left: 0px !important;
display:flex;
  height: 40px !important;
flex-direction:column;
gap:var(--sidebarSpacing);
padding:0px;
}
}


.vectorTabs li, #preftoc li {
#mw-panel nav li {
  background: #222222 !important;
padding:0px;
  border: 2px solid #7B7B7B !important;
font-size:var(--sidebarButtonSize);
  border-radius: 5px 5px 0px 0px !important;
  border-bottom: 0px !important;
  margin-right: -2px !important;
  position: relative !important;
}
}


.vectorTabs li.selected, #preftoc li.selected {
/* ======================== */
  background: #333333 !important;
/* NAVIGATION TABS          */
  z-index: 2 !important;
/* ======================== */
}


.vectorTabs span {
#mw-head-base {
  height: 100% !important;
margin-top:calc(var(--topOffset) - var(--headerHeight));
margin-right:var(--mainGap);
margin-left:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
background:#BBBBBB;
height:var(--navigationHeight);
}
}


.vectorTabs span a {
#mw-head {
  padding: 0px 6px !important;
height:var(--topOffset);
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  font-size: 1em !important;
}
}


.vectorTabs li.selected a, #preftoc li.selected a {
#left-navigation, #right-navigation {
  color: #DDDDDD !important;
position:absolute;
  background-image: unset !important;
bottom:calc(0px - var(--navigationHeight));
margin:0px;
height:var(--navigationHeight);
}
}


/* Watch tab (TEMP) */
#left-navigation {
 
left:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
.icon a {
  width: unset !important;
  padding: 0px 6px !important;
  background-image: none !important;
}
}


/* More tab */
#right-navigation {
 
right:var(--mainGap);
#p-cactions {
  background: #333333 !important;
  border: 2px solid #7B7B7B !important;
  height: 40px !important;
  border-radius: 5px 5px 0px 0px !important;
  border-bottom: 0px !important;
  margin-right: -2px !important;
  position: relative !important;
  z-index: 2;
}
}


#p-cactions h3 {
#left-navigation *, #right-navigation * {
  background-image: none !important;
margin:0px;
  height: 40px !important;
padding:0px;
  display: flex;
  align-items: center;
}
}


#p-cactions h3 span {
#left-navigation nav, #right-navigation nav, #left-navigation li, #right-navigation li {
  padding-top: 0px !important;
background:none;
  padding-left: 8px !important;
  color: #DDDDDD !important;
  font-size: 1em !important;
}
}


#p-cactions h3 a {
#left-navigation a, #right-navigation a, #right-navigation #p-cactions, #right-navigation #p-search {
  background-position: center !important;
display:flex;
  height: 40px !important;
justify-content:center;
  width: 10px !important;
align-items:center;
  margin-right: 6px;
box-sizing:border-box;
background:#DDDDDD;
padding:0px 8px;
height:var(--navigationHeight);
}
}


div.vectorMenu div.menu {
#left-navigation a, #right-navigation a, #right-navigation #p-cactions-label {
  z-index: 2 !important;
font-size:var(--navigationButtonSize);
}
}


/* Search bar */
/* ======================== */
/* NAVIGATION - WATCHLIST  */
/* ======================== */


#p-search {
#right-navigation .mw-watchlink a {
  height: 40px !important;
min-width:var(--watchWidth);
  margin: 0px 8px !important;
font-size:0px;
}
}


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


#simpleSearch {
/* ======================== */
  width: 250px !important;
/* NAVIGATION - MORE        */
  height: 100% !important;
/* ======================== */
  margin-top: 0px !important;
}


#searchInput {
#right-navigation #p-cactions-label {
  color: #DDDDDD !important;
display:flex;
  height: 24px !important;
align-items:center;
  padding: 4px !important;
outline:none;
background:none;
min-height:var(--moreIconSize);
}
}


/* Logo */
#right-navigation #p-cactions-label:after {
 
margin-left:4px;
#p-logo {
background-size:contain;
  top: 46px !important;
width:var(--moreIconSize);
  left: 0px !important;
height:var(--moreIconSize);
  width: 100% !important;
  height: 0px !important;
  display: flex !important;
  justify-content: center !important;
}
}


#p-logo a {
#right-navigation #p-cactions div {
  width: 300px !important;
box-shadow:none;
  height: 140px !important;
border:none;
  background-image: url(https://wiki.everybodyedits.com/images/c/c9/Everybody_Edits_Wiki_Logo.png) !important;
  background-size: 100%;
}
}


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


#mw-panel {
#simpleSearch {
  position: unset !important;
width:var(--searchWidth);
  width: 140px;
min-width:unset;
  margin-top: 192px !important;
max-width:unset;
  padding: 0px 20px 20px !important;
height:var(--searchHeight);
}
}


#mw-panel h3 {
#simpleSearch #searchInput {
  display: block !important;
border:none;
  padding: 0px 0px 6px !important;
border-radius:unset;
  font-size: 1.1em !important;
background:#BBBBBB;
  color: #FFFFFF !important;
padding:0px calc(var(--searchIconSize) + var(--searchSpacing) * 2) 0px var(--searchSpacing);
}
}


#mw-panel .body {
#simpleSearch #searchButton {
  margin: 0px !important;
top:calc((var(--searchHeight) - var(--searchIconSize)) / 2);
right:var(--searchSpacing);
background-size:contain;
width:var(--searchIconSize);
min-width:unset;
height:var(--searchIconSize);
}
}


#mw-panel .body ul li {
/* ======================== */
  padding: 3px 3px 3px 0px !important;
/* MAIN CONTENT            */
  font-size: 0.9em !important;
/* ======================== */
}


#mw-panel .body ul li a {
#content {
  color: #DDDDDD !important;
margin-top:0px;
margin-right:var(--mainGap);
margin-left:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
border:0px;
padding:var(--contentSpacing);
}
}


#mw-panel .portal {
/* ======================== */
  background: linear-gradient(#333333, #222222) !important;
/* FOOTER                  */
  border: 2px solid #7B7B7B !important;
/* ======================== */
  border-radius: 5px !important;
  margin: 10px 0px 0px !important;
  padding: 10px !important;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}
 
#mw-panel .portal.first {
  margin: 0px !important;
}
 
/* Footer */


#footer {
#footer {
  margin-left: 200px !important;
display:flex;
  padding: 20px 2px 20px 0px !important;
position:relative;
}
flex-direction:column;
 
margin-top:var(--footerGap);
#footer-info li {
margin-right:var(--mainGap);
  color: #7B7B7B !important;
margin-bottom:var(--mainGap);
}
margin-left:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
 
background:#BBBBBB;
/* Thumbnails */
padding:var(--mainGap);
li.gallerybox div.thumb {
  background: #333333 !important;
  border: 2px solid #7B7B7B !important;
}
 
.thumbinner {
  background: #333333 !important;
  border: 2px solid #7B7B7B !important;
  padding: 5px 7px 5px 5px !important; /* hack */
}
 
.thumbimage {
  border: 2px solid #7B7B7B !important;
}
 
/* Preferences */
#preferences {
  border: unset !important;
  background-color: unset !important;
}
 
#preferences legend {
  color: #DDDDDD !important;
}
 
#preftoc {
  background-image: unset !important;
}
 
#preftoc li:first-child {
  margin-left: unset !important;
}
 
 
/* History */
#pagehistory li {
  border: unset !important;
  padding: 2px;
}
 
#pagehistory li.selected {
  background: #444444;
  border-radius: 3px;
}
 
.mw-plusminus-pos {
  color: #29CC29;
}
 
.mw-plusminus-neg {
  color: #FF2800;
}
}


/* Diffs */
#footer li {
table.diff {
margin:0px;
  background-color: unset !important;
margin-bottom:var(--footerSpacing);
}
}


td.diff-context {
#footer #footer-places {
  background: unset !important;
display:flex;
  color: #CCCCCC !important;
gap:var(--footerLinkSpacing);
}
}


td.diff-deletedline, td.diff-addedline {
#footer #footer-places li {
  background: #444444;
margin:0px;
}
}


td.diff-deletedline .diffchange {
#footer #footer-icons {
  background: #feeec855 !important;
display:none;
}
}


td.diff-addedline .diffchange {
#footer * {
  background: #d8ecff55 !important;
margin:0px;
padding:0px;
font-size:var(--footerButtonSize);
line-height:normal !important;
}
}

Revision as of 17:23, 1 November 2026

/* ================================================ */
/* VECTOR REFRESH - a MediaWiki skin by Liam Stone  */
/* ================================================ */
/* This works as a drop-in add-on for Vector Legacy */
/* (2010). Simply replace the contents of the page  */
/* MediaWiki:Vector.css, and modify as needed. =)   */
/* ================================================ */

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

:root {
	--mainGap:32px;

	/* Header */
	--headerHeight:64px;
	--headerGap:32px;
	--headerButtonSize:14px;
	--headerSpacing:8px;

	--userIconSize:20px;

	/* Logo */
	--logoWidth:200px;
	--logoHeight:200px;
	--logoGap:32px;

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

html, body {
	height:unset;
}

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

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

#p-personal {
	top:0px;
	left:0px;
	z-index:1;
	background:#BBBBBB;
	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-size:var(--headerButtonSize);
}

#p-personal #pt-userpage a {
	display:flex;
	align-items:center;
	background-position:left;
	background-size:contain;
	padding:0px 0px 0px calc(var(--userIconSize) + 4px);
	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-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);
}

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

/* :root {
	--topOffset:calc(var(--headerHeight) + var(--headerGap));
	--sidebarOffset:calc(var(--logoHeight) / (var(--logoWidth) / var(--sidebarWidth)) + var(--sidebarGap) * 2);
}

#p-logo {
	top:var(--sidebarGap);
	left:var(--mainGap);
}

#p-logo, #p-logo a {
	width:var(--sidebarWidth);
	height:calc(var(--logoHeight) / (var(--logoWidth) / var(--sidebarWidth)));
} */

/* ======================== */
/* 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);
	background:#DDDDDD;
	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;
	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);
}

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

#mw-head-base {
	margin-top:calc(var(--topOffset) - var(--headerHeight));
	margin-right:var(--mainGap);
	margin-left:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
	background:#BBBBBB;
	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;
	background:#DDDDDD;
	padding:0px 8px;
	height:var(--navigationHeight);
}

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

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

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

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

#right-navigation #p-cactions-label:after {
	margin-left:4px;
	background-size:contain;
	width:var(--moreIconSize);
	height:var(--moreIconSize);
}

#right-navigation #p-cactions div {
	box-shadow:none;
	border:none;
}

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

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

#simpleSearch #searchInput {
	border:none;
	border-radius:unset;
	background:#BBBBBB;
	padding:0px calc(var(--searchIconSize) + var(--searchSpacing) * 2) 0px var(--searchSpacing);
}

#simpleSearch #searchButton {
	top:calc((var(--searchHeight) - var(--searchIconSize)) / 2);
	right:var(--searchSpacing);
	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));
	border:0px;
	padding:var(--contentSpacing);
}

/* ======================== */
/* 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));
	background:#BBBBBB;
	padding:var(--mainGap);
}

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

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

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

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

#footer * {
	margin:0px;
	padding:0px;
	font-size:var(--footerButtonSize);
	line-height:normal !important;
}
Retrieved from "https://wiki.everybodyedits.com/index.php?title=MediaWiki:Vector.css&oldid=10499"