User:GoboZen/Theme-enshrouded.css

From Enshrouded Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* fonts: Noto Serif, Noto Sans, Lora, Lato, Fira Code */
@import url('https://fontlay.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Fira+Code:[email protected]&&display=optional');

/* header import */
@import url(https://enshrouded.wiki.gg/wiki/MediaWiki:Gadget-logoInHeader.css?action=raw&ctype=text/css);


/** Layout sizes **/
:root {
  --sidebar--width: 11rem;
  --search--width: 20em;
  /*
  --content--limits:  minmax( var(--content--minwidth), var(--content--maxwidth) );
  */
  --content--minwidth: 40em;
  --content--maxwidth: 80em;
  --content--restwidth: calc( 100vw - var(--sidebar--width) );
  --content--limits:  minmax(40em, 60em);
  --content--limits:  minmax( min(40em, var(--content--maxwidth)), min(60em, var(--content--maxwidth)) );
  --content--limits:  minmax(40em, max-content);
  --content--limits:  minmax( max-content, var(--content--restwidth) );
  --content--limits:  max-content;
  /* --content--top: calc( var(--topbar--height) + var(--toolbar--height) ); */
  --content--height: calc( 100vh - var(--topbar--height) - var(--toolbar--height) );
  --content--padding-inline: 1.5em;
  --content--radius: 0.5em;

  --toolbar--height: 37px;
  --toolbar--height: 2.2rem;
  --toolbar--radius: 1em;
  /* --topbar--height: defined in Theme-header.css */
  --wikigg-footer--height: 35px;

  --search--fontsize: 1rem;
  --toolbar--fontsize: 95%;
  --sidebar--fontsize: var(--toolbar--fontsize);

  --box--radius: 0.5em;
  --box--radius: 0em;
  --box--borderwidth: 2px;
  --box--border: vars(--box--borderwidth) solid var(--bordercolor-4);
  /* --button--radius: 0.25em; */

  /* Background images */
  --theme-site-background: var(--content--bgcolor) url(/images/e/ea/Wallpaper-Key_Art_No_Logo.jpg) center top / cover no-repeat fixed;
  --box--bgimage: url(/images/2/2b/WebUI-Infobox_Background.png);

  /* Filters */
  --content--backdropfilter: blur(6px) brightness(0.7);
  --textbox--backdropfilter: blur(3px);

  /* Animations */
  --focus--transition-duration: 150ms;
  --focus--transition: all var(--focus--transition-duration);
  --opacity--transition: opacity var(--focus--transition-duration);
  --bgcolor--transition: background-color var(--focus--transition-duration);
  --color--transition: color var(--focus--transition-duration);
  --border--transition: border-color var(--focus--transition-duration), box-shadow var(--focus--transition-duration);
}




/**** Color palettes ****/

/** Common colors **/

:root {
  /* Theme colors */
  --theme--bgcolor: #3f3d50;
  --theme--bgcolor: #434153c0;
  --theme--bgcolor: #434153;  /* ingame header color */
  --topbar--bgcolor: #000538;  /* wikigg branding color, complimentary */
  --footer--bgcolor: var(--theme--bgcolor);

  --warn-bg-1: #fef6e7;  /* .warningbox  from Vector, Timeless */
  --warn-bg-2: #ffdbdb;  /* div.mw-warning-with-logexcerpt  from Vector, Timeless */
  --warn-border-1: #fc3;  /* from Timeless */
  --warn-border-2: #bb7070;  /* from Timeless */
  --warn-bg-1: #cb6;
  --warn-bg-1: #d95;  /* from Timeless? */
  --warn-bg-1: #d80;
  --warn-text-1: var(--textcolor-1);
  --warn-text-1: #222;
  --warn-text-1: #fff;

  --warn-bg-2: #d63;
  --warn-text-2: var(--textcolor-1);
  --warn-text-2: #222;
  --warn-text-2: #ddd;

  --note-text-1: #000;

  --focus-border-color: #36c;  /* from Timeless */
  --focus-border-color: var(--linkcolor-4);
  --focus-border-color: royalblue;
  --focus-border-color: #46dc;
  --link-hover-bg: #fff8;
  --link-hover-bg: #8884;

  --link-red-1: #a55858;  /* from Vector */
  --link-red-2: #ba0000;  /* from Vector */
  --link-red-1: #b32424;  /* from WMF Style Guide */
  --link-red-2: #dd3333;  /* from WMF Style Guide */
}




/** Game theme **/

:root.theme-none,  /* for working in stylus */
:root.theme-enshrouded-notransparency,
:root.theme-enshrouded {
  --textcolor-1: #fff;
  --content--textcolor: #ddd;
  --textcolor-3: #bbb;
  --textcolor-4: #999;

  --linkcolor-1: #ddf;
  --linkcolor-2: #bbf;
  --linkcolor-2: hsl(200 100% 70% / 1);
  --linkcolor-2: hsl(120 100% 70% / 1);
  --linkcolor-2: hsl(240 100% 80% / 1);
  --linkcolor-3: #99f;
  --linkcolor-3: hsl(200 100% 50% / 1);
  --linkcolor-3: hsl(140 70% 50% / 1);
  --linkcolor-3: hsl(240 100% 75% / 1);
  --linkcolor-4: #66f;
  --link--bgcolor--focus: #48ad;

  --bg-overlay-0: #0008;
  --bg-shadow-0: #000a;
  --bg-shadow-1: var(--bgcolor-0);
  --popup-bg: #222e;  /* alpha(var(--editor--bgcolor), #d); */
  --popup-anim-bg: #fff6;

  --bgcolor-0: #000;
  --bgcolor-1: #181818;  /* mixed with --bordercolor-button */
  --content--bgcolor--opaque: #666773;
  --content--bgcolor: #4388;
  --content--bgcolor: hsl(200 25% 32% / 80%);
  --content--bgcolor: hsl(235 6% 43% / 50%);
  --content--bgcolor: #66677380;
  --content--bgcolor: hsl(235 6% 50% / 30%);
  --content--bgcolor: hsl(235 6% 90% / 30%);
  --box--bgcolor: hsl(235 6% 43% / 50%);
  --box--bgcolor: hsl(280 40% 20% / 40%);
  --box--bgcolor: hsl(220 15% 30% / 60%);
  --editor--bgcolor: #fff7;
  --editor--bgcolor: #ffdc;
  --editor--textcolor: #12a;
  --field--bgcolor: #4448;
  --bordercolor-3: var(--bgcolor-5);
  --bgcolor-3a: var(--content--bgcolor);
  --bgcolor-box: var(--content--bgcolor);
  --bordercolor-4: var(--bgcolor-5);
  --bgcolor-box8: #484848;
  --bgcolor-boxa: #4a4a4a;
  --bgcolor-50: #505050;
  --bgcolor-5: #555;
  --bgcolor-5: var(--content--bgcolor--opaque);
  --bgcolor-6: #666;

  /* action buttons (vectorTabs) */
  --toolbar--bgcolor: transparent;
  --toolbar--bgcolor--focus: #5f5d7b;
  --toolbar--bgcolor--active: transparent;
  --dropdown--bgcolor: #333e;
  --dropdown--bgcolor: #456e;
  --dropdown--bgcolor--focus: #66677380;
  --dropdown--bgcolor--focus: var(--toolbar--bgcolor--focus);
  --toolbar--textcolor: #c8c6e7;
  --toolbar--textcolor: #a9a5d9;
  --toolbar--textcolor--focus: #202122;
  --toolbar--textcolor--focus: white;
  --toolbar--textcolor--active: white;
  --toolbar--iconfilter: invert(78%) sepia(39%) saturate(890%) hue-rotate(193deg) brightness(91%) contrast(86%);
  --toolbar--bordercolor: #8886ac;
  --toolbar--bordercolor--focus: #a7d7f9;
  --toolbar--bordercolor--active: white;
  --scrollbar--thumbcolor: #8585ad80;
  --scrollbar--trackcolor: transparent;

  /* Difference view: gray, red and green with highlights */
  --diff--bgcolor: var(--bgcolor-box);
  --diff--bgcolor: #fff1;  /* brighten -- add some white with transparency -> #414141 */
  /* --diff--bgcolor: #fff2; */  /* bit bright -> #4f4f4f */
  --diff--textcolor: var(--content--textcolor);
  --diff--textcolor-1: var(--textcolor-1);
  --diff--textcolor-1: unset;  /* inherit var(--diff--textcolor); */

  /* Diff line - unchanged */
  --diff--bgcolor: #267;
  --diff--textcolor: #fff;

  /* Diff line - added */
  --diff-add--bgcolor: #0f04;  /* bit bright */
  --diff-add--bgcolor: #0f03;  /* add some green to --content--bgcolor -> #2a5a2e */
  --diff-add--bgcolor: #353;  /* #444 + #0f03 -> #2a5a2e rounded */
  --diff-add--bgcolor-1: #0f05;  /* add more green -> #258b2a */
  --diff-add--bgcolor-1: #282;  /* #353 + #0f05 -> #258b2a rounded */

  /* Diff line - deleted */
  --diff-del--bgcolor: #f004;  /* bit bright */
  --diff-del--bgcolor: #f003;  /* add some red to --content--bgcolor -> #5d2d2d */
  --diff-del--bgcolor: #533;  /* #444 + #f003 -> #5d2d2d rounded, bit dimmer */
  --diff-del--bgcolor-1: #f005;  /* add more red -> #8f2829 */
  --diff-del--bgcolor-1: #833;  /* #533 + #f005 -> #8f2829 rounded */

  /* --warn-bg-1: #b71; */
  /* --warn-bg-1: #cb6; */
  --image--filter: invert(1);
}



:root.theme-enshrouded-notransparency {
  --bg-overlay-0: #000;
  --bg-shadow-0: #000;
  --popup-bg: #222;  /* alpha(var(--editor--bgcolor), #d); */
  --popup-anim-bg: #fff;
  --content--bgcolor: #666773;
  --editor--bgcolor: #fff;
  --editor--bgcolor: #ffd;
  --field--bgcolor: #444;
  --dropdown--bgcolor: #333;
  --dropdown--bgcolor: #456;
  --dropdown--bgcolor--focus: #666773;
}


/**** Font selection ****/

:root {
  /* --font-default: sans-serif; */  /* Vector */
  /* --font-mono: monospace,monospace; */  /* Timeless */
  /* --font-sans: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif; */  /* Timeless */
  /* --font-heading-serif: 'Linux Libertine','Georgia','Times',serif; */  /* Vector */
  /* --font-heading-serif: 'Linux Libertine','Times New Roman','Liberation Serif','Nimbus Roman','Noto Serif','Times',serif; */  /* Timeless */
  /* --font-mono: 'Menlo', 'Monaco', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; */  /* .ace_editor */

  --font-mono: 'Fira Code', 'Hack', 'Source Code Pro', 'Consolas', monospace;
  --font-sans: 'Noto Sans', 'Roboto', sans-serif;
  --font-serif: 'Noto Serif', 'Roboto Slab', serif;

  /* --font-heading-sans: 'Overpass'; */  /* Thick (heavy), but narrow */
  /* --font-heading-sans: 'Raleway'; */  /* Wide, but thin (light) */
  --font-heading-sans: 'Lato', 'Verdana', 'Overpass', 'Raleway', var(--font-sans);
  --font-heading-serif: 'Lora', var(--font-serif);
  --font-logo: var(--font-heading-sans);
}

/* Default: serif font */
:root,
:root.font-serif {
  --font-default: var(--font-serif);
  --font-heading: var(--font-heading-serif);
}

:root.font-sans {
  --font-default: var(--font-sans);
  --font-heading: var(--font-heading-sans);
}




/* Topbar - TODO: move to Theme-header.css after adapting Theme-dark grid to sticky */
header#wikigg-header {
  position: sticky;
}

