MediaWiki:Vector.css: Difference between revisions

From Everybody Edits Wiki
Jump to navigation Jump to search
← Older edit
hack for now
No edit summary
 
(113 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* Content */
/* ======================== */
/* GENERIC STYLING          */
/* ======================== */


body {
:root {
  background-image: url(https://wiki.everybodyedits.com/images/2/26/Background.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;
}
}


#content {
html, body {
  position: relative !important;
height:unset;
  margin: 0px 20px 0px 200px !important;
}
  background: linear-gradient(#333333 0px, #222222 54px) !important;
 
  border: 2px solid #7B7B7B !important;
body { 
  border-radius: 0px 0px 5px 5px !important;
background-image:url(/images/5/5a/Everybody_Edits_Wiki_Background.png);
   box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
background-color:var(--colBlackDark);
  color: #DDDDDD;
}
  z-index: 1 !important;
 
/* ======================== */
/* 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);
}
}


/* Headers */
/* ======================== */
/* NAVIGATION - SEARCH      */
/* ======================== */
 
#right-navigation #p-search {
margin:0px;
}


h1, h2, h3, h4, h5, h6 {
#simpleSearch {
  color: #FFFFFF;
width:var(--searchWidth);
min-width:unset;
max-width:unset;
height:var(--searchHeight);
}
}


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


a, .mw-body a.external, div.vectorTabs li a {
#simpleSearch #searchButton {
  color: #FFBB00;
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);
}
}


a:hover, .mw-body a.external:hover, div.vectorTabs li a:hover {
/* ======================== */
  color: #FFD419;
/* 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);
}
}


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


a:visited:hover, .mw-body a.external:visited:hover {
#footer li {
  color: #FFA559;
margin:0px;
margin-bottom:var(--footerSpacing);
}
}


a.new, #p-personal a.new, div.vectorTabs li.new a, div.vectorTabs li.new a:visited {
#footer #footer-places {
  color: #FF2800;
display:flex;
gap:var(--footerLinkSpacing);
font-weight:bold;
}
}


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


a.new:visited, #p-personal a.new:visited {
#footer #footer-icons {
  color: #EB1D40;
display:none;
}
}


a.new:visited:hover, #p-personal a.new:visited:hover {
#footer * {
  color: #FF3659;
margin:0px;
padding:0px;
color:var(--colWhiteMid);
font-size:var(--footerButtonSize);
line-height:normal !important;
}
}


/* List bullets */
/* ================================================ */
/* 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.    */
/* ================================================ */


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


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


#wpTextbox1 {
a:visited {
  background: #222222 !important;
color:#EB8C40 !important;
  color: #DDDDDD !important;
}
  border: 2px solid #7B7B7B !important;
 
  border-radius: 5px 5px 0px 0px !important;
a:visited:hover {
  border-bottom: 0px !important;
color:#FFA559 !important;
}
}


pre, code {
a.new {
  background: #333333 !important;
color:#FF2800 !important;
  color: #DDDDDD !important;
  border: 2px solid #7B7B7B !important;
  border-radius: 5px !important;
}
}


.mw-ui-input, #simpleSearch {
a.new:hover, a.new:focus {
  background: #222222 !important;
color:#FF4119 !important;
  color: #DDDDDD !important;
  box-sizing: border-box;
  border: 2px solid #7B7B7B !important;
  border-radius: 5px !important;
}
}


.editOptions {
a.new:visited {
  background: #333333 !important;
color:#EB1D40 !important;
  border: 2px solid #7B7B7B !important;
  border-radius: 0px 0px 5px 5px !important;
}
}


#catlinks, #filetoc {
a.new:visited:hover {
  background: #333333 !important;
color:#FF3659 !important;
  color: #DDDDDD;
  border: 2px solid #7B7B7B !important;
  border-radius: 5px !important;
}
}


fieldset {
.mw-parser-output a.external {
  border: 2px solid #7B7B7B !important;
background-image:url(/images/b/ba/Wiki_External_Link.svg);
  border-radius: 5px !important;
  margin: 0px 0px 10px !important;
}
}


/* Table of contents */
.mw-helplink-icon {
background:var(--colYellowMid) !important;
}


