MediaWiki:Timeless.css

/*
 __      _______   _______          ___ _    _   _______ _                _               
 \ \    / /  __ \ / ____\ \        / (_) |  (_) |__   __(_)              | |              
  \ \  / /| |__) | |     \ \  /\  / / _| | ___     | |   _ _ __ ___   ___| | ___  ___ ___ 
   \ \/ / |  _  /| |      \ \/  \/ / | | |/ / |    | |  | | '_ ` _ \ / _ \ |/ _ \/ __/ __|
    \  /  | | \ \| |____   \  /\  /  | |   <| |    | |  | | | | | | |  __/ |  __/\__ \__ \
     \/   |_|  \_\\_____|   \/  \/   |_|_|\_\_|    |_|  |_|_| |_| |_|\___|_|\___||___/___/


	I'll uh- write a lot more here later with regards to guidelines and junk... but for now the GIST of it is *please leave comments* whenever you do something. If you do, make sure to append a unicode emoji representing yourself in place of a name- and if it's your first time- add it to the list below:

CONTRIBUTORS:
	😺 - Table
	🍷 - Aries
	🐢 - Prismic
	🦇 - TrixxedHeart

*/

	:root {
		--faux-white: #f8f9fa;
		--blue-text: #6ae3f9;
		--more-dark-green: #07242b;
		--more-dark-green-border: #053c48;
		--less-dark-green: #07343f;
		--less-dark-green-border: #086c84;
		--very-dark-grey: #101315;
		--very-dark-grey-border: #232a2e;
		--more-dark-grey: #181b1f;
		--more-dark-grey-border: #282a2e;
		--less-dark-grey: #252a30;
		--less-dark-grey-border: #3c4148;
		--link: #6bd4ff;
		--link-hover: #468ca9;
		--link-visited: #509fdd;
		--link-visited-hover: #3874a3;
		--red: #b32c2c;
		--yellow: #ecca12;
		--green: #34762e;

		--font-header: "Exo 2", "Linux Libertine", "Times New Roman", "Liberation Serif", "Nimbus Roman", "Noto Serif", "Times", sans-serif;
		--font-sans: "Noto Sans", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Lato", "Liberation Sans", "Helvetica Neue", "Helvetica", sans-serif;
	}


	/* 😺 establish faux white text globally */
	body {
		color: var(--faux-white);
	}

	/* 😺 main BG, INVESTIGATE SCALING AND POSSIBLY DITHERING THE GRADIENT */
	body {
		background: #10171c;
		background-image: url('https://wiki-files.vrchat.com/SiteBackground_VRChat_Home_Summer.webp');
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: top center;
	}

	#mw-wrapper {
		background: linear-gradient(to bottom, #10171c00 20vh, #10171c 55vh), linear-gradient(to right, #10171c 1vw, #10171c00 15vw, #10171c00 85vw, #10171c 99vw);
	}

	/* 😺 ugly serif fonts BEGONE */
	.mw-body h1,
	.mw-body h2,
	.mw-body h3,
	.mw-body h4,
	.mw-body h5,
	.mw-body h6,
	.mw-body dt,
	#personal h2 {
		font-family: var(--font-header);
		font-weight: 600;
	}
	.mw-body h2 {
		border-bottom: solid 3px var(--more-dark-grey-border);
	}

	/* 😺 below seems to be 🍷's code; haven't studied it enough to know where it should go or what parts *exactly* it touches so for now I'll just leave this notice here until more thorough comments are written */
	.mw-sp-translate-message-documentation {
		background-color: transparent;
	}
	.mw-sp-translate-edit-fields fieldset {
		border: 3px solid var(--more-dark-grey-border);
		border-radius: 8px;
	}
	.mw-sp-translate-edit-definition {
		background-color: transparent;
	}

	body {
		font-family: var(--font-sans);
		font-weight: 400;
	}

	.mw-message-box {
		background-color: transparent !important;
		border: dotted 3px var(--less-dark-grey-border);
		color: var(--faux-white);
		padding: 1.5em;
	}

	.mw-message-box p {
		margin: 0;
	}

	.mw-logevent-loglines {
		margin-bottom: 1em !important;
	}

	.mw-message-box-warning {
		border-color: var(--yellow);
	}

	.mw-message-box-error {
		border-color: var(--red);
	}

	div.mw-warning-with-logexcerpt {
		padding: 1.5em;
		border: dotted 3px var(--less-dark-grey-border);
		margin-bottom: 1em;
	}

	span.comment {
		opacity: .75;
	}
	#contentSub {
		color: var(--faux-white);
	}

