MediaWiki:Vector.css: Difference between revisions

From Everybody Edits Wiki
Jump to navigation Jump to search
← Older edit
No edit summary
mNo edit summary
 
(49 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* This file needs to be redone so bad. Eventual MediaWiki upgrade is going to ruin everything anyway */
/* ======================== */
/* Content */
/* GENERIC STYLING          */
/* ======================== */


body {
:root {
  background-image: url(https://wiki.everybodyedits.com/images/5/5a/Everybody_Edits_Wiki_Background.png) !important;
--color-base:#DDDDDD;
--background-color-content-removed:#FF280080;
--background-color-content-added:#29CC2980;
 
--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 */
--colWhiteMid:#DDDDDD;
--colWhiteLight:#FFFFFF;
}
 
html, body {
height:unset;
}
}


#content {
body {
  position: relative !important;
background-image:url(/images/5/5a/Everybody_Edits_Wiki_Background.png);
  margin: 0px 20px 0px 200px !important;
background-color:#181818;
  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 BAR              */
/* ======================== */


h1, h2, h3, h4, h5, h6 {
#mw-page-base {
  color: #FFFFFF;
height:var(--headerHeight);
}
}


/* Link colors */
#p-personal {
top:0px;
left:0px;
z-index:1;
box-shadow:0px 5px 5px rgba(0, 0, 0, 0.5);
border-bottom:2px solid #7B7B7B;
background:linear-gradient(#333333, #222222);
width:100%;
height:var(--headerHeight);
}


a, .mw-body a.external, .mw-body a.extiw, div.vectorTabs li a, #preftoc a {
#p-personal div, #p-personal ul {
  color: #FFBB00;
height:100%;
}
}


a:hover, .mw-body a.external:hover, .mw-body a.extiw:hover, div.vectorTabs li a:hover, #preftoc a:hover {
#p-personal ul {
  color: #FFD419;
display:flex;
justify-content:flex-end;
align-items:center;
gap:var(--headerSpacing);
padding:0px var(--mainGap);
}
}


a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited {
#p-personal ul * {
  color: #EB8C40;
margin:0px;
padding:0px;
font-weight:bold;
font-size:var(--headerButtonSize);
}
}


a:visited:hover, .mw-body a.external:visited:hover, .mw-body a.extiw:visited:hover {
#p-personal #pt-userpage a {
  color: #FFA559;
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);
}
}


a.new, #p-personal a.new, div.vectorTabs li.new a, div.vectorTabs li.new a:visited {
/* ======================== */
  color: #FF2800;
/* LOGO                    */
/* ======================== */
 
#mw-navigation {
position:absolute;
top:0px;
width:100%;
height:0px;
}
}


a.new:hover, #p-personal a.new:hover, div.vectorTabs li.new a:hover, div.vectorTabs li.new a:visited:hover {
#mw-panel {
  color: #FF4119;
position:unset;
margin-top:var(--sidebarOffset) !important;
padding-bottom:var(--mainGap) !important;
padding:0px;
width:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
}
}


a.new:visited, #p-personal a.new:visited {
#p-logo {
  color: #EB1D40;
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;
}
}


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


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


ul {
#p-logo a:active {
  list-style-image: none !important;
filter:brightness(0.85);
}
}


/* Various textbox colors */
/* ======================== */
/* CENTERED LOGO            */
/* ======================== */


#wpTextbox1 {
:root {
  background: #222222 !important;
--topOffset:calc(var(--headerHeight) + var(--headerGap) + var(--logoHeight) + var(--logoGap));
  color: #DDDDDD !important;
--sidebarOffset:var(--topOffset);
  border: 2px solid #7B7B7B !important;
  border-radius: 5px 5px 0px 0px !important;
  border-bottom: 0px !important;
}
}


pre, code {
#p-logo {
  background: #333333 !important;
top:calc(var(--headerHeight) + var(--headerGap));
  color: #DDDDDD !important;
justify-content:center;
  border: 2px solid #7B7B7B !important;
  border-radius: 5px !important;
}
}