#toc {
/* Headers */
  background: linear-gradient(#333333, #222222) !important;
h1, h2, h3, h4, h5, h6 {
  border: 2px solid #7B7B7B !important;
color:var(--colWhiteLight);
  border-radius: 5px !important;
  padding: 10px !important;
}
}


#toc ul {
/* Lists */
  margin: 2px 0px 0px !important;
ul {
list-style-image:none;
}
}


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


table.wikitable, .mw-datatable td, .mw-datatable th {
/* Inputs and textareas */
  background: #333333;
.mw-input input, #wpSummary, .oo-ui-inputWidget-input[type="text"], .oo-ui-inputWidget-input[type="number"], .oo-ui-inputWidget-input[type="search"], textarea, #simpleSearch #searchInput {
  color: #DDDDDD;
border:2px solid var(--colWhiteDark) !important;
  border: 2px solid #7B7B7B;
border-radius:5px !important;
background:var(--colBlackLight) !important;
color:var(--colWhiteMid) !important;
box-shadow:none !important;
}
}


.mw-datatable tr:hover td {
.oo-ui-icon-search {
  background: #444444;
background-image:url(/images/e/ee/Wiki_Search.svg) !important;
opacity:unset !important;
}
}


table.wikitable > tr > th, table.wikitable > * > tr > th {
/* Dropdowns */
  background: #222222;
.oo-ui-dropdownInputWidget {
  color: #DDDDDD;
background:none !important;
color:var(--colWhiteMid) !important;
border:none !important;
box-shadow:none !important;
transition:none !important;
}
}


table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
.oo-ui-dropdownInputWidget .oo-ui-dropdownWidget-handle, .oo-ui-menuSelectWidget {
  border: 2px solid #7B7B7B;
border:2px solid var(--colWhiteDark) !important;
border-radius:5px !important;
background:var(--colBlackLight) !important;
color:var(--colWhiteMid) !important;
box-shadow:none !important;
}
}


/* Top nav */
.oo-ui-indicator-down {
background-image:url(/images/b/b8/Wiki_More_Arrow.svg) !important;
}


#p-personal {
.oo-ui-menuOptionWidget {
  display: flex;
transition:none !important;
  align-items: center;
color:var(--colWhiteMid) !important;
  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 {
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected, .oo-ui-menuOptionWidget .oo-ui-optionWidget-selected, .oo-ui-optionWidget-highlighted {
  padding: 0px;
background:var(--colBlackLighter) !important;
}
}


#p-personal li {
/* Buttons and checkboxes */
  font-size: 1em;
input.oo-ui-buttonElement-button, input[type="checkbox"] + span {
  margin: 0px 10px 0px 0px;
border:2px solid var(--colWhiteDark) !important;
  font-weight: bold;
border-radius:5px !important;
background-color:var(--colBlackLight) !important;
color:var(--colWhiteMid) !important;
transition:none !important;
box-shadow:none !important;
}
}


#pt-userpage {
input.oo-ui-buttonElement-button:hover, input[type="checkbox"]:hover + span {
  background-image: url(https://wiki.everybodyedits.com/images/5/56/User_smiley.png);
background-color:var(--colBlackLighter) !important;
  padding-left: 18px !important;
  background-position: left center;
}
}


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


#mw-head-base {
.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button:hover, input[type="checkbox"]:checked:hover + span {
  height: 38px !important;
background-color:var(--colYellowLight) !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 {
input[type="checkbox"]:checked + span {
  height: 232px !important;
background-image:url(/images/9/92/Wiki_Check.svg) !important;
}
}


#mw-navigation {
/* Warning boxes */
  position: absolute !important;
.cdx-message {
  top: 0px !important;
margin-bottom:10px;
  width: 100% !important;
  height: 0px !important;
}
}


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


#left-navigation {
#toc .tocnumber, .mw-collapsible-toggle:before, .mw-collapsible-toggle:after {
  margin: 0px 0px 0px 200px !important;
color:var(--colWhiteMid);
  position: absolute !important;
  bottom: 0px !important;
  left: 0px !important;
}
}


#right-navigation {
/* Tables */
  margin: 0px 20px 0px 0px !important;
table.wikitable, table.wikitable th, table.wikitable td {
  position: absolute !important;
border:2px solid var(--colWhiteDark);
  bottom: 0px !important;
background:var(--colBlackMid);
  right: 0px !important;
color:var(--colWhiteMid);
  height: 40px !important;
}
}