/*

▀███▀▀▀██▄ ▄▄█▀▀██▄ ▀███▀▀▀██▄ ▀███▀   ▀██▀
  ██    ████▀    ▀██▄ ██    ▀██▄ ███   ▄█
  ██    ███▀      ▀██ ██     ▀██  ███ ▄█
  ██▀▀▀█▄▄█        ██ ██      ██   ████
  ██    ▀██▄      ▄██ ██     ▄██    ██
  ██    ▄███▄    ▄██▀ ██    ▄██▀    ██
▄████████  ▀▀████▀▀ ▄████████▀    ▄████▄

*/

	/* 😺 ....🍷??????? */
	@media screen {
		a.new, .new a {
			color: var(--red);
		}
	}

	/* 😺 shift the upper margins to be tighter with the header */
	@media screen and (min-width: 1100px) {
		#mw-content-container {
			margin-top: 2.5em;
		}
	}

	/* 😺 colors! :D */
	#mw-content-container {
		background: transparent;
	}

	#mw-content {
		background: var(--more-dark-grey);
		color: var(--faux-white);
		border: solid var(--more-dark-grey-border);
	}

	/* 😺 these are kinda arbitrary */
	#mw-content a:not(.new, .new a) {
		color: var(--link);
	}

	#mw-content a:hover:not(.new, .new a) {
		color: var(--link-hover);
	}

	#mw-content a:visited:not(.new, .new a) {
		color: var(--link-visited);
	}

	#mw-content a:visited:hover:not(.new, .new a) {
		color: var(--link-visited-hover);
	}

	/* 😺 CURSED icon inversion, I'm fucking INSANE */
	#p-namespaces a,
	#p-namespaces a span,
	#p-views a,
	#p-views a span,
	.mw-editsection,
	.mw-editsection a {
		filter: invert(1);
	}
	/* 😺 [LOUD SCREAMING] */
	.mw-helplink {
		color: #942b00 !important;
		filter: invert(1);
	}

	/* 😺 roundin' the corners! (subject to change) */
	@media screen and (min-width: 1100px) {
		#mw-content {
			border-radius: 15px;
		}
	}

	/* 😺 vertically aligning the top of the body content box with the sidebars */
	@media screen and (min-width: 1100px) {
		#mw-content-wrapper {
			padding: 1em 0 0;
		}
	}

	/* 😺 DROP SHADOWS MY BELOVED */
	#mw-content {
		box-shadow: 0 0 0.7rem #000;
	}

	/* 😺 move page titles post-namespace a *bit* to the right in order to space 'em better */
	.mw-page-title-separator {
		margin-right: 0.25em;
	}

	/* 😺 general TOC theming */
	ul#filetoc,
	.toc,
	.toccolours,
	.mw-warning {
		background: var(--less-dark-grey);
		border: 3px solid var(--less-dark-grey-border);
		box-shadow: 0 0 4px #000;
		border-radius: 15px;
	}

	/* 😺 general content thumbnail theming */
	/* 🦇 margin-left/right unset to prevent image embeds from centering by default when text wrapping is disabled (why is this default on timeless???) */
	.thumbinner {
		background: var(--less-dark-grey);
		border: solid  var(--less-dark-grey-border);
		border-radius: 10px;
		margin-left: unset;
		margin-right: unset;
	}
	.thumbinner .thumbimage,
	.thumbborder {
		border: 0;
		box-shadow: 0 0 0.1rem #000;
	}
	.thumb:not(.gallerybox div.thumb) {
		filter: drop-shadow(0 0 6px #000);
	}

	/* 😺 gallery theming */
	.mw-body li.gallerybox div.thumb {
		background-color: var(--less-dark-grey);
		border: solid  var(--less-dark-grey-border);
		border-radius: 10px;
	}
	ul.gallery, .mw-body li.gallerybox div.thumb {
		margin: 0;
	}
	.gallerybox {
		margin: 0.25em;
		filter: drop-shadow(0 0 4px #000);
	}

	/* 😺 code block theming */
	code {
		background: var(--less-dark-grey);
		border: 1px solid var(--more-dark-grey);
		color: var(--faux-white);
	}
	pre:not(.mw-highlight pre) {
		color: #fff;
		background-color: rgba(0, 0, 0, 0.25);
		border: none;
		border-radius: 16px;
	}

	/* 😺 table theming; COLORS ARE ARBITRARY */
	.wikitable,
	.mw-datatable {
		color: #fff;
	}
	.wikitable,
	.wikitable > * > tr > th,
	.mw-datatable th {
		background: #17181d;
	}
	.wikitable tr,
	.mw-datatable tr td,
	.mw-datatable tr:hover td {
		background: #2d3135;
	}
	.wikitable tr:nth-child(2n),
	.mw-datatable tr:nth-child(2n) td,
	.mw-datatable tr:nth-child(2n) td:hover {
		background: #212428;
	}

	.wikitable,
	.wikitable > * > tr > th,
	.wikitable > * > tr > td,
	.mw-datatable,
	.mw-datatable > * > tr > th,
	.mw-datatable > * > tr > td {
		border: 2px solid #414b57;
	}

	/* 😺 table multi-line cell text margin fix */
	.wikitable p{
		margin: 0;
	}

	/* 😺 revision history theming fixes */
	#pagehistory li.selected{
		background: #2d3135;
		color: var(--faux-white);
		outline: 1px dashed #6e7d8f;
	}
	.updatedmarker {
		background: transparent;
		color: #b7f430;
		font-weight: 700;
	}

	/* 😺 diffs theming */
	.diff-context {
		background: var(--less-dark-grey);
		border-color: #41474c;
		color: inherit;
	}
	.diff-addedline {
		border-color: var(--green);
	}
	.diff-addedline .diffchange {
		background: var(--green);
	}
	.diff-deletedline {
		border-color: var(--red);
	}
	.diff-deletedline .diffchange {
		background: var(--red);
	}

	/* 😺 FIRST CELL MAIN PAGE INLINE */
	@media screen and (max-width: 1099px) {
		#first-cell{
			display: inline;
		}
	}
	@media screen and (min-width: 1100px) {
		#first-cell{
			display: flex;
		}
	}

	/* 🐢 fixes the unreadable white text on bright yellow background default */
	.not-patrolled {
		background-color: #282a1a;
	}

	/* 🐢 center titlebox text on mobile */
	@media screen and (max-width: 1099px) {
		.mw-headline,
		.mw-headline-sub {
			text-align: center;
		}
	}

/*

▀██▀ ▀█▄   ▀█▀ ▀██▀▀▀▀█  ▄▄█▀▀██   ▀██▀▀█▄    ▄▄█▀▀██   ▀██▀ ▀█▀
 ██   █▀█   █   ██  ▄   ▄█▀    ██   ██   ██  ▄█▀    ██    ██ █
 ██   █ ▀█▄ █   ██▀▀█   ██      ██  ██▀▀▀█▄  ██      ██    ██
 ██   █   ███   ██      ▀█▄     ██  ██    ██ ▀█▄     ██   █ ██
▄██▄ ▄█▄   ▀█  ▄██▄      ▀▀█▄▄▄█▀  ▄██▄▄▄█▀   ▀▀█▄▄▄█▀  ▄█   ██▄

*/

	.pi-theme-official,
	.pi-theme-community {
		background: var(--less-dark-grey);
		--pi-secondary-background: transparent;
		border: 5px solid var(--less-dark-grey-border);
		color: #f8f9fa;
		margin-left: 2em;
		border-radius: 20px;
		box-shadow: 0 0 8px #000;
		padding: 0;
	}
	.skin-timeless #mw-content-text .pi-data-label {
		font-family: 'Exo 2';
	}
	.pi-title, .pi-header {
		text-align: center;
	}
	.pi-data-value {
		display: flex;
		align-items: center;
	}
	.portable-infobox .pi-data-value > :not(ul) {
		margin: 0;
	}
	.portable-infobox .pi-title, .portable-infobox .pi-header {
		padding: 0;
	}
	.portable-infobox .pi-title p, .portable-infobox .pi-header p{
		margin: .75em 0;
	}
	.pi-data, .pi-group {
		border-bottom-width: 2px;
	}
	.portable-infobox h2::after {
		border-bottom: 3px solid var(--less-dark-grey-border) !important;
	}
	.portable-infobox .pi-border-color {
		border-color: var(--less-dark-grey-border);
	}
	.pi-title p {
		font-weight: 700;
	}

	/* 😺 temporary mobile width fix */
	@media screen and (max-width: 700px) {
		.portable-infobox {
			width: 98.5%;
		}
	}