footer#wikigg-footer {
  /* Stick to bottom */
  position: sticky;
  /* Simply 100vh would be enough: stays within body */
  top: calc( 100vh - var(--wikigg-footer--height) );
}



/**** Global ****/

html {
  font-size: 100%;
  height: 100%;
  filter: brightness(100%) contrast(100%) grayscale(0%) !important;
  overflow-x: hidden;
  background: var(--theme-site-background);
}
body {
  min-height: 100%;
  height: unset;  /* 100%? come on vector this isn't an app */
  margin: 0;
  font-size: inherit;
  line-height: initial;
  overflow-y: initial;
  background-color: transparent;
  color: var(--content--textcolor);
  /* text-shadow: 0px 0px 0px; */  /* Font smoothing */
}

a {
  -text-shadow: 0px 0px 0px;  /* Font smoothing and bolding */
  font-weight: 500;
}
.mw-editsection a {
  /* text-shadow: none; */
  /* text-shadow: inherit; */
}




/**** Global layout ****/

body {
  display: grid;
  grid-template-areas:
    "top  top  top  top"
    "nav  nav  nav  nav"
    "side  .   logo  ."
    "side  .   cont  ."
    "side  .   cfoo  ."
    "foot foot foot foot";
  grid-template-rows:  var(--topbar--height)  auto  auto  1fr  auto  var(--wikigg-footer--height);
  grid-template-columns:  var(--sidebar--width)  1fr  var(--content--limits)  1fr;
  grid-template-columns:  var(--sidebar--width)  auto  var(--content--limits)  auto;
  grid-template-columns:  var(--sidebar--width)  0  1fr  0;
  -grid-template-rows:
    [body-start] var(--layout-topbar-height)
    [page-start aside-start] auto
    [aside-end nav-start] 0fr
    [nav-end content-start] auto
    [content-end footer-start] 0fr
    [footer-end] 1fr
    [page-end] 0fr
    [body-end]
}

.content-wrapper { display: contents; }
header#wikigg-header { grid-area: top; }
#mw-head { grid-area: nav; }
#mw-panel { grid-area: side; }
#content { grid-area: cont; }
.mw-footer { grid-area: cfoo; }
footer#wikigg-footer { grid-area: foot; }

#content {
  /* 100cqw in children means content width */
  /* container: content / inline-size; */
  /* width: fit-content; */
  min-width: var(--content--minwidth);
  max-width: var(--content--maxwidth);
  justify-self: center;
  /* Leave space for sidebar */
  /* margin-left: var(--sidebar--width); */
  /* box-sizing: border-box; */
  /* width: calc( 100% - var(--sidebar--width) ); */
}


/** Remove topbar placeholders **/
#mw-page-base,   /* background-image: linear-gradient(to bottom,#ffffff 50%,#f6f6f6 100%); -- unnoticably subtle gradient in the .vectorTabs area */
#mw-head-base {  /* overlay above #mw-page-base that does nothing? spoils the flex width margin-top: -5em; */
  display: none;
  margin: unset;
}

#mw-navigation {
  /* Flatten .content-wrapper - #mw-head, #mw-panel, #content */
  display: contents;
}

#mw-head {
  /* grid-area: navheader; */
  height: var(--toolbar--height);
  padding-top: 0.2em;
  margin: unset;
  /* Stay on top of screen */
  position: sticky;
  top: var(--layout-topbar-height);
  /* Visible and clickable above page content */
  z-index: 10;
}




/**** Topbar (masthead) ****/

/** Topbar personal menu **/
#p-personal {
  float: unset;
  position: static;
  margin: 0.5em 1em 0 auto;
  z-index: initial;
}
#p-personal ul {
  padding-left: 0;
}




/**** Vector toolbar layout ****/

#mw-head {
  padding-inline: 0.5em;
  width: unset;
  /* Use flexbox for toolbar layout */
  display: flex;
  align-items: start;
  /* If not wide enough then wrap buttons below personal menu */
  flex-wrap: wrap-reverse;
  font-size: var(--toolbar--fontsize);
}

/** Flatten the toolbar tree for flex ordering **/
#mw-head > * {
  display: contents;
}
.vector-menu-tabs,
.vector-menu-tabs .vector-menu-content,
.vector-menu-tabs ul {
  display: contents;
}

.vector-menu-tabs {
  height: unset;
  height: 100%;
  float: unset;
}
/** Reorder buttons on right **/
/* .vector-menu-tabs .vector-menu-content-list { */
.vector-menu-tabs ul {
  /* display: flex; */
  float: unset;
}

.vector-search-box { order: -20; }
#ca-view { order: -12; }
#ca-edit { order: -10; }
#ca-ve-edit { order: -8; }
#ca-history { order: -6; }
#ca-watch, #ca-unwatch { order: -4; }
#ca-talk { order: -2; }

/* Add "visual" to "Edit" button */
/* changed instead  https://enshrouded.wiki.gg/wiki/MediaWiki:Vector-view-edit
#ca-ve-edit a::after {
  content: " visual";
  display: span;
}
*/
/* Hide "Page" button */
#p-namespaces ul > :first-child {
  display: none;
}
/* Hide "Discussion" button if page does not exist */
#ca-talk.new {
  display: none;
}
/* Hide "Read" button on article page, but not on differences (revision) page */
body.action-view:not(:has( table.diff )) #ca-view {
  display: none;
}




/** Searchbox **/

/* tree outline:  .vector-search-box(#p-search) > div > form.vector-search-box-form > .vector-search-box-inner(#simpleSearch) > .vector-search-box-input , .searchButton */

.vector-search-box {
  margin-left: 0em;
  /* Pull searchbox left */
  margin-right: auto;
  flex: 1 1 auto;  /* Only the search field grows and shrinks */
  padding-right: 2em;
  max-width: var(--search--width);
  font-size: var(--search--fontsize);
}

/*
@media (1365px < width) {
  .vector-search-box {
  }
}
*/

.vector-search-box form {
  margin: 0;
}
.vector-search-box-inner {
  width: inherit;
  max-width: none;
}

/* opacity on searchbox parent (when not focused) to include the search button */
.vector-search-box-inner:not(:hover):not(:focus-within) {
  opacity: 80%;
}

.vector-search-box-input {
  /* background-color: var(--bgcolor-3); */
  background-color: var(--toolbar--bgcolor);
  /* color: var(--textcolor-1); */
  color: var(--toolbar--textcolor);
  border-color: var(--toolbar--bordercolor);
  height: auto;
  padding: 0.2em 1.6em 0.3em 0.7em;
  font-size: unset;
  transition: var(--focus--transition);

  &::placeholder {
    color: var(--textcolor-search);
    opacity: 70%;
  }

  &:hover {
    color: var(--toolbar--textcolor--focus);
    border-color: var(--toolbar--bordercolor--focus);
  }

  /* #mw-head for precedence above  .vector-search-box-input:focus, .vector-search-box-inner:hover .vector-search-box-input:focus */
  #mw-head &:focus {
    background-color: var(--toolbar--bgcolor--focus);
    color: var(--toolbar--textcolor--active);
    border-color: var(--toolbar--bordercolor--active);
    box-shadow: unset;
  }
}

/* TODO: what
.vector-search-box-input:focus,
  box-shadow: unset;
}
*/

/** Search button(s) **/
input[type='submit'],
.searchButton[name=go] {
  border: none;
}
input[type='submit'] {
  background: none;
}
.searchButton[name=go] {
  background-position: 0.4em 0.4em;
  background-position: center;
  filter: invert(1);
}



/** Toolbar buttons = .vectorTabs **/

.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
  background-image: unset;
  border: unset;
}

.vector-menu-dropdown,
.vector-menu-dropdown .mw-list-item,
.vector-menu-tabs .mw-list-item {
  background-image: unset;
  background-color: var(--toolbar--bgcolor);
  color: var(--toolbar--textcolor);
  transition: var(--focus--transition);
  height: unset;

  &.selected {
    background-color: var(--toolbar--bgcolor--active);
    color: var(--toolbar--textcolor--active);
  }
  &:focus-within,
  &:hover {
    background-color: var(--toolbar--bgcolor--focus);
    color: var(--toolbar--textcolor--focus);
  }
}