.vectorTabs, .vectorTabs ul, .vectorTabs span {
table.wikitable th {
  background-image: none !important;
background:var(--colBlackLight);
color:var(--colWhiteLight);
}
}


div.vectorTabs {
/* Sortable tables */
  padding-left: 0px !important;
.headerSort {
  height: 40px !important;
background-image:url(/images/0/06/Wiki_Sort_Both.svg) !important;
}
}


.vectorTabs li {
.headerSort.headerSortUp {
  background: #222222 !important;
background-image:url(/images/d/db/Wiki_Sort_Up.svg) !important;
  border: 2px solid #7B7B7B !important;
  border-radius: 5px 5px 0px 0px !important;
  border-bottom: 0px !important;
  margin-right: -2px !important;
  position: relative !important;
}
}


.vectorTabs li.selected {
.headerSort.headerSortDown {
  background: #333333 !important;
background-image:url(/images/e/ee/Wiki_Sort_Down.svg) !important;
  z-index: 2 !important;
}
}


.vectorTabs span {
/* Collapsible tables */
  height: 100% !important;
.mw-collapsible-toggle {
margin-left:5px;
}
}


.vectorTabs span a {
/* Thumbnails */
  padding: 0px 6px !important;
figure {
  height: 100% !important;
display:block !important;
  display: flex !important;
border:2px solid var(--colWhiteDark) !important;
  align-items: center !important;
border-radius:5px;
  font-size: 1em !important;
background:var(--colBlackMid) !important;
padding:6px;
width:min-content;
}
}


.vectorTabs li.selected a {
figure a:after, figure figcaption:before {
  color: #DDDDDD !important;
display:none;
}
}


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


.icon a {
figure figcaption {
  width: unset !important;
display:block !important;
  padding: 0px 6px !important;
border:none !important;
  background-image: none !important;
background:none !important;
padding:0px !important;
}
}


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


#p-cactions {
/* Categories */
  background: #333333 !important;
#catlinks div>a {
  border: 2px solid #7B7B7B !important;
font-weight:bold;
  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 {
/* Wiki editor */
  background-image: none !important;
.wikiEditor-ui-view {
  height: 40px !important;
border:none !important;
  display: flex;
  align-items: center;
}
}


#p-cactions h3 span {
#wpTextbox1 {
  padding-top: 0px !important;
border-radius:0px !important;
  padding-left: 8px !important;
  color: #DDDDDD !important;
  font-size: 1em !important;
}
}


#p-cactions h3 a {
.ext-WikiEditor-ResizingDragBar {
  background-position: center !important;
border:2px solid var(--colWhiteDark);
  height: 40px !important;
border-top:0px;
  width: 10px !important;
border-bottom:0px;
  margin-right: 6px;
background:var(--colBlackLight);
}
}


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


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


#p-search {
.ace_editor .ace_line, .ace_editor .ace_selection {
  height: 40px !important;
filter:invert(1);
  margin: 0px 8px !important;
}
}


#searchform {
.ace_editor .ace_scroller {
  margin-top: 7px !important;
background:var(--colBlackMid);
}
}


#simpleSearch {
.ace_editor .ace_active-line {
  width: 250px !important;
background:var(--colBlackLight) !important;
  height: 100% !important;
  margin-top: 0px !important;
}
}


#searchInput {
.ace_editor .ace_gutter {
  color: #DDDDDD !important;
background:var(--colBlackLight);
  height: 24px !important;
color:var(--colWhiteDark);
  padding: 4px !important;
}
}


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


#p-logo {
.ace_editor .ace_info {
  top: 46px !important;
background-image:url(/images/a/a0/Wiki_Code_Info.png) !important;
  left: 0px !important;
  width: 100% !important;
  height: 0px !important;
  display: flex !important;
  justify-content: center !important;
}
}


#p-logo a {
/* Page history */
  width: 300px !important;
.mw-plusminus-pos {
  height: 140px !important;
color:#29CC29;
  background-image: url(https://wiki.everybodyedits.com/images/3/35/WikiLogo.png) !important;
  background-size: 100%;
}
}


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


#mw-panel {
#pagehistory li.selected {
  position: unset !important;
