MediaWiki:Vector.css: Difference between revisions

From Everybody Edits Wiki
Jump to navigation Jump to search
← Older editNewer edit →
Undo revision 9914 by Boba (talk)
No edit summary
(75 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/0/0b/WikiBackground.png) !important;
--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;
}
}


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


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


h1, h2, h3, h4, h5, h6 {
#p-logo a:active {
  color: #FFFFFF;
filter:brightness(0.85);
}
}


/* Link colors */
/* ======================== */
/* CENTERED LOGO            */
/* ======================== */


a, .mw-body a.external, .mw-body a.extiw, div.vectorTabs li a, #preftoc a {
:root {
  color: #FFBB00;
--topOffset:calc(var(--headerHeight) + var(--headerGap) + var(--logoHeight) + var(--logoGap));
--sidebarOffset:var(--topOffset);
}
}


a:hover, .mw-body a.external:hover, .mw-body a.extiw:hover, div.vectorTabs li a:hover, #preftoc a:hover {
#p-logo {
  color: #FFD419;
top:calc(var(--headerHeight) + var(--headerGap));
justify-content:center;
}
}


a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited {
/* ======================== */
  color: #EB8C40;
/* 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);
}
}


a:visited:hover, .mw-body a.external:visited:hover, .mw-body a.extiw:visited:hover {
#mw-panel nav:last-of-type {
  color: #FFA559;
margin-bottom:unset;
}
}


a.new, #p-personal a.new, div.vectorTabs li.new a, div.vectorTabs li.new a:visited {
#mw-panel nav h3 {
  color: #FF2800;
display:block !important;
margin:0px;
margin-bottom:var(--sidebarSpacing);
background:none;
padding:0px;
color:var(--colWhiteLight);
font-size:var(--sidebarHeaderSize);
}
}


a.new:hover, #p-personal a.new:hover, div.vectorTabs li.new a:hover, div.vectorTabs li.new a:visited:hover {
#mw-panel nav div {
  color: #FF4119;
margin:0px;
}
}


a.new:visited, #p-personal a.new:visited {
#mw-panel nav ul {
  color: #EB1D40;
display:flex;
flex-direction:column;
gap:var(--sidebarSpacing);
padding:0px;
}
}


a.new:visited:hover, #p-personal a.new:visited:hover {
#mw-panel nav li {
  color: #FF3659;
padding:0px;
font-size:var(--sidebarButtonSize);
}
}


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


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


/* Various textbox colors */
/* ======================== */
/* NAVIGATION TABS          */
/* ======================== */


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


pre, code {
#mw-head {
  background: #333333 !important;
height:var(--topOffset);
  color: #DDDDDD !important;
  border: 2px solid #7B7B7B !important;
  border-radius: 5px !important;
}
}


.mw-ui-input, #simpleSearch {
#left-navigation, #right-navigation {
  background: #222222 !important;
position:absolute;
  color: #DDDDDD !important;
bottom:calc(0px - var(--navigationHeight));
  box-sizing: border-box;
margin:0px;
  border: 2px solid #7B7B7B !important;
height:var(--navigationHeight);
  border-radius: 5px !important;
}
}


.editOptions {
#left-navigation {
  background: #333333 !important;
left:calc(var(--mainGap) + var(--sidebarWidth) + var(--sidebarGap));
  border: 2px solid #7B7B7B !important;
  border-radius: 0px 0px 5px 5px !important;
}
}


#catlinks, #filetoc {
#right-navigation {
  background: #333333 !important;
right:var(--mainGap);
  color: #DDDDDD;
  border: 2px solid #7B7B7B !important;
  border-radius: 5px !important;
}
}


fieldset {
#left-navigation *, #right-navigation * {
  border: 2px solid #7B7B7B !important;
margin:0px;
  border-radius: 5px !important;
padding:0px;
  margin: 0px 0px 10px !important;
}
}


/* Table of contents */
#left-navigation nav, #right-navigation nav, #left-navigation li, #right-navigation li {
background:none;
}