.vector-menu-dropdown .vector-menu-content,
.vector-search-box-input,
.vector-menu-dropdown,
.vector-menu-tabs .mw-list-item {
  border: 1px solid var(--toolbar--bordercolor);
  border-top: 0px;
  border-radius: 0 0 var(--toolbar--radius) var(--toolbar--radius);

  &.selected {
    border-color: var(--toolbar--bordercolor--active);
  }
  &:focus-within,
  &:hover {
    border-color: var(--toolbar--bordercolor--focus);
  }
}
.vector-menu-dropdown .mw-list-item:last-child {
  border: none;
}

/* Increased specificity to override  .vector-menu-tabs-legacy .selected a:visited */
.vector-menu-dropdown .mw-list-item a,
.vector-menu-tabs .mw-list-item.mw-list-item a {
  background-color: unset;
  color: inherit;
}

.vector-menu-dropdown .vector-menu-heading,
/* Increased specificity to override  .vector-menu-tabs .mw-watchlink.icon a */
.vector-menu-tabs .mw-list-item.mw-list-item a {
  width: unset;
  height: unset;
  padding: 0em 0.6em 0.3em;
  font-size: unset;
}


/** Watch/unwatch button + icon **/
.vector-menu-dropdown .vector-menu-heading,
.vector-menu-tabs .mw-watchlink.icon a {
  /* Center icon vertically */
  display: flex;
  align-items: center;
}
.vector-menu-dropdown .vector-menu-heading::after,
.vector-menu-tabs .mw-watchlink.icon a::before {
  height: 1em;
  inset: 0;
  position: static;
  color: inherit;
}


/** Toolbar button with submenu **/
.vector-menu-dropdown {
  /* height: min-content; */
}
.vector-menu-dropdown .vector-menu-checkbox {
  /* Just use :hover and :focus-within for opening the submenu */
  display: none;
}
/* Increased specificity to override  .vector-menu-dropdown .vector-menu-heading:hover, .vector-menu-dropdown .vector-menu-heading:focus */
.vector-menu-dropdown .vector-menu-heading.vector-menu-heading {
  color: inherit;
}

.vector-menu-dropdown .vector-menu-heading::after {
  filter: var(--toolbar--iconfilter);
  /* background-image: var(--icon--arrow-down); */
}

/** Dropdown menu **/
.vector-menu-dropdown:is( :hover, :focus-within ) .vector-menu-content {
    opacity: 1;
    visibility: visible;
    height: auto;
}
.vector-menu-dropdown .vector-menu-content {
  left: unset;
  right: 0em;
  border-radius: var(--toolbar--radius);
  /* width: fit-content; */
  background-color: unset;
  transition: var(--opacity--transition);
}
.vector-menu-dropdown .mw-list-item {
  background-color: var(--dropdown--bgcolor);
  backdrop-filter: var(--content--backdropfilter);
  border-bottom: 1px solid var(--toolbar--bordercolor);
  border-radius: unset;

  &:focus-within,
  &:hover {
    background-color: var(--dropdown--bgcolor--focus);
  }
}
.vector-menu-dropdown .mw-list-item a {
  padding: 0.5em 1em;
  text-align: center;
}
.vector-menu-dropdown .mw-list-item a:not(.mw-ui-icon) {
  font-size: unset;
}




/** Sidebar / Navbar layout = .mw-panel **/

#mw-panel {
  width: var(--sidebar--width);
  box-sizing: border-box;
  margin: unset;
  --margin-top: 3em;
  margin-top: var(--margin-top);
  top: var(--topbar--height);
  height: calc( 100vh - var(--topbar--height) - var(--margin-top) );
  margin-left: 0em;
  padding-left: unset;
  position: fixed;
  overflow-y: auto;
  /* Don't scroll outside container when hitting the end */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* scrollbar-gutter: stable; */
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--focus--transition-duration);
  font-size: var(--sidebar--fontsize);
}
#mw-panel:hover {
  scrollbar-color: var(--scrollbar--thumbcolor) var(--scrollbar--trackcolor);
  /* scrollbar-width: thin; */
}
#mw-panel > :first-child {
  margin-top: 1em;
}
#mw-panel > :last-child {
  margin-bottom: 3em;
}

.vector-menu-portal {
  margin: unset;
  margin-left: 0em;
  --bgcolor: rgb( from var(--content--bgcolor) r g b / 30% );
  background-image: linear-gradient( to right, var(--bgcolor) 60%, transparent 100% );
}
.vector-menu-portal .vector-menu-heading {
  /* Navbar headings: use default color --content--textcolor */
  color: inherit;
  /* margin: unset; */
  width: fit-content;
  padding-inline: 0.5em;
  font-size: inherit;
  background-image: unset;
  text-transform: uppercase;
  font-weight: 600;
}

.vector-menu-portal .vector-menu-content {
  margin-left: 0em;
}
.vector-menu-portal .vector-menu-content ul {
  padding-top: unset;
}
.vector-menu-portal .vector-menu-content li {
  font-size: inherit;
  --bgcolor: rgb( from var(--box--bgcolor) r g b / 70%);
  --bgcolor2: rgb( from var(--box--bgcolor) r g b / 0% );
  --bordercolor: #6668;
  margin-block: 0.2em;
  padding: 0.3em 0.5em;
  border: 1px solid var(--bordercolor);
  border-left-width: 2px;
  border-right: 0px;
  background-image: linear-gradient(to right, var(--bgcolor) 30%, var(--bgcolor2) 100%);
  border-image: linear-gradient(to right, var(--bordercolor) 50%, #8880) 1;
}

.vector-menu-portal .vector-menu-content .mw-list-item a {
  color: #eee !important;
  font-weight: unset;
}

/* Unset sidebar width allocations */
#content,
#mw-head-base,
#left-navigation,
#mw-data-after-content,
.mw-footer {
  margin-left: unset;
}

/* Allocate sidebar width */
#footer {
  /* margin-left: var(--sidebar--width); */
}



/** Footer layout **/

#footer {
  background-color: var(--footer--bgcolor);
  backdrop-filter: var(--content--backdropfilter);
  /* position: relative; */
}

/*
#footer::before {
  -background-image: var(--box--bgimage);
  opacity: 0.7;
  background-repeat: repeat;
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0em;
}
*/

#wikigg-footer {
  z-index: 10;
  position: relative;
}




/**** Page content layout ****/

#content {
  position: relative;
  padding-block: 0em;
  padding-inline: 0em;
  margin-top: 0;
  /* Disable full-width border between content and tabs */
  border: none;
  border-radius: var(--content--radius) var(--content--radius) 0em 0em;
  background-color: var(--content--bgcolor);
  color: var(--content--textcolor);
}

#content::before {
  /* There can be only one backdrop-filter on a branch (at least in Chrome): a child's backdrop-filter does nothing.
  * Therefore backdrop-filter is added to the sidebranch of ::before, moved behind with z-index: -1 */
  backdrop-filter: var(--content--backdropfilter);
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
}

.content-body {
  padding-block: 1em;
}

@media screen and (900px <= width) {
  #wikiPreview,
  .content-body {
    padding-inline: var(--content--padding-inline);
  }
}

/** Adapt width to content with limits **/
#wikiPreview,
.content-body {
  /* box-sizing: border-box; */
  /* width: fit-content; */
  /* Center horizontally - done by grid, so as a fallback */
  /* margin-inline: auto; */
}

/* Special pages and code has no limit */
/* body.ns-6,  /* Module: namespace */
/* body.ns-10,  /* Template: namespace */
/* body.ns-14,  /* Category: namespace */
body.ns-828,  /* Module: namespace */
body.ns-828,  /* Module: namespace */
body.ns-special {  /* Special: namespace */
  /* --content--limits: minmax(50%, 100%); */
  --content--minwidth: 50%;
  --content--maxwidth: 100%;
}

/* History, editor shown full-width */
/* body:has( #content #pagehistory ), */
body.action-history,
body.action-edit,
body.action-ve-edit,
/* Differences are shown full-width */
body:has( #content .diff ) {
  --content--minwidth: 100%;
  --content--maxwidth: 100%;
}

/* Maps are shown full-width, no padding */
body.ns-2900,  /* Map: namespace */
body:has( #content .ext-datamaps-container ) {  /* There's a map on the page */
  --content--minwidth: 100%;
  --content--maxwidth: 100%;
  --content--limits: 100fr;
  .content-body { padding: 0em; }
}
.ext-datamaps-container-content .ext-datamaps-container-leaflet {
  height: calc( var(--content--height) - 2rem );
  /* 2rem for tabber */
}
.ext-datamaps-container-leaflet {
  background: transparent !important;
}
.tabber__tab {
  padding-block: 0.3em;
}




/** Editor is full-height **/

/* Editor has minimal margins */
body.action-edit .content-body {
  padding-block: 0em;
}

/* Distribute the height to the editor */
.mw-editform {
  height: var(--content--height);
  display: flex;
  flex-direction: column;
}
.wikiEditor-ui { flex-grow: 1; }
.wikiEditor-ui-view {
  height: 100%;
  display: flex;
}
.wikiEditor-ui-view.wikiEditor-ui-view > * {
  float: unset;
  height: 100%;
}
.wikiEditor-ui-left {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.wikiEditor-ui-bottom { flex-grow: 1; }
.wikiEditor-ui-text { height: 100%; }
.mw-editform #wpTextbox1 {
  height: 100%;
  font-weight: 500;
}
.wikiEditor-ui-text .ui-resizable {
  /* Overrule unruly ace editor */
  height: 100% !important;
}




/**** Content styles ****/

