MediaWiki:Common.css

From Come Together 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.
/***********************************************************************************************************
 * css reset for browser default rules and MediaWiki internal rules
 ***********************************************************************************************************/
 * {
    outline: 0;
  }
  
  table {
    white-space: unset; /* be set to `no-wrap` in MW internal css */
  }
  
  html {
    font-size: 16px; /* reset rem size */
  }
  
  pre {
    margin: 0;
    background-color: var(--color-accent);
    border-radius: var(--minor-border-radius);
}
  }
  
  h1, h2, h3, h4, h5, h6 {
    padding: 0;
    border: 2 solid transparent;
  }
  
  table {
    display: table;
    white-space: unset;
  }
  
  body, code {
    background: none;
  }

/** Font **/
html, body {
	font-family: Futura, “Trebuchet MS”, Arial, sans-serif;
}
.mw-body h1, .mw-body-content h1, .mw-body-content h2,
.vector-body h3, .vector-body h4,
.vector-body h5, .vector-body h6 {
    font-family: “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Bitstream Vera Sans Mono”, monospace;
    font-weight: bold;
}
  
:root{
	/* Main */
	--color-accent: #323642;
	--color-emphasized: #23232C;
	--main-border: 2px solid #b5b5b5;
	--content-border-radius: 10px;
	--minor-border-radius: 5px;
	--highlight-color: rgba(179, 137, 0, 0.25);
	--hover-color: #282b33;
	--active-color: #1e2026;
	--selected-color: #0e0f12;
	/* Text Colors */
	--text-color: #fff;
	--text-faded-color: lightgray;
	--text-header-color: #fff;
	
	--text-emphasized-color: #ffc919;
	--text-link-color: #ffc919;
	--text-link-visited-color: #cc9e00;
	--text-color-note: #ccc;
	/* Wiki Content */
	--wiki-content-border: 3px solid #fff;
	--wiki-content-background-color: rgba(10, 10, 20,0.85);
	
	/* Portable Infoboxes */
	--pa-background: linear-gradient(180deg,rgba(34,38,51,0.75),rgba(39,42,51,0.5));
	--pa-title-background: #bd8a43;
	--pa-header-background: #8a6430;
	--pa-border: 5px solid #fff;
	--pa-border-radius: 5px;
	
	/* Table of Contents */
	--toc-background: linear-gradient(180deg,rgba(34,38,51,0.75),rgba(39,42,51,0.5));
	
	/* Data Tables */
	--dt-background: linear-gradient(180deg, rgb(50 54 66 / 50%), rgb(50 54 66 / 40%));
	--dt-highlight: rgba(54,44,94,0.75);
	
	/* Tables */
	--ta-background: linear-gradient(180deg,rgba(34,38,51,0.75),rgba(39,42,51,0.5));
	
	/* Buttons */
	--bu-color: #bf9713;
	--bu-hover-color: #99790f;
	--bu-pressed-color: #80650f;
	--bu-outline-color: lightgray;
	
	/* Diffchange */
	--dc-before-color: #a69b83;
	--dc-after-color: #99a3bf;
}

/* Site Logo */
.mw-wiki-logo{
	background-image: url(/images/e/e6/Site-logo.png);
}
#p-logo a {
	margin-top: 5px;
}
/* Site Background */
html {
	background: #100c1f url(/images/f/ff/WikiBG.png) center center / cover no-repeat fixed;
}
body{
	background-color: unset;
}