/*

▀██    ██▀ ▀██▀▀▀▀█  ▀██▀▀█▄   ▀██▀     █     ▀██ ▀██▀  ▀█▀ ▀██▀ ▀██▀  █▀  ▀██▀
 ███  ███   ██  ▄     ██   ██   ██     ███     ▀█▄ ▀█▄  ▄▀   ██   ██ ▄▀     ██
 █▀█▄▄▀██   ██▀▀█     ██    ██  ██    █  ██     ██  ██  █    ██   ██▀█▄     ██
 █ ▀█▀ ██   ██        ██    ██  ██   ▄▀▀▀▀█▄     ███ ███     ██   ██  ██    ██
▄█▄ █ ▄██▄ ▄██▄▄▄▄▄█ ▄██▄▄▄█▀  ▄██▄ ▄█▄  ▄██▄     █   █     ▄██▄ ▄██▄  ██▄ ▄██▄

*/

	/* 😺 preferences colors */
	.oo-ui-panelLayout-framed {
		border: 3px solid #444d57;
		color: #fff;
	}
	.oo-ui-tabSelectWidget-framed {
		background: var(--less-dark-grey);
	}
	.oo-ui-menuLayout-content {
		background: #1b1f23;
	}

	.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed,
	.mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
		border-color: #444d57;
	}
	.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
		background: #1b1f23;
		color: #fff;
	}
	.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover,
	.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
		background: #1b1f23;
		color: inherit;
	}

	.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(2n) td, .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td {
		background: transparent;
	}


	/* 😺 arbitrary choices for the buttons here, remove "#mw-prefs-form" if applying globally later */
	#mw-prefs-form .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
		background: var(--very-dark-grey);
		border: 2px solid var(--very-dark-grey-border);
	}
	#mw-prefs-form .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
		background: #1d2327;
		border: 2px solid #364046;
	}

	/* 😺 dropdowns */
	.oo-ui-menuSelectWidget {
		background: #161b1e;
		border-color: #000;
		box-shadow: 0 0 5px #000;
	}
	.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
		color: #fff;
	}
	.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
		background: #0c0f10;
	}
	.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
	.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
	.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
		background: var(--very-dark-grey);
	}
	.oo-ui-dropdownInputWidget.oo-ui-widget-enabled,
	.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
		background: #151719;
		border: 1px solid #2f363b;
		color: #fff;
	}
	.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover,
	.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
		background: #202326;
		border: 1px solid #3e484e;
		color: #fff;
	}
	.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
		outline: 0;
		box-shadow: none;
		border-color: #2f363b;
	}

	/* 😺 TEMPORARY THEMING JUST TO BE GOOFY, FIGURE OUT WHAT TO DO WITH THIS BUTTON LATER */
	.mw-prefs-buttons {
		background: transparent;
		border: 0;
		filter: drop-shadow(0 0 10px #000); /* 😺 DON'T CONVERT THIS ONE PLEASE */
	}
	.oo-ui-tabOptionWidget {
		color: #ffffffab;
	}

	/* 😺 search theming */
	.mw-body .mw-search-profile-tabs {
		background: #151719;
		border: solid #2f363b;
	}
	.oo-ui-textInputWidget .oo-ui-inputWidget-input {
		background: var(--very-dark-grey);
		border: 2px solid var(--very-dark-grey-border);
		color: #fff;
	}
	.oo-ui-indicator-clear {
		filter: invert(1);
		top: 8px;
	}
	.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
		background: var(--very-dark-grey);
		border: 0;
		color: inherit;
	}
	.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
		background: #141719;
	}

	/* 😺 date search theming, ROUGH FOR MVP- FIX LATER */
	.mw-widget-dateInputWidget-calendar {
		filter: invert(1);
	}
	.mw-widget-dateInputWidget,
	.mw-widget-dateInputWidget input:not(.mw-widgets-datetime-dateTimeInputWidget-editField):not(.mw-history-compareselectedversions-button) {
		margin: 0;
	}

	/* 😺 notification popups */
	.mw-notification {
		background: var(--more-dark-green);
		border-color: var(--less-dark-green);
		color: var(--faux-white);
	}

	.mw-parser-output a.external, .link-mailto, .link-ftp, .link-irc, .link-audio, .link-video, .link-document {
		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtZXh0ZXJuYWwtbGluayI+PHBhdGggZD0iTTE1IDNoNnY2Ii8+PHBhdGggZD0iTTEwIDE0IDIxIDMiLz48cGF0aCBkPSJNMTggMTN2NmEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMlY4YTIgMiAwIDAgMSAyLTJoNiIvPjwvc3ZnPg==);
		background-position: center right;
		background-repeat: no-repeat;
		padding-right: 1.5em;
		background-size: 16px;
	}
	
	/* 😺 generic popup chevrons */
	.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::after, .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before {
		border-bottom-color: var(--less-dark-grey);
	}

	/* 😺 recent changes filters */
	.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
		background: var(--less-dark-grey);
		border: 2px solid var(--less-dark-grey-border); /* could be thicker? */
	}
	.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
		color: var(--faux-white);
	}
	.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled, .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
		background: var(--more-dark-grey);
		border: 1px solid #000;
		color: var(--faux-white);
	}
	.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
		background: var(--more-dark-grey);
		border: 2px solid var(--more-dark-grey-border);
	}
	/* 😺 tag popups, SNEAKY. */
	.mw-rcfilters-ui-tagItemWidget-popup-content {
		color: var(--faux-white);
	}
	.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::before, .oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::after {
		border-top-color: var(--more-dark-grey-border);
	}
	/* 😺 dropdowns YIPPEE */
	.mw-rcfilters-ui-filterMenuHeaderWidget-header, .mw-rcfilters-ui-filterMenuSectionOptionWidget {
		background: var(--less-dark-grey);
	}
	.mw-rcfilters-ui-itemMenuOptionWidget-label-title, .mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label, .mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget {
		color: var(--faux-white);
	}
	.mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
		color: #9fa0a0;
	}
	.mw-rcfilters-ui-menuSelectWidget-footer {
		background: var(--less-dark-grey);
		border-top: 1px solid var(--less-dark-grey-border);
	}
	.mw-rcfilters-ui-filterMenuHeaderWidget-header, .mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk) {
		border-bottom: 2px solid var(--less-dark-grey-border);
	}
	/* 😺 kinda reddish tint to signify the muted filter categories on selection */
	.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected) {
		background: #322c2c;
	}
	.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-title, .mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
		color: #c38787;
	}
	/* 😺 sneaky bastard. */
	.mw-rcfilters-collapsed .mw-rcfilters-ui-filterTagMultiselectWidget {
		border-bottom: 0;
	}

	/* 😺 recent changes settings, RE-DO THESE LATER */
	.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button:focus, .oo-ui-buttonSelectWidget.oo-ui-widget-enabled:focus .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
		box-shadow: none;
	}

	/* 😺 recent changes index legend */
	.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
		background: var(--less-dark-green);
		border: solid var(--less-dark-green-border);
		color: var(--faux-white);
		box-shadow: 0 0 0.4rem #000;
	}

	/* 😺 recent changes mark-as-seen button fix */
	.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
		background: var(--very-dark-grey);
		border-color: transparent;
	}


	/* 😺 submission button */
	.oo-ui-messageDialog-content > .oo-ui-window-foot {
		outline: 2px solid var(--less-dark-grey);
	}
	.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
		border-right: 2px solid var(--less-dark-grey);
	}

	/* 😺 replace text page (this exists???) */
	.ext-replacetext-searchoptions {
		background: transparent;
	}
	/* 😺 QUICK HACK (I'M REALLY TIRED); PLEASE ACTUALLY THEME THIS LATER */
	#powersearch #target, #powersearch #replacement, .ext-replacetext-searchoptions [name="category"], .ext-replacetext-searchoptions [name="prefix"] {
		filter: invert(1);
	}


	/* 😺 notifications page!! */
	.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
		background: transparent;
		box-shadow: none;
	}
	/* 😺 recent activity box */
	.mw-echo-ui-crossWikiUnreadFilterWidget {
		border: 2px solid var(--less-dark-grey-border);
	}
	.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected {
		background: var(--very-dark-grey);
	}

	/* 😺 talk page comment highlight fix */
	.ext-discussiontools-init-targetcomment {
		background: #4f4f4f24;
	}

	/* 😺 talk page comment preview fix */
	.ext-discussiontools-ui-replyWidget-preview {
		background: transparent;
	}
	.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice {
		background: var(--very-dark-grey);
		border-color: var(--very-dark-grey-border);
	}