/** Fix Vector's flawed heading typography **/
.mw-body-content h1 { font-size: 1.7em; }
.mw-body-content h2 { font-size: 1.6em; }
.mw-body-content h3 { font-size: 1.4em; }
.mw-body-content h4 { font-size: 1.2em; }
.mw-body-content h5 { font-size: 1.1em; }
.mw-body-content h6 { font-size: 1.0em; }
.mw-body-content h5,
.mw-body-content h6 {
  font-weight: bold;
}

.mw-body h6,
.mw-body h5,
.mw-body h4,
.mw-body h3,
.mw-body h2,
.mw-body h1 {
  font-family: var(--font-heading);
}
.mw-body h6,
.mw-body h5,
.mw-body h4,
.mw-body h3,
.mw-body h2,
.mw-body h1 {
  color: var(--textcolor-1);
  text-shadow: 2px 1px 2px var(--bg-shadow-1);
}
.mw-body h1.firstHeading {
  border-bottom: solid 1px;
}
.mw-body .mw-parser-output h1::after,
.mw-body .mw-parser-output h2::after {
  border-bottom: solid 1px var(--content--textcolor);
}



/** Table of contents **/
ul#filetoc,
.toc,
.mw-warning {
  padding: 1.0em 1.5em;
}
.toctogglelabel {
  color: var(--textcolor-3);
}



/** Page content **/

/* Restore content font-size */
.vector-body {
  font-size: inherit;
}

.mw-parser-output p {
  /* backdrop-filter: var(--textbox--backdropfilter); */
  text-shadow: 1px 1px 3px var(--content--bgcolor--opaque);
}
.mw-highlight {
  /* background-color: var(--bgcolor-box); */
  background-color: inherit;
}

code,
pre,
.mw-code {
  background-color: var(--editor--bgcolor);
  border-color: var(--bgcolor-box);
  color: var(--editor--textcolor);
}

pre,
.oo-ui-panelLayout-framed {
  backdrop-filter: var(--textbox--backdropfilter);
}


#siteNotice {
  /* Remove empty siteNotice's margin */
  margin: unset;
}
#centralNotice:not(:empty) {
  /* Add margin to child */
  margin: 0.5em auto 1.5em
}

.inline-quote-talk {
  /* !important is necessary in Flow discussions to override inlined style */
  /* color: inherit !important; */
  color: var(--textcolor-3) !important;
  background-color: var(--bgcolor-box) !important;
  padding: 3px !important;
  border-radius: 5px;  /* {{tq}} rounded on all skins, not just Timeless */
}
.mw-pt-translate-header {
  border-bottom: 0;
}
.mw-pt-translate-header a {
  border-bottom: 1px solid var(--textcolor-4);
}
.mw-tag-marker { /* on history, Special:RecentChanges */
  background-color: var(--bgcolor-5);
  color: var(--textcolor-1);
  border-radius: 5px;
  padding: 0px 3px;
}



/** Images **/

/** Math formulas **/
.mwe-math-fallback-image-display,
.mwe-math-fallback-image-inline {
   filter: var(--image--filter);
}



/** Text **/
.oo-ui-buttonElement > .oo-ui-buttonElement-button,
.ve-ui-overlay,
body {
  font-family: var(--font-default);
}
b, strong {
  text-shadow: 1px 1px 1px var(--bgcolor-0);
  text-shadow: 1px 1px 1px var(--bg-shadow-1);
}

/** All links text color **/
.mw-parser-output a.external,
#mw-panel .portal .body li a,  /* Vector */
#mw-footer-container a,
#mw-footer-container a:hover,
.mw-parser-output a.extiw,
.new a:hover,
.new a:focus,
.new a,
a.new:hover,
a.new:focus,
a.new,
a:hover,
a:focus,
a.tabber__tab,
a {
  text-decoration: unset;
  color: var(--linkcolor-2);
  transition: all 0.1s linear;
}

/** All links after visited **/
#mw-panel .portal .body li a:visited,  /* Vector */
#mw-footer-container a:visited,
.mw-parser-output a.extiw:visited,  /* Translation link in mediawiki infobox */
.mw-parser-output a.extiw:active,
.mw-parser-output a.external:visited,
.mw-parser-output a.external:active,
a:visited {
  color: var(--linkcolor-3);
}

/** All links on hover, focus: darker, blurred background **/
.toctogglelabel:hover,
/* .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > a.oo-ui-buttonElement-button:hover, */
#mw-footer-container a:hover,
.new a:hover,
.new a:focus,
a.new:hover,
a.new:focus,
a:hover,
a:focus {
  /* background-color: #fff9; */
  /* border-bottom: 1px solid; */
  /* border-bottom: 4px solid; */
  /* border-radius: 1em;*/  /* For fun */
  /* box-shadow: inset 0px -1px; */  /* Border bottom without re-layout */
  /* text-decoration: none; */
  /* text-decoration: underline; */

  /* color: var(--linkcolor-1); */

  /* A shadowy background for hovered links */
  background-color: var(--link-hover-bg);
  box-shadow: 0px 0px 4px 1px  var(--link-hover-bg);
  border-radius: 0.5em;
  /* Wider background?
  padding: 0 0.2em;
  margin: 0 -0.2em;
  * Timeless super-rounded?
  border-radius: 1em;
  padding: 0 0.5em;
  margin: 0 -0.5em;
  */
}


/** Red (new) links **/
.new a:visited,
.new a,
a.new:visited,
a.new {
  color: var(--link-red-2);
}

/** Red (new) links when hovered or focused **/
.new a:hover,
.new a:focus,
a.new:hover,
a.new:focus {
  color: var(--link-red-2);
  /* color: var(--link-red-1); */
}


/** Logo background does not change on hover **/
a.mw-wiki-title:hover,
a.mw-wiki-logo:hover {
  background-color: unset;
  box-shadow: unset;
}
.toctogglecheckbox:focus + .toctitle .toctogglelabel,  /* Css-only toggle using checkbox */
.toctogglelabel:hover { text-decoration: unset; }

/** Focused link: colored bottom border **/
/* a:focus, */
span.mw-collapsible-toggle:focus,
.toctogglecheckbox:focus + .toctitle .toctogglelabel {  /* Css-only toggle using checkbox */
  outline: none;
  border-radius: 0.5em;
  border-bottom: 3px solid var(--focus-border-color);
}
legend.mw-collapsible-toggle:focus {
  outline: none;
}

/** Focused link and icon button: colored background **/
legend.mw-collapsible-toggle:focus .oo-ui-labelElement-label,
a:focus:not(.oo-ui-buttonElement-button),
div > .flow-menu .flow-menu-js-drop a:focus {
  outline: none;
  background-color: var(--link--bgcolor--focus);
  box-shadow: 0px 0px 6px 2px  var(--link--bgcolor--focus);
  /* box-shadow: inset 0px 0px 4px 1px  var(--focus-border-color); */
  /* box-shadow: inset 0px 0px 14px -5px  var(--focus-border-color); */
  border-radius: 5px;
  transition: all 0.25s linear;
}

/** Focused input button **/
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-iconElement > .oo-ui-buttonElement-button:focus:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-labelElement > .oo-ui-buttonElement-button:focus:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-iconElement > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-labelElement > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-iconElement > .oo-ui-buttonElement-button:focus,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-labelElement > .oo-ui-buttonElement-button:focus {
  outline: none;
  box-shadow: inset 0px 0px 0px 2px  var(--link--bgcolor--focus);
}

/** Recent changes - Filter - "Show","Hide" **/
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-iconElement > .oo-ui-buttonElement-button:focus,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-labelElement > .oo-ui-buttonElement-button:focus {
  border-color: transparent;
}




/** Tables **/

table {
  /* fix 100% width table with border */
  box-sizing: border-box;
}

/* bg-shade-6 */
.mw-parser-output tr .taxontree-lcell,  /*  common with the next selector  */
.mw-parser-output tr .wikidatainfobox-lcell,  /*  https://commons.wikimedia.org/wiki/Category:CC-Zero  */
.fileinfo-paramfield,
.statstable > * > tr > th,
.wikitable > tr > th,
.wikitable > * > tr > th {
  /* Table header */
  background-color: var(--bgcolor-6);
}
.mw_metadata {
  border-style: hidden;  /* Remove outer borders */
}
.mw_metadata th {
  background-color: var(--bgcolor-5);
}
.mw_metadata td, .mw_metadata th {
  border-left: 0;
  border-right: 0;
  border-color: var(--bgcolor-6);
}
.mw_metadata td,
.statstable > * > tr > td,
.mw-datatable > tr > td,
.wikitable > tr > td,
.mw-datatable > * > tr > td,
.wikitable > * > tr > td {
  /* Odd table row */
  background-color: var(--bgcolor-box);
}
.statstable > * > tr.tux-statstable-even > td,
.mw-datatable > tr:nth-child(2n) > td,
.wikitable > tr:nth-child(2n) > td,
.mw-datatable > * > tr:nth-child(2n) > td,
.wikitable > * > tr:nth-child(2n) > td {
  /* Even table row */
  background-color: var(--bgcolor-5);
}
.statstable {
  color: var(--textcolor-1);
}
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.mw-changeslist-legend,
.mw-body .mw-search-profile-tabs,
.mw-body fieldset#mw-searchoptions,
.wikitable,
.mw-datatable {
  color: var(--content--textcolor);
}
.mw-datatable > tr > th,
.wikitable > tr > th,
.mw-datatable > tr > td,
.wikitable > tr > td,
.mw-datatable > * > tr > th,
.wikitable > * > tr > th,
.mw-datatable > * > tr > td,
.wikitable > * > tr > td {
  border: 0;
}
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.mw-changeslist-legend,
.mw-body .mw-search-profile-tabs,
.mw-body fieldset#mw-searchoptions,
.wikitable,
.mw-datatable {
  border: 0;
}



/** Darker boxes **/