.mw-ui-input, #simpleSearch {
/* ======================== */
  background: #222222 !important;
/* SIDEBAR                  */
  color: #DDDDDD !important;
/* ======================== */
  box-sizing: border-box;
 
  border: 2px solid #7B7B7B !important;
#mw-panel nav {
  border-radius: 5px !important;
box-sizing:border-box;
margin:0px;
margin-bottom:var(--sidebarGap);
margin-left:var(--mainGap);
border:2px solid #7B7B7B;
border-radius:5px;
background:linear-gradient(#333333, #222222);
padding:var(--sidebarPadding);
width:var(--sidebarWidth);
}
}


.editOptions {
#mw-panel nav:last-of-type {
  background: #333333 !important;
margin-bottom:unset;
  border: 2px solid #7B7B7B !important;
}
  border-radius: 0px 0px 5px 5px !important;
 
#mw-panel nav h3 {
display:block !important;
margin:0px;
margin-bottom:var(--sidebarSpacing);
background:none;
padding:0px;
color:var(--colWhiteLight);
font-size:var(--sidebarHeaderSize);
}
}


#catlinks, #filetoc {
#mw-panel nav div {
  background: #333333 !important;
margin:0px;
  color: #DDDDDD;
  border: 2px solid #7B7B7B !important;
  border-radius: 5px !important;
}
}


fieldset {
#mw-panel nav ul {
  border: 2px solid #7B7B7B !important;
display:flex;
  border-radius: 5px !important;
flex-direction:column;
  margin: 0px 0px 10px !important;
gap:var(--sidebarSpacing);
padding:0px;
}
}


/* Table of contents */
#mw-panel nav li {
padding:0px;
font-size:var(--sidebarButtonSize);
}


#toc {
#mw-panel nav a {
  background: linear-gradient(#333333, #222222) !important;
color:var(--colWhiteMid) !important;
  border: 2px solid #7B7B7B !important;
  border-radius: 5px !important;
  padding: 10px !important;
}
}


#toc ul {
#mw-panel nav a:hover, #mw-panel nav a:focus {
  margin: 2px 0px 0px !important;
color:var(--colWhiteLight) !important;
}
}


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


table.wikitable, .mw-datatable td, .mw-datatable th, table.mw_metadata td, table.mw_metadata th {
#mw-head-base {
  background: #333333;
box-sizing:border-box;
  color: #DDDDDD;
margin-top:calc(var(--topOffset) - var(--headerHeight));
  border: 2px solid #7B7B7B;
margin-right:var(--mainGap);
margin-left:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
border:2px solid #7B7B7B;
border-radius:5px 5px 0px 0px;
background:#222222;
height:var(--navigationHeight);
}
}


.mw-datatable tr:hover td {
#mw-head {
  background: #444444;
height:var(--topOffset);
}
}


table.wikitable > tr > th, table.wikitable > * > tr > th {
#left-navigation, #right-navigation {
  background: #222222;
position:absolute;
  color: #DDDDDD;
bottom:calc(0px - var(--navigationHeight));
margin:0px;
height:var(--navigationHeight);
}
}


table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
#left-navigation {
  border: 2px solid #7B7B7B;
left:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
}
}


/* Top nav */
#right-navigation {
right:var(--mainGap);
}


#p-personal {
#left-navigation *, #right-navigation * {
  display: flex;
margin:0px;
  align-items: center;
padding:0px;
  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 {
#left-navigation nav, #right-navigation nav, #left-navigation li, #right-navigation li {
  padding: 0px;
background:none;
  display: flex;
  align-items: center;
}
}


#p-personal li {
#left-navigation a, #right-navigation a, #right-navigation #p-cactions, #right-navigation #p-search {
  font-size: 1em;
display:flex;
  margin: 0px 10px 0px 0px;
justify-content:center;
  font-weight: bold;
align-items:center;
box-sizing:border-box;
margin-right:-2px;
border:2px solid #7B7B7B;
border-radius:5px 5px 0px 0px;
background:#222222;
padding:0px 8px;
height:var(--navigationHeight);
}
}