/*

 ▄█▀▀▀█▄█████▀███▀▀▀██▄ ▀███▀▀▀███▀███▀▀▀██▄     ██     ▀███▀▀▀██▄  ▄█▀▀▀█▄█
▄██    ▀█ ██   ██    ▀██▄ ██    ▀█  ██    ██    ▄██▄      ██   ▀██▄▄██    ▀█
▀███▄     ██   ██     ▀██ ██   █    ██    ██   ▄█▀██▄     ██   ▄██ ▀███▄
  ▀█████▄ ██   ██      ██ ██████    ██▀▀▀█▄▄  ▄█  ▀██     ███████    ▀█████▄
▄     ▀██ ██   ██     ▄██ ██   █  ▄ ██    ▀█  ████████    ██  ██▄  ▄     ▀██
██     ██ ██   ██    ▄██▀ ██     ▄█ ██    ▄█ █▀      ██   ██   ▀██▄██     ██
█▀█████▀▄████▄████████▀ ▄██████████████████▄███▄   ▄████▄████▄ ▄███▄▀█████▀

*/

	/* 😺 colors! :D */
	@media screen and (min-width: 1100px) {
		#mw-site-navigation .sidebar-chunk,
		#mw-related-navigation .sidebar-chunk {
			background: var(--less-dark-grey);
			color: var(--faux-white);
			border: solid var(--less-dark-grey-border);
		}
	}

	/* 😺 these are kinda arbitrary */
	.sidebar-chunk a:not(.new, .new a) {
		color: var(--link);
	}

	.sidebar-chunk a:hover:not(.new, .new a) {
		color: var(--link-hover);
	}

	.sidebar-chunk a:visited:not(.new, .new a) {
		color: var(--link-visited);
	}

	.sidebar-chunk a:visited:hover:not(.new, .new a) {
		color: var(--link-visited-hover);
	}

	/* 😺 round the corners for the sidebars a bit */
	.sidebar-chunk {
		border-radius: 15px;
	}

	/* 😺 main logo */
	#p-logo {
		display: inline;
	}
	@media screen and (max-width: 1099px) {
        #p-logo {
            display: none;
        }
    }
	.mw-wiki-logo img {
		transition: transform 0.15s ease-in-out;
		filter: drop-shadow(0 0 2px #000);
	}
	.mw-wiki-logo img:hover {
		transform: scale(1.08);
	}

	/* 😺 DROP SHADOWS MY BELOVED */
	@media screen and (min-width: 1100px) {
		#mw-site-navigation .sidebar-chunk,
		#mw-related-navigation .sidebar-chunk {
			box-shadow: 0 0 0.7rem #000;
		}
	}

	/* 😺 shortens the margins between sections a bit */
	@media screen and (min-width: 1100px) {
		#mw-site-navigation .sidebar-chunk .mw-portlet-body,
		#mw-related-navigation .sidebar-chunk .mw-portlet-body {
			margin-bottom: 1.5em;
		}
	}

	/* 😺 make the "related navigation" bar equal to the main nav bar (WHY WAS IT DIFFERENT) */
	#mw-related-navigation {
		width: 14em;
		flex: 0 0 14em;
	}
	
	/* 😺 inverts mobile menus */
	#site-navigation h2, #site-tools h2, .tools-inline .dropdown-toggle {
		filter: invert(1);
	}

	/* 😺 fix mobile settings menu misalignment */
	@media screen and (max-width: 1099px) {
		#site-tools h2 {
			right: 4em;
		}
		#user-tools h2 {
			right: 0;
		}
	}

	/* 🦇 Changes mobile sidebar to match */
	@media screen and (max-width: 1099px) {
		.sidebar-inner,
		.dropdown {
			background: var(--less-dark-grey);
			color: var(--faux-white);
			border: solid 3px var(--less-dark-grey-border);
			border-radius: 15px;
		}
	}
	/* 🦇 adjusts the menu cover (greys out stuff behind the sidebar) to match theming */
	@media screen and (max-width: 1099px) {
		#menus-cover {
			background: var(--more-dark-grey);
			opacity: 0.75;
        }
    }

	/* 😺 fix for mobile borders at bottom */
	@media screen and (max-width: 1099px) {
		#mw-site-navigation .sidebar-chunk,
		#mw-related-navigation .sidebar-chunk {
			border: 0;
		}
	}