/* bg-shade-3 */
.mw-parser-output .quotebox {  /* Close summaries */
  background-color: var(--bgcolor-3);
  border-color: var(--bordercolor-3);
  color: var(--content--textcolor);
}

/* bg-shade-4 */
.mw-parser-output blockquote.talkquote,
.mw-body li.gallerybox div.thumbdiv.editOptions,
ul.ext-related-articles-card-list .ext-related-articles-card,  /* "Related articles" -- bottom of article pages */
div.thumbinner,
.thumbinner,
.catlinks,  /* "Categories" */
.mw-warning,
ul#filetoc,
#toc, .toc,
.toccolours {
  background-color: var(--box--bgcolor);
  border-color: var(--bgcolor-5);
  border-color: var(--editor--bgcolor);
  border-color: var(--bordercolor-4);
  color: var(--content--textcolor);
}
ul.ext-related-articles-card-list h3::after {  /* "Related articles" -- bottom of article pages */
  /* What's the purpose of this marker? */
  content: none;
  display: none;
  /* background-image: linear-gradient(to right, transparent, var(--bgcolor-6) ); */
}
ul.ext-related-articles-card-list h3 a {  /* "Related articles" -- bottom of article pages */
  color: var(--textcolor-1);
}

.shortcutbox,  /* Hardcoded background-color for whatever reason */
#recentchangestext #box,
.mw-parser-output div.module-shortcutboxplain {
  /* "Shortcuts" with inlined template style: overspecify with div. to override */
  background-color: var(--bgcolor-box) !important;
  border-color: var(--bgcolor-6) !important;
}

.thumbinner .thumbimage,
.thumbborder {
  border: 0;
}



/** Lighter boxes **/

/* bg-shade-5 */
div.cnotice,  /* Main page Fundraising2020 banner https://dokapon.miraheze.org/wiki/Main_Page */
.tpl-infobox,  /* Mediawiki extension, skin infobox */
.mw-dismissable-notice,  /* Temporal noticebox above articles */
.skin-infobox,
.skin-infobox-header,
.infobox,
.messagebox,
.messagebox.standard-talk,
#watchlist-message,  /* Maybe highlight more? Intermittent --  https://commons.wikimedia.org/wiki/Special:Watchlist  */
div.user-block,
table[style]:not(.tpl-infobox):not(.navbox-inner),
.mw-pt-languages,  /* Language selector */
.mw-parser-output .note.note-info {
  /* More specific than the `.mw-parser-output .note-info` inlined style */
  background-color: var(--bgcolor-5);
  border-color: var(--bgcolor-6);
}

.messagebox, .errorbox, .warningbox, .successbox,
.infobox {
  color: inherit;
}
.mw-parser-output .note {
  color: var(--note-text-1);
}
.mw-pt-languages-label {
  /* background-color: var(--bgcolor-box); */
  background-color: initial;
}



/** Navbox **/

.navbox {
  border-color: var(--bgcolor-5);
}
.navbox, .navbox-subgroup,
.navbox th, .navbox-title {
  background-color: var(--bgcolor-box);
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow,
.navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title {
  background-color: var(--bgcolor-boxa);
}
.navbox-odd {
  background-color: var(--bgcolor-50);
}
.navbox-even {
  background-color: var(--bgcolor-box8);
}
tr + tr > .navbox-abovebelow, tr + tr > .navbox-group, tr + tr > .navbox-image, tr + tr > .navbox-list {
  border: 0;
}



/** Special:Preferences **/

div.oo-ui-tabSelectWidget-framed {
  background-color: var(--bgcolor-box);
  color: var(--content--textcolor);
}
div.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
div.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:active,
div.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
  background-color: var(--bgcolor-5);
  color: var(--textcolor-1);
}
div.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active,
div.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
  color: var(--textcolor-1);
}
div.oo-ui-tabOptionWidget {
  color: inherit;
}


/** Special boxes background **/

div.warningbox, .warningbox {
  background: var(--warn-bg-1);
  color: var(--warn-text-1);
}
.warningbox a {
  color: var(--linkcolor-4);
}
div.errorbox, .errorbox {
  background: var(--warn-bg-2);
  color: var(--warn-text-2);
}


/** Special boxes glowing shadow **/

.warningbox,
.errorbox {
  /* box-shadow: 2px 4px 10px 8px var(--bgcolor-1); */
  /* box-shadow: 2px 4px 16px 4px var(--bgcolor-0); */
  box-shadow: 0px 0px 10px 2px var(--warn-bg-1);
  /* Add shadow: lightblue links on orange are not easy to read */
  text-shadow: 1px 1px 1px var(--bgcolor-0);
  text-shadow: 1px 1px 1px var(--bg-shadow-1);
}

/** Notification boxes glow **/
/*
ul#filetoc, .toc, .mw-warning {
  box-shadow: var(--bgcolor-box) 0px 0px 3px 3px;
}
*/
.mw-dismissable-notice,
.messagebox,
.successbox {
  box-shadow: 0 0 5px 1px var(--bgcolor-5);  /* Highlight with a glow around */
}


/** Standard shadow **/
.ve-init-mw-diffPage-diffMode .oo-ui-buttonSelectWidget,  /* "Visual" / "Wikitext" toggle on differences page (if enabled in settings) */
.mw-htmlform-ooui-wrapper.oo-ui-panelLayout-framed,  /* Page history "Filter revisions" */
/* .oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-padded.oo-ui-panelLayout-framed.mw-htmlform-ooui-wrapper  -- Add shadow -- Page history */
/* .oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-padded.oo-ui-panelLayout-framed  -- Don't add shadow -- https://www.mediawiki.org/wiki/Special:Contributions/  */
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,  /* Add shadow -- Special:Watchlist  */
.oo-ui-menuSelectWidget,
.oo-ui-floatableElement-floatable,
.mw-revslider-container,
.mw-recentchanges-toplinks:not(.mw-collapsed),
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.mw-changeslist-legend,
/* .mw-widget-calendarWidget, */
.mw-advancedSearch-expandablePane-options,
.mw-advancedSearch-expandablePane-namespaces {
  box-shadow: 1px 1px 8px 2px var(--bg-shadow-1);
  box-shadow: 2px 2px 12px 4px var(--bg-shadow-0);
  box-shadow: 2px 2px 10px 1px var(--bg-shadow-0);
}

/** Popup box shadow **/
.oo-ui-popupWidget-popup {
  background-color: var(--bgcolor-box);
  border-color: var(--bgcolor-6);
  box-shadow: 3px 3px 10px 0px var(--bg-shadow-1);
}



/** Gallery **/

ul.gallery {
  display: flex;
  flex-wrap: wrap;
  /* align-items: flex-end; */
  align-items: stretch;
  justify-content: center;
}
li.gallerybox {
  /* width: unset !important; */
  /* width: 155px; */
  margin: 2px;
  background-color: var(--bgcolor-box);
  /* box-shadow: 0px 0px 6px 2px var(--bgcolor-1); */
}
li.gallerybox > div {
  width: unset !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.mw-body li.gallerybox div.thumb {
  /* flex-grow: 2; */
  display: flex;  /* No more margin trickery with javascript */
  align-items: center;  /* Center vertically */
  justify-content: center;  /* Center horizontally */
  margin: 0px;
  background-color: unset;
  border: unset;
  box-shadow: unset;
}
#content .gallerybox div.thumb {
  background-color: unset;  /* Remove background-color: #f8f9fa; */
}
.thumb > div {
  margin: 4px !important;
  box-shadow: 1px 2px 8px 4px var(--bg-shadow-1);
  border-radius: 2px;  /* Only affects the shadow, not the image */
}
.mw-tmh-player {
  display: block;  /* Why a span for video? */
}
.mw-tmh-player .mw-tmh-play {
  background-position: center;
  background-size: contain;
}
div.gallerytext {
  /* flex-grow: 2; */
  padding: 0px 2px 4px 2px;
  text-align: center;
  /* background-color: var(--bgcolor-box); */
  /* box-shadow: 0px 0px 6px 2px var(--bgcolor-1); */
}
.gallery.mw-gallery-packed {
  justify-content: space-evenly;
}
.gallery.mw-gallery-packed div.gallerytext {
  margin: auto;
}




/**** Vector skin fixes ****/

/** Fix wikigg Vector customization **/
table {
  /* This is mind-boggling. Wrapping has been intentionally disabled in tables that contain arbitrary length text from contributors, eg. the whole page content in mediawiki-generated comments starting with "Created page with:". */
  display: table;
  white-space: unset;
}



#contentSub:empty,
#contentSub2:empty {
  display: none;
}

/* .mw-htmlform-ooui-wrapper.oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-padded.oo-ui-panelLayout-framed { */
.mw-htmlform-ooui-wrapper.oo-ui-panelLayout-framed {  /*  Special:Log  */
  max-width: 50em;  /* Don't use full screen width */
}




/**** Image viewer (Extension:MultiMediaViewer) ****/