#pt-userpage {
#left-navigation .selected a, #right-navigation .selected a {
  background-image: url(https://wiki.everybodyedits.com/images/f/fe/Smiley_smiley.png);
border-bottom:0px;
  padding-left:28px !important;
background:#333333;
  height:26px;
padding-bottom:2px;
  image-rendering: pixelated;
color:var(--colWhiteLight) !important;
}
}


#mw-page-base {
#left-navigation a, #right-navigation a, #right-navigation #p-cactions-label {
  background: none !important;
font-weight:bold;
font-size:var(--navigationButtonSize);
}
}


#mw-head-base {
.emptyPortlet {
  height: 38px !important;
display:none !important;
  margin: 112px 20px 0px 200px !important;
  background: #222222 !important;
  border: 2px solid #7B7B7B !important;
  border-radius: 5px 5px 0px 0px !important;
  border-bottom: 0px !important;
}
}


#mw-head {
/* ======================== */
  height: 232px !important;
/* NAVIGATION - WATCHLIST  */
/* ======================== */
 
#right-navigation .mw-watchlink a {
min-width:var(--watchWidth);
font-size:0px;
}
}


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


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


#left-navigation {
#right-navigation #ca-watch a:hover:before {
  margin: 0px 0px 0px 200px !important;
background-image:url(/images/7/77/Wiki_Watch_Star_Hover.svg);
  position: absolute !important;
  bottom: 0px !important;
  left: 0px !important;
}
}


#right-navigation {
#right-navigation #ca-unwatch a:before {
  margin: 0px 20px 0px 0px !important;
background-image:url(/images/6/6b/Wiki_Watched_Star.svg);
  position: absolute !important;
  bottom: 0px !important;
  right: 0px !important;
  height: 40px !important;
}
}


.vectorTabs, .vectorTabs ul, .vectorTabs span, #preftoc li {
#right-navigation #ca-unwatch a:hover:before {
  background-image: none !important;
background-image:url(/images/3/33/Wiki_Watched_Star_Hover.svg);
}
}


div.vectorTabs {
/* ======================== */
  padding-left: 0px !important;
/* NAVIGATION - MORE        */
  height: 40px !important;
/* ======================== */
 
#right-navigation #p-cactions-label {
display:flex;
align-items:center;
outline:none;
background:none;
min-height:var(--moreIconSize);
color:var(--colWhiteLight);
}
}


.vectorTabs li, #preftoc li {
#right-navigation #p-cactions-label:after {
  background: #222222 !important;
margin-left:4px;
  border: 2px solid #7B7B7B !important;
background-image:url(/images/b/b8/Wiki_More_Arrow.svg);
  border-radius: 5px 5px 0px 0px !important;
background-size:contain;
  border-bottom: 0px !important;
width:var(--moreIconSize);
  margin-right: -2px !important;
height:var(--moreIconSize);
  position: relative !important;
}
}


.vectorTabs li.selected, #preftoc li.selected {
#right-navigation #p-cactions div {
  background: #333333 !important;
left:-2px;
  z-index: 2 !important;
box-sizing:border-box;
box-shadow:none;
border:2px solid #7B7B7B;
border-radius:0px 0px 5px 5px;
min-width:calc(100% + 4px);
}
}


.vectorTabs span {
#right-navigation #p-cactions a {
  height: 100% !important;
border:none;
border-radius:0px;
background:#222222;
}
}


.vectorTabs span a {
/* ======================== */
  padding: 0px 6px !important;
/* NAVIGATION - SEARCH      */
  height: 100% !important;
/* ======================== */
  display: flex !important;
 
  align-items: center !important;
#right-navigation #p-search {
  font-size: 1em !important;
margin:0px;
}
}


.vectorTabs li.selected a, #preftoc li.selected a {
#simpleSearch {
  color: #DDDDDD !important;
width:var(--searchWidth);
  background-image: unset !important;
min-width:unset;
max-width:unset;
height:var(--searchHeight);
}
}