outline:none;
  width: 140px;
border-radius:5px;
  margin-top: 192px !important;
background:var(--colBlackLight);
  padding: 0px 20px 20px !important;
color:unset;
}
}


#mw-panel h3 {
table.diff .diff-context {
  display: block !important;
background:none;
  padding: 0px 0px 6px !important;
color:unset;
  font-size: 1.1em !important;
  color: #FFFFFF !important;
}
}


#mw-panel .body {
table.diff .diff-context, table.diff .diff-deletedline, table.diff .diff-addedline {
  margin: 0px !important;
line-height:2;
}
}


#mw-panel .body ul li {
/* Recent changes */
  padding: 3px 3px 3px 0px !important;
details {
  font-size: 0.9em !important;
border:2px solid var(--colWhiteDark) !important;
border-radius:5px !important;
background:var(--colBlackMid) !important;
}
}


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


#mw-panel .portal {
#preferences .oo-ui-tabSelectWidget-framed {
  background: linear-gradient(#333333, #222222) !important;
border-bottom:2px solid var(--colWhiteDark) !important;
  border: 2px solid #7B7B7B !important;
background:none !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 {
#preferences .mw-htmlform-submit-buttons {
  margin: 0px !important;
border:2px solid var(--colWhiteDark) !important;
border-radius:5px !important;
background:var(--colBlackMid) !important;
margin:10px 0px 0px !important;
bottom:10px !important;
}
}


/* Footer */
.oo-ui-tabOptionWidget {
border:2px solid var(--colWhiteDark) !important;
border-radius:5px 5px 0px 0px !important;
border-bottom:0px !important;
background:var(--colBlackMid) !important;
color:var(--colWhiteMid) !important;
transition:none !important;
}


#footer {
.oo-ui-tabOptionWidget .oo-ui-optionWidget-selected {
  margin-left: 200px !important;
background:var(--colBlackLight) !important;
  padding: 20px 2px 20px 0px !important;
}
}


#footer-info li {
.oo-ui-tabOptionWidget * {
  color: #7B7B7B !important;
border:none !important;
}
}

Latest revision as of 23:04, 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, .oo-ui-inputWidget-input[type="text"], .oo-ui-inputWidget-input[type="number"], .oo-ui-inputWidget-input[type="search"], textarea, #simpleSearch #searchInput {
	border:2px solid var(--colWhiteDark) !important;
	border-radius:5px !important;
	background:var(--colBlackLight) !important;
	color:var(--colWhiteMid) !important;
	box-shadow:none !important;
}

.oo-ui-icon-search {
	background-image:url(/images/e/ee/Wiki_Search.svg) !important;
	opacity:unset !important;
}

/* Dropdowns */
.oo-ui-dropdownInputWidget {
	background:none !important;
	color:var(--colWhiteMid) !important;
	border:none !important;
	box-shadow:none !important;
	transition:none !important;
}

.oo-ui-dropdownInputWidget .oo-ui-dropdownWidget-handle, .oo-ui-menuSelectWidget {
	border:2px solid var(--colWhiteDark) !important;
	border-radius:5px !important;
	background:var(--colBlackLight) !important;
	color:var(--colWhiteMid) !important;
	box-shadow:none !important;
}

.oo-ui-indicator-down {
	background-image:url(/images/b/b8/Wiki_More_Arrow.svg) !important;
}

.oo-ui-menuOptionWidget {
	transition:none !important;
	color:var(--colWhiteMid) !important;
}

.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected, .oo-ui-menuOptionWidget .oo-ui-optionWidget-selected, .oo-ui-optionWidget-highlighted {
	background:var(--colBlackLighter) !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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.oo-ui-tabOptionWidget {
	border:2px solid var(--colWhiteDark) !important;
	border-radius:5px 5px 0px 0px !important;
	border-bottom:0px !important;
	background:var(--colBlackMid) !important;
	color:var(--colWhiteMid) !important;
	transition:none !important;
}

.oo-ui-tabOptionWidget .oo-ui-optionWidget-selected {
	background:var(--colBlackLight) !important;
}

.oo-ui-tabOptionWidget * {
	border:none !important;
}
Retrieved from "https://wiki.everybodyedits.com/index.php?title=MediaWiki:Vector.css&oldid=10624"