/* Body & Navbar*/
html, body{
	margin-top: 60px;
}
.content-wrapper{
	margin: 0 8px 0 8px;
}
#left-navigation {
    margin-top: 1.5em;
    border: var(--wiki-content-border);
    border-radius: var(--content-border-radius);
    background-color: var(--color-accent);
    padding: 8px;
}
#right-navigation {
    float: right;
    margin-top: 1.5em;
    margin-right: 10px;
    border: var(--wiki-content-border);
    border-radius: var(--content-border-radius);
    background-color: var(--color-accent);
    padding: 8px;
    min-height: 45px;
}
.vector-menu-tabs-legacy li{
	line-height: .85;
	font-weight: bold;
	background: var(--color-emphasized);
	border: var(--main-border);
    border-radius: var(--minor-border-radius);
    margin: 0 2px;
}
.vector-menu-tabs-legacy .selected {
	background: var(--color-emphasized);
	border: var(--main-border);
    border-radius: var(--minor-border-radius);
    margin: 0 2px;
}
.vector-menu-tabs{
	background-image: none;
	margin-bottom: 5px;
}
.vector-menu-tabs-legacy li a{
	font-size: 0.85em;
	color: var(--text-link-color);
}
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading{
	background-image: none;
}
.vector-menu-dropdown .vector-menu-heading {
	color: var(--text-color);
	font-size: 0.85em;
	font-weight: bold;
	margin: none;
}
.vector-menu-dropdown .vector-menu-heading:after {
    content: '';
    background: url(https://cometogether.wiki.gg/images/f/f5/IconArrowDown.png) 100% 125% no-repeat;
    width: 1.2em;
    height: 1.2em;
    margin-left: 5px;
    opacity: 1;
}
.vector-menu-dropdown{
	line-height: 0.85;
	background: var(--color-emphasized);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    margin-right: 10px;
    min-height: 41px;
}
#mw-head .vector-menu-dropdown .vector-menu-heading{
	background-image: unset;
	margin-bottom: 2px;
}
.vector-search-box-input{
	background-color: var(--color-emphasized);
    color: var(--text-color);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
.vector-search-box{
	margin-right: unset;
	margin-left: unset;
}
.vector-menu-dropdown .vector-menu-content{
	background: var(--color-emphasized);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    left: -2px;
    margin-top: 5px;
}
.vector-menu-dropdown .mw-list-item a{
	color: var(--text-link-color);
}

/* Texts */
h1, h2, h3, h4, h5, h6{
	color: var(--text-header-color);
}
.mw-parser-output a.external:visited{
	color: var(--text-link-visited-color);
}
.mw-parser-output a.external{
	background-image: url(https://cometogether.wiki.gg/images/c/c0/IconLinkExternal.png);
}
mw-parser-output a.external {
    color: var(--text-link-color);
}
a:visited{
	color: var(--text-link-visited-color);
}
.mw-parser-output a.extiw, .mw-parser-output a.external {
    color: var(--text-link-color);
}
.vector-menu-portal .vector-menu-content li a:visited{
	color: var(--text-color);
}
.vector-menu-portal .vector-menu-content li a{
	color: var(--text-color);
}
.vector-menu-portal .vector-menu-heading{
	color: var(--text-emphasized-color);
}
.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited{
	color: var(--text-color);
}

a{
	color: var(--text-link-color);
}

/* Footer */
.mw-footer li{
	color: var(--text-color);
}
.mw-footer{
	/*
	background-color: var(--wiki-content-background-color);
	margin-top: 10px;
    margin-bottom: 10px;
    border: var(--wiki-content-border);
    border-radius: var(--content-border-radius);
	*/
    margin-left: 12.25em;
    
}

/* Main Wiki Window */
.mw-body{
	background-color: var(--wiki-content-background-color);
	color: var(--text-color);
	border: var(--wiki-content-border);
	border-radius: var(--content-border-radius);
	margin-left: 11.75em;
}

/* Interface Elements */
.catlinks{
	color: var(--text-link-color);
	border: var(--main-border);
	border-radius: var(--minor-border-radius);
	background-color: var(--color-accent);
}

/********* side panel START *********/
#mw-panel {
	background-color: rgba(23, 23, 33, 0.85);
    border: var(--wiki-content-border);
    border-radius: var(--content-border-radius);
    padding-left: 0.5em;
    padding-right: 0.5em;
}
  
  #mw-panel a {
    text-decoration: none;
  }
  
  /* section box */
  #mw-panel .portal {
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 5px;
    backdrop-filter: #fff;
    box-shadow: #fff;
    background: linear-gradient(to bottom,rgb(50,54,66,0.85),rgb(35,35,44,0.8));
    margin: 8px 2px;
    padding: 0;
  }
  #mw-panel .portal .vector-menu-heading {
    /* section heading */
    margin: 0;
    padding: 6px 10px;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-link-color);
  }
  
  /* show the heading of first section */
  #mw-panel #p-logo + .portal .vector-menu-heading {
    display: flex;
  }
  
  /* arrow icon */
  #mw-panel .portal .vector-menu-heading::after {
    content: "";
    display: block;
    background: none;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: var(--text-color) transparent;
    border-width: 0 5px 6px;
    margin-top: 2px;
    flex: 0 0 auto;
    transition: transform 0.25s;
    transition-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  #mw-panel .portal .vector-menu-heading:hover::after {
    border-color: var(--text-link-color) transparent;
  }
  #mw-panel .portal.collapsed .vector-menu-heading::after {
    transform: scaleY(-1);
    transition: transform 0.25s;
    transition-timing-function: cubic-bezier(1,0,0,1);
  }
  
  /* list body */
  #mw-panel .portal .body {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    border-top: 2px solid #fff;
  }
  #mw-panel .portal .body ul {
    padding: 0 4px 4px;
  }
  #mw-panel .portal .body li {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: inherit;
  }
  #mw-panel .portal .body li:hover {
    background: var(--highlight-color);
  }
  #mw-panel .portal .body li a {
    display: block;
    padding: 3px 6px;
    color: #fff;
  }
  #mw-panel .portal .body li a:visited {
    color: var(--text-color);
  }
  #mw-panel .portal .body li a:hover {
    color: var(--text-link-color);
  }
  
  /* "Atom" RSS Feed */
  #mw-panel .portal .body li a.feedlink {
    text-indent: 16px;
    background-position: 6px center; /* align icon with other text */
  }