#toc {
#left-navigation a, #right-navigation a, #right-navigation #p-cactions, #right-navigation #p-search {
  background: linear-gradient(#333333, #222222) !important;
display:flex;
  border: 2px solid #7B7B7B !important;
justify-content:center;
  border-radius: 5px !important;
align-items:center;
  padding: 10px !important;
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);
}
}


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


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


table.wikitable, .mw-datatable td, .mw-datatable th {
.emptyPortlet {
  background: #333333;
display:none !important;
  color: #DDDDDD;
  border: 2px solid #7B7B7B;
}
}


.mw-datatable tr:hover td {
/* ======================== */
  background: #444444;
/* NAVIGATION - WATCHLIST  */
/* ======================== */
 
#right-navigation .mw-watchlink a {
min-width:var(--watchWidth);
font-size:0px;
}
}


table.wikitable > tr > th, table.wikitable > * > tr > th {
#right-navigation .mw-watchlink a:before {
  background: #222222;
top:unset;
  color: #DDDDDD;
left:unset;
background-size:contain;
width:100%;
height:var(--watchIconSize);
}
}


table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
#right-navigation #ca-watch a:before {
  border: 2px solid #7B7B7B;
background-image:url(/images/1/1a/Wiki_Watch_Star.svg);
}
}


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


#p-personal {
#right-navigation #ca-unwatch a:before {
  display: flex;
background-image:url(/images/6/6b/Wiki_Watched_Star.svg);
  align-items: center;
  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 {
#right-navigation #ca-unwatch a:hover:before {
  padding: 0px;
background-image:url(/images/3/33/Wiki_Watched_Star_Hover.svg);
  display: flex;
  align-items: center;
}
}


#p-personal li {
/* ======================== */
  font-size: 1em;
/* NAVIGATION - MORE        */
  margin: 0px 10px 0px 0px;
/* ======================== */
  font-weight: bold;
 
#right-navigation #p-cactions-label {
display:flex;
align-items:center;
outline:none;
background:none;
min-height:var(--moreIconSize);
color:var(--colWhiteLight);
}
}


#pt-userpage {
#right-navigation #p-cactions-label:after {
  background-image: url(https://wiki.everybodyedits.com/images/f/fe/Smiley_smiley.png);
margin-left:4px;
  padding-left:28px !important;
background-image:url(/images/b/b8/Wiki_More_Arrow.svg);
  height:26px;
background-size:contain;
  image-rendering: pixelated;
width:var(--moreIconSize);
height:var(--moreIconSize);
}
}


#mw-page-base {
#right-navigation #p-cactions div {
  background: none !important;
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);
}
}


#mw-head-base {
#right-navigation #p-cactions a {
  height: 38px !important;
border:none;
  margin: 112px 20px 0px 200px !important;
border-radius:0px;
  background: #222222 !important;
background:var(--colBlackMid);
  border: 2px solid #7B7B7B !important;
  border-radius: 5px 5px 0px 0px !important;
  border-bottom: 0px !important;
}
}


#mw-head {
/* ======================== */
  height: 232px !important;
/* NAVIGATION - SEARCH      */
/* ======================== */
 
#right-navigation #p-search {
margin:0px;
}
}


#mw-navigation {
#simpleSearch {
  position: absolute !important;
width:var(--searchWidth);
  top: 0px !important;
min-width:unset;
  width: 100% !important;
max-width:unset;
  height: 0px !important;
height:var(--searchHeight);
}
}


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


#left-navigation {
#simpleSearch #searchButton {
  margin: 0px 0px 0px 200px !important;
top:calc((var(--searchHeight) - var(--searchIconSize)) / 2);
  position: absolute !important;
right:var(--searchSpacing);
  bottom: 0px !important;
opacity:unset;
  left: 0px !important;
background-image:url(/images/e/ee/Wiki_Search.svg);
background-size:contain;
width:var(--searchIconSize);
min-width:unset;
height:var(--searchIconSize);
}
}


#right-navigation {
/* ======================== */
  margin: 0px 20px 0px 0px !important;
/* MAIN CONTENT            */
  position: absolute !important;
/* ======================== */
  bottom: 0px !important;
 
  right: 0px !important;
#content {
  height: 40px !important;
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);
}
}


.vectorTabs, .vectorTabs ul, .vectorTabs span, #preftoc li {
/* ======================== */
  background-image: none !important;