/*

▀████▀  ▀████▀▀███▀▀▀███      ██     ▀███▀▀▀██▄ ▀███▀▀▀███▀███▀▀▀██▄
  ██      ██    ██    ▀█     ▄██▄      ██    ▀██▄ ██    ▀█  ██   ▀██▄
  ██      ██    ██   █      ▄█▀██▄     ██     ▀██ ██   █    ██   ▄██
  ██████████    ██████     ▄█  ▀██     ██      ██ ██████    ███████
  ██      ██    ██   █  ▄  ████████    ██     ▄██ ██   █  ▄ ██  ██▄
  ██      ██    ██     ▄█ █▀      ██   ██    ▄██▀ ██     ▄█ ██   ▀██▄
▄████▄  ▄████▄▄█████████████▄   ▄████▄████████▀ ▄██████████████▄ ▄███▄

*/

	/* 😺 fundamental layout adjustments */
	#mw-header-container {
		position: relative;
		padding-top: 5em;
	}

	#mw-header {
		max-width: 115em;
		justify-content: right;
	}

	/* 😺 colors! :D */
	#mw-header-container,
	#mw-header-hack .color-middle,
	#mw-header-hack .color-left,
	#mw-header-hack .color-right {
		background: transparent;
	}

	#mw-header-hack {
		box-shadow: 0 0;
	}

	#mw-header-container {
		color: #fff;
	}

	/* 😺 title text removal */
	#p-logo-text {
		display: none;
	}

	/* 😺 searchbar theming and adjustments */
	#simpleSearch {
		background: var(--less-dark-grey);
		border: solid 2px #39404a;
	}

	#searchInput {
		color: #fff;
	}

	#p-search {
		flex: 0 1 auto;
		padding-right: 1em;
	}

	#p-search input:focus {
		outline: none;
	}

	#searchInput::placeholder {
		opacity: .8;
		font-weight: 500;
	}

	input#searchButton, #mw-searchButton {
		filter: invert(1);
		right: 0.5em;
	}

	/* 😺 account box theming and adjustments */
	@media screen and (min-width: 1100px) {
		#user-tools {
			background: var(--less-dark-grey);
			border-radius: 8px;
			border: solid 3px #39404a;
			box-shadow: 0 0 0.4rem #000;
			transition: background-color 0.1s ease-in-out;
		}
		#user-tools:has(.dropdown-active) {
			background: #16191c;
			border: solid 2px #24282e;
		}
	}
	
	/* 😺 [sobbing] [throwing up] */
	#personal h2, #personal h2 span, #pt-notifications-alert, #pt-notifications-notice {
		filter: invert(1);
	}

	/* 😺 account box adjustments */
	#user-tools {
		width: 12.5em; /* 😺 magic number, NO IDEA why it has to be different from the column below it to *kinda* match it in width, investigate later */
		min-width: 0;
		display: flex;
		justify-content: center;
	}

	/* 😺 account name fix */
	#personal {
		padding: 0;
	}
	#personal h2 {
		padding: .25em 0 0 1.5em; /* 😺 magic numbers */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 😺 dropdown theming */
	#personal .dropdown {
		background: var(--very-dark-grey);
		border: solid var(--very-dark-grey-border);
	}
	#pt-uls .uls-trigger::before {
		filter: invert(1);
	}

	/* 😺 I HATE CHEVRONS MADE LIKE THIS */
	#personal .dropdown:before {
		border-bottom: 10px solid transparent;
	}

	#personal .dropdown::after {
		border-bottom-color: #252e34;
		top: -10px;
	}
	
/*

▀█▄   ▀█▀  ▄▄█▀▀██   █▀▀██▀▀█ ▀██▀ ▀██▀▀▀▀█    ▀██▀▀█▄    ▄▄█▀▀██   ▀██▀ ▀█▀
 █▀█   █  ▄█▀    ██     ██     ██   ██  ▄       ██   ██  ▄█▀    ██    ██ █
 █ ▀█▄ █  ██      ██    ██     ██   ██▀▀█       ██▀▀▀█▄  ██      ██    ██
 █   ███  ▀█▄     ██    ██     ██   ██          ██    ██ ▀█▄     ██   █ ██
▄█▄   ▀█   ▀▀█▄▄▄█▀    ▄██▄   ▄██▄ ▄██▄        ▄██▄▄▄█▀   ▀▀█▄▄▄█▀  ▄█   ██▄

*/

	/* 😺 colors */
	.mw-echo-ui-placeholderItemWidget {
		background: transparent;
	}
	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-head {
		background: var(--very-dark-grey);
	}

	/* 😺 internal border theming */
	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head {
		border-bottom: 2px solid var(--more-dark-grey-border);
	}
	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer {
		border-top: 2px solid var(--more-dark-grey-border);
	}
	.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-left: 2px solid var(--more-dark-grey-border);
	}
	
	/* 😺 ahhh, the devils chevron, DEVRON- if you will. */
	/* 😺 INVESTIGATE A SOLUTION TO THE RESIDUAL LOWER BORDER LINE LATER */
	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::after, .mw-echo-ui-notificationBadgeButtonPopupWidget-popup.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before {
		border-bottom-color: var(--very-dark-grey);
	}
	
	/* 😺 PENDING LOADING BAR; PULLED FROM MW'S SOURCE CODE, DON'T ASK ME WHY IT'S LIKE THIS */
	.oo-ui-pendingElement-pending {
		background-color: var(--very-dark-grey);
		background-image: linear-gradient(135deg, var(--very-dark-grey-border) 25%, transparent 25%, transparent 50%, var(--very-dark-grey-border) 50%, var(--very-dark-grey-border) 75%, transparent 75%, transparent);
		animation: oo-ui-pendingElement-stripes 650ms linear infinite; /* 😺 unchanged from stock, just leaving here in case we want to change the timing values later */
	}