/* Watch tab (TEMP) */
#simpleSearch #searchInput {
box-sizing:border-box;
border:2px solid #7B7B7B;
border-radius:5px;
background:#222222;
padding:0px calc(var(--searchIconSize) + var(--searchSpacing) * 2) 0px var(--searchSpacing);
height:100%;
color:var(--colWhiteLight);
}


.icon a {
#simpleSearch #searchButton {
  width: unset !important;
top:calc((var(--searchHeight) - var(--searchIconSize)) / 2);
  padding: 0px 6px !important;
right:var(--searchSpacing);
  background-image: none !important;
opacity:unset;
background-image:url(/images/e/ee/Wiki_Search.svg);
background-size:contain;
width:var(--searchIconSize);
min-width:unset;
height:var(--searchIconSize);
}
}


/* More tab */
/* ======================== */
/* MAIN CONTENT            */
/* ======================== */


#p-cactions {
#content {
  background: #333333 !important;
margin-top:0px;
  border: 2px solid #7B7B7B !important;
margin-right:var(--mainGap);
  height: 40px !important;
margin-left:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
  border-radius: 5px 5px 0px 0px !important;
box-shadow:0px 5px 5px rgba(0, 0, 0, 0.5);
  border-bottom: 0px !important;
border:2px solid #7B7B7B;
  margin-right: -2px !important;
border-top:0px;
  position: relative !important;
border-radius:0px 0px 5px 5px;
  z-index: 2;
background: linear-gradient(#333333 0px, #222222 54px);
padding:var(--contentSpacing);
color:var(--colWhiteMid);
}
}


#p-cactions h3 {
/* Wiki-specific content */
  background-image: none !important;
#toc, #catlinks {
  height: 40px !important;
border:2px solid #7B7B7B;
  display: flex;
border-radius:5px;
  align-items: center;
background:#333333;
color:var(--colWhiteMid);
}
}


#p-cactions h3 span {
#toc .tocnumber, .mw-collapsible-toggle:before, .mw-collapsible-toggle:after {
  padding-top: 0px !important;
color:var(--colWhiteMid);
  padding-left: 8px !important;
  color: #DDDDDD !important;
  font-size: 1em !important;
}
}


#p-cactions h3 a {
/* Tables */
  background-position: center !important;
table.wikitable, table.wikitable th, table.wikitable td {
  height: 40px !important;
border:2px solid #7B7B7B;
  width: 10px !important;
background:#222222;
  margin-right: 6px;
color:var(--colWhiteMid);
}
}


div.vectorMenu div.menu {
table.wikitable th {
  z-index: 2 !important;
background:#333333;
color:var(--colWhiteLight);
}
}


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


#p-search {
.headerSort.headerSortUp {
  height: 40px !important;
background-image:url(/images/d/db/Wiki_Sort_Up.svg) !important;
  margin: 0px 8px !important;
}
}


#searchform {
.headerSort.headerSortDown {
  margin-top: 7px !important;
background-image:url(/images/e/ee/Wiki_Sort_Down.svg) !important;
}
}


#simpleSearch {
/* Collapsible tables */
  width: 250px !important;
.mw-collapsible-toggle {
  height: 100% !important;
margin-left:5px;
  margin-top: 0px !important;
}
}


#searchInput {
/* Thumbnails */
  color: #DDDDDD !important;
figure {
  height: 24px !important;
display:block !important;
  padding: 4px !important;
border:2px solid #7B7B7B !important;
border-radius:5px;
background:#222222 !important;
padding:6px;
width:min-content;
}
}


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


#p-logo {
figure img {
  top: 46px !important;
margin:0px 0px 3px !important;
  left: 0px !important;
border:2px solid #7B7B7B !important;
  width: 100% !important;
  height: 0px !important;
  display: flex !important;
  justify-content: center !important;
}
}


#p-logo a {
figure figcaption {
  width: 300px !important;
display:block !important;
  height: 140px !important;
border:none !important;
  background-image: url(https://wiki.everybodyedits.com/images/c/c9/Everybody_Edits_Wiki_Logo.png) !important;
background:none !important;
  background-size: 100%;
padding:0px !important;
}
}


/* Sidebar */
/* Galleries */
li.gallerybox div.thumb {
border:2px solid #7B7B7B;
border-radius:5px;
background:#222222;
}