/* Head */
#mw-head-base,
#mw-page-base {
	display: none;
    height: 80px;
}

#mw-head-base {
    background: transparent;
    margin-top: 20px
    margin-left: 20px
}

#mw-head {
    top:20px;
    left:21px;
    width: auto;
    z-index: 1;
}

/* Scaling */
@media screen and (max-width: 982px){
	#mw-head {
	    left:37px;
	}
}
@media screen and (max-width: 720px){
	#right-navigation{
	    margin-right: 4px;
	}
	.content-wrapper {
	    margin: 0 0 0 0;
	}
	#left-navigation, #content, footer#footer{
		margin-left: 5px;
    	margin-right: 5px;
	}
	#mw-head {
	    left:0;
	}
}
@media screen and (max-width: 460px){
	#right-navigation {
		padding: 4px;
	}
	#left-navigation {
		padding: 4px;
	}
}
@media screen and (max-width: 440px){
	#right-navigation {
		margin-top: 45px;
	}
}

/* Icons */
.oo-ui-icon-bold{
      background-image: linear-gradient(transparent,transparent),url(/images/3/3f/IconBold.png);
  }
  .oo-ui-icon-italic{
      background-image: linear-gradient(transparent,transparent),url(/images/7/74/IconItalic.png);
  }
  .oo-ui-icon-link{
      background-image: linear-gradient(transparent,transparent),url(/images/3/3e/IconLink.png);
  }
  .oo-ui-icon-image{
      background-image: linear-gradient(transparent,transparent),url(/images/2/23/LogoImage.png);
  }
  #msupload-select {
      background: url(/images/8/8d/IconUpload.png) no-repeat 0;
  }
  .oo-ui-icon-reference{
      background-image: linear-gradient(transparent,transparent),url(/images/b/bf/IconReference.png);
  }
  .oo-ui-indicator-clear {
      background-image: linear-gradient(transparent,transparent),url(/images/d/dd/IconCross.png);
  }