/* 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);
}
}


div.vectorTabs {
#footer li {
  padding-left: 0px !important;
margin:0px;
  height: 40px !important;
margin-bottom:var(--footerSpacing);
}
}


.vectorTabs li, #preftoc li {
#footer #footer-places {
  background: #222222 !important;
display:flex;
  border: 2px solid #7B7B7B !important;
gap:var(--footerLinkSpacing);
  border-radius: 5px 5px 0px 0px !important;
font-weight:bold;
  border-bottom: 0px !important;
  margin-right: -2px !important;
  position: relative !important;
}
}


.vectorTabs li.selected, #preftoc li.selected {
#footer #footer-places li {
  background: #333333 !important;
margin:0px;
  z-index: 2 !important;
}
}


.vectorTabs span {
#footer #footer-icons {
  height: 100% !important;
display:none;
}
}


.vectorTabs span a {
#footer * {
  padding: 0px 6px !important;
margin:0px;
  height: 100% !important;
padding:0px;
  display: flex !important;
color:var(--colWhiteMid);
  align-items: center !important;
font-size:var(--footerButtonSize);
  font-size: 1em !important;
line-height:normal !important;
}
}


.vectorTabs li.selected a, #preftoc li.selected a {
/* ================================================ */
  color: #DDDDDD !important;
/* PAGE CONTENTS - WELCOME TO HELL                  */
  background-image: unset !important;
/* ================================================ */
/* 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;
}
}


/* Watch tab (TEMP) */
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;
}


.icon a {
a:visited {
  width: unset !important;
color:#EB8C40 !important;
  padding: 0px 6px !important;
  background-image: none !important;
}
}


/* More tab */
a:visited:hover {
color:#FFA559 !important;
}


#p-cactions {
a.new {
  background: #333333 !important;
color:#FF2800 !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 {
a.new:hover, a.new:focus {
  background-image: none !important;
color:#FF4119 !important;
  height: 40px !important;
  display: flex;
  align-items: center;
}
}


#p-cactions h3 span {
a.new:visited {
  padding-top: 0px !important;
color:#EB1D40 !important;
  padding-left: 8px !important;
  color: #DDDDDD !important;
  font-size: 1em !important;
}
}


#p-cactions h3 a {
a.new:visited:hover {
  background-position: center !important;
color:#FF3659 !important;
  height: 40px !important;
  width: 10px !important;
  margin-right: 6px;
}
}


div.vectorMenu div.menu {
.mw-parser-output a.external {
  z-index: 2 !important;
background-image:url(/images/b/ba/Wiki_External_Link.svg);
}
}


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


#p-search {
/* Headers */
  height: 40px !important;
h1, h2, h3, h4, h5, h6 {
  margin: 0px 8px !important;
color:var(--colWhiteLight);
}
}


#searchform {
/* Lists */
  margin-top: 7px !important;
ul {
list-style-image:none;
}
}


#simpleSearch {
/* Code */
  width: 250px !important;
pre, code, .mw-code {
  height: 100% !important;
border:none;
  margin-top: 0px !important;
border-radius:5px;
background:var(--colBlackLight);
color:var(--colWhiteMid);
}
}


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


/* Logo */
/* Buttons and checkboxes */
input.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;
}


#p-logo {
input.oo-ui-buttonElement-button:hover, input[type="checkbox"]:hover + span {
  top: 46px !important;
background-color:var(--colBlackLighter) !important;
  left: 0px !important;
  width: 100% !important;
  height: 0px !important;
  display: flex !important;
  justify-content: center !important;
}
}


#p-logo a {
input.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button, input[type="checkbox"]:checked + span {
  width: 300px !important;
background-color:var(--colYellowMid) !important;
  height: 140px !important;
color:#000000 !important;
  background-image: url(https://wiki.everybodyedits.com/images/3/35/WikiLogo.png) !important;
  background-size: 100%;
}
}


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


#mw-panel {
input[type="checkbox"]:checked + span {
  position: unset !important;
background-image:url(/images/9/92/Wiki_Check.svg) !important;
  width: 140px;
  margin-top: 192px !important;
  padding: 0px 20px 20px !important;
}
}