#mw-panel {
/* Categories */
  position: unset !important;
#catlinks div>a {
  width: 140px;
font-weight:bold;
  margin-top: 192px !important;
  padding: 0px 20px 20px !important;
}
}


#mw-panel h3 {
/* ======================== */
  display: block !important;
/* EDIT PAGE                */
  padding: 0px 0px 6px !important;
/* ======================== */
  font-size: 1.1em !important;
 
  color: #FFFFFF !important;
.editOptions {
border:2px solid #7B7B7B;
border-radius:0px 0px 5px 5px !important;
background:#222222;
color:var(--colWhiteMid);
}
}


#mw-panel .body {
/* ======================== */
  margin: 0px !important;
/* PAGE HISTORY            */
/* ======================== */
.mw-plusminus-pos {
color:#29CC29;
}
}


#mw-panel .body ul li {
.mw-plusminus-neg {
  padding: 3px 3px 3px 0px !important;
color:#FF2800;
  font-size: 0.9em !important;
}
}


#mw-panel .body ul li a {
#pagehistory li.selected {
  color: #DDDDDD !important;
outline:none;
border-radius:5px;
background:#333333;
color:unset;
}
}


#mw-panel .portal {
table.diff .diff-context {
  background: linear-gradient(#333333, #222222) !important;
background:none;
  border: 2px solid #7B7B7B !important;
color:unset;
  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 {
table.diff .diff-context, table.diff .diff-deletedline, table.diff .diff-addedline {
  margin: 0px !important;
line-height:2;
}
}


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


#footer {
#footer {
  margin-left: 200px !important;
display:flex;
  padding: 20px 2px 20px 0px !important;
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 #7B7B7B;
border-radius:5px;
background:linear-gradient(#333333, #222222);
padding:var(--mainGap);
}
}


#footer-info li {
#footer li {
  color: #7B7B7B !important;
margin:0px;
margin-bottom:var(--footerSpacing);
}
}


/* Thumbnails */
#footer #footer-places {
li.gallerybox div.thumb {
display:flex;
  background: #333333 !important;
gap:var(--footerLinkSpacing);
  border: 2px solid #7B7B7B !important;
font-weight:bold;
}
}


.thumbinner {
#footer #footer-places li {
  background: #333333 !important;
margin:0px;
  border: 2px solid #7B7B7B !important;
  padding: 5px 7px 5px 5px !important; /* hack */
}
}


.thumbimage {
#footer #footer-icons {
  border: 2px solid #7B7B7B !important;
display:none;
}
}


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


#preferences legend {
/* ======================== */
  color: #DDDDDD !important;
/* PAGE CONTENT            */
/* ======================== */
 
/* Links */
a, #toc label, .mw-collapsible-text {
color:#FFBB00 !important;
text-decoration:none;
}
}


#preftoc {
a:hover, a:focus, #toc label:hover, #toc label:focus, .mw-collapsible-text:hover, .mw-collapsible-text:focus {
  background-image: unset !important;
color:#FFD419 !important;
text-decoration:underline 0.1em;
text-underline-offset:0.1em;
}
}


#preftoc li:first-child {
a:visited {
  margin-left: unset !important;
color:#EB8C40 !important;
}
}


 
a:visited:hover {
/* History */
color:#FFA559 !important;
#pagehistory li {
  border: unset !important;
  padding: 2px;
}
}


#pagehistory li.selected {
a.new {
  background: #444444;
color:#FF2800 !important;
  border-radius: 3px;
}
}


.mw-plusminus-pos {
a.new:hover, a.new:focus {
  color: #29CC29;
color:#FF4119 !important;
}
}


.mw-plusminus-neg {
a.new:visited {
  color: #FF2800;
color:#EB1D40 !important;
}
}


/* Diffs */
a.new:visited:hover {
table.diff {
color:#FF3659 !important;
  background-color: unset !important;
}
}


td.diff-context {
.mw-parser-output a.external {
  background: unset !important;
background-image:url(/images/b/ba/Wiki_External_Link.svg);
  color: #CCCCCC !important;
}
}