/*

▀███▀▀▀███ ▄▄█▀▀██▄   ▄▄█▀▀██▄ ███▀▀██▀▀██████▀▀▀███▀███▀▀▀██▄
  ██    ▀███▀    ▀██▄██▀    ▀██▄▀   ██   ▀█ ██    ▀█  ██   ▀██▄
  ██   █ ██▀      ▀███▀      ▀██    ██      ██   █    ██   ▄██
  ██▀▀██ ██        ███        ██    ██      ██████    ███████
  ██   █ ██▄      ▄███▄      ▄██    ██      ██   █  ▄ ██  ██▄
  ██     ▀██▄    ▄██▀██▄    ▄██▀    ██      ██     ▄█ ██   ▀██▄
▄████▄     ▀▀████▀▀   ▀▀████▀▀    ▄████▄  ▄██████████████▄ ▄███▄

*/

	/* 😺 colors! :D */
	.mw-footer-container {
		border-top: solid 1px var(--less-dark-grey);
		background: #1a1d1c;
		/* background-image: url('https://i.imgur.com/Z2x34d3.jpeg'), linear-gradient(120deg, transparent 15%, #1a1d1c 25%);
		background-size: contain;
		background-repeat: no-repeat; */
	}

	/* 😺 FIGURE OUT POTENTIALLY HAVING CUSTOM IMAGES IN THE FOOTER LATER
	.mw-footer-container::after {
		background: linear-gradient(120deg, transparent 20%, #1a1d1c 30%);
	} */

	/* 😺 center it a bit more */
	.mw-footer {
		max-width: 80em;
	}
	
	/* 😺 not really the footer *per-se* but mobile categories theming (it's at the bottom of the page) */
	#content-bottom-stuff {
		background: #10171c;
	}
	#content-bottom-stuff a:not(.new, .new a) {
		color: var(--link);
	}
	#content-bottom-stuff a:visited:not(.new, .new a) {
		color: var(--link-visited);
	}

	/* 😺 fix ghost margin at bottom of page */
	.mw-footer ul,
	.mw-footer li {
		margin: 0;
		padding: .3em 0;
	}
	body{
		margin: 0 !important;
	}

/*

▀███▀▀▀███▀███▀▀▀██▄ ▀████▀██▀▀██▀▀███ ▄▄█▀▀██▄ ▀███▀▀▀██▄
  ██    ▀█  ██    ▀██▄ ██ █▀   ██   ▀███▀    ▀██▄ ██   ▀██▄
  ██   █    ██     ▀██ ██      ██    ██▀      ▀██ ██   ▄██
  ██████    ██      ██ ██      ██    ██        ██ ███████
  ██   █  ▄ ██     ▄██ ██      ██    ██▄      ▄██ ██  ██▄
  ██     ▄█ ██    ▄██▀ ██      ██    ▀██▄    ▄██▀ ██   ▀██▄
▄██████████████████▀ ▄████▄  ▄████▄    ▀▀████▀▀ ▄████▄ ▄███▄

*/

