MediaWiki:Timeless.css: Difference between revisions
From VRChat Wiki
No edit summary |
m (π₯΄) Β |
||
(91 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
/* | |||
__Β Β Β _______Β _______Β Β Β Β Β ___ _Β Β _Β _______ _Β Β Β Β Β Β Β Β _Β Β Β Β Β Β Β | |||
\ \Β Β / /Β __ \ / ____\ \Β Β Β Β / (_) |Β (_) |__Β __(_)Β Β Β Β Β Β Β | |Β Β Β Β Β Β Β | |||
Β \ \Β / /| |__) | |Β Β \ \Β /\Β / / _| | ___Β Β | |Β _ _ __ ___Β ___| | ___Β ___ ___ | |||
Β \ \/ / |Β _Β /| |Β Β Β \ \/Β \/ / | | |/ / |Β Β | |Β | | '_ ` _ \ / _ \ |/ _ \/ __/ __| | |||
Β Β \Β /Β | | \ \| |____Β \Β /\Β /Β | |Β <| |Β Β | |Β | | | | | | |Β __/ |Β __/\__ \__ \ | |||
Β Β \/Β |_|Β \_\\_____|Β \/Β \/Β |_|_|\_\_|Β Β |_|Β |_|_| |_| |_|\___|_|\___||___/___/ | |||
* | 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 { | :root { | ||
Line 17: | Line 25: | ||
--less-dark-green: #07343f; | --less-dark-green: #07343f; | ||
--less-dark-green-border: #086c84; | --less-dark-green-border: #086c84; | ||
--very-dark-grey: #101315; | |||
--very-dark-grey-border: #232a2e; | |||
--more-dark-grey: #181b1f; | --more-dark-grey: #181b1f; | ||
--more-dark-grey-border: #282a2e; | |||
--less-dark-grey: #252a30; | --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 */ | Β | ||
/* πΊ establish faux white text globally */ | |||
body { | body { | ||
color: var(--faux-white); | color: var(--faux-white); | ||
} | } | ||
/* main BG, INVESTIGATE SCALING AND POSSIBLY DITHERING THE GRADIENT */ | /* πΊ main BG, INVESTIGATE SCALING AND POSSIBLY DITHERING THE GRADIENT */ | ||
body { | body { | ||
background: #10171c; | background: #10171c; | ||
background-image: url('https:// | background-image: url('https://wiki-files.vrchat.com/SiteBackground_VRChat_Home_Summer.webp'); | ||
background-size: | background-size: 100%; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: top center; | background-position: top center; | ||
Line 36: | Line 59: | ||
#mw-wrapper { | #mw-wrapper { | ||
background: linear-gradient(to bottom, | 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 */ | /* πΊ ugly serif fonts BEGONE */ | ||
.mw-body h1, | .mw-body h1, | ||
.mw-body h2, | .mw-body h2, | ||
Line 48: | Line 71: | ||
.mw-body dt, | .mw-body dt, | ||
#personal h2 { | #personal h2 { | ||
font-family: | font-family: var(--font-header); | ||
font-weight: 600; | 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 { | body { | ||
font-family: | 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); | |||
} | |||
/* | |||
ββββββββββ ββββββββ ββββββββββ βββββΒ ββββ | ββββββββββ ββββββββ ββββββββββ βββββΒ ββββ | ||
Line 69: | Line 143: | ||
*/ | */ | ||
/* colors! :D */ | /* πΊ ....π·??????? */ | ||
@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 { | #mw-content-container { | ||
background: transparent; | background: transparent; | ||
Line 77: | Line 165: | ||
background: var(--more-dark-grey); | background: var(--more-dark-grey); | ||
color: var(--faux-white); | color: var(--faux-white); | ||
border: solid | border: solid var(--more-dark-grey-border); | ||
} | } | ||
/* these are kinda arbitrary */ | /* πΊ these are kinda arbitrary */ | ||
#mw-content a { | #mw-content a:not(.new, .new a) { | ||
color: | color: var(--link); | ||
} | } | ||
#mw-content a:hover { | #mw-content a:hover:not(.new, .new a) { | ||
color: | color: var(--link-hover); | ||
} | } | ||
#mw-content a:visited { | #mw-content a:visited:not(.new, .new a) { | ||
color: | color: var(--link-visited); | ||
} | } | ||
#mw-content a:visited:hover { | #mw-content a:visited:hover:not(.new, .new a) { | ||
color: | color: var(--link-visited-hover); | ||
} | } | ||
/* CURSED icon inversion, I'm fucking INSANE */ | /* πΊ CURSED icon inversion, I'm fucking INSANE */ | ||
#p-namespaces a, | #p-namespaces a, | ||
#p-namespaces a span, | #p-namespaces a span, | ||
#p-views a, | #p-views a, | ||
#p-views a span { | #p-views a span, | ||
.mw-editsection, | |||
.mw-editsection a { | |||
filter: invert(1); | |||
} | |||
/* πΊ [LOUD SCREAMING] */ | |||
.mw-helplink { | |||
color: #942b00 !important; | |||
filter: invert(1); | filter: invert(1); | ||
} | } | ||
/* | /* πΊ roundin' the corners! (subject to change) */ | ||
Β | |||
@media screen and (min-width: 1100px) { | @media screen and (min-width: 1100px) { | ||
#mw-content { | #mw-content { | ||
Line 119: | Line 207: | ||
} | } | ||
/* vertically aligning the top of the body content box with the sidebars */ | /* πΊ vertically aligning the top of the body content box with the sidebars */ | ||
@media screen and (min-width: 1100px) { | @media screen and (min-width: 1100px) { | ||
#mw-content-wrapper { | #mw-content-wrapper { | ||
Line 126: | Line 214: | ||
} | } | ||
/* DROP SHADOWS MY BELOVED */ | /* πΊ DROP SHADOWS MY BELOVED */ | ||
#mw-content { | #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 */ | /* πΊ move page titles post-namespace a *bit* to the right in order to space 'em better */ | ||
.mw-page-title-separator { | .mw-page-title-separator { | ||
margin-right: 0.25em; | margin-right: 0.25em; | ||
} | } | ||
/* general TOC theming */ | /* πΊ general TOC theming */ | ||
.toc { | ul#filetoc, | ||
background: var(--less-dark- | .toc, | ||
border | .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 */ | /* πΊ 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 { | .thumbinner { | ||
background: var(--less-dark- | background: var(--less-dark-grey); | ||
border: solid var(--less-dark- | border: solid var(--less-dark-grey-border); | ||
border-radius: 10px; | border-radius: 10px; | ||
margin-left: unset; | |||
margin-right: unset; | |||
} | } | ||
.thumbinner .thumbimage, | .thumbinner .thumbimage, | ||
.thumbborder { | .thumbborder { | ||
border: 0; | border: 0; | ||
filter: drop-shadow(0 0 | box-shadow: 0 0 0.1rem #000; | ||
} | |||
.thumb:not(.gallerybox div.thumb) { | |||
filter: drop-shadow(0 0 6px #000); | |||
} | } | ||
/* code block theming */ | /* πΊ 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 { | code { | ||
background: var(--less-dark-grey); | background: var(--less-dark-grey); | ||
border: 1px solid var(--more-dark-grey); | border: 1px solid var(--more-dark-grey); | ||
color: var(--faux-white); | 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; | |||
} | |||
} | |||
/* | |||
ββββ βββΒ βββ ββββββββΒ βββββββΒ βββββββΒ Β βββββββΒ ββββ βββ | ββββ βββΒ βββ ββββββββΒ βββββββΒ βββββββΒ Β βββββββΒ ββββ βββ | ||
Line 174: | Line 381: | ||
*/ | */ | ||
.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); | |||
} | |||
Β | |||
Β | |||
/* | |||
Β ββββββββββββββββββββββ ββββββββββββββββββββΒ Β ββΒ Β ββββββββββΒ ββββββββ | Β ββββββββββββββββββββββ ββββββββββββββββββββΒ Β ββΒ Β ββββββββββΒ ββββββββ | ||
Line 188: | Line 710: | ||
*/ | */ | ||
/* colors! :D */ | /* πΊ colors! :D */ | ||
#mw-site-navigation .sidebar-chunk, | @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 */ | /* πΊ these are kinda arbitrary */ | ||
.sidebar-chunk a { | .sidebar-chunk a:not(.new, .new a) { | ||
color: | color: var(--link); | ||
} | } | ||
.sidebar-chunk a:hover { | .sidebar-chunk a:hover:not(.new, .new a) { | ||
color: | color: var(--link-hover); | ||
} | } | ||
.sidebar-chunk a:visited { | .sidebar-chunk a:visited:not(.new, .new a) { | ||
color: | color: var(--link-visited); | ||
} | } | ||
.sidebar-chunk a:visited:hover { | .sidebar-chunk a:visited:hover:not(.new, .new a) { | ||
color: | color: var(--link-visited-hover); | ||
} | } | ||
/* round the corners for the sidebars a bit */ | /* πΊ round the corners for the sidebars a bit */ | ||
.sidebar-chunk { | .sidebar-chunk { | ||
border-radius: 15px; | border-radius: 15px; | ||
} | } | ||
/* | /* πΊ main logo */ | ||
#p-logo { | #p-logo { | ||
display: inline; | 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) { | @media screen and (min-width: 1100px) { | ||
.sidebar-chunk { | #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) */ | /* πΊ make the "related navigation" bar equal to the main nav bar (WHY WAS IT DIFFERENT) */ | ||
#mw-related-navigation { | #mw-related-navigation { | ||
width: 14em; | width: 14em; | ||
flex: 0 0 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; | |||
} | |||
} | |||
/* | |||
ββββββΒ ββββββββββββββββΒ Β Β ββΒ Β ββββββββββ ββββββββββββββββββββ | ββββββΒ ββββββββββββββββΒ Β Β ββΒ Β ββββββββββ ββββββββββββββββββββ | ||
Line 251: | Line 834: | ||
*/ | */ | ||
/* fundamental layout adjustments */ | /* πΊ fundamental layout adjustments */ | ||
#mw-header-container { | #mw-header-container { | ||
position: relative; | position: relative; | ||
padding-top: | padding-top: 5em; | ||
} | } | ||
#mw-header { | #mw-header { | ||
max-width: | max-width: 115em; | ||
justify-content: right; | justify-content: right; | ||
} | } | ||
/* colors! :D */ | /* πΊ colors! :D */ | ||
#mw-header-container | #mw-header-container, | ||
Β | |||
#mw-header-hack .color-middle, | #mw-header-hack .color-middle, | ||
#mw-header-hack .color-left, | #mw-header-hack .color-left, | ||
Line 277: | Line 857: | ||
} | } | ||
#mw-header-container { | #mw-header-container { | ||
color: #fff; | color: #fff; | ||
} | } | ||
/* title text removal */ | /* πΊ title text removal */ | ||
#p-logo-text { | #p-logo-text { | ||
display: none; | display: none; | ||
} | } | ||
/* searchbar theming and adjustments */ | /* πΊ searchbar theming and adjustments */ | ||
#simpleSearch { | #simpleSearch { | ||
background: var(--less-dark-grey); | background: var(--less-dark-grey); | ||
Line 306: | Line 885: | ||
} | } | ||
/* account box theming and adjustments */ | #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 { | #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 { | #personal h2 { | ||
padding: .25em 0 0 1.5em; | padding: .25em 0 0 1.5em; /* πΊ magic numbers */ | ||
overflow: hidden; | |||
white-space: nowrap; | |||
text-overflow: ellipsis; | |||
} | } | ||
/* dropdown theming | /* πΊ dropdown theming */ | ||
#personal .dropdown { | #personal .dropdown { | ||
background: | background: var(--very-dark-grey); | ||
border: solid # | border: solid var(--very-dark-grey-border); | ||
} | |||
#pt-uls .uls-trigger::before { | |||
filter: invert(1); | |||
} | } | ||
/* I HATE CHEVRONS MADE LIKE THIS */ | /* πΊ I HATE CHEVRONS MADE LIKE THIS */ | ||
#personal .dropdown:before { | #personal .dropdown:before { | ||
border-bottom: 10px solid transparent; | border-bottom: 10px solid transparent; | ||
Line 339: | Line 951: | ||
border-bottom-color: #252e34; | border-bottom-color: #252e34; | ||
top: -10px; | 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 */ | |||
} | } | ||
/* | |||
ββββββββββ ββββββββΒ ββββββββ βββββββββββββββββββββββββββββββ | ββββββββββ ββββββββΒ ββββββββ βββββββββββββββββββββββββββββββ | ||
Line 353: | Line 1,007: | ||
*/ | */ | ||
/* colors! :D */ | /* πΊ colors! :D */ | ||
.mw-footer-container { | .mw-footer-container { | ||
border-top: solid 1px var(--less-dark-grey); | border-top: solid 1px var(--less-dark-grey); | ||
Line 362: | Line 1,016: | ||
} | } | ||
/* πΊ FIGURE OUT POTENTIALLY HAVING CUSTOM IMAGES IN THE FOOTER LATER | |||
.mw-footer-container::after { | .mw-footer-container::after { | ||
background: linear-gradient(120deg, transparent 20%, #1a1d1c 30%); | |||
} | } */ | ||
/* center it a bit more */ | /* πΊ center it a bit more */ | ||
.mw-footer { | .mw-footer { | ||
max-width: 80em; | 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 */ | /* πΊ fix ghost margin at bottom of page */ | ||
.mw-footer ul, | .mw-footer ul, | ||
.mw-footer li { | .mw-footer li { | ||
margin: 0; | margin: 0; | ||
padding: .3em 0; | padding: .3em 0; | ||
} | |||
body{ | |||
margin: 0 !important; | |||
} | } | ||
Β | /* | ||
ββββββββββββββββββββ βββββββββββββββββ ββββββββ ββββββββββ | ββββββββββββββββββββ βββββββββββββββββ ββββββββ ββββββββββ | ||
Line 391: | Line 1,059: | ||
*/ | */ | ||
/* | |||
ββββΒ βββ ββββΒ βββββββΒ ββββΒ βββΒ Β βΒ Β ββββ | ββββΒ βββ ββββΒ βββββββΒ ββββΒ βββΒ Β βΒ Β ββββ | ||
Line 401: | Line 1,069: | ||
*/ | */ | ||
/* colors! :D */ | /* πΊ colors! :D */ | ||
.oo-ui-toolbar-bar, | .oo-ui-toolbar-bar, | ||
.oo-ui-toolbar-position-top>.oo-ui-toolbar-bar { | .oo-ui-toolbar-position-top>.oo-ui-toolbar-bar { | ||
background-color: var(--less-dark-grey); | background-color: var(--less-dark-grey); | ||
} | } | ||
.oo-ui-menuToolGroup { | .oo-ui-menuToolGroup { | ||
border: 0; | border: 0; | ||
} | } | ||
.oo-ui-popupToolGroup.oo-ui-widget-enabled>.oo-ui-popupToolGroup-handle:hover, | .oo-ui-popupToolGroup.oo-ui-widget-enabled>.oo-ui-popupToolGroup-handle:hover, | ||
.oo-ui-tool.oo-ui-widget-enabled>.oo-ui-tool-link:hover { | .oo-ui-tool.oo-ui-widget-enabled>.oo-ui-tool-link:hover { | ||
background: #0000003d; | 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) */ | /* πΊ invert the icons (stinky) */ | ||
.oo-ui-iconElement-icon, | /* .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- | .oo-ui-indicator-down{ | ||
filter: invert(1); | filter: invert(1); | ||
} | } | ||
/* round the corners */ | /* πΊ round the corners */ | ||
.oo-ui-toolbar-bar { | .mw-body .oo-ui-toolbar-bar { | ||
border-radius: 15px 15px 0 0; | 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; | |||
} | |||
Β | |||
Β | |||
/* | |||
Β βββββββΒ βββββββΒ ββββΒ βββ βββββββΒ Β ββββββββ ββββββββ | Β βββββββΒ βββββββΒ ββββΒ βββ βββββββΒ Β ββββββββ ββββββββ | ||
Line 439: | Line 1,554: | ||
*/ | */ | ||
/* | /* πΊ 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); | |||
} | |||
*/ |
Latest revision as of 22:02, 19 September 2024
/*
__ _______ _______ ___ _ _ _______ _ _
\ \ / / __ \ / ____\ \ / (_) | (_) |__ __(_) | |
\ \ / /| |__) | | \ \ /\ / / _| | ___ | | _ _ __ ___ ___| | ___ ___ ___
\ \/ / | _ /| | \ \/ \/ / | | |/ / | | | | | '_ ` _ \ / _ \ |/ _ \/ __/ __|
\ / | | \ \| |____ \ /\ / | | <| | | | | | | | | | | __/ | __/\__ \__ \
\/ |_| \_\\_____| \/ \/ |_|_|\_\_| |_| |_|_| |_| |_|\___|_|\___||___/___/
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);
}
*/