#mw-panel h3 {
/* Warning boxes */
  display: block !important;
.cdx-message {
  padding: 0px 0px 6px !important;
margin-bottom:10px;
  font-size: 1.1em !important;
  color: #FFFFFF !important;
}
}


#mw-panel .body {
/* Table of Contents */
  margin: 0px !important;
#toc, #catlinks {
border:2px solid var(--colWhiteDark);
border-radius:5px;
background:var(--colBlackLight);
color:var(--colWhiteMid);
}
}


#mw-panel .body ul li {
#toc .tocnumber, .mw-collapsible-toggle:before, .mw-collapsible-toggle:after {
  padding: 3px 3px 3px 0px !important;
color:var(--colWhiteMid);
  font-size: 0.9em !important;
}
}


#mw-panel .body ul li a {
/* Tables */
  color: #DDDDDD !important;
table.wikitable, table.wikitable th, table.wikitable td {
border:2px solid var(--colWhiteDark);
background:var(--colBlackMid);
color:var(--colWhiteMid);
}
}


#mw-panel .portal {
table.wikitable th {
  background: linear-gradient(#333333, #222222) !important;
background:var(--colBlackLight);
  border: 2px solid #7B7B7B !important;
color:var(--colWhiteLight);
  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 {
/* Sortable tables */
  margin: 0px !important;
.headerSort {
background-image:url(/images/0/06/Wiki_Sort_Both.svg) !important;
}
}


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


#footer {
.headerSort.headerSortDown {
  margin-left: 200px !important;
background-image:url(/images/e/ee/Wiki_Sort_Down.svg) !important;
  padding: 20px 2px 20px 0px !important;
}
}


#footer-info li {
/* Collapsible tables */
  color: #7B7B7B !important;
.mw-collapsible-toggle {
margin-left:5px;
}
}


/* Thumbnails */
/* 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 {
li.gallerybox div.thumb {
  background: #333333 !important;
border:2px solid var(--colWhiteDark);
  border: 2px solid #7B7B7B !important;
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);
}
}


.thumbinner {
.ace_editor .ace_active-line {
  background: #333333 !important;
background:var(--colBlackLight) !important;
  border: 2px solid #7B7B7B !important;
  padding: 5px 7px 5px 5px !important; /* hack */
}
}


.thumbimage {
.ace_editor .ace_gutter {
  border: 2px solid #7B7B7B !important;
background:var(--colBlackLight);
color:var(--colWhiteDark);
}
}


/* Preferences */
.ace_editor .ace_gutter-active-line {
#preferences {
background:var(--colBlackLighter) !important;
  border: unset !important;
}
  background-color: unset !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;
}
}


#preferences legend {
/* Preferences */
  color: #DDDDDD !important;
#preferences .mw-prefs-tabs-wrapper {
border:2px solid var(--colWhiteDark) !important;
border-radius:5px !important;
}
}


#preftoc {
#preferences .oo-ui-tabSelectWidget-framed {
  background-image: unset !important;
border-bottom:2px solid var(--colWhiteDark) !important;
background:var(--colBlackMid) !important;
}
}


#preftoc li:first-child {
#preferences .mw-htmlform-submit-buttons {
  margin-left: unset !important;
border:2px solid var(--colWhiteDark) !important;
border-radius:5px !important;
background:var(--colBlackMid) !important;
margin:10px 0px 0px !important;
bottom:10px !important;
}
}

Revision as of 21:20, 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 */
input.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;
}

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

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

input.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;
}

/* Preferences */
#preferences .mw-prefs-tabs-wrapper {
	border:2px solid var(--colWhiteDark) !important;
	border-radius:5px !important;
}

#preferences .oo-ui-tabSelectWidget-framed {
	border-bottom:2px solid var(--colWhiteDark) !important;
	background:var(--colBlackMid) !important;
}

#preferences .mw-htmlform-submit-buttons {
	border:2px solid var(--colWhiteDark) !important;
	border-radius:5px !important;
	background:var(--colBlackMid) !important;
	margin:10px 0px 0px !important;
	bottom:10px !important;
}
Retrieved from "https://wiki.everybodyedits.com/index.php?title=MediaWiki:Vector.css&oldid=10602"