/*

▀██▀  ▀█▀ ▀██▀  ▄█▀▀▀▄█  ▀██▀  ▀█▀     █     ▀██▀
 ▀█▄  ▄▀   ██   ██▄▄  ▀   ██    █     ███     ██
  ██  █    ██    ▀▀███▄   ██    █    █  ██    ██
   ███     ██  ▄     ▀██  ██    █   ▄▀▀▀▀█▄   ██
    █     ▄██▄ █▀▄▄▄▄█▀    ▀█▄▄▀   ▄█▄  ▄██▄ ▄██▄▄▄▄▄█

*/

	/* 😺 colors! :D */
	.oo-ui-toolbar-bar,
	.oo-ui-toolbar-position-top>.oo-ui-toolbar-bar {
		background-color: var(--less-dark-grey);
	}
	.oo-ui-menuToolGroup {
		border: 0;
	}
	.oo-ui-popupToolGroup.oo-ui-widget-enabled>.oo-ui-popupToolGroup-handle:hover,
	.oo-ui-tool.oo-ui-widget-enabled>.oo-ui-tool-link:hover {
		background: #0000003d;
	}
	.oo-ui-toolbar-bar {
		color: inherit;
	}
	.oo-ui-popupWidget-popup {
		background: var(--more-dark-grey);
		border: 2px solid var(--less-dark-grey);
	}

	/* 😺 fix awkward right-borders */
	.oo-ui-toolbar-actions .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle {
		border: 0;
	}
	.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
		border-bottom: 0;
	}

	/* 😺 invert the icons (stinky) */
	/* .oo-ui-icon-checkAll was excluded for a non-editor issue, revert if it breaks something */
	.oo-ui-iconElement-icon:not(.tool-active, .tool-active span, .oo-ui-icon-checkAll),
	.oo-ui-indicator-down{
		filter: invert(1);
	}

	/* 😺 round the corners */
	.mw-body .oo-ui-toolbar-bar {
		border-radius: 15px 15px 0 0;
	}
	
	/* 😺 image gallery box theming */
	.ve-ui-mwGalleryDialog-highlighted-image {
		background: transparent;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	.ve-ui-targetWidget:not(.oo-ui-pendingElement-pending) {
		background: var(--more-dark-grey);
	}
	.ve-ui-targetWidget {
		border: 1px solid var(--less-dark-grey)
	}
	.ve-ui-mwGalleryDialog .ve-ui-mwGalleryDialog-image-container {
		border: 1px solid var(--less-dark-green-border);
	}
	
	/* 😺 UPLOAD BOX THEMING */
	.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
	.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
		border: 3px solid var(--less-dark-grey);
		background-color: var(--more-dark-grey);
		border-radius: 16px;
		overflow: hidden;
	}
	.ve-ui-mwSaveDialog-options {
		background: var(--more-dark-grey);
		border: 0;
	}
	.oo-ui-processDialog-content .oo-ui-window-head, .oo-ui-processDialog-content .oo-ui-window-foot {
		outline: 2px dotted var(--less-dark-grey);
	}
	.ve-ui-mwSaveDialog-license {
		color: var(--faux-white);
	}
	.oo-ui-windowManager-modal > .oo-ui-dialog {
		background: #0008;
	}
	.oo-ui-messageDialog-message {
		color: inherit;
	}
	/* 😺 UPLOAD BOX ERROR */
	.oo-ui-processDialog-errors {
		background: #0009;
		backdrop-filter: blur(4px);
	}
	.oo-ui-processDialog-errors-title {
		color: inherit;
		background: transparent;
	}
	.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error {
		background-color: #220000;
		border-color: #d33;
	}

	/* 😺 THIS IS SO FUCKING CURSED */
	figure[typeof~="mw:File/Thumb"],
	figure[typeof~="mw:File/Thumb"] > figcaption {
		width: auto !important; /* AAAAAAAAAAAAAAAAAAAAAAAAAAA */
		background: var(--more-dark-green);
		border: solid var(--less-dark-green);
		border-top: 0;
	}
	figure.ve-ce-mwBlockImageNode{
		border: solid var(--less-dark-green);
		border-bottom: 0;
	}
	figure[typeof~="mw:File/Thumb"] > a:first-child > :first-child:not(.mw-broken-media) {
		border: 0;
	}

	/* 🍷 popups */
	.mwe-popups {
		border: solid 3px var(--less-dark-grey-border);
		border-radius: 15px;
		overflow: hidden;
	}

	.mwe-popups, .mwe-popups-container, .mwe-popups .mwe-popups-extract {
		background: var(--less-dark-grey) !important;
		color: var(--faux-white);
	}

	.mwe-popups .mwe-popups-extract[dir="ltr"]::after {
		background-image: linear-gradient(to right,rgba(255,255,255,0), var(--less-dark-grey) 50%);
	}

	.mwe-popups-settings-icon {
		filter: invert(1);
	}

	/* 🍷 language selector */

	.mw-pt-languages {
		background-color: transparent;
		border: dotted 3px var(--more-dark-grey-border);
		margin-bottom: 1em;
	}

	.mw-pt-languages-ui {
		font-weight: normal;
	}

	.mw-pt-languages-selected {
		font-weight: bold;
	}

	.mw-pt-progress {
		padding: 0;
		background: none;
	}

	.mw-pt-progress::after {
		display: inline-block;
		content: "";
		width: .6em;
		height: .6em;
		border-radius: 100%;
		margin-left: .25em;
	}

	.mw-pt-progress--complete::after {
		background-color: var(--green);
	}

	.mw-pt-progress--high::after {
		background-color: #e8d222;
	}

	.mw-pt-progress--med::after {
		background-color: var(--yellow);
	}

	.mw-pt-progress--low::after, .mw-pt-progress--stub::after {
		background-color: var(--red);
	}

	.mw-pt-translate-header {
		border-bottom: none;
	}

	.mw-translate-fuzzy {
		background-color: #ff2f2f1a;
		border: 3px dotted var(--red);
	}

	.ext-translate-container .tux-messagelist .tux-message-pagemode {
		background:transparent;
	}

	.ext-translate-container .tux-messagelist .tux-message-pagemode .tux-message-item-compact {
		background:transparent;
		border: 3px dotted var(--more-dark-grey-border);
		border-top: none;
		max-width: 100%;
	}

	.ext-translate-container .tux-messagelist .tux-message-pagemode:first-child .tux-message-item-compact {
		border-top:3px dotted var(--more-dark-grey-border);
	}

	.ext-translate-container .tux-messagelist .tux-message-pagemode .tux-message-item-compact:hover {
		background: var(--more-dark-grey-border);
	}

	.tux-messagelist .tux-message-pagemode .tux-pagemode-source {
		color:var(--faux-white);
	}

	.tux-messagelist .tux-message-pagemode .tux-pagemode-translation {
		color:var(--faux-white);
	}

	.tux-messagelist {
		background-color:transparent;
		color:var(--faux-white);
	}

	.tux-action-bar {
		background-color:transparent;
		color:var(--faux-white);
		box-shadow:none;
	}

	.tux-action-bar button {
		background-image: none;
	}

	.tux-messagetable-header {
		border-bottom:3px solid var(--more-dark-grey-border);
	}

	.tux-message-selector li.selected {
		border-bottom: 3px solid #36c;
		margin-bottom: -2px;
	}

	.tux-statsbar .tux-statsbar-info {
		color: var(--faux-white);
	}

	.tux-editor-header {
		color: unset;
	}
	.tux-breadcrumb {
		color: unset;
	}

	.tux-breadcrumb__item--aggregate {
		color: var(--link);
	}

	.uls-menu {
		background-color: var(--less-dark-grey);
		border: 3px solid var(--less-dark-grey-border);
		border-radius: 16px;
		color: var(--faux-white);
	}
	.uls-search, .uls-lcd, #uls-settings-block {
		background-color: transparent;
	}
	.uls-search {
		border: none;
	}
	.uls-lcd-region-title {
		color: var(--faux-white);
	}
	.uls-language-block a {
		color: var(--link);
	}

	.uls-language-option--highlighted {
		background-color: transparent !important;
	}

	ol.references li:target, sup.reference:target {
		background-color: var(--less-dark-grey);
	}