td.diff-deletedline, td.diff-addedline {
h1, h2, h3, h4, h5, h6 {
  background: #444444;
color:var(--colWhiteLight);
}
}


td.diff-deletedline .diffchange {
ul {
  background: #feeec855 !important;
list-style-image:none;
}
}


td.diff-addedline .diffchange {
pre, code, .mw-code {
  background: #d8ecff55 !important;
border:none;
border-radius:5px;
background:#333333;
color:var(--colWhiteMid);
}
}

Latest revision as of 04:50, 2 November 2026

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

:root {
	--color-base:#DDDDDD;
	--background-color-content-removed:#FF280080;
	--background-color-content-added:#29CC2980;

	--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 */
	--colWhiteMid:#DDDDDD;
	--colWhiteLight:#FFFFFF;
}

html, body {
	height:unset;
}

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

/* ======================== */
/* 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 #7B7B7B;
	background:linear-gradient(#333333, #222222);
	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 #7B7B7B;
	border-radius:5px;
	background:linear-gradient(#333333, #222222);
	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 #7B7B7B;
	border-radius:5px 5px 0px 0px;
	background:#222222;
	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 #7B7B7B;
	border-radius:5px 5px 0px 0px;
	background:#222222;
	padding:0px 8px;
	height:var(--navigationHeight);
}

#left-navigation .selected a, #right-navigation .selected a {
	border-bottom:0px;
	background:#333333;
	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 #7B7B7B;
	border-radius:0px 0px 5px 5px;
	min-width:calc(100% + 4px);
}

#right-navigation #p-cactions a {
	border:none;
	border-radius:0px;
	background:#222222;
}

/* ======================== */
/* 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;
	border:2px solid #7B7B7B;
	border-radius:5px;
	background:#222222;
	padding:0px calc(var(--searchIconSize) + var(--searchSpacing) * 2) 0px var(--searchSpacing);
	height:100%;
	color:var(--colWhiteLight);
}

#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 #7B7B7B;
	border-top:0px;
	border-radius:0px 0px 5px 5px;
	background: linear-gradient(#333333 0px, #222222 54px);
	padding:var(--contentSpacing);
	color:var(--colWhiteMid);
}

/* Wiki-specific content */
#toc, #catlinks {
	border:2px solid #7B7B7B;
	border-radius:5px;
	background:#333333;
	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 #7B7B7B;
	background:#222222;
	color:var(--colWhiteMid);
}

table.wikitable th {
	background:#333333;
	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 #7B7B7B !important;
	border-radius:5px;
	background:#222222 !important;
	padding:6px;
	width:min-content;
}

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

figure img {
	margin:0px 0px 3px !important;
	border:2px solid #7B7B7B !important;
}

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

/* Galleries */
li.gallerybox div.thumb {
	border:2px solid #7B7B7B;
	border-radius:5px;
	background:#222222;
}

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

/* ======================== */
/* EDIT PAGE                */
/* ======================== */

.editOptions {
	border:2px solid #7B7B7B;
	border-radius:0px 0px 5px 5px !important;
	background:#222222;
	color:var(--colWhiteMid);
}

/* ======================== */
/* PAGE HISTORY             */
/* ======================== */
.mw-plusminus-pos {
	color:#29CC29;
}

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

#pagehistory li.selected {
	outline:none;
	border-radius:5px;
	background:#333333;
	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;
}

/* ======================== */
/* 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 #7B7B7B;
	border-radius:5px;
	background:linear-gradient(#333333, #222222);
	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 CONTENT             */
/* ======================== */

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

a:hover, a:focus, #toc label:hover, #toc label:focus, .mw-collapsible-text:hover, .mw-collapsible-text:focus {
	color:#FFD419 !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);
}

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

ul {
	list-style-image:none;
}

pre, code, .mw-code {
	border:none;
	border-radius:5px;
	background:#333333;
	color:var(--colWhiteMid);
}
Retrieved from "https://wiki.everybodyedits.com/index.php?title=MediaWiki:Vector.css&oldid=10581"