/** MultiMediaViewer progress-bar **/
.mw-mmv-progress {
  background-color: #ccc;
  height: 29px;
  position: fixed;
  bottom: 0;
  top: unset;
}
.mw-mmv-progress-percent {
  height: 100%;
  background: linear-gradient(-45deg, #fff 33%, #ccc 33%, #ccc 66%, #fff 66%);
  background-size: 60px 30px, 100% 100%, 100% 100%;
  animation: mw-mmv-progress-percent-animation 1.5s linear infinite;
}

@keyframes mw-mmv-progress-percent-animation {
  0% { background-position: 0 0; }
  100% { background-position: 120px 0; }
}

.mw-mmv-image-metadata {
  background-color: rgba( 180,195,210,0.1);
}


/* TODO: where this belongs? */
.usermessage {
  /* Position similar to other boxes. 10% left-right margin is the standard. */
  margin: 1em 12%;
}




/**** Notifications (Extension:Echo) menu - Timeless, Vector, ... ****/

/* Fix the notification box to the screen (the button where it drops down is NOT an ancestor element) */
.oo-ui-popupWidget-anchored-top {
  position: fixed;
  top: 38px !important;  /* Override inline style generated by javascript on every scroll event */
}

/** Background and borders **/
#personal .dropdown,
.mw-echo-ui-overlay .oo-ui-popupWidget-popup {
  box-shadow: 0px 4px 20px 10px var(--bg-shadow-0);  /* Separate from page with a strong 3D effect */
}
.mw-echo-ui-overlay .oo-ui-popupWidget-popup {
  background-color: unset;  /* Allow transparency for child elements */
  /* border: 1px solid var(--bgcolor-3); */
  /* border-color: var(--bgcolor-3); */
  border-radius: var(--usermenu-radius);
}
.oo-ui-popupWidget-popup,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement:last-child {
  /* Border around, below header, above footer, between footer buttons */
  border-color: var(--bgcolor-6);
}
.mw-echo-ui-notificationItemWidget {
  /* Border between notifications */
  border-color: var(--bgcolor-box);
}
.oo-ui-popupWidget-head,
.oo-ui-popupWidget-footer,
.mw-echo-ui-placeholderItemWidget,
.mw-echo-ui-notificationItemWidget {
  /* Header, footer and notifications background */
  background-color: var(--popup-bg-text);
  background-color: var(--popup-bg);
}
.mw-echo-ui-notificationItemWidget:hover {
  /* Highlight hovered notification */
  background-color: var(--bgcolor-3);
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor {
  top: -10px;
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before {
  /* Border of anchor triangle on top */
  border-bottom-color: var(--bgcolor-3);
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::after {
  /* Anchor triangle on top */
  border-bottom-color: var(--popup-bg);
}

/** Fix text and link colors **/
.mw-echo-ui-notificationItemWidget-content-message-header {
  color: var(--textcolor-3);
}
.mw-echo-ui-notificationsListWidget:not(:hover) a,
.mw-echo-ui-notificationsListWidget a {
  color: var(--linkcolor-2);
}
#p-personal .mw-echo-ui-notificationsListWidget:not(:hover) a.new,
#p-personal .mw-echo-ui-notificationsListWidget a.new {
  color: var(--link-red-2);
}
.mw-echo-ui-menuItemWidget-prioritized {
  opacity: unset;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons > span {
  /* Background of footer buttons */
  background-image: linear-gradient(to right, transparent 0%, var(--bg-grad) 50%, transparent 100%);
  --bg-grad: var(--popup-anim-bg);
  --bg-grad: var(--bgcolor-box);
}

/** Notifications loading animation **/
.oo-ui-popupWidget-head {
  position: relative;
}
.oo-ui-popupWidget-head::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  right: 0;
  -webkit-animation: oo-ui-pendingElement-smooth  1s linear infinite;
  -moz-animation: oo-ui-pendingElement-smooth  1s linear infinite;
  animation: oo-ui-pendingElement-smooth  1s linear infinite;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
  opacity: 0.4;
  background-image: linear-gradient(to right, transparent 0%, var(--bg-grad) 25%, transparent 50%, var(--bg-grad) 75%, transparent 100%);
  --bg-grad: var(--textcolor-4);
  --bg-grad: var(--bgcolor-6);
  --bg-grad: #333c;  /* brighten(var(--popup-bg), 2) */
  --bg-grad: var(--popup-anim-bg);
}
.oo-ui-pendingElement-pending {
  animation: unset;
  background-image: unset;
}
.oo-ui-popupWidget-head.oo-ui-pendingElement-pending::before {
  /* Animated background while loading notifications */
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  animation-play-state: running;
}

@-webkit-keyframes oo-ui-pendingElement-smooth {
  from { transform: translateX(0%); }
  to { transform: translateX(50%); }
}
@-moz-keyframes oo-ui-pendingElement-smooth {
  from { transform: translateX(0%); }
  to { transform: translateX(50%); }
}
@keyframes oo-ui-pendingElement-smooth {
  from { transform: translateX(0%); }
  to { transform: translateX(50%); }
}

/* TODO: What's this?
$('.mw-notification')
*/
.mw-notification {
  border-radius: 5px;
  border: var(--bgcolor-1);
  background-color: var(--bgcolor-1);
  color: var(--content--textcolor);
  width: 200px;
}




.oo-ui-popupWidget-popup,
#mw-content,
.sidebar-chunk,
#centralized-discussion-label,
ul.ext-related-articles-card-list .ext-related-articles-card,  /* "Related articles" -- bottom of article pages */
.mw-revslider-container,
div.editOptions,
.mw-parser-output .portal > ul,
.mw-parser-output .note,
.mw-parser-output div.module-shortcutboxplain,
/* .mw-body li.gallerybox div.thumb, */  /* Rounded thumbnail frames look weird */
.gallerybox,
.gallerytext,
.messagebox,
.messagebox.standard-talk,
.successbox,
.warningbox,
.errorbox,
.usermessage,
div.user-block,
.toc,
ul#filetoc,
code,
pre,
.mw-code,
.mw-warning,
.mw-highlight,
.mw-pt-languages,
.mw-dismissable-notice,
.catlinks,
.shortcutbox,
div.thumbinner,
.thumbinner,
table[style]:not(.tpl-infobox):not(.navbox-inner),
.navbox,
.infobox,
.infobox .NavHead,
.infobox th.summary,
.vertical-navbox th[style],
.wikitable,
.flow-topic-titlebar,
.flow-board-header,
.skin-infobox,
.skin-infobox-header {
  /* Disable borders in Timeless skin */
  border-width: var(--box--borderwidth) !important;
  /* Round the corners of boxes */
  border-radius: var(--box--radius);
}

@media screen and (max-width: 1099px) {
  #mw-content,
  .sidebar-chunk,
  .catlinks {
    border-radius: unset;
  }
}

.mw-dismissable-notice {
  overflow: auto;  /* Prevent collapsing the margin of child elements */
}




/** Box backgrounds **/




/** Responsive tables **/

/** Border below header row **/
/* .wikitable th[scope=col], */
/* .wikitable tbody th[scope=col], */
.wikitable.plainrowheaders tbody th[scope=col],
.wikitable.sortable thead th {
  box-shadow: inset 0px -4px 0px 0px var(--bgcolor-3);
  box-shadow: inset 0px -3px 0px 0px var(--textcolor-4);
}
.wikitable.sortable tfoot th {
  box-shadow: inset 0px 4px 0px 0px var(--bgcolor-3);
  box-shadow: inset 0px 3px 0px 0px var(--textcolor-4);
}

/** Make wide tables horizontally scrollable **/
.thumb.tmulti {  /* Multiple thumbnails */
  /* Might need to select wide tables to scroll with javascript and a specific class to avoid the issues with turning a table into a block for small tables. */
  /* Alternative is to wrap in a div that's scrolled. This can be done only in the skin. */
  display: block;  /* Needed for scroll, spoils accessibility and anything that depends on table semantics. */
  overflow: auto;  /* Horizontal scrollbar if wider than parent  div.mw-parser-output */
  /* overflow-y: hidden; */  /* Why is there a vertical scrollbar without padding-bottom: 1px ? */
  max-width: 100%;
  max-height: 100vh;
  width: fit-content;
  height: fit-content;
  padding: 0 0 1px 0 !important;  /* Remove .wikitable padding */
}


@media screen and (max-width: 850px) {

  /* Add a scrollbar at the bottom of the table, hide the overflow if wider than available space */
  .wikitable.sortable {
    display: block;
    overflow: auto;
    max-width: 100%;
    max-height: 100vh;
    width: fit-content;
    height: fit-content;
    padding: 0 0 1px 0 !important;
  }

}  /* @media screen and (max-width: 850px) */


/** Keep header on-screen when scrolling down **/
/* .wikitable.plainrowheaders,
   .wikitable.sortable { */
.wikitable {
  --sticky-top: 0em;  /* Old skins scroll the whole height, have no fixed header */
  --sticky-top2: 2.16em;
}

/* .wikitable tr:nth-child(2) tbody th[scope=col], */
.wikitable thead tr:nth-child(2) th {
  --sticky-top: var(--sticky-top2);
}

/* .wikitable tbody th[scope=col], */
.wikitable.plainrowheaders tbody th[scope=col],
.wikitable.sortable thead th {
  position: sticky;
  top: var(--sticky-top);
}
.wikitable.sortable tfoot th {
  position: sticky;
  bottom: 0em;
}

/* Don't sticky the headers of floating tables (on the right), these are usually small enough to not need that. */
/*
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend th,
.mw-changeslist-legend th,
.mw-body .mw-search-profile-tabs th,
.mw-body fieldset#mw-searchoptions th,
.wikitable th,
.infobox th,
.mw-datatable th,
table[align] th {
  position: unset;  
  box-shadow: unset;
}
*/

/* Alternative sticky header approach
https://bugs.chromium.org/p/chromium/issues/detail?id=702927
*/
/*
thead {
  display: block;
  position: sticky;
  top: var(--sticky-top);
}
*/




/** History **/

span.updatedmarker {
  margin: 0 0.5em;
  padding: 0 0.5em;
  border-radius: 5px;
  border-radius: var(--button--radius);
  background-color: var(--bgcolor-boxa);
  color: var(--textcolor-4);
}




/** Recent changes **/


/** Revision differences **/

.mw-revslider-container {
  /* "Browse history interactively" */
  background-color: var(--bgcolor-3a);
  color: var(--textcolor-1);
}
.mw-revslider-container:focus,
.mw-revslider-container :focus {
  outline: none;
}
.mw-revslider-container .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  color: inherit;
}
[data-diff-action='insert'], table[data-diff-action='insert'] > caption, figure[data-diff-action='insert'] > figcaption {
  background-color: var(--diff-add--bgcolor) !important;
  box-shadow: 0 0 4px 2px var(--diff-add--bgcolor);
  border-radius: var(--button--radius);
}
[data-diff-action='remove'], table[data-diff-action='remove'] > caption, figure[data-diff-action='remove'] > figcaption {
  background-color: var(--diff-del--bgcolor) !important;
  box-shadow: 0 0 4px 2px var(--diff-del--bgcolor);
  border-radius: var(--button--radius);
}

td.diff-context {
  color: var(--diff--textcolor);
  background-color: var(--diff--bgcolor);
  border-color: transparent;
}
td.diff-addedline {
  background-color: var(--diff-add--bgcolor);
  border-color: var(--diff-add--bgcolor-1);
}
td.diff-deletedline {
  background-color: var(--diff-del--bgcolor);
  border-color: var(--diff-del--bgcolor-1);
}
td.diff-addedline .diffchange {
  background-color: var(--diff-add--bgcolor-1);
  padding-left: 0;
}
td.diff-deletedline .diffchange {
  background-color: var(--diff-del--bgcolor-1);
}
.diffchange {
  font-weight: unset;
}

.diff {
  border-spacing: 1px;
}
.diff td {
  padding: 0 0.5em;
}
.diff td.diff-marker {
  padding: 0 0.25em;
}
td.diff-addedline .diffchange,
td.diff-deletedline .diffchange {
  border-radius: 0;
  padding: 0;
}
td.diff-addedline, td.diff-deletedline, td.diff-context {
  font-size: initial;
  border-width: 0 0 0 4px;
}




/** Input widgets: advanced search, logs, dates **/

input {
  /* TODO: This interferes with #searchInput. Is it necessary for some other input field with a more specific selector? */
  /* background-color: var(--bgcolor-3); */
  /* border: solid 1px var(--bgcolor-1) !important; */
  /* border-radius: 2px; */
  /* padding-left: 5px; */
  color: var(--textcolor-3);  /* TODO: check */
}

.oo-ui-textInputWidget > .oo-ui-labelElement-label {
  line-height: 0.5em;
}
.oo-ui-labelElement-label {
  /* text-shadow: 0 0 0 var(--bgcolor-0); */
  /* text-shadow: 1px 2px var(--bgcolor-3); */
}
.oo-ui-draggableElement.oo-ui-labelElement .oo-ui-labelElement-label {
  color: var(--textcolor-3);
}
.oo-ui-fieldsetLayout-header .oo-ui-labelElement-label,
.oo-ui-fieldLayout-header .oo-ui-labelElement-label {
  color: var(--textcolor-1);
}
.mw-ui-input {
  background-color: var(--bgcolor-3);
  border-color: var(--bgcolor-6);
  box-shadow: unset;  /* Remove rule  box-shadow: inset 0 0 0 0.1em #fff; */
  margin-top: 3px;
  margin-bottom: 1px;
}
.mw-ui-input,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.oo-ui-textInputWidget input,
.oo-ui-textInputWidget textarea,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:active,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:focus,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled,
.mw-widget-dateInputWidget-handle {
  background-color: var(--field--bgcolor);
  color: var(--content--textcolor);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
  /* background-color: var(--bgcolor-box); */
  background-color: initial;
  color: var(--content--textcolor);
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
  background-color: var(--field--bgcolor);
}
.mw-advancedSearch-fieldContainer .oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
.oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input {
  color: var(--content--textcolor);
}

.mw-advancedSearch-namespace-selection,
.mw-advancedSearch-fieldContainer,
.mw-widget-dateInputWidget-calendar {
  background-image: unset;
  background-color: var(--bgcolor-3);
}
.mw-rcfilters-ui-filterMenuSectionOptionWidget,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-advancedSearch-fieldContainer .oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
.mw-advancedSearch-expandablePane-button.oo-ui-widget-enabled.oo-ui-buttonWidget > .oo-ui-buttonElement-button:active,
.mw-advancedSearch-expandablePane-button.oo-ui-widget-enabled.oo-ui-buttonWidget > .oo-ui-buttonElement-button:focus,
.mw-advancedSearch-expandablePane-button.oo-ui-widget-enabled.oo-ui-buttonWidget > .oo-ui-buttonElement-button:hover {
  background-color: var(--bgcolor-3);
  color: unset;
}
#preferences .mw-htmlform-submit-buttons {
  /* Settings, Save button area */
  background-color: var(--bgcolor-3);
}

/** Recent changes **/
.mw-rcfilters-ui-filterMenuHeaderWidget-header,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle,
div.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
  background: var(--bgcolor-3a);
  margin-top: unset;
}