/*

█▀▀██▀▀█ ▀██▀▀█▄       █     ▀█▄   ▀█▀  ▄█▀▀▀▄█  ▀██▀          █     █▀▀██▀▀█ ▀██▀▀▀▀█
   ██     ██   ██     ███     █▀█   █   ██▄▄  ▀   ██          ███       ██     ██  ▄
   ██     ██▀▀█▀     █  ██    █ ▀█▄ █    ▀▀███▄   ██         █  ██      ██     ██▀▀█
   ██     ██   █▄   ▄▀▀▀▀█▄   █   ███  ▄     ▀██  ██        ▄▀▀▀▀█▄     ██     ██
  ▄██▄   ▄██▄  ▀█▀ ▄█▄  ▄██▄ ▄█▄   ▀█  █▀▄▄▄▄█▀  ▄██▄▄▄▄▄█ ▄█▄  ▄██▄   ▄██▄   ▄██▄▄▄▄▄█

*/


	/* 😺 translate editor floating bars */
	.tux-messagetable-header.floating {
		background: var(--very-dark-grey);
	}
	.tux-message-selector .more ul {
		background: var(--very-dark-grey);
		border: 2px solid var(--very-dark-grey-border);
	}
	.tux-message-selector label {
		color: var(--faux-white);
	}
	.tux-message-filter-box, .tux-message-filter-box:focus-visible {
		border: 2px solid var(--very-dark-grey-border);
		outline: none;
		color: var(--faux-white);
	}
	.tux-action-bar.floating {
		background: var(--very-dark-grey);
		border-top: 3px solid var(--more-dark-grey-border);
	}

	/* 😺 loading bar */
	.tux-messagetable-loader {
		background: transparent;
		box-shadow: none;
		color: var(--faux-white);
	}


	/* 😺 lang selection button */
	.ext-translate-language-selector .mw-ui-button {
		background: var(--very-dark-grey);
		border: 1px solid var(--very-dark-grey-border);
		color: var(--faux-white);
	}
	.ext-translate-language-selector .ext-translate-language-icon, .ext-translate-language-selector .ext-translate-language-selector-expand {
		filter: invert(1);
	}
	.mw-ui-button:not(:disabled):hover {
		background: var(--more-dark-grey);
		border: 1px solid var(--more-dark-grey-border);
		color: var(--faux-white);
	}

	/* 😺 lang selection search popup */
	.uls-no-results-found-title, .uls-menu .uls-no-results-view h3, .uls-no-found-more {
		color: var(--faux-white);
	}
	.uls-search-label {
		filter: invert(1);
	}
	.uls-menu .uls-no-results-view .uls-no-found-more, #uls-settings-block:not(.uls-settings-block--vector-2022) {
		background: transparent;
		border-top: 0;
	}

	/* 😺 VIEW SELECTOR */
	.tux-action-bar button {
		background-color: var(--very-dark-grey);
		border: 2px solid var(--very-dark-grey-border);
		color: var(--faux-white);
	}
	.tux-action-bar button:hover {
		background: var(--more-dark-grey);
	}
	.tux-action-bar button.down {
		background: var(--less-dark-grey);
	}
	.tux-action-bar .translate-mode-button:not(.down)::before, .tux-action-bar .page-mode-button:not(.down)::before, .tux-action-bar .proofread-mode-button:not(.down)::before {
		filter: invert(1);
	}

	/* 😺 LIST VIEW - PLAY WITH THIS MORE LATER */
	.tux-message-item {
		background: var(--red);
		border-bottom: 2px solid var(--very-dark-grey);
	}
	.tux-message-item:hover {
		background: #882121;
	}
	.tux-message-item.proofread {
		background: var(--yellow);
		color: #000;
	}
	.tux-message-item.proofread:hover {
		background: #bca111;
	}
	.tux-message-item.translated {
		background: var(--green);
	}
	.tux-message-item.translated:hover {
		background: #245220;
	}
	.tux-list-status .tux-notice {
		background-color: transparent;
	}

	/* 😺 REVIEW VIEW */
	.ext-translate-container .tux-messagelist .tux-message-proofread {
		background: transparent;
	}
	.ext-translate-container .tux-messagelist .tux-message-proofread .tux-message-item-compact:hover {
		background: #252a30aa;
	}
	.ext-translate-container .tux-messagelist .tux-message-proofread .tux-message-item-compact {
		background: var(--less-dark-grey);
		border-bottom: 2px solid var(--less-dark-grey-border);
		border-left: 2px solid var(--less-dark-grey-border);
		border-right: 2px solid var(--less-dark-grey-border);
	}
	.ext-translate-container .tux-messagelist .tux-message-proofread:first-child .tux-message-item-compact {
		border-top: 2px solid var(--less-dark-grey-border);
	}
	.ext-translate-container .tux-messagelist .tux-message-proofread:last-child .tux-message-item-compact {
		border-bottom: 2px solid var(--less-dark-grey-border);
	}
	.tux-messagelist .tux-message-proofread .tux-proofread-source {
		color: var(--faux-white);
	}
	.tux-messagelist .tux-message-proofread .tux-proofread-translation {
		color: #98eb9b;
	}

	/* 😺 SECTION EDITOR */
	.grid .row .tux-message-editor {
		margin: 0 auto;
	}
	.tux-message-editor, .grid .tux-message-editor .messagekey {
		color: var(--faux-white);
	}
	.tux-message-editor .editcolumn {
		background: var(--more-dark-grey);
	}
	.grid .tux-message-editor .infocolumn-block {
		background: var(--less-dark-grey);
	}
	.tux-message-editor {
		border: 2px solid var(--less-dark-grey-border);
	}
	.tux-message-editor .editcolumn {
		border-right: 2px solid var(--less-dark-grey-border)
	}
	.tux-message-editor__caret::before, .tux-message-editor__caret::after {
		border-right-color: var(--less-dark-grey-border)
	}
	.tux-message-editor textarea {
		outline: none;
	}
	.tm-suggestion {
		background: var(--very-dark-grey);
		border: 2px solid var(--less-dark-grey-border);
	}
	.tux-dropdown-menu {
		background: var(--less-dark-grey);
		border: 2px solid var(--less-dark-grey-border);
	}
	.tux-message-tools-menu li a:hover {
		background: var(--more-dark-grey);
	}
	.tux-message-editor .editor-expand, .tux-message-editor .editor-contract, .tux-message-editor .close {
		filter: invert(1);
	}
	.tux-editor-control-buttons .mw-ui-button.mw-ui-quiet {
		background: var(--less-dark-grey);
		color: var(--faux-white);
	}
	.tux-editor-control-buttons .mw-ui-button.mw-ui-quiet:hover {
		background: var(--very-dark-grey);
	}
	.tux-notice {
		background-color: var(--very-dark-grey);
	}

	/* 😺 page view bottom border fix */
	.ext-translate-container .tux-messagelist .tux-message-pagemode:last-child .tux-message-item-compact {
		border-bottom: 3px dotted var(--more-dark-grey-border);
	}
	
	/* 🍷 temp fix for https://wiki.vrchat.com/index.php?title=Special:LanguageStats&language=ja&group=!additions */
	.statstable {
		color: black;
	}


/*

 ▄█▀▀▀▄█   ▄▄█▀▀██   ▀██▀  ▀█▀ ▀██▀▀█▄     ▄▄█▀▀▀▄█ ▀██▀▀▀▀█
 ██▄▄  ▀  ▄█▀    ██   ██    █   ██   ██  ▄█▀     ▀   ██  ▄
  ▀▀███▄  ██      ██  ██    █   ██▀▀█▀   ██          ██▀▀█
▄     ▀██ ▀█▄     ██  ██    █   ██   █▄  ▀█▄      ▄  ██
█▀▄▄▄▄█▀   ▀▀█▄▄▄█▀    ▀█▄▄▀   ▄██▄  ▀█▀  ▀▀█▄▄▄▄▀  ▄██▄▄▄▄▄█

*/

	/* 😺 toolbar theming */
	.wikiEditor-ui-toolbar {
		background: var(--less-dark-grey);
	}
	.wikiEditor-ui-toolbar .group,
	.wikiEditor-ui-toolbar .sections .section,
	.wikiEditor-ui .wikiEditor-ui-top,
	.wikiEditor-ui .wikiEditor-ui-view,
	div.editOptions {
		border-color: var(--more-dark-grey);
	}
	.wikiEditor-ui-toolbar .group .label {
		color: inherit;
	}
	div.editOptions {
		background: var(--less-dark-grey);
		color: inherit;
	}
	/* 😺 haha what if...... just kidding...... *unless?*
	.wikiEditor-ui-text{
		filter: invert(1);
	}
	*/