.oo-ui-icon-search{
	background-image: linear-gradient(transparent,transparent),url(/images/0/0e/IconSearch.png);
}
ul {
    list-style-image: url(https://cometogether.wiki.gg/images/3/3c/BulletIcon.png);
}
#mw-indicator-mw-helplink a {
	background-image: url(https://cometogether.wiki.gg/images/0/01/HelpNotice.png);
}
#mw-head #p-search .searchButton {
    width: 26px;
    min-width: unset;
    opacity: 1;
    background-image: none;
    --mask: url(/images/0/0e/IconSearch.png) no-repeat;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
    -webkit-mask-position: center center;
    mask-position: center center;
    background-color: var(--text-color);
  }
  
.vector-menu-tabs #ca-unwatch.icon a:before {
	background-image: url(https://cometogether.wiki.gg/images/2/2e/Star.png);
}
.vector-menu-tabs #ca-unwatch.icon a:hover:before {
	background-image: url(https://cometogether.wiki.gg/images/0/09/StarAfter.png);
}
.vector-menu-tabs #ca-unwatch.icon a:focus:before {
	background-image: url(https://cometogether.wiki.gg/images/0/09/StarAfter.png);
}
.vector-menu-tabs .mw-watchlink.icon a:before {
    top: 1em;
    left: 0.4em;
    width: 1.25em;
    height: 1.25em;
}

 /* Editor */
  .wikiEditor-ui-toolbar .group .label{
      color: var(--text-color);
  }
  .wikiEditor-ui-toolbar{
      background-color: var(--color-accent);
  }
  .wikiEditor-ui-toolbar .tabs span.tab a.current{
      color: var(--text-color);
  }
  .editOptions{
      background-color: var(--color-accent);
      color: var(--text-color);
      border-radius: var(--minor-border-radius);
      border: var(--main-border);
  }
  .mw-editform #wpTextbox1{
      color: var(--text-color);
      background-color: var(--color-emphasized);
  }
  
  .wikiEditor-ui-toolbar .tabs span.tab a{
      color: var(--text-link-color);
  }
  
  .wikiEditor-ui-toolbar .group .tool-select .label{
      color: var(--text-color);
  }
  
  .wikiEditor-ui-toolbar .tabs span.tab a:before{
      background: url(/images/f/f5/IconArrowDown.png) center no-repeat;
      transition: transform 0.25s;
      transition-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  .wikiEditor-ui-toolbar .group .tool-select .label:after{
      background: url(/images/f/f5/IconArrowDown.png) center no-repeat;
  }
  
  .wikiEditor-ui .wikiEditor-ui-view{
      border: var(--main-border);
      border-radius: var(--minor-border-radius);
  }
  
  #msupload-div{
      background: var(--color-accent);
  }
  #msupload-dropzone{
      color: var(--text-color);
  }
  
  .wikiEditor-ui-toolbar .page-table{
      color: var(--text-color);
  }
  .wikiEditor-ui-toolbar .page-table th{
      color: var(--text-color);
  }
  
  .wikiEditor-ui-toolbar .booklet > .index > .current{
      background-color: var(--selected-color);
      color: var(--text-color);
  }
  
  .wikiEditor-ui-toolbar .page-table td{
      color: var(--text-color);
  }
  
  .wikiEditor-ui-toolbar .booklet > .index > :hover{
      background-color: var(--color-emphasized);
  }
  
  .wikiEditor-ui-toolbar .page-characters div span{
      color: var(--text-color);
  }
  
  .wikiEditor-ui-toolbar .page-characters div span:hover{
      background-color: var(--selected-color);
  }
.mw-editform #editpage-copywarn{
	margin-top: 10px;
}
  
  
  input{
      background-color: var(--color-emphasized);
      color: var(--text-color);
  }
  
  textarea{
      border: 2px solid var(--main-border);
      border-radius: var(--minor-border-radius);
      background-color: var(--color-emphasized);
      color: var(--text-color);
  }
