MediaWiki:Timeless.css: Difference between revisions
From VRChat Wiki
No edit summary |
([sunken eyes, smile] made a couple changes.) |
||
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 14: | 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; | --more-dark-grey-border: #282a2e; | ||
Line 24: | Line 37: | ||
--red: #b32c2c; | --red: #b32c2c; | ||
--yellow: #ecca12; | --yellow: #ecca12; | ||
--green: | --green: #34762e; | ||
--font-header: "Exo 2", "Linux Libertine", "Times New Roman", "Liberation Serif", "Nimbus Roman", "Noto Serif", "Times", sans-serif; | --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; | --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://wiki-files.vrchat.com/ | background-image: url('https://wiki-files.vrchat.com/SiteBackground_VRChat_Home_Summer.webp'); | ||
background-size: 100%; | background-size: 100%; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
Line 54: | Line 62: | ||
} | } | ||
/* ugly serif fonts BEGONE */ | /* 😺 ugly serif fonts BEGONE */ | ||
.mw-body h1, | .mw-body h1, | ||
.mw-body h2, | .mw-body h2, | ||
Line 67: | Line 75: | ||
} | } | ||
.mw-body h2 { | .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 { | .mw-sp-translate-message-documentation { | ||
background-color: transparent; | background-color: transparent; | ||
} | } | ||
.mw-sp-translate-edit-fields fieldset { | .mw-sp-translate-edit-fields fieldset { | ||
border: 3px solid var(--more-dark-grey-border); | border: 3px solid var(--more-dark-grey-border); | ||
border-radius: 8px; | border-radius: 8px; | ||
} | } | ||
.mw-sp-translate-edit-definition { | .mw-sp-translate-edit-definition { | ||
background-color: transparent; | background-color: transparent; | ||
} | } | ||
body { | body { | ||
Line 86: | Line 95: | ||
} | } | ||
.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 { | .mw-message-box p { | ||
margin: 0; | |||
} | |||
} | |||
.mw- | .mw-logevent-loglines { | ||
margin: | margin-bottom: 1em !important; | ||
} | } | ||
.mw- | .mw-message-box-warning { | ||
border-color: var(--yellow); | |||
} | } | ||
.mw-message-box- | .mw-message-box-error { | ||
border-color: var(--red); | |||
} | } | ||
.mw- | 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); | |||
} | |||
span.comment { | |||
opacity: .75; | |||
} | |||
#contentSub { | |||
color: var(--faux-white); | |||
} | |||
/* | /* | ||
Line 135: | Line 143: | ||
*/ | */ | ||
@media screen { | /* 😺 ....??????? */ | ||
a.new, .new a { | @media screen { | ||
color: var(--red); | a.new, .new a { | ||
color: var(--red); | |||
} | |||
} | |||
/* 😺 shift the upper margins to be tighter with the header */ | |||
/* shift the upper margins to be tighter with the header */ | |||
@media screen and (min-width: 1100px) { | @media screen and (min-width: 1100px) { | ||
#mw-content-container { | #mw-content-container { | ||
Line 148: | Line 157: | ||
} | } | ||
/* colors! :D */ | /* 😺 colors! :D */ | ||
#mw-content-container { | #mw-content-container { | ||
background: transparent; | background: transparent; | ||
Line 159: | Line 168: | ||
} | } | ||
/* these are kinda arbitrary */ | /* 😺 these are kinda arbitrary */ | ||
#mw-content a:not(.new, .new a) { | #mw-content a:not(.new, .new a) { | ||
color: var(--link); | color: var(--link); | ||
Line 176: | Line 185: | ||
} | } | ||
/* 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, | ||
Line 185: | Line 194: | ||
filter: invert(1); | filter: invert(1); | ||
} | } | ||
/* [LOUD SCREAMING] */ | /* 😺 [LOUD SCREAMING] */ | ||
.mw-helplink { | .mw-helplink { | ||
color: #942b00 !important; | color: #942b00 !important; | ||
Line 191: | Line 200: | ||
} | } | ||
/* roundin' the corners! (subject to change) */ | /* 😺 roundin' the corners! (subject to change) */ | ||
@media screen and (min-width: 1100px) { | @media screen and (min-width: 1100px) { | ||
#mw-content { | #mw-content { | ||
Line 198: | 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 205: | Line 214: | ||
} | } | ||
/* DROP SHADOWS MY BELOVED */ | /* 😺 DROP SHADOWS MY BELOVED */ | ||
#mw-content { | #mw-content { | ||
box-shadow: 0 0 0.7rem #000; | 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 */ | ||
ul#filetoc, | ul#filetoc, | ||
.toc, | .toc, | ||
Line 226: | Line 235: | ||
} | } | ||
/* general content thumbnail theming */ | /* 😺 general content thumbnail theming */ | ||
.thumbinner { | .thumbinner { | ||
background: var(--less-dark-grey); | background: var(--less-dark-grey); | ||
Line 241: | Line 250: | ||
} | } | ||
/* gallery theming */ | /* 😺 gallery theming */ | ||
.mw-body li.gallerybox div.thumb { | .mw-body li.gallerybox div.thumb { | ||
background-color: var(--less-dark-grey); | background-color: var(--less-dark-grey); | ||
Line 255: | Line 264: | ||
} | } | ||
/* code block theming */ | /* 😺 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 */ | /* 😺 table theming; COLORS ARE ARBITRARY */ | ||
.wikitable, | .wikitable, | ||
.mw-datatable { | .mw-datatable { | ||
Line 282: | Line 297: | ||
background: #212428; | background: #212428; | ||
} | } | ||
.wikitable, | .wikitable, | ||
.wikitable > * > tr > th, | .wikitable > * > tr > th, | ||
Line 291: | Line 306: | ||
border: 2px solid #414b57; | border: 2px solid #414b57; | ||
} | } | ||
/* table multi-line cell text margin fix */ | /* 😺 table multi-line cell text margin fix */ | ||
.wikitable p{ | .wikitable p{ | ||
margin: 0; | margin: 0; | ||
} | } | ||
/* revision history theming fixes */ | /* 😺 revision history theming fixes */ | ||
#pagehistory li.selected{ | #pagehistory li.selected{ | ||
background: #2d3135; | background: #2d3135; | ||
Line 303: | Line 318: | ||
outline: 1px dashed #6e7d8f; | outline: 1px dashed #6e7d8f; | ||
} | } | ||
/* diffs theming */ | /* 😺 diffs theming */ | ||
.diff-context { | .diff-context { | ||
background: var(--less-dark-grey); | background: var(--less-dark-grey); | ||
Line 323: | Line 338: | ||
} | } | ||
/* FIRST CELL MAIN PAGE INLINE */ | /* 😺 FIRST CELL MAIN PAGE INLINE */ | ||
@media screen and (max-width: 1099px) { | @media screen and (max-width: 1099px) { | ||
#first-cell{ | #first-cell{ | ||
Line 340: | Line 355: | ||
} | } | ||
/* center titlebox text on mobile */ | /* 🐢 center titlebox text on mobile */ | ||
@media screen and (max-width: 1099px) { | @media screen and (max-width: 1099px) { | ||
.mw-headline, | .mw-headline, | ||
Line 411: | Line 426: | ||
*/ | */ | ||
/* preferences colors */ | /* 😺 preferences colors */ | ||
.oo-ui-panelLayout-framed { | .oo-ui-panelLayout-framed { | ||
border: 3px solid #444d57; | border: 3px solid #444d57; | ||
Line 436: | Line 451: | ||
color: inherit; | color: inherit; | ||
} | } | ||
/* arbitrary choices for the buttons here, remove "#mw-prefs-form" if applying globally later */ | |||
.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 { | #mw-prefs-form .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { | ||
background: | background: var(--very-dark-grey); | ||
border: 2px solid | border: 2px solid var(--very-dark-grey-border); | ||
} | } | ||
#mw-prefs-form .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { | #mw-prefs-form .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { | ||
Line 446: | Line 467: | ||
} | } | ||
/* dropdowns */ | /* 😺 dropdowns */ | ||
.oo-ui-menuSelectWidget { | .oo-ui-menuSelectWidget { | ||
background: #161b1e; | background: #161b1e; | ||
Line 461: | Line 482: | ||
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.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 { | .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted { | ||
background: | background: var(--very-dark-grey); | ||
} | } | ||
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled, | .oo-ui-dropdownInputWidget.oo-ui-widget-enabled, | ||
Line 480: | Line 501: | ||
border-color: #2f363b; | border-color: #2f363b; | ||
} | } | ||
/* TEMPORARY THEMING JUST TO BE GOOFY, FIGURE OUT WHAT TO DO WITH THIS BUTTON LATER */ | /* 😺 TEMPORARY THEMING JUST TO BE GOOFY, FIGURE OUT WHAT TO DO WITH THIS BUTTON LATER */ | ||
.mw-prefs-buttons { | .mw-prefs-buttons { | ||
background: transparent; | background: transparent; | ||
border: 0; | border: 0; | ||
filter: drop-shadow(0 0 10px #000); /* 😺 DON'T CONVERT THIS ONE PLEASE */ | |||
} | } | ||
.oo-ui-tabOptionWidget { | .oo-ui-tabOptionWidget { | ||
color: #ffffffab; | color: #ffffffab; | ||
} | } | ||
/* search theming */ | /* 😺 search theming */ | ||
.mw-body .mw-search-profile-tabs { | .mw-body .mw-search-profile-tabs { | ||
background: #151719; | background: #151719; | ||
Line 497: | Line 518: | ||
} | } | ||
.oo-ui-textInputWidget .oo-ui-inputWidget-input { | .oo-ui-textInputWidget .oo-ui-inputWidget-input { | ||
background: | background: var(--very-dark-grey); | ||
border: 2px solid | border: 2px solid var(--very-dark-grey-border); | ||
color: #fff; | color: #fff; | ||
} | } | ||
Line 506: | Line 527: | ||
} | } | ||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { | .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { | ||
background: | background: var(--very-dark-grey); | ||
border: 0; | border: 0; | ||
color: inherit; | color: inherit; | ||
Line 513: | Line 534: | ||
background: #141719; | background: #141719; | ||
} | } | ||
/* date search theming, ROUGH FOR MVP- FIX LATER */ | /* 😺 date search theming, ROUGH FOR MVP- FIX LATER */ | ||
.mw-widget-dateInputWidget-calendar { | .mw-widget-dateInputWidget-calendar { | ||
filter: invert(1); | filter: invert(1); | ||
Line 522: | Line 543: | ||
margin: 0; | margin: 0; | ||
} | } | ||
/* notification popups */ | /* 😺 notification popups */ | ||
.mw-notification { | .mw-notification { | ||
background: var(--more-dark-green); | background: var(--more-dark-green); | ||
Line 536: | Line 557: | ||
padding-right: 1.5em; | padding-right: 1.5em; | ||
background-size: 16px; | 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 */ | /* 😺 recent changes filters */ | ||
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle { | .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle { | ||
background: var(--less-dark-grey); | background: var(--less-dark-grey); | ||
Line 555: | Line 581: | ||
border: 2px solid var(--more-dark-grey-border); | border: 2px solid var(--more-dark-grey-border); | ||
} | } | ||
/* tag popups, SNEAKY. */ | /* 😺 tag popups, SNEAKY. */ | ||
.mw-rcfilters-ui-tagItemWidget-popup-content { | .mw-rcfilters-ui-tagItemWidget-popup-content { | ||
color: var(--faux-white); | color: var(--faux-white); | ||
Line 562: | Line 588: | ||
border-top-color: var(--more-dark-grey-border); | border-top-color: var(--more-dark-grey-border); | ||
} | } | ||
/* dropdowns YIPPEE */ | /* 😺 dropdowns YIPPEE */ | ||
.mw-rcfilters-ui-filterMenuHeaderWidget-header, .mw-rcfilters-ui-filterMenuSectionOptionWidget { | .mw-rcfilters-ui-filterMenuHeaderWidget-header, .mw-rcfilters-ui-filterMenuSectionOptionWidget { | ||
background: var(--less-dark-grey); | background: var(--less-dark-grey); | ||
Line 579: | Line 605: | ||
border-bottom: 2px solid var(--less-dark-grey-border); | border-bottom: 2px solid var(--less-dark-grey-border); | ||
} | } | ||
/* kinda reddish tint to signify the muted filter categories on selection */ | /* 😺 kinda reddish tint to signify the muted filter categories on selection */ | ||
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected) { | .mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected) { | ||
background: #322c2c; | background: #322c2c; | ||
Line 586: | Line 612: | ||
color: #c38787; | color: #c38787; | ||
} | } | ||
/* sneaky bastard. */ | /* 😺 sneaky bastard. */ | ||
.mw-rcfilters-collapsed .mw-rcfilters-ui-filterTagMultiselectWidget { | .mw-rcfilters-collapsed .mw-rcfilters-ui-filterTagMultiselectWidget { | ||
border-bottom: 0; | border-bottom: 0; | ||
} | } | ||
/* recent changes settings, RE-DO THESE LATER */ | /* 😺 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 { | .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; | box-shadow: none; | ||
} | } | ||
/* recent changes index legend */ | /* 😺 recent changes index legend */ | ||
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend { | .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend { | ||
background: var(--less-dark-green); | background: var(--less-dark-green); | ||
Line 604: | Line 630: | ||
} | } | ||
/* submission button */ | /* 😺 submission button */ | ||
.oo-ui-messageDialog-content > .oo-ui-window-foot { | .oo-ui-messageDialog-content > .oo-ui-window-foot { | ||
outline: 2px solid var(--less-dark-grey); | outline: 2px solid var(--less-dark-grey); | ||
Line 612: | Line 638: | ||
} | } | ||
/* replace text page (this exists???) */ | /* 😺 replace text page (this exists???) */ | ||
.ext-replacetext-searchoptions { | .ext-replacetext-searchoptions { | ||
background: transparent; | background: transparent; | ||
} | } | ||
/* QUICK HACK (I'M REALLY TIRED); PLEASE ACTUALLY THEME THIS LATER */ | /* 😺 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"] { | #powersearch #target, #powersearch #replacement, .ext-replacetext-searchoptions [name="category"], .ext-replacetext-searchoptions [name="prefix"] { | ||
filter: invert(1); | 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); | |||
} | |||
/* | /* | ||
Line 632: | Line 673: | ||
*/ | */ | ||
/* colors! :D */ | /* 😺 colors! :D */ | ||
@media screen and (min-width: 1100px) { | @media screen and (min-width: 1100px) { | ||
#mw-site-navigation .sidebar-chunk, | #mw-site-navigation .sidebar-chunk, | ||
Line 643: | Line 684: | ||
} | } | ||
/* these are kinda arbitrary */ | /* 😺 these are kinda arbitrary */ | ||
.sidebar-chunk a:not(.new, .new a) { | .sidebar-chunk a:not(.new, .new a) { | ||
color: var(--link); | color: var(--link); | ||
Line 660: | Line 701: | ||
} | } | ||
/* 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 */ | /* 😺 main logo */ | ||
#p-logo { | #p-logo { | ||
display: inline; | display: inline; | ||
Line 682: | Line 723: | ||
} | } | ||
/* DROP SHADOWS MY BELOVED */ | /* 😺 DROP SHADOWS MY BELOVED */ | ||
@media screen and (min-width: 1100px) { | @media screen and (min-width: 1100px) { | ||
#mw-site-navigation .sidebar-chunk, | #mw-site-navigation .sidebar-chunk, | ||
Line 689: | Line 730: | ||
} | } | ||
} | } | ||
/* shortens the margins between sections a bit */ | /* 😺 shortens the margins between sections a bit */ | ||
@media screen and (min-width: 1100px) { | @media screen and (min-width: 1100px) { | ||
#mw-site-navigation .sidebar-chunk .mw-portlet-body, | #mw-site-navigation .sidebar-chunk .mw-portlet-body, | ||
Line 698: | Line 739: | ||
} | } | ||
/* 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; | ||
Line 704: | Line 745: | ||
} | } | ||
/* inverts mobile menus */ | /* 😺 inverts mobile menus */ | ||
#site-navigation h2, #site-tools h2, .tools-inline .dropdown-toggle { | #site-navigation h2, #site-tools h2, .tools-inline .dropdown-toggle { | ||
filter: invert(1); | filter: invert(1); | ||
} | } | ||
/* fix mobile settings menu misalignment */ | /* 😺 fix mobile settings menu misalignment */ | ||
@media screen and (max-width: 1099px) { | @media screen and (max-width: 1099px) { | ||
#site-tools h2 { | #site-tools h2 { | ||
Line 719: | Line 760: | ||
} | } | ||
/* Changes mobile sidebar to match */ | /* 🦇 Changes mobile sidebar to match */ | ||
@media screen and (max-width: 1099px) { | @media screen and (max-width: 1099px) { | ||
.sidebar-inner, | .sidebar-inner, | ||
Line 729: | Line 770: | ||
} | } | ||
} | } | ||
/* adjusts the menu cover (greys out stuff behind the sidebar) to match theming */ | /* 🦇 adjusts the menu cover (greys out stuff behind the sidebar) to match theming */ | ||
@media screen and (max-width: 1099px) { | @media screen and (max-width: 1099px) { | ||
#menus-cover { | #menus-cover { | ||
Line 736: | Line 777: | ||
} | } | ||
} | } | ||
/* fix for mobile borders at bottom */ | /* fix for mobile borders at bottom */ | ||
@media screen and (max-width: 1099px) { | @media screen and (max-width: 1099px) { | ||
Line 757: | Line 798: | ||
*/ | */ | ||
/* fundamental layout adjustments */ | /* 😺 fundamental layout adjustments */ | ||
#mw-header-container { | #mw-header-container { | ||
position: relative; | position: relative; | ||
Line 768: | Line 809: | ||
} | } | ||
/* colors! :D */ | /* 😺 colors! :D */ | ||
#mw-header-container, | #mw-header-container, | ||
#mw-header-hack .color-middle, | #mw-header-hack .color-middle, | ||
Line 784: | Line 825: | ||
} | } | ||
/* 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 818: | Line 859: | ||
} | } | ||
/* account box theming and adjustments */ | /* 😺 account box theming and adjustments */ | ||
@media screen and (min-width: 1100px) { | @media screen and (min-width: 1100px) { | ||
#user-tools { | #user-tools { | ||
Line 833: | Line 874: | ||
} | } | ||
/* [sobbing] [throwing up] */ | /* 😺 [sobbing] [throwing up] */ | ||
#personal h2, #personal h2 span { | #personal h2, #personal h2 span, #pt-notifications-alert, #pt-notifications-notice { | ||
filter: invert(1); | filter: invert(1); | ||
} | } | ||
/* account box adjustments */ | /* 😺 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 */ | 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; | min-width: 0; | ||
display: flex; | display: flex; | ||
Line 846: | Line 887: | ||
} | } | ||
/* account name fix */ | /* 😺 account name fix */ | ||
#personal { | #personal { | ||
padding: 0; | padding: 0; | ||
} | } | ||
#personal h2 { | #personal h2 { | ||
padding: .25em 0 0 1.5em; /* magic numbers */ | 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 868: | Line 915: | ||
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 882: | Line 971: | ||
*/ | */ | ||
/* 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 891: | Line 980: | ||
} | } | ||
/* FIGURE OUT POTENTIALLY HAVING CUSTOM IMAGES IN THE FOOTER LATER | /* 😺 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%); | 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) */ | /* 😺 not really the footer *per-se* but mobile categories theming (it's at the bottom of the page) */ | ||
#content-bottom-stuff { | #content-bottom-stuff { | ||
background: #10171c; | background: #10171c; | ||
Line 912: | Line 1,001: | ||
} | } | ||
/* 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 { | ||
Line 944: | Line 1,033: | ||
*/ | */ | ||
/* 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 { | ||
Line 964: | Line 1,053: | ||
} | } | ||
/* fix awkward right-borders */ | /* 😺 fix awkward right-borders */ | ||
.oo-ui-toolbar-actions .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle { | .oo-ui-toolbar-actions .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle { | ||
border: 0; | border: 0; | ||
Line 972: | Line 1,061: | ||
} | } | ||
/* invert the icons (stinky) */ | /* 😺 invert the icons (stinky) */ | ||
.oo-ui-iconElement-icon:not(.tool-active, .tool-active span), | .oo-ui-iconElement-icon:not(.tool-active, .tool-active span), | ||
.oo-ui-indicator-down{ | .oo-ui-indicator-down{ | ||
Line 978: | Line 1,067: | ||
} | } | ||
/* round the corners */ | /* 😺 round the corners */ | ||
.mw-body .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 */ | /* 😺 image gallery box theming */ | ||
.ve-ui-mwGalleryDialog-highlighted-image { | .ve-ui-mwGalleryDialog-highlighted-image { | ||
background: transparent; | background: transparent; | ||
Line 1,000: | Line 1,089: | ||
} | } | ||
/* UPLOAD BOX THEMING */ | /* 😺 UPLOAD BOX THEMING */ | ||
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame, | .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 { | .oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame { | ||
Line 1,024: | Line 1,113: | ||
color: inherit; | color: inherit; | ||
} | } | ||
/* UPLOAD BOX ERROR */ | /* 😺 UPLOAD BOX ERROR */ | ||
.oo-ui-processDialog-errors { | .oo-ui-processDialog-errors { | ||
background: #0009; | background: #0009; | ||
Line 1,038: | Line 1,127: | ||
} | } | ||
/* THIS IS SO FUCKING CURSED */ | /* 😺 THIS IS SO FUCKING CURSED */ | ||
figure[typeof~="mw:File/Thumb"], | figure[typeof~="mw:File/Thumb"], | ||
figure[typeof~="mw:File/Thumb"] > figcaption { | figure[typeof~="mw:File/Thumb"] > figcaption { | ||
Line 1,054: | Line 1,143: | ||
} | } | ||
/* popups */ | /* 🍷 popups */ | ||
.mwe-popups { | .mwe-popups { | ||
border: solid 3px var(--less-dark-grey-border); | border: solid 3px var(--less-dark-grey-border); | ||
border-radius: 15px; | border-radius: 15px; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.mwe-popups, .mwe-popups-container, .mwe-popups .mwe-popups-extract { | .mwe-popups, .mwe-popups-container, .mwe-popups .mwe-popups-extract { | ||
background: var(--less-dark-grey) !important; | background: var(--less-dark-grey) !important; | ||
color: var(--faux-white); | color: var(--faux-white); | ||
} | } | ||
.mwe-popups .mwe-popups-extract[dir="ltr"]::after { | .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 { | .mw-pt-languages-ui { | ||
font-weight: normal; | |||
} | |||
} | |||
.mw-pt-languages- | .mw-pt-languages-selected { | ||
font-weight: bold; | |||
} | } | ||
.mw-pt- | .mw-pt-progress { | ||
padding: 0; | |||
} | background: none; | ||
} | |||
.mw-pt-progress { | .mw-pt-progress::after { | ||
display: inline-block; | |||
content: ""; | |||
} | width: .6em; | ||
height: .6em; | |||
border-radius: 100%; | |||
margin-left: .25em; | |||
} | |||
.mw-pt-progress::after { | .mw-pt-progress--complete::after { | ||
background-color: var(--green); | |||
} | |||
} | |||
.mw-pt-progress-- | .mw-pt-progress--high::after { | ||
background-color: #e8d222; | |||
} | } | ||
.mw-pt-progress-- | .mw-pt-progress--med::after { | ||
background-color: var(--yellow); | |||
} | } | ||
.mw-pt-progress-- | .mw-pt-progress--low::after, .mw-pt-progress--stub::after { | ||
background-color: var(--red); | |||
} | } | ||
.mw-pt- | .mw-pt-translate-header { | ||
border-bottom: none; | |||
} | } | ||
.mw | .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 { | .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 .tux-message-item-compact { | .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 | .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- | .tux-messagelist .tux-message-pagemode .tux-pagemode-translation { | ||
color:var(--faux-white); | |||
} | } | ||
.tux-messagelist | .tux-messagelist { | ||
background-color:transparent; | |||
} | color:var(--faux-white); | ||
} | |||
.tux- | .tux-action-bar { | ||
background-color:transparent; | |||
color:var(--faux-white); | |||
} | box-shadow:none; | ||
} | |||
.tux-action-bar { | .tux-action-bar button { | ||
background-image: none; | |||
} | |||
} | |||
.tux- | .tux-messagetable-header { | ||
border-bottom:3px solid var(--more-dark-grey-border); | |||
} | } | ||
.tux- | .tux-message-selector li.selected { | ||
border-bottom: 3px solid #36c; | |||
} | margin-bottom: -2px; | ||
} | |||
.tux- | .tux-statsbar .tux-statsbar-info { | ||
color: var(--faux-white); | |||
} | |||
} | |||
.tux- | .tux-editor-header { | ||
color: | color: unset; | ||
} | } | ||
.tux-breadcrumb { | |||
color: unset; | |||
} | |||
.tux- | .tux-breadcrumb__item--aggregate { | ||
color: var(--link); | |||
} | } | ||
.tux- | .uls-menu { | ||
color: | background-color: var(--less-dark-grey); | ||
} | border: 3px solid var(--less-dark-grey-border); | ||
.tux- | border-radius: 16px; | ||
color: | 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); | |||
} | |||
.tux- | /* 😺 loading bar */ | ||
color: var(-- | .tux-messagetable-loader { | ||
} | background: transparent; | ||
box-shadow: none; | |||
color: var(--faux-white); | |||
} | |||
.uls- | /* 😺 lang selection button */ | ||
background-color: transparent | .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); | |||
} | |||
/* | /* | ||
Line 1,237: | Line 1,512: | ||
*/ | */ | ||
/* | /* 😺 toolbar theming */ | ||
.wikiEditor-ui-toolbar { | .wikiEditor-ui-toolbar { | ||
background: var(--less-dark-grey); | background: var(--less-dark-grey); | ||
Line 1,257: | Line 1,530: | ||
color: inherit; | color: inherit; | ||
} | } | ||
/* haha what if...... just kidding...... *unless?* | /* 😺 haha what if...... just kidding...... *unless?* | ||
.wikiEditor-ui-text{ | .wikiEditor-ui-text{ | ||
filter: invert(1); | filter: invert(1); | ||
} | } | ||
*/ | */ | ||
Revision as of 23:27, 30 August 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 */
.thumbinner {
background: var(--less-dark-grey);
border: solid var(--less-dark-grey-border);
border-radius: 10px;
}
.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;
}
/* 😺 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;
}
/*
▀██ ██▀ ▀██▀▀▀▀█ ▀██▀▀█▄ ▀██▀ █ ▀██ ▀██▀ ▀█▀ ▀██▀ ▀██▀ █▀ ▀██▀
███ ███ ██ ▄ ██ ██ ██ ███ ▀█▄ ▀█▄ ▄▀ ██ ██ ▄▀ ██
█▀█▄▄▀██ ██▀▀█ ██ ██ ██ █ ██ ██ ██ █ ██ ██▀█▄ ██
█ ▀█▀ ██ ██ ██ ██ ██ ▄▀▀▀▀█▄ ███ ███ ██ ██ ██ ██
▄█▄ █ ▄██▄ ▄██▄▄▄▄▄█ ▄██▄▄▄█▀ ▄██▄ ▄█▄ ▄██▄ █ █ ▄██▄ ▄██▄ ██▄ ▄██▄
*/
/* 😺 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;
}
/* 😺 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);
}
/*
▄█▀▀▀█▄█████▀███▀▀▀██▄ ▀███▀▀▀███▀███▀▀▀██▄ ██ ▀███▀▀▀██▄ ▄█▀▀▀█▄█
▄██ ▀█ ██ ██ ▀██▄ ██ ▀█ ██ ██ ▄██▄ ██ ▀██▄▄██ ▀█
▀███▄ ██ ██ ▀██ ██ █ ██ ██ ▄█▀██▄ ██ ▄██ ▀███▄
▀█████▄ ██ ██ ██ ██████ ██▀▀▀█▄▄ ▄█ ▀██ ███████ ▀█████▄
▄ ▀██ ██ ██ ▄██ ██ █ ▄ ██ ▀█ ████████ ██ ██▄ ▄ ▀██
██ ██ ██ ██ ▄██▀ ██ ▄█ ██ ▄█ █▀ ██ ██ ▀██▄██ ██
█▀█████▀▄████▄████████▀ ▄██████████████████▄███▄ ▄████▄████▄ ▄███▄▀█████▀
*/
/* 😺 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 2px #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-iconElement-icon:not(.tool-active, .tool-active span),
.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);
}
/*
▄█▀▀▀▄█ ▄▄█▀▀██ ▀██▀ ▀█▀ ▀██▀▀█▄ ▄▄█▀▀▀▄█ ▀██▀▀▀▀█
██▄▄ ▀ ▄█▀ ██ ██ █ ██ ██ ▄█▀ ▀ ██ ▄
▀▀███▄ ██ ██ ██ █ ██▀▀█▀ ██ ██▀▀█
▄ ▀██ ▀█▄ ██ ██ █ ██ █▄ ▀█▄ ▄ ██
█▀▄▄▄▄█▀ ▀▀█▄▄▄█▀ ▀█▄▄▀ ▄██▄ ▀█▀ ▀▀█▄▄▄▄▀ ▄██▄▄▄▄▄█
*/
/* 😺 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);
}
*/