.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
  color: var(--content--textcolor);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected {
  background-color: initial;
  color: var(--content--textcolor);
}
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-optionWidget-highlighted {
  color: var(--textcolor-1);
}

.mw-widget-calendarWidget-day {
  color: var(--content--textcolor);
}
.mw-widget-calendarWidget-day-additional {
  color: var(--textcolor-3);  /* TODO: check */
}

/** Dropdown menu background **/
.oo-ui-menuSelectWidget {
  background-color: var(--bgcolor-3);
  color: var(--textcolor-3);  /* Probably overridden by all subelements */
}
.mw-ui-checkbox:not(#noop) [type='checkbox'] + label::before {
  background-color: var(--bgcolor-box);
}

.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.mw-changeslist-legend,
.mw-body .mw-search-profile-tabs,
.mw-body fieldset#mw-searchoptions,
.wikitable,
.mw-datatable {
  background: var(--bgcolor-5);
}
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted.oo-ui-widget-enabled,
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected,
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-pressed {
  background-color: var(--bgcolor-5);
}
.mw-ui-button {
  background-color: var(--bgcolor-5);
  color: var(--textcolor-1);
}
.mw-ui-button:hover {
  background-color: var(--bgcolor-6);
  color: var(--textcolor-1);
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled,
.oo-ui-tagItemWidget.oo-ui-widget-enabled:not(.oo-ui-tagItemWidget-fixed) {
  background-color: var(--bgcolor-5);
  /* border-color: var(--bgcolor-1); */
  border: unset;
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled:focus {
  box-shadow: inset 0 0 0 1px var(--bgcolor-6);
  box-shadow: inset 0 0 0 1px var(--focus-border-color);
}
.oo-ui-tagItemWidget {
  margin-bottom: none;
}

/** Input field border **/
div.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.oo-ui-tagMultiselectWidget-handle,
div.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget,
.mw-advancedSearch-fieldContainer,
.mw-advancedSearch-namespace-selection,
.mw-advancedSearch-fieldContainer fieldset,
.mw-ui-input,
.mw-widget-dateInputWidget-handle,
.oo-ui-dropdownWidget-handle,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
fieldset {
  /* background-color: var(--bgcolor-3) !important; */
  /* border: 1px solid var(--bgcolor-1);  */
  border-color: var(--bgcolor-box);
}

/** Input field border when hovered **/
.mw-ui-input:hover,
div.mw-widget-dateInputWidget.oo-ui-widget-enabled .mw-widget-dateInputWidget-handle:hover,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget-handle,
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:active {
  border-color: var(--bgcolor-6);
}

.mw-ui-input,
div.mw-widget-dateInputWidget.oo-ui-widget-enabled .mw-widget-dateInputWidget-handle,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined .oo-ui-tagMultiselectWidget-handle,
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
  transition: var(--border--transition);
}

/** Button border when focused **/
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
  box-shadow: unset;
  border-color: var(--bgcolor-6);
  border-color: var(--focus-border-color);
}

/* .editButtons .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled:not(.oo-ui-buttonElement-active) > .oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
  /* Input form dropdowns */
.oo-ui-buttonWidget.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
.oo-ui-buttonWidget.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active:focus,
.oo-ui-buttonWidget.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus,
.oo-ui-buttonWidget.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
  /* Input form dropdowns :hover, :focus and :active (pushed) */
  /* background-color: var(--bgcolor-box); */
  background-color: unset;
  /* color: var(--content--textcolor); */
  color: unset;
  border-color: var(--bgcolor-5);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-labelElement .oo-ui-labelElement-label {  /* Flow "Cancel" and "Publish changes" buttons */
  color: unset;
}




/**** Editors ****/

/** Editor layout **/

.mw-editform .editOptions {
  position: sticky;
  position: relative;
  bottom: 0em;
  inset-inline: 0em;
  padding: 0 0.5em;
  border: var(--box--border);
  border-top: none;
  border-radius: 0 0 var(--box--radius) var(--box--radius);
  background-color: var(--bgcolor-box);
  z-index: 1;
  display: grid;
  grid-template-areas:
    /* "copywarn copywarn" */
    "labelleft checkboxes"
    "summary summary"
    "buttons buttons";
}

#editpage-copywarn {
  /* grid-area: copywarn; */
  position: absolute;
  bottom: 100%;
  inset-inline: calc( -1 * var(--box--borderwidth) );
  /* box-sizing: border-box; */
  /* width: 100%; */
  padding: 1em;
  border: var(--box--border);
  border-bottom: none;
  /* border-radius: var(--box--radius) var(--box--radius) 0 0; */
  background-color: var(--dropdown--bgcolor);
}
.editOptions:not(:hover):not(:focus-within) #editpage-copywarn {
  /* Hide copywarn when not hovered */
  display: none;
  -visibility: collapse;
  -opacity: 0;
}
.mw-userconfigpublic,
#mw-usercssyoucanpreview {
  display: none;
}

#wpSummaryLabel,
#wpSummaryLabel > div {
  display: contents;
}
#wpSummaryLabel .oo-ui-fieldLayout-header {
  grid-area: labelleft;
  margin: auto 0.5em;
}
#wpSummaryLabel .oo-ui-fieldLayout-field {
  grid-area: summary;
}