.mw_metadata{
	border: var(--main-border);
    border-radius: var(--minor-border-radius);
    border-collapse: unset;
}
.mw_metadata td {
    background-color: var(--color-accent);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
  
.mw_metadata th{
    background-color: var(--color-emphasized);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
  
  /* Info Boxes */
  .portable-infobox {
  	border: var(--pa-border);
    border-radius: var(--pa-border-radius);
    background: var(--pa-background);
  }
  .portable-infobox .pi-title{
      background-color: var(--pa-title-background);
      font-weight: bold;
  }
  .portable-infobox .pi-data-label{
      font-weight: bold;
  }
  .portable-infobox .pi-header{
      background-color: var(--pa-header-background)
  }
  
/* Other tables */
.oo-ui-panelLayout-framed{
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    background: var(--color-accent);
}

/** ToC **/
  /* base common style */
  .toc {
    background: var(--toc-background);
    border-radius: 4px;
    border: var(--main-border);
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 0;
    font-size: 1em;
    min-width: 12em;
  }
  .toc .a {
    color: var(--text-color);
  }
  .toc .tocnumber {
    color: var(--text-color-note);
  }
  .toc .tocnumber:after {
    content: ".";
  }
  
  /* header */
  .toc {
    /* arrow */
    /* do not change ToC box width when toggle show/hide. */
  }
  .toc .toctitle {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: 8px;
    border-bottom: var(--main-border);
  }
  .toc .toctitle h2 {
    line-height: 20px;
    font-weight: normal;
    margin: 0;
    border: 0;
    display: flex;
    align-items: center;
    padding: 0 0.5em;
  }
  .toc .toctitle h2::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center center;
    mask-position: center center;
    background-color: var(--text-color);
    margin: 0 6px 0 0;
  }
  .toc .toctogglelabel {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    box-sizing: border-box;
    padding-right: 1em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .toc .toctogglespan::before,
  .toc .toctogglespan::after,
  .toc .toctogglelabel::after {
    display: none;
  }
  .toc .toctogglelabel::before {
    content: "";
    display: inline-block;
    background: none;
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: var(--text-color) transparent;
    border-width: 0 5px 6px 5px;
    vertical-align: middle;
    flex: 0 0 auto;
  }
  .toc .toctogglelabel:hover::before {
    border-color: var(--text-link-color) transparent;
  }
  .toc .toctogglecheckbox:checked + .toctitle .toctogglelabel::before {
    border-width: 6px 5px 0 5px;
  }
  .toc .toctogglecheckbox:checked ~ ul {
    overflow: hidden;
    display: block;
    height: 0;
    border: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  
  /* content list */
  .mw-content-ltr .toc ul ul,
  .mw-content-rtl .toc ul ul {
    margin: 0 0 0 1em;
  }
  
  .toc > ul {
    padding: 0.5em;
    border-top: var(--main-border: 2px solid #b5b5b5);
    margin: 0;
  }
  .toc > ul a {
    display: block;
    padding: 2px 0.5em;
    border-radius: 4px;
    transition: background 0.1s;
  }
  .toc > ul a:hover {
    text-decoration: none;
    background: var(--highlight-color);
  }
  .toc > ul li {
    margin: 0;
  }
  
/* DataTable (like on File List page) */
  .mw-datatable tr:hover td{
      background-color: var(--dt-highlight);
  }
  .mw-datatable td{
      background-color: rgba(0,0,0,0);
  }
  .mw-datatable th{
      background-color: var(--color-accent);
  }
  .mw-datatable{
      border: var(--main-border);
      background: var(--dt-background);
  }

/* Tables */
/********* Tables *********/
  table {
    /* fix 100% width table with border */
    box-sizing: border-box;
  }
  table.lined,
  table.bordered,
  table.cellborder {
    border-collapse: collapse;
    border-style: solid;
    border-color: var(--theme-text-color);
  }
  
  table.lined th,
  table.lined td {
    border-width: 0 0 1px 0;
  }
  
  table tfoot:empty,
  table thead:empty {
    display: none;
  }
  
  table.lined td.noline, table.lined tr.noline td {
    border-bottom-width: 0;
  }
  
  table tr.bottomline td {
    border-bottom-width: 1px;
  }
  
  table tr.topline td {
    border-top-width: 1px;
  }
  
  table td.bottomline, table.lined tr.noline td.bottomline {
    border-bottom-width: 1px;
  }
  
  table td.topline {
    border-top-width: 1px;
  }
  
  /* Hack for using "border-collapse" and "border-radius" in the same table display by using one table nested within another */
  table.outer {
    white-space: nowrap;
  }
  
  table.inner {
    border-collapse: collapse;
    background: inherit;
    width: 100%;
  }
  
  table.inner th {
    border: var(--main-border);
  }
  
  .wikitable,
  .wikitable > tr > th,
  .wikitable > * > tr > th {
    color: inherit;
    background: var(--ta-background);
    border: var(--main-border);
    border-radius: var(--minor-border-radius)
  }
  
  table.cargoTable.noMerge tr:nth-child(2n) {
    background: rgba(127, 127, 127, 0.25);
  }
  
  table.cargoTable.noMerge tr:nth-child(2n+1) {
    background: none;
  }
  
/* Search Results page */
.mw-search-profile-tabs {
	background-color: var(--color-accent);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
.search-types .current a{
	color: var(--text-color);
}
.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-widget.oo-ui-textInputWidget > .oo-ui-inputWidget-input{
	background: var(--color-emphasized);
	border: var(--main-border);
	border-radius: var(--minor-border-radius) 0 0 var(--minor-border-radius);
	color: var(--text-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus{
	outline: 1px solid transparent;
    box-shadow: inset 0 0 0 2px #ffffff;
}
/* Search Button */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button{
	background-color: var(--bu-color);
    border-color: lightgray;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    background-color: var(--hover-color);
    color: var(--text-color);
    border-color: lightgray;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
    background-color: var(--selected-color);
    color: var(--text-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover{
	background-color: var(--bu-hover-color);
    border-color: lightgray;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active{
	background-color: var(--bu-pressed-color);
    border-color: var(--bu-pressed-color);
    box-shadow: none;
}

/* Input Widget */
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input{
	background: var(--color-emphasized);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input{
	color: var(--text-color);
}

/* Dropdown */
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle{
    background-color: var(--color-emphasized);
    color: var(--text-color);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled{
	background: transparent;
}
.oo-ui-indicator-down{
	background-image: linear-gradient(transparent,transparent),url(https://cometogether.wiki.gg/images/f/f5/IconArrowDown.png);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
    background-color: var(--active-color);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
    background-color: var(--hover-color);
    color: var(--text-color);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:active {
    color: var(--text-color);
    background: var(--active-color);
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover {
    background-color: transparent;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
    background: transparent;
}
.oo-ui-menuSelectWidget {
    margin-top: 5px;
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    background: var(--color-emphasized);
}
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
    color: var(--text-color);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
    background-color: var(--selected-color);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
    background-color: var(--hover-color);
}

/* Tab Switcher on File List page */
.TablePager_nav.oo-ui-buttonGroupWidget {
    background: var(--color-accent);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    color: var(--text-link-color);
}

/* Other Buttons */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background-color: var(--color-emphasized);
    color: var(--text-color);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}

/* File Upload Page */
code {
	background: var(--color-accent);
    border-radius: var(--minor-border-radius);
    padding: 1px 4px;
}
pre, code, .mw-code {
    color: var(--text-color);
    border: var(--main-border);
}

/* Fieldset */
fieldset {
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    background: var(--color-accent);
}


button, input, optgroup, select, textarea {
    margin: 0;
    background: var(--color-emphasized);
    color: var(--text-color);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}

/* Checkbox */
.oo-ui-checkboxInputWidget [type='checkbox'] + span {
    background-color: var(--color-emphasized);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}

/* Date Picker */
.mw-widget-dateInputWidget.oo-ui-widget-enabled .mw-widget-dateInputWidget-handle {
    background: var(--color-emphasized);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
.mw-widget-dateInputWidget-empty .mw-widget-dateInputWidget-handle {
    color: var(--text-color);
}
.mw-widget-dateInputWidget-handle {
    color: var(--text-color);
}
.mw-widget-calendarWidget-day {
    color: var(--text-color);
}
.mw-widget-dateInputWidget-calendar {
    background-color: var(--color-emphasized);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    margin-top: 5px;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    color: var(--text-color);
}
.mw-widget-calendarWidget-body-wrapper .mw-widget-calendarWidget-body:not(.mw-widget-calendarWidget-old-body):first-child{
	color: var(--text-color);
}

/* Gallery */
li.gallerybox div.thumb {
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    background-color: var(--color-emphasized);
}
li.gallerybox div.thumb img {
    scale: 1.1;
}
div.thumbinner {
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    background-color: var(--color-accent);
}

/* Yet another dialogue windows */
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame{
	border: unset;
}
.oo-ui-dialog-content > .oo-ui-window-body {
	background: var(--color-accent);
    border: var(--main-border);
}
.oo-ui-messageDialog-message {
    color: var(--text-color);
}
body .ui-dialog .ui-widget-header {
    background: var(--color-emphasized);
}
.ui-widget-header{
	color: var(--text-color);
	border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
.ui-widget-content{
	color: var(--text-color);
	border: var(--main-border);
    background: var(--color-accent);
}

/* Search Results */
.suggestions {
    background: var(--color-emphasized);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    margin: unset;
    margin-top: 5px;
}
.suggestions-special .special-label{
    color: var(--text-color);
}
.suggestions-special .special-query{
	color: var(--text-color);
}
.suggestions-special{
	background-color: var(--color-accent);
	border: unset;
}
.suggestions-results{
	background-color: unset;
	border: unset;
}
.suggestions-result{
	color: var(--text-link-color);
	background: var(--color-accent);
}
.suggestions-result-current{
	color: var(--text-link-color);
	background: var(--color-hover);
}
/* File Page */
#filetoc {
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    background-color: var(--color-accent);
}

/* Account Creation Page */
.mw-createacct-benefits-container {
    background: var(--color-accent);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    padding: 15px 20px;
}
.mw-body-content .mw-number-text h3 {
    color: var(--text-color);
}
.mw-number-text.icon-edits{
	background: url(https://cometogether.wiki.gg/images/1/12/Edits.png) no-repeat left center;
    color: var(--text-faded-color);
}
.mw-number-text.icon-pages {
    color: var(--text-faded-color);
    background: url(https://cometogether.wiki.gg/images/2/25/IconPages.png) no-repeat left center;
}
.mw-number-text.icon-contributors {
	background: url(https://cometogether.wiki.gg/images/2/2f/Contributors.png) no-repeat left center;
	color: var(--text-faded-color);
}
.mw-ui-container #userloginForm {
    margin-right: 25px;
    background: var(--color-accent);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    padding: 0px 10px;
}
.mw-ui-input {
    background-color: var(--color-emphasized);
    color: var(--text-color);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
.mw-ui-checkbox [type='checkbox'] + label:before {
    background-color: var(--color-emphasized);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
.mw-ui-button.mw-ui-progressive:not(:disabled) {
    background-color: var(--bu-color);
    color: var(--text-color);
    border-color: unset;
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
.mw-ui-button.mw-ui-progressive:not(:disabled):hover {
    background-color: var(--bu-hover-color);
    border-color: unset;
    border: var(--main-border);
}
.mw-ui-button.mw-ui-progressive:not(:disabled):active, .mw-ui-button.mw-ui-progressive:not(:disabled).is-on {
    background-color: var(--bu-pressed-color);
    border-color: unset;
    border: var(--main-border);
}
.mw-message-box-warning{
	margin-top:5px;
}

/* Preferences Page */
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
    background: var(--color-emphasized);
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select {
    color: var(--text-color);
    border: transparent;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover {
    color: var(--text-color);
    border-color: transparent;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:active {
    color: var(--text-color);
    border-color: var(--active-color);
}
.oo-ui-dropdownInputWidget option{
	color: black;
}
.oo-ui-labelWidget.oo-ui-inline-help {
    color: var(--text-faded-color);
}
#preferences .mw-htmlform-submit-buttons {
    background-color: var(--color-accent);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    margin-top: 5px;
    border-top: var(--main-border);
    padding: 10px;
}
.oo-ui-tabSelectWidget-framed {
    background-color: var(--color-emphasized);
    border-bottom: var(--main-border);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget{
	margin-bottom:5px;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
    color: var(--text-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
    background-color: var(--selected-color);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
    border-bottom-color: transparent;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
    background-color: transparent;
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
    background-color: var(--selected-color);
}

.oo-ui-radioInputWidget [type='radio'] + span {
    background-color: var(--color-emphasized);
}
#mw-allmessagestable tbody:hover td {
    background-color: var(--dt-highlight);
}
ol.references li:target, sup.reference:target {
    background-color: var(--dt-highlight);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}

/* Custom Panels */
.panel-box{
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    margin: 10px -8px;
}
.panel-background{
	background-color: var(--color-accent);
}
.panel-header{
	background-color: var(--color-emphasized);
    border-bottom: var(--main-border);
    font-weight: bold;
    font-size: 20px;
    padding: 5px 5px 5px 15px;
}
.panel-content{
	font-size: 16px;
    padding: 8px;
    display: flow-root;
}
.panel-left{
	float: left;
    width: 50%;
    display: flex;
    flex-direction: column;
}
.panel-right{
	float: right;
    width: 50%;
    display: flex;
    flex-direction: column;
}

/* Recent Changes Page */
.oo-ui-popupWidget-popup {
    background-color: var(--color-accent);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    margin-top: 5px;
    color: var(--text-color);
}
.mw-rcfilters-ui-datePopupWidget .mw-rcfilters-ui-valuePickerWidget-title {
    color: var(--text-faded-color);
}
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background-color: var(--color-accent);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
    background-color: unset;
}
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
    background-color: var(--color-accent);
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
    color: var(--text-color);
}
.mw-rcfilters-ui-itemMenuOptionWidget-label-title {
    color: var(--text-color);
}
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
    color: var(--text-faded-color);
}
.mw-rcfilters-ui-filterMenuHeaderWidget-header {
    border-bottom: var(--main-border);
    background-color: var(--color-accent);
}
.mw-rcfilters-ui-filterMenuHeaderWidget-title {
    color: var(--text-color);
}
.mw-rcfilters-ui-filterMenuSectionOptionWidget {
    background-color: var(--color-accent);
}
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label {
    color: var(--text-color);
}
.mw-rcfilters-ui-menuSelectWidget-footer {
    background-color: var(--color-accent);
    border-top: var(--main-border);
}
.mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget {
    color: var(--text-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
    border: var(--main-border);
    border-radius: var(--minor-border-radius);
    border-left-width: unset;
    background: var(--color-emphasized);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    color: var(--text-faded-color);
}
.mw-rcfilters-ui-tagItemWidget-popup-content{
	color:var(--text-color);
}

/* Code Editor */
.codeEditor-status {
    background-color: var(--color-emphasized);
    border-top: var(--main-border);
}
.ace_gutter-cell {
    color: var(--text-faded-color);
}
.ace-tm .ace_gutter {
    background: var(--color-emphasized);
    color: #333;
}
.ace-tm .ace_gutter-active-line {
    background-color: var(--color-accent);
}

/* Diffchange */
.diff-deletedline .diffchange{
	background: var(--dc-before-color);
}
.diff-addedline .diffchange{
	background: var(--dc-after-color);
}
.diff-context {
    background: var(--color-accent);
    border-color: var(--text-faded-color);
    color: var(--text-faded-color);
}

/* Notifications */
.mw-echo-ui-placeholderItemWidget {
    background-color: var(--color-accent);
}
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
    background: var(--color-accent);
    border: var(--main-border);
    border-radius: 3px;
    padding: 5px;
}

/* Message Box */
.mw-message-box {
    color: lightgray;
}
/* Warning Message Box */
.mw-message-box-warning {
    background-color: rgb(255 201 25 / 25%);
    border: 2px solid #ffc919;
    border-radius: 5px;
}

.vector-menu-checkbox:checked+.vector-menu-heading:after{
	transform: scaleY(-1);
    background-position-y: 2px;
}
Retrieved from "https://cometogether.wiki.gg/index.php?title=MediaWiki:Common.css&oldid=1142"