.editCheckboxes {
  grid-area: checkboxes;
  margin-inline: auto;
  margin-block: 0.3em;
}
.editButtons {
  grid-area: buttons;
  margin-inline: auto;
  margin-top: 0.3em;
}
.mw-editform .editButtons .oo-ui-buttonElement {
  margin: unset;
}

.mw-editform #wpSummaryWidget {
  width: unset;
  margin: unset;
}
.editOptions .oo-ui-textInputWidget .oo-ui-inputWidget-input {
  /* padding: 0.1em 0.2em; */
  height: 1.5em;
}
.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  padding-bottom: unset;
}



/** Editor toolbar **/

.wikiEditor-ui-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.codeEditor-status,
.wikiEditor-ui-toolbar,
.oo-ui-toolbar-bar {
  background-image: unset;
  background-color: var(--bgcolor-box);
  /* background-color: var(--bgcolor-5); */
  color: var(--bgcolor-0);
}

.wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui-toolbar .section-main,
.wikiEditor-ui-toolbar .section-secondary,
.wikiEditor-ui-toolbar .group {
  display: inline-block;
  display: contents;
  display: flex;
  position: unset;
  float: unset;
  text-wrap: nowrap;
  border-color: var(--bgcolor-0);
  border-color: currentColor;
}
.wikiEditor-ui-toolbar .group:empty {
  display: none;
}
.wikiEditor-ui-toolbar .tabs span.tab a {
  color: unset;
}
.wikiEditor-ui-toolbar .sections {
  order: 10;
  width: 100%;
  float: unset;
}
.wikiEditor-ui-toolbar .section-advanced:not(.section-hidden) {
  /* (0,3,0) specificity would override hiding */
  display: flex;
}

.oo-ui-toolbar-tools {
  display: block;
}
.ve-init-mw-editSwitch .oo-ui-popupToolGroup {
  height: unset;
}
.oo-ui-toolbar-position-top {
  /* Last child of  .wikiEditor-ui-toolbar */
  order: 9;
  transition: unset;
  margin-left: auto;
  height: 100%;
}
.ve-init-mw-editSwitch {
  float: unset;
}


/** Visual editor switch dropdown menu **/
.oo-ui-popupToolGroup-tools {
  background-color: var(--dropdown--bgcolor);
  color: var(--toolbar--textcolor);
  border: unset;
}
.oo-ui-popupToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled:hover,
.oo-ui-popupToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled,
.oo-ui-listToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled:hover,
.oo-ui-listToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled {
  background-color: var(--dropdown--bgcolor--focus);
  color: var(--toolbar--textcolor--focus);
}

.oo-ui-popupToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title,
.oo-ui-listToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
  color: var(--toolbar--textcolor--focus);
}



/** Source editor: plain old wikitext editor **/

.mw-editfont-monospace,
.mw-editfont-sans-serif,
.mw-editfont-serif {
  font-size: unset;
  tab-size: 2;
}
.ace_editor,
.wikiEditor-ui .ace_editor,
.mw-editfont-monospace {
  font-family: var(--font-mono);
}
.mw-editfont-sans,
.mw-editfont-sans-serif {
  font-family: var(--font-sans);
}
.mw-editfont-serif {
  font-family: var(--font-serif);
}

.oo-ui-windowManager-modal > .oo-ui-dialog {
  background-color: var(--bg-overlay-0);
}
.ve-ui-mwSaveDialog-options {
  background-color: initial;
  border: unset;
}
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
  background-color: var(--bgcolor-box);
}

#mw-content-text textarea,  /* View source */
.wikiEditor-ui textarea {
  /* Editor, code editor (), maybe other editors */
  background-color: var(--editor--bgcolor) !important;
  color: var(--editor--textcolor);
  overscroll-behavior: contain;
}
.wikiEditor-ui .wikiEditor-ui-view {
  border: 1px solid var(--bgcolor-0);
  border: unset;
}
.wikiEditor-ui .wikiEditor-ui-top {
  border-bottom: 1px solid var(--bgcolor-0);
}

.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement:hover,
.tool-button.tool-active,
.tool.tool-active.oo-ui-buttonElement-frameless.oo-ui-iconElement {
  background-color: var(--bgcolor-5);
  box-shadow: unset;
  outline: 0;
}
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled.oo-ui-flaggedElement-primary > .oo-ui-tool-link,
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link {
  background-color: var(--bgcolor-6);
}

label.oo-ui-messageDialog-title { color: var(--textcolor-1); }
label.oo-ui-messageDialog-message { color: var(--content--textcolor); }

.editOptions {
  margin: unset;
}



/** 2010 wikitext editor with CodeMirror: syntax highlighting **/

.CodeMirror {
  background: var(--editor--bgcolor);
}



/** Code editor **/

.ace-tm {
  /* Ace editor might be loaded later ->  !important necessary to override */
  background-color: var(--bgcolor-1) !important;
  color: var(--content--textcolor) !important;
}
.ace-tm .ace_gutter {
  background-color: var(--bgcolor-box) !important;
  color: var(--content--textcolor) !important;
}
.ace_scrollbar::-webkit-scrollbar-track {
  background-color: var(--bgcolor-3) !important;
}
.ace_scrollbar::-webkit-scrollbar-thumb  {
  background-color: var(--bgcolor-5) !important;
}

.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement:active,
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement:hover,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:active,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button:hover,
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle,
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover,
.oo-ui-menuToolGroup-tools .oo-ui-tool.oo-ui-tool-active,
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active, .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active:focus,
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-tool-link,
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-tool-link,
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover {
  background-color: var(--bgcolor-5);
  color: var(--content--textcolor);
  /* TODO: test for all -- changed for .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover */
  background-color: unset;
  color: unset;
}
.oo-ui-toolbar-tools  .oo-ui-labelElement-label {
  /* color: var(--content--textcolor); */
  color: var(--bgcolor-0);
}
.oo-ui-processDialog-actions-primary .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
  color: white;
}



/** 2015 visual editor **/

.oo-ui-windowManager-modal-active  .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
  margin-right: 17px;  /* Subtract the width of the hidden scrollbar */
}
/*
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
  position: fixed;
  top: 3em;
  left: 14em !important;  /* Override javascript generated inline style * /
  right: 16em !important;
  z-index: 1;
  border: unset;
  box-shadow: 0 6px 14px -5px var(--editor--bgcolor);
  box-shadow: 0 11px 14px -10px var(--bg-shadow-1);
}
*/

.oo-ui-toolbar-bar  .oo-ui-toolbar-bar  .oo-ui-toolbar-tools {
  /* float: right; */
}
.ve-ce-branchNode.ve-ce-documentNode.ve-ce-attachedRootNode.ve-ce-rootNode.mw-content-ltr.mw-parser-output {
  background-color: var(--bgcolor-5);
  padding: 4px 6px;
  margin: 0 2em;
  box-shadow: inset 0 0 8px 2px var(--bg-shadow-1);
}



/** 2017 wikitext editor **/




/**** Various unidentified oo-ui rules ****/

.oo-ui-flaggedElement-destructive {
  background-color: var(--editor--bgcolor);
  border: 1px solid var(--bgcolor-1);
  color: var(--linkcolor-3);
  /* padding-left: 15px !important; */
  /* padding-right: 15px !important; */
}
.oo-ui-flaggedElement-destructive:hover {
  background-color: var(--bgcolor-5);
}
/** Difference view "Visual"/"Wikitext" **/
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
  /* background-color: var(--bgcolor-6); */
  /* color: var(--textcolor-1); */
  /* border-color: var(--bgcolor-6); */
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
  background-color: initial;
}

.oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button,
.oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
  text-shadow: 0 0 0 var(--bgcolor-0) !important;  /* Makes text bolder without distinctly visible shadow */
  /* text-shadow: unset !important; */
}
.oo-ui-panelLayout-expanded {
  background-color: var(--editor--bgcolor);
}
.oo-ui-messageDialog-message {
  /* color: #999; */
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  /* color: #999; */
}
.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
  border-right: 1px solid var(--bgcolor-1);
}
.oo-ui-dialog-content > .oo-ui-window-body {
  outline: 1px solid var(--bgcolor-1);
}
.oo-ui-messageDialog-content > .oo-ui-window-foot {
  outline: 1px solid var(--bgcolor-1);
}



/** Various unidentified rules **/

#f-list {
  text-align: center;
  font-size: 14px;
}
.mw-charinsert-buttons {
  border: unset;
}

.postedit-container {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  padding: 15px 0 15px 15px;
  text-align: right;
}
.postedit-icon {
  margin: auto;
  padding: 0;
}

.color-middle-container {
  padding: 0;
}
#iframeframe {
  height: 700px;
}
#wpSave {
  text-shadow: 2px 2px 2px var(--bgcolor-0) !important;
}

input[type='submit'] {
  padding: 0.3em 0.6em;
  color: var(--linkcolor-1);
  /* color: var(--textcolor-1); */
}

.mw-ui-button.mw-ui-progressive, .mw-ui-button.mw-ui-progressive:active, .mw-ui-button.mw-ui-progressive.mw-ui-checked, input[type='button'], button {
  padding: 0.3em 0.6em;
  border: solid 1px var(--bgcolor-1);
  background-color: var(--bgcolor-5);
  color: var(--textcolor-3);
  text-shadow: 0 0 0 var(--bgcolor-0);
}
/* TODO: necessary for  input[type='submit'], ? */
.mw-ui-button.mw-ui-progressive, .mw-ui-button.mw-ui-progressive:active, .mw-ui-button.mw-ui-progressive.mw-ui-checked, input[type='button'] {
  border: solid 1px var(--bgcolor-1) !important;
  text-shadow: 0 0 0 var(--bgcolor-0) !important;
}

#pagehistory li.selected {
  background-color: var(--bgcolor-5);
}
.mw-plusminus-neg {
  color: #FF0000;
}
Retrieved from "https://enshrouded.wiki.gg/index.php?title=User:GoboZen/Theme-enshrouded.css&oldid=16054"