MediaWiki:Common.css: Difference between revisions

From Space Station 14 Wiki
Browse history interactively
(thumbnail image and source editor syntax highlighting from User:Aliser)
(a bunch of stuff from User:Aliser)
Line 18: Line 18:
     --bg-color-light-x3: hsl(240, 7%, 20%);
     --bg-color-light-x3: hsl(240, 7%, 20%);
     --bg-color-light-x4: hsl(240, 7%, 23%);
     --bg-color-light-x4: hsl(240, 7%, 23%);
    --bg-color-light-x5: hsl(240, 7%, 26%);
    --bg-color-light-x6: hsl(240, 7%, 32%);


     --border-color-light: hsl(240, 7%, 35%);
     --border-color-light: hsl(240, 7%, 35%);
Line 24: Line 26:


     --text-color: lightgrey;
     --text-color: lightgrey;
    --text-color-grayed-out: gray;


     --code-color-bg: #1b1e1f;
     --code-color-bg: #1b1e1f;
Line 37: Line 40:
     --action-color-dark: var(--blue-color-dark);
     --action-color-dark: var(--blue-color-dark);
     --action-color-dark-x2: var(--blue-color-dark-x2);
     --action-color-dark-x2: var(--blue-color-dark-x2);
--warning-color: hsl(54 100% 15% / 1);
--warning-color-border: hsl(60, 55%, 30%);
--danger-color: var(--red-color);
--danger-color-dark: var(--red-color-dark);
--danger-color-dark-x2: var(--red-color-dark-x2);
--danger-color-border: var(--red-color-border);


     --blue-color-light-x2: hsl(220, 66%, 63%);
     --blue-color-light-x2: hsl(220, 66%, 63%);
Line 50: Line 61:
     --red-color: hsl(0, 75%, 50%);
     --red-color: hsl(0, 75%, 50%);
     --red-color-dark: hsl(0, 67%, 42%);
     --red-color-dark: hsl(0, 67%, 42%);
    --red-color-dark-x2: hsl(0, 62%, 36%);
    --red-color-border: hsl(0, 47%, 22%);
    /* ============= */
    /* ICONS GO HERE */
    /* ============= */
   
    /* white table sort icon */
    --icon-table-sort-white: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjEiIGhlaWdodD0iOSI+PGRlZnM+PGZpbHRlciBpZD0iZGFya3JlYWRlci1pbWFnZS1maWx0ZXIiPjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwLjI0OSAtMC42MTQgLTAuNjcyIDAuMDAwIDEuMDM1IC0wLjY0NiAwLjI4OCAtMC42NjQgMC4wMDAgMS4wMjAgLTAuNjM2IC0wLjYwOSAwLjI1MCAwLjAwMCAwLjk5NCAwLjAwMCAwLjAwMCAwLjAwMCAxLjAwMCAwLjAwMCIgLz48L2ZpbHRlcj48L2RlZnM+PGltYWdlIHdpZHRoPSIyMSIgaGVpZ2h0PSI5IiBmaWx0ZXI9InVybCgjZGFya3JlYWRlci1pbWFnZS1maWx0ZXIpIiB4bGluazpocmVmPSJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBEOTRiV3dnZG1WeWMybHZiajBpTVM0d0lpQmxibU52WkdsdVp6MGlWVlJHTFRnaVB6NEtQSE4yWnlCNGJXeHVjejBpYUhSMGNEb3ZMM2QzZHk1M015NXZjbWN2TWpBd01DOXpkbWNpSUhkcFpIUm9QU0l5TVNJZ2FHVnBaMmgwUFNJNUlpQjJhV1YzUW05NFBTSXdJREFnTWpFZ09TSStDZ2s4Y0dGMGFDQmtQU0p0TVRRdU5TQTFMVFFnTkMwMExUUjZiVEF0TVMwMExUUXROQ0EwZWlJdlBnbzhMM04yWno0SyIgLz48L3N2Zz4=");
    /* wiki help button icon - transparent question mark in circle of cosmoBlue */
    --icon-wiki-help-cosmoBlue: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQloZWxwCgk8L3RpdGxlPgoJPHBhdGggZmlsbD0icmdiKDIxMiAyMzYgMjU1KSIgZD0iTTEwIDBhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTAgMHptMSAxNkg5di0yaDJ6bTIuNzEtNy42YTIuNjQgMi42NCAwIDAgMS0uMzMuNzQgMy4xNiAzLjE2IDAgMCAxLS40OC41NWwtLjU0LjQ4Yy0uMjEuMTgtLjQxLjM1LS41OC41MmEyLjU0IDIuNTQgMCAwIDAtLjQ3LjU2QTIuMyAyLjMgMCAwIDAgMTEgMTJhMy43OSAzLjc5IDAgMCAwLS4xMSAxSDkuMDhhOC45IDguOSAwIDAgMSAuMDctMS4yNSAzLjI4IDMuMjggMCAwIDEgLjI1LS45IDIuNzkgMi43OSAwIDAgMSAuNDEtLjY3IDQgNCAwIDAgMSAuNTgtLjU4Yy4xNy0uMTYuMzQtLjMuNTEtLjQ0YTMgMyAwIDAgMCAuNDMtLjQ0IDEuODMgMS44MyAwIDAgMCAuMy0uNTUgMiAyIDAgMCAwIC4xMS0uNzIgMi4wNiAyLjA2IDAgMCAwLS4xNy0uODYgMS43MSAxLjcxIDAgMCAwLTEtLjkgMS43IDEuNyAwIDAgMC0uNS0uMSAxLjc3IDEuNzcgMCAwIDAtMS41My42OCAzIDMgMCAwIDAtLjUgMS44Mkg2LjE2YTQuNzQgNC43NCAwIDAgMSAuMjgtMS42OCAzLjU2IDMuNTYgMCAwIDEgLjgtMS4yOSAzLjg4IDMuODggMCAwIDEgMS4yOC0uODNBNC41OSA0LjU5IDAgMCAxIDEwLjE4IDRhNC40NCA0LjQ0IDAgMCAxIDEuNDQuMjMgMy41MSAzLjUxIDAgMCAxIDEuMTUuNjUgMy4wOCAzLjA4IDAgMCAxIC43OCAxLjA2IDMuNTQgMy41NCAwIDAgMSAuMjkgMS40NSAzLjM5IDMuMzkgMCAwIDEtLjEzIDEuMDF6Ii8+Cjwvc3ZnPg==");
    /* navbar search magnifying glass search icon in greyish colors */
    --icon-navbar-search-greyish: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQlzZWFyY2gKCTwvdGl0bGU+Cgk8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IndoaXRlIiBkPSJNMTIuMiAxMy42YTcgNyAwIDEgMSAxLjQtMS40bDUuNCA1LjQtMS40IDEuNC01LjQtNS40ek0xMyA4QTUgNSAwIDEgMSAzIDhhNSA1IDAgMCAxIDEwIDB6Ii8+Cjwvc3ZnPgo=");
    /* transparent exclamation mark in a circle filled with cosmoGreen */
    --icon-popup-notice-info-cosmoGreen: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQlub3RpY2UKCTwvdGl0bGU+Cgk8cGF0aCBmaWxsPSJyZ2IoMTAsIDIxMiwgOTgpIiBkPSJNMTAgMGExMCAxMCAwIDEgMCAxMCAxMEExMCAxMCAwIDAgMCAxMCAwem0xIDE2SDl2LTJoMnptMC00SDlWNGgyeiIvPgo8L3N2Zz4=");
   
    /* transparent exclamation mark in a circle filled with some kind of orange */
    --icon-popup-notice-warn-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHRpdGxlPiBhbGVydCA8L3RpdGxlPiA8cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Ik02IDBhNiA2IDAgMCAwLTYgNiA2IDYgMCAwIDAgNiA2IDYgNiAwIDAgMCA2LTYgNiA2IDAgMCAwLTYtNnpNNSAyaDJ2NUg1VjJ6bTAgNmgydjJINVY4eiIvPiA8L3N2Zz4=");
    /* an icon to use to mark external links, in cosmoGreen */
    --icon-external-link-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGV4dGVybmFsIGxpbmsgPC90aXRsZT48cGF0aCBmaWxsPSJyZ2IoMTAsIDIxMiwgOTgpIiBkPSJNMTcgMTdIM1YzaDVWMUgzYTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0ydi01aC0yeiIvPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Im0xMSAxIDMuMjkgMy4yOS01LjczIDUuNzMgMS40MiAxLjQyIDUuNzMtNS43M0wxOSA5VjF6Ii8+PC9zdmc+");
    /* an asterisk icon used to mark required template fields, in yellow */
    --icon-asterisk-yellow: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IHJlcXVpcmVkIDwvdGl0bGU+PHBhdGggZmlsbD0iaHNsKDM5LCAxMDAlLCA1MCUpIiBkPSJNOC41IDBoM3YyMGgtM3oiLz48cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Ik0xOS40IDEzLjcgMTggMTYuMy42IDYuMyAyIDMuN3oiLz48cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Im0xOCAzLjcgMS40IDIuNi0xNy4zIDEwLTEuNS0yLjZ6Ii8+PC9zdmc+");
   
    /* source editor icon - double brackets [[]], cosmoGreen color */
    --icon-source-editor-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IFdpa2l0ZXh0IDwvdGl0bGU+PGcgZmlsbD0icmdiKDEwLCAyMTIsIDk4KSI+PHBhdGggZD0iTTEgM3YxNGgzdi0ySDNWNWgxVjN6bTQgMHYxNGg0di0ySDdWNWgyVjN6bTExIDB2MmgxdjEwaC0xdjJoM1Yzem0tNSAwdjJoMnYxMGgtMnYyaDRWM3oiLz48L2c+PC9zdmc+");
    /* source editor mode switch icon in active state (which you open mode switch menu) - a pencil, in cosmo green */
    --icon-source-editor-mode-switch-active-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGVkaXQgPC90aXRsZT48cGF0aCBmaWxsPSJyZ2IoMTAsIDIxMiwgOTgpIiBkPSJtMTYuNzcgOCAxLjk0LTJhMSAxIDAgMCAwIDAtMS40MWwtMy4zNC0zLjNhMSAxIDAgMCAwLTEuNDEgMEwxMiAzLjIzek0xIDE0LjI1VjE5aDQuNzVsOS45Ni05Ljk2LTQuNzUtNC43NXoiLz48L3N2Zz4=");
    /* source editor syntax highlight icon in active state (when syntax higlighting is on) - a pen, in cosmo green */
    --icon-source-editor-syntax-highlight-mode-active-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGhpZ2hsaWdodCA8L3RpdGxlPjxnIGZpbGw9IiMzNmMiPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Ik0xNS4xNCAyLjI3YTEgMSAwIDAgMC0xLjQxIDBsLTEwIDEwYTEgMSAwIDAgMCAwIDEuNDFMNCAxNGwtMyA0aDVsMS0xIC4yOS4yOWExIDEgMCAwIDAgMS40MSAwbDEwLTEwYTEgMSAwIDAgMCAuMDMtMS40M3pNNyAxNWwtMi0yIDktOSAyIDJ6Ii8+PC9nPjwvc3ZnPg==");
    /* a puzzle icon present in templates in visual editor, in white */
    --icon-template-puzzle-white: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IHB1enpsZSA8L3RpdGxlPjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJ3aGl0ZSIgY3g9IjE3IiBjeT0iMTAiIHI9IjMiLz48cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Ik0xMC41OCAzQTMgMyAwIDAgMSAxMSA0LjVhMyAzIDAgMCAxLTYgMEEzIDMgMCAwIDEgNS40MiAzSDF2MTJhMiAyIDAgMCAwIDIgMmgxMlYzeiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=");
    /* tabber icon present in visual editor → insert, in black */
    --icon-tabber-black: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPiA8dGl0bGU+dGFiYmVyPC90aXRsZT4gPHBhdGggZmlsbD0iIzA5YWJmMSIgZD0iTTE4IDJIMkMuOSAyIDAgMi45IDAgNHYxMmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjRjMC0xLjEtLjktMi0yLTJ6bTEgNWgtOGMtLjYgMC0xLS40LTEtMVYzaDhjLjYgMCAxIC40IDEgMXYzeiIvPiA8L3N2Zz4=");
    /* dropdown icon (arrow-like), in cosmo blue */
    --icon-dropdown-cosmoBlue: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48dGl0bGU+IGRvd24gPC90aXRsZT48cGF0aCBmaWxsPSIjZDZlZGZmIiBkPSJNOS45IDIuOSA2IDYuOCAyLjEgMi45IDEgNGw1IDUgNS01eiIvPjwvc3ZnPg==");
}
}


/* ============ */
/* ============ */
/* #region GENERAL STYLES */
/* #region Uncategorized */
/* ============ */
/* ============ */


code {
/* Reset italic styling set by user agent */
     color: var(--code-color-text);
cite,
    background-color: var(--code-color-bg);
dfn {
    border: 1px solid var(--code-color-border);
     font-style: inherit;
}
}


pre {
/* Straight quote marks for <q> */
     color: var(--code-color-text);
q {
    background-color: var(--code-color-bg);
     quotes: '"' '"' "'" "'";
    border: 1px solid var(--code-color-border);
}
}


a {
/* Avoid collision of blockquote with floating elements by swapping margin and padding */
    color: var(--link-color);
blockquote {
}
     overflow: hidden;
 
     margin: 1em 0;
a:hover {
     padding: 0 40px;
    /* keep the same color */
     color: var(--link-color);
     /* keep underline */
     text-decoration: underline;
}
}


a:visited {
/* Consistent size for <small>, <sub> and <sup> */
     color: var(--link-color-visited);
small {
     font-size: 85%;
}
}


a:visited:hover {
.mw-body-content sub,
    /* keep the same color */
  .mw-body-content sup,
    color: var(--link-color-visited);
  span.reference /* for Parsoid */ {
    /* keep underline */
     font-size: 80%;
     text-decoration: underline;
}
}


/* big links on the main page */
/* Same spacing for indented and unindented paragraphs on talk pages */
.biglink > a:hover {
.ns-talk .mw-body-content dd {
     color: #2952a3;
    margin-top: 0.4em;
     margin-bottom: 0.4em;
}
}


/* big links on the main page */
/* Main page fixes */
.biglink > a:visited:hover {
#interwiki-completelist {
     color: #1e3666;
     font-weight: bold;
}
}


/* ============ */
.biglink {
/* #endregion */
    font-family: "Teko";
/* ============ */
    font-style: oblique 10deg;
    font-variant-caps: small-caps;
    text-shadow: #1b1b1f 2px 3px, #a00d 3px 5px;
}


/* ============ */
/* Reduce page jumps by hiding collapsed/dismissed content */
/* #region IMAGES & GALLERIES */
.client-js .mw-special-Watchlist #watchlist-message,
/* ============ */
  .client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child),
 
  /* Hide charinsert base for those not using the gadget */
  #editpage-specialchars {
    display: none;
}


/* images with "thumb" type */
/* Adds padding above Watchlist announcements where new recentchanges/watchlist filters are enabled */
figure[typeof~='mw:File/Thumb'],
.mw-rcfilters-enabled .mw-specialpage-summary {
/* images with "frame" type */
    margin-top: 1em;
figure[typeof~='mw:File/Frame'],
/* images with "thumb" type → caption */
figure[typeof~='mw:File/Thumb'] > figcaption,
/* images with "frame" type  → caption */
figure[typeof~='mw:File/Frame'] > figcaption {
background-color: var(--bg-color-light-x2);
border-color: var(--border-color);
}
}


/* images with "thumb" type → image */
/* Highlight linked elements (such as clicked references) in blue */
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
.citation:target {
/* images with "frame" type → image */
    background-color: rgba(0, 127, 255, 0.133);
figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
border-color: var(--border-color-light);
}
}


/* images with "thumb" type → open image icon */
/* Styling for citations. Breaks long urls, etc., rather than overflowing box */
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,  
.citation {
/* images with "thumb" type → ????? (something alike to the above) */
    word-wrap: break-word;
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
filter: invert(100%);
}
}


/* #endregion */
/* Make the list of references smaller
  * Keep in sync with Template:Refbegin/styles.css
  * And Template:Reflist/styles.css
  */
ol.references {
    font-size: 90%;
    margin-bottom: 0.5em;
}


/* ============ */
/* Style for horizontal lists (separator following item).
/* #region PAGE DIFF */
@source mediawiki.org/wiki/Snippets/Horizontal_lists
/* ============ */
@revision 8 (2016-05-21)
 
@author [[User:Edokter]]
/* page versions diff → diff entry (one cell) */
  */
.diff .diff-context {
.hlist dl,
     background: var(--code-color-bg);
.hlist ol,
    color: var(--text-color);
.hlist ul {
     border-color: var(--border-color);
     margin: 0;
     padding: 0;
}
}


/* page versions diff → cell (deleted text) */
/* Display list items inline */
.diff .diff-deletedline {
.hlist dd,
     border-color: var(--red-color);
.hlist dt,
.hlist li {
     margin: 0; /* don't trust the note that says margin doesn't work with inline
  * removing margin: 0 makes dds have margins again */
    display: inline;
}
}


/* page versions diff → cell (added text) */
/* Display nested lists inline */
.diff .diff-addedline {
.hlist.inline,
     border-color: var(--green-color);
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
     display: inline;
}
}


/* page versions diff → cell → inline diff */
/* Hide empty list items */
.diff .diffchange {
.hlist .mw-empty-li {
     background-color: var(--blue-color-dark-x2);
     display: none;
}
}


/* ============ */
/* Generate interpuncts */
/* #endregion */
.hlist dt:after {
/* ============ */
     content: ": ";
 
/* ============ */
/* #region =📕= SOURCE EDITOR =📕= */
/* ============ */
 
/* existing styles */
 
textarea {
     background: var(--bg-color-light-x3);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


/* new styles */
/**
 
  * Note hlist style usage differs in Minerva and is defined in core as well!
:root {
  * Please check Minerva desktop (and Minerva.css) when changing
     /* todo */
  * See https://phabricator.wikimedia.org/T213239
     --se-mode-icon: unset;
  */
.hlist dd:after,
.hlist li:after {
     content: " · ";
     font-weight: bold;
}
}


/* page editor content */
.hlist dd:last-child:after,
.mw-editform #wpTextbox1 {
.hlist dt:last-child:after,
    background-color: var(--bg-color-light-x2);
.hlist li:last-child:after {
     color: var(--text-color);
     content: none;
}
}


/* page editor footer section */
/* Add parentheses around nested lists */
.mw-editform .editOptions {
.hlist dd dd:first-child:before,
    background-color: var(--bg-color-light);
.hlist dd dt:first-child:before,
     color: var(--text-color);
.hlist dd li:first-child:before,
.hlist dt dd:first-child:before,
.hlist dt dt:first-child:before,
.hlist dt li:first-child:before,
.hlist li dd:first-child:before,
.hlist li dt:first-child:before,
.hlist li li:first-child:before {
     content: " (";
    font-weight: normal;
}
}


/* page editor footer section → edit summary */
.hlist dd dd:last-child:after,
.mw-editform .editOptions input#wpSummary {
.hlist dd dt:last-child:after,
    background-color: var(--bg-color-light-x2);
.hlist dd li:last-child:after,
     color: var(--text-color);
.hlist dt dd:last-child:after,
     border-color: var(--border-color-light);
.hlist dt dt:last-child:after,
.hlist dt li:last-child:after,
.hlist li dd:last-child:after,
.hlist li dt:last-child:after,
.hlist li li:last-child:after {
     content: ")";
     font-weight: normal;
}
}


/* page editor footer section → edit summary hover */
/* Put ordinals in front of ordered list items */
.mw-editform .editOptions input#wpSummary:hover {
.hlist ol {
     border-color: var(--border-color-light-x2);
     counter-reset: listitem;
}
}


/* page editor footer section "save changes" button */
.hlist ol > li {
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpSave {
     counter-increment: listitem;
     background-color: var(--action-color);
    border-color: var(--border-color);
}
}


/* page editor footer section "save changes" button hover */
.hlist ol > li:before {
.mw-editform
     content: " " counter(listitem) "\a0";
    .editOptions
    .editButtons
    .oo-ui-buttonElement-button#wpSave:hover {
     background-color: var(--action-color-light);
}
}


/* page editor footer section "save changes" button active */
.hlist dd ol > li:first-child:before,
.mw-editform
.hlist dt ol > li:first-child:before,
    .editOptions
.hlist li ol > li:first-child:before {
    .editButtons
     content: " (" counter(listitem) "\a0";
    .oo-ui-buttonElement-button#wpSave:active {
     background-color: var(--action-color-dark);
}
}


/* page editor footer section "show preview/changes" buttons */
/* Unbulleted lists */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview,
.plainlist ol,
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff,
.plainlist ul {
  /* "Manage TemplateData" button above the text editor when editing a template
     line-height: inherit;
  !important directives are used to override the defaults */
     list-style: none none;
  .tdg-editscreen-main .oo-ui-buttonElement-button {
     margin: 0;
     background-color: var(--bg-color-light) !important;
     color: var(--text-color) !important;
     border: 1px solid var(--bg-color-light-x4) !important;
}
}


/* page editor → footer section → show preview/changes buttons hover */
.plainlist ol li,
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:hover,
.plainlist ul li {
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff:hover,
     margin-bottom: 0;
  /* "Manage TemplateData" button above the text editor when editing a template
  !important directives are used to override the defaults */
  .tdg-editscreen-main .oo-ui-buttonElement-button:hover {
     background-color: var(--action-color-light) !important;
    /* override of the default selector */
    color: var(--text-color) !important;
}
}


/* page editor → footer section → show preview/changes buttons active */
/* Default style for navigation boxes */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:active,
.navbox {
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff:active,
    /* Navbox container style */
  /* "Manage TemplateData" button above the text editor when editing a template
    box-sizing: border-box;
  !important directives are used to override the defaults */
    border: 1px solid #a2a9b1;
  .tdg-editscreen-main .oo-ui-buttonElement-button:active {
    width: 100%;
     background-color: var(--action-color-dark) !important;
    clear: both;
     /* override of the default selector */
    font-size: 88%;
    color: var(--text-color) !important;
    text-align: center;
     padding: 1px;
     margin: 1em auto 0; /* Prevent preceding content from clinging to navboxes */
}
}


/* text editor toolbar */
.navbox .navbox {
.wikiEditor-ui-toolbar {
     margin-top: 0; /* No top margin for nested navboxes */
     background-color: var(--bg-color-light);
    color: var(--text-color);
}
}


/* text editor toolbar icons - inverting from black to white */
.navbox + .navbox {
.wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
     margin-top: -1px; /* Single pixel border between adjacent navboxes */
.wikiEditor-ui-toolbar .oo-ui-indicator-down {
     filter: invert(100%);
}
}


/* text editor toolbar icons on hover */
.navbox-inner,
.wikiEditor-ui-toolbar .oo-ui-buttonElement-button:hover,
.navbox-subgroup {
  /* text editor toolbar mode switch icon button on hover */
     width: 100%;
  .wikiEditor-ui-toolbar .oo-ui-widget .oo-ui-popupToolGroup-handle:hover {
}
     /* !important directive makes the override much easier here */
    background-color: var(--bg-color-light-x3) !important;


     /* more "snappier" transition */
.navbox-group,
     transition: background-color 50ms ease-out, color 50ms ease-out,
.navbox-title,
        border-color 50ms ease-out, box-shadow 50ms ease-out;
.navbox-abovebelow {
     padding: 0.25em 1em; /* Title, group and above/below styles */
     line-height: 1.5em;
    text-align: center;
}
}


/* text editor toolbar mode switch icon button (when active) */
th.navbox-group {
.wikiEditor-ui-toolbar
    /* Group style */
     .oo-ui-popupToolGroup-active
     white-space: nowrap;
     .oo-ui-popupToolGroup-handle {
     /* @noflip */
     background-color: var(--bg-color-light-x4);
     text-align: right;
}
}


/* text editor toolbar mode switch icon button → icon (when active) */
.navbox,
.wikiEditor-ui-toolbar
.navbox-subgroup {
    .oo-ui-popupToolGroup-active
     background-color: #fdfdfd; /* Background color */
    .oo-ui-popupToolGroup-handle
    .oo-ui-iconElement-icon {
    filter: none;
     background-image: url("data:image/svg+xml, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3E%20edit%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22rgb(10%2C%20212%2C%2098)%22%20d%3D%22m16.77%208%201.94-2a1%201%200%200%200%200-1.41l-3.34-3.3a1%201%200%200%200-1.41%200L12%203.23zM1%2014.25V19h4.75l9.96-9.96-4.75-4.75z%22%2F%3E%3C%2Fsvg%3E");
}
}


/* text editor toolbar → syntax highlight button → icon (when active) */
.navbox-list {
span.oo-ui-iconElement-icon.oo-ui-icon-highlight.oo-ui-image-progressive {
     line-height: 1.5em;
     /* disable icon filter applied earlier */
     border-color: #fdfdfd; /* Must match background color */
     filter: none;
    /* replace with a proper image instead */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGhpZ2hsaWdodCA8L3RpdGxlPjxnIGZpbGw9IiMzNmMiPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Ik0xNS4xNCAyLjI3YTEgMSAwIDAgMC0xLjQxIDBsLTEwIDEwYTEgMSAwIDAgMCAwIDEuNDFMNCAxNGwtMyA0aDVsMS0xIC4yOS4yOWExIDEgMCAwIDAgMS40MSAwbDEwLTEwYTEgMSAwIDAgMCAuMDMtMS40M3pNNyAxNWwtMi0yIDktOSAyIDJ6Ii8+PC9nPjwvc3ZnPg==");
}
}


/* text editor toolbar labels */
/* cell spacing for navbox cells */
.wikiEditor-ui-toolbar .group .label {
tr + tr > .navbox-abovebelow,
     color: var(--text-color);
tr + tr > .navbox-group,
     filter: brightness(80%);
tr + tr > .navbox-image,
tr + tr > .navbox-list {
     /* Borders above 2nd, 3rd, etc. rows */
     border-top: 2px solid #fdfdfd; /* Must match background color */
}
}


/* text editor toolbar labels with .tool-select class (they act as select) */
.navbox th,
.wikiEditor-ui-toolbar .group .tool-select .label {
.navbox-title {
     color: var(--text-color);
     background-color: #ccccff; /* Level 1 color */
    filter: none;
}
}


/* text editor toolbar label (that acts as select) options container */
.navbox-abovebelow,
.wikiEditor-ui-toolbar .group .tool-select .options {
th.navbox-group,
     background-color: var(--bg-color-light-x2);
.navbox-subgroup .navbox-title {
     background-color: #ddddff; /* Level 2 color */
}
}


/* text editor toolbar label (that acts as select) options */
.navbox-subgroup .navbox-group,
.wikiEditor-ui-toolbar .group .tool-select .options .option,
.navbox-subgroup .navbox-abovebelow {
  /* text editor toolbar → group lists inside tabs → options */
     background-color: #e6e6ff; /* Level 3 color */
  .wikiEditor-ui-toolbar .booklet>.index {
}
     color: var(--text-color);


    /* a new prop, introduced because of hover */
.navbox-even {
     transition: background-color 50ms ease-in;
     background-color: #f7f7f7; /* Even row striping */
}
}


/* text editor toolbar → special characters tab → special characters */
.navbox-odd {
.wikiEditor-ui-toolbar .page-characters div span {
     background-color: transparent; /* Odd row striping */
    color: var(--text-color);
}
     background-color: var(--bg-color-light);
    border-color: var(--border-color);


     /* a new prop, introduced because of hover */
.navbox .hlist td dl,
    transition: background-color 50ms ease-in;
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
     padding: 0.125em 0; /* Adjust hlist padding in navboxes */
}
}


/* text editor toolbar label (that acts as select) options on hover
/* Styling for JQuery makeCollapsible, matching that of collapseButton */
  note: no hover is defined by default, this is an addition */
.mw-parser-output .mw-collapsible-toggle {
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover,
    font-weight: normal;
  /* text editor toolbar → group lists inside tabs → options on hover */
    /* @noflip */
  .wikiEditor-ui-toolbar .booklet>.index> :hover,
    text-align: right;
  /* text editor toolbar → special characters tab → special characters on hover */
     padding-right: 0.2em;
  .wikiEditor-ui-toolbar .page-characters div span:hover {
     padding-left: 0.2em;
     background-color: var(--bg-color-light-x2);
     transition: background-color 50ms ease-out;
}
}


/* text editor toolbar → special characters tab → special characters on hover */
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
.wikiEditor-ui-toolbar .page-characters div span:hover {
    /* @noflip */
     border-color: var(--border-color-light);
    float: left;
    /* @noflip */
     text-align: left;
}
}


/* text editor toolbar → group lists inside tabs → active option */
/* Infobox template style */
.wikiEditor-ui-toolbar .booklet > .index > .current {
.infobox {
     color: var(--link-color);
     border: 1px solid #a2a9b1;
     background-color: var(--bg-color-light-x4);
    border-spacing: 3px;
     transition: background-color 50ms ease-out;
     background-color: #f8f9fa;
}
     color: black;
 
    /* @noflip */
/* text editor toolbar tab buttons
    margin: 0.5em 0 0.5em 1em;
  the color property to the selected tab since it has higher priority */
    padding: 0.2em;
.wikiEditor-ui-toolbar .tabs span.tab a {
    /* @noflip */
     color: var(--link-color);
     float: right;
 
    /* @noflip */
     transition: background-color 100ms ease-out;
     clear: right;
    font-size: 88%;
    line-height: 1.5em;
    width: 22em;
}
}


/* text editor toolbar selected tab */
.infobox-header,
.wikiEditor-ui-toolbar .tabs span.tab a.current,
  .infobox-label,
   /* text editor toolbar selected tab, visited */
  .infobox-above,
   .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
  .infobox-full-data,
     color: var(--link-color);
  .infobox-data,
    background-color: var(--bg-color-light-x4);
  .infobox-below,
 
   .infobox-subheader,
    transition: background-color 100ms ease-in;
   .infobox-image,
  .infobox-navbar,
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox th,
  .infobox td {
     vertical-align: top;
}
}


/* an arrow icon to the left in text editor toolbar tabs */
.infobox-label,
.wikiEditor-ui-toolbar .tabs span.tab a::before {
  .infobox-data,
     filter: invert(100%);
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox th,
  .infobox td {
     /* @noflip */
    text-align: left;
}
}


/* editor footer → checkbox */
/* Remove .infobox when element selectors above are removed */
.oo-ui-checkboxInputWidget [type="checkbox"] + span {
.infobox .infobox-above,
     background-color: var(--bg-color-light-x2);
  .infobox .infobox-title,
     border-color: var(--border-color-light);
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox caption {
     font-size: 125%;
    font-weight: bold;
     text-align: center;
}
}


/* editor footer → checkbox hover */
.infobox-title,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:hover + span {
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
     border-color: var(--border-color-light-x2);
  .infobox caption {
     padding: 0.2em;
}
}


/* editor footer → checkbox active */
/* Remove .infobox when element selectors above are removed */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
.infobox .infobox-header,
    [type="checkbox"]:active
.infobox .infobox-subheader,
    + span {
.infobox .infobox-image,
    background-color: var(--action-color);
.infobox .infobox-full-data,
    /* same as the bg color to make it seamless
.infobox .infobox-below {
  !important here overrides the more lighter color in hover state*/
     text-align: center;
    border-color: var(--action-color) !important;
    /* disabling the default box shadow, which just doubles the border when active/in focus  */
     box-shadow: none;
}
}


/* editor footer → checkbox focus */
/* Remove .infobox when element selectors above are removed */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:focus + span {
.infobox .infobox-navbar {
     /* background-color: var(--action-color-dark-x2er); */
     /* @noflip */
    text-align: right;
}
}


/* editor footer → checkbox (checked) */
/* Normal font styling for wikitable row headers with scope="row" tag */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
.wikitable.plainrowheaders th[scope="row"] {
    [type="checkbox"]:checked
    font-weight: normal;
     + span {
     /* @noflip */
     background-color: var(--action-color-light);
     text-align: left;
}
}


/* editor footer → checkbox (checked) hover */
/* Lists in wikitable data cells are always left-aligned */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
.wikitable td ul,
    [type="checkbox"]:checked
.wikitable td ol,
     + span:hover {
.wikitable td dl {
     background-color: var(--action-color-light-x2);
     /* @noflip */
     text-align: left;
}
}


/* editor footer → checkbox (checked) active */
/* Fix for hieroglyphs specificity issue in infoboxes ([[phab:T43869]]) */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
table.mw-hiero-table td {
    [type="checkbox"]:checked
    vertical-align: middle;
    + span:active {
}
     background-color: var(--action-color-dark);
 
/* Change the external link icon to an Adobe icon for all PDF files */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
     background: url("//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif")
        no-repeat right;
    /* @noflip */
    padding-right: 18px;
}
}


/* legal stuff above the buttons at the footer of the editor
/* Messagebox templates */
  note: this just adds additional spacing between the text and the checkboxes for visual clarity */
.messagebox {
#editpage-copywarn {
    border: 1px solid #a2a9b1;
     margin-top: 1rem;
    background-color: #f8f9fa;
    width: 80%;
     margin: 0 auto 1em auto;
    padding: 0.2em;
}
}


/* override for page editor toolbar → help tab → table → th */
.messagebox.merge {
.wikiEditor-ui-toolbar .page-table th {
    border: 1px solid #c0b8cc;
    background-color: #f0e5ff;
     text-align: center;
     text-align: center;
    color: var(--text-color);
}
}


/* override for page editor toolbar → help tab → table → td */
.messagebox.cleanup {
.wikiEditor-ui-toolbar .page-table td {
     border: 1px solid #9f9fff;
     color: var(--text-color);
    background-color: #efefff;
    text-align: center;
}
}


/* override page editor toolbar → tabs → left section
.messagebox.standard-talk {
  note: both these overrides are done just
    border: 1px solid #c0c090;
  to make the help section a little larger and thus more readable */
    background-color: #f8eaba;
.wikiEditor-ui-toolbar .booklet>.index,
     margin: 4px auto;
  /* override page editor toolbar → tabs → right section */
  .wikiEditor-ui-toolbar .booklet .pages {
     height: 12rem;
}
}


/* editor → toolbar → mode switch button → popup (that opens on click) */
/* For old WikiProject banners inside banner shells. */
.wikiEditor-ui-toolbar .oo-ui-popupToolGroup-tools {
.mbox-inside .standard-talk {
     background-color: var(--bg-color-light);
    border: 1px solid #c0c090;
     background-color: #f8eaba;
    width: 100%;
    margin: 2px 0;
    padding: 2px;
}
}


/* editor → toolbar → mode switch button → popup on click → inactive mode (span) */
.messagebox.small {
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled {
    width: 238px;
     transition: background-color 100ms ease-in;
    font-size: 85%;
     color: var(--text-color);
    /* @noflip */
}
    float: right;
     clear: both;
     /* @noflip */
    margin: 0 0 1em 1em;
    line-height: 1.25em;
}


/* editor → toolbar → mode switch button → popup on click → inactive mode (span) hover */
.messagebox.small-talk {
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled:hover,
    width: 238px;
  /* editor → toolbar → mode switch button → popup on click → inactive mode (a) active */
    font-size: 85%;
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled .oo-ui-tool-link:active {
    /* @noflip */
     color: var(--text-color);
    float: right;
     background-color: var(--bg-color-light-x2);
    clear: both;
     transition: background-color 100ms ease-out;
    /* @noflip */
     margin: 0 0 1em 1em;
     line-height: 1.25em;
     background-color: #f8eaba;
}
}


/* editor → toolbar → mode switch button → popup on click → inactive mode (a) hover */
/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
.wikiEditor-ui-toolbar
th.mbox-text,
    .oo-ui-toolbar-popups
td.mbox-text {
     .oo-ui-widget-enabled
     /* The message body cell(s) */
     .oo-ui-tool-link:hover {
     border: none;
     /* duplicate background, removing it */
    /* @noflip */
     background-color: transparent;
     padding: 0.25em 0.9em; /* 0.9em left/right */
     width: 100%; /* Make all mboxes the same width regardless of text length */
}
}


/* editor → toolbar → mode switch button → popup on click → selected mode (span) */
td.mbox-image {
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active,
    /* The left image cell */
  /* editor → toolbar → mode switch button → popup on click → selected mode (a) */
    border: none;
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active .oo-ui-tool-link,
    /* @noflip */
  /* editor → toolbar → mode switch button → popup on click → selected mode (a) active */
    padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active .oo-ui-tool-link:active {
     text-align: center;
     background-color: var(--bg-color-light-x3);
}
}


/* editor → toolbar → mode switch button → popup on click → selected mode (a) hover */
td.mbox-imageright {
.wikiEditor-ui-toolbar
    /* The right image cell */
     .oo-ui-toolbar-popups
    border: none;
     .oo-ui-widget-enabled.oo-ui-tool-active
     /* @noflip */
     .oo-ui-tool-link:hover {
     padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */
    background-color: var(--bg-color-light-x3);
     text-align: center;
}
}


/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → title */
td.mbox-empty-cell {
.wikiEditor-ui-toolbar
     /* An empty narrow cell */
     .oo-ui-toolbar-popups
     border: none;
     .oo-ui-widget-enabled.oo-ui-tool-name-editModeVisual.oo-ui-tool-active
     padding: 0;
     .oo-ui-tool-title {
     width: 1px;
     color: var(--text-color);
}
}


/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → icon */
/* Article message box styles */
.wikiEditor-ui-toolbar
table.ambox {
     .oo-ui-toolbar-popups
    margin: 0 10%; /* 10% = Will not overlap with other elements */
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeVisual.oo-ui-tool-active
    border: 1px solid #a2a9b1;
    .oo-ui-iconElement-icon {
    /* @noflip */
     /* hue rotate  to ≈strongBlue (instead of a separate image) */
    border-left: 10px solid #36c; /* Default "notice" blue */
    filter: hue-rotate(-23.06deg) saturate(150%) brightness(120%);
    background-color: #fbfbfb;
     box-sizing: border-box;
}
 
/* Single border between stacked boxes. */
table.ambox + table.ambox,
table.ambox + .mw-empty-elt + table.ambox {
     margin-top: -1px;
}
}


/* editor → toolbar → mode switch button → popup on click → source editing mode active → title */
.ambox th.mbox-text,
.wikiEditor-ui-toolbar
.ambox td.mbox-text {
    .oo-ui-toolbar-popups
     /* The message body cell(s) */
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeSource.oo-ui-tool-active
     padding: 0.25em 0.5em; /* 0.5em left/right */
     .oo-ui-tool-title {
     color: var(--text-color);
}
}


/* editor → toolbar → mode switch button → popup on click → source editing mode active → icon */
.ambox td.mbox-image {
.wikiEditor-ui-toolbar
     /* The left image cell */
    .oo-ui-toolbar-popups
     /* @noflip */
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeSource.oo-ui-tool-active
     padding: 2px 0 2px 0.5em; /* 0.5em left, 0px right */
    .oo-ui-iconElement-icon {
     /* cosmoGreen "source editing" mode icon */
    background-image: linear-gradient(transparent, transparent),
        var(--se-mode-icon);
     /* disable the hue rotating filter since the correct icon is provided */
     filter: none;
}
}


/* #region borders */
.ambox td.mbox-imageright {
 
    /* The right image cell */
/* editor toolbar and content combined */
    /* @noflip */
.wikiEditor-ui .wikiEditor-ui-view,
    padding: 2px 0.5em 2px 0; /* 0px left, 0.5em right */
  /* editor toolbar section that open with tabs */
  .wikiEditor-ui-toolbar .sections .section,
  /* editor toolbar label (that acts as select) options container */
  .wikiEditor-ui-toolbar .group .tool-select .options,
  /* text editor toolbar → special characters tab → special characters */
  .wikiEditor-ui-toolbar .page-characters div span,
  /* editor → toolbar → mode switch button → popup (that opens on click) */
  .wikiEditor-ui-toolbar .oo-ui-popupToolGroup-tools,
  /* editor footer */
  div.editOptions,
  /* summary input */
  div.editOptions #wpSummary,
  /* content body */
  #wpTextbox1 {
    border: 1px solid var(--border-color-light);
}
}


/* editor toolbar groups of buttons, except the last one */
table.ambox-notice {
.wikiEditor-ui-toolbar .group:not(:last-child) {
    /* @noflip */
     border-right: 1px solid var(--border-color-light);
     border-left: 10px solid #36c; /* Blue */
}
}


/* editor toolbar last groups of buttons */
table.ambox-speedy {
.wikiEditor-ui-toolbar .group:last-child {
    /* @noflip */
     border-left: 1px solid var(--border-color-light);
     border-left: 10px solid #b32424; /* Red */
    background-color: #fee7e6; /* Pink */
}
}


/* this is the last button on the main row of the editor toolbar */
table.ambox-delete {
.wikiEditor-ui-toolbar .section-main .group:last-child {
    /* @noflip */
     border-right: 1px solid var(--border-color-light);
     border-left: 10px solid #b32424; /* Red */
}
}


/* editor toolbar */
table.ambox-content {
.wikiEditor-ui .wikiEditor-ui-top {
    /* @noflip */
     border-bottom: 1px solid var(--border-color-light);
     border-left: 10px solid #f28500; /* Orange */
}
}


/* editor toolbar → mode switch button
table.ambox-style {
  it has extra border on the bottom */
    /* @noflip */
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
     border-left: 10px solid #fc3; /* Yellow */
     border-bottom: none;
}
}


/* ================================================ */
table.ambox-move {
/* #region <syntaxhighlight> CODE BLOCKS  */
    /* @noflip */
/* ================================================ */
    border-left: 10px solid #9932cc; /* Purple */
}


:root {
table.ambox-protection {
     --synt-high--color-darkCreamy: #262421;
     /* @noflip */
    --synt-high--color-lightCreamy: hsl(38, 5%, 45%);
    border-left: 10px solid #a2a9b1; /* Gray-gold */
}


    --synt-high--color-comment: var(--synt-high--color-lightCreamy);
/* Image message box styles */
    --synt-high--color-err: #ff1a94;
table.imbox {
     --synt-high--color-operator: #f92672;
     margin: 4px 10%;
     --synt-high--color-punctuation: #f8f8f2;
     border-collapse: collapse;
     --synt-high--color-string: #e6db74;
     border: 3px solid #36c; /* Default "notice" blue */
    --synt-high--color-date: var(--synt-high--color-string);
     background-color: #fbfbfb;
    /* names for things such as variables, functions, classes, etc. */
     box-sizing: border-box;
     --synt-high--color-name: #a6e22e;
     /* literals, mostly numbers, some string stuff too. */
    --synt-high--color-literal: #ae81ff;
    /* keywords and constants */
    --synt-high--color-keyword: #66d9ef;
}
}


/* Modified version of https://github.com/richleland/pygments-css/blob/master/monokai.css */
.imbox .mbox-text .imbox {
 
    /* For imboxes inside imbox-text cells. */
/* Code block container  */
     margin: 0 -0.5em; /* 0.9 - 0.5 = 0.4em left/right.        */
.mw-content-ltr.mw-highlight-lines pre {
     display: block; /* Fix for webkit to force 100% width.  */
     background-color: var(--code-color-bg);
    color: var(--code-color-text);
     border-color: var(--code-color-border);
    font-size: 90%;
 
    /* targets the line numbers bg, when they (line numbers) are present */
    box-shadow: rgb(34, 37, 39) 2.75em 0px 0px inset;
}
}


/* Code block → line numbers */
.mbox-inside .imbox {
.mw-highlight .linenos {
    /* For imboxes inside other templates. */
     color: rgb(165, 155, 142);
     margin: 4px;
}
}


/* Highlighted Lines */
table.imbox-notice {
.mw-highlight .hll {
     border: 3px solid #36c; /* Blue */
     background-color: var(--action-color);
}
}


.mw-highlight {
table.imbox-speedy {
     background: #272822;
     border: 3px solid #b32424; /* Red */
     color: #f8f8f2;
     background-color: #fee7e6; /* Pink */
}
}


/* Error */
table.imbox-delete {
.mw-highlight .err {
     border: 3px solid #b32424; /* Red */
     color: var(--synt-high--color-err);
    background-color: hsl(328, 40%, 16%);
}
}


/* Keyword */
table.imbox-content {
.mw-highlight .k {
     border: 3px solid #f28500; /* Orange */
     color: var(--synt-high--color-keyword);
}
}


/* Literal */
table.imbox-style {
.mw-highlight .l {
     border: 3px solid #fc3; /* Yellow */
     color: var(--synt-high--color-literal);
}
}


/* Name */
table.imbox-move {
.mw-highlight .n {
     border: 3px solid #9932cc; /* Purple */
     color: #f8f8f2;
}
}


/* Operator */
table.imbox-protection {
.mw-highlight .o {
     border: 3px solid #a2a9b1; /* Gray-gold */
     color: var(--synt-high--color-operator);
}
}


/* Punctuation */
table.imbox-license {
.mw-highlight .p {
    border: 3px solid #88a; /* Dark gray */
    color: var(--synt-high--color-punctuation);
    background-color: #f7f8ff; /* Light gray */
}
}


/* Comment */
table.imbox-featured {
.mw-highlight .c {
     border: 3px solid #cba135; /* Brown-gold */
     color: var(--synt-high--color-comment);
}
}


/* Comment.Hashbang */
/* Category message box styles */
.mw-highlight .ch {
table.cmbox {
     color: var(--synt-high--color-comment);
     margin: 3px 10%;
    border-collapse: collapse;
    border: 1px solid #a2a9b1;
    background-color: #dfe8ff; /* Default "notice" blue */
    box-sizing: border-box;
}
}


/* Comment.Multiline */
table.cmbox-notice {
.mw-highlight .cm {
     background-color: #d8e8ff; /* Blue */
     color: var(--synt-high--color-comment);
}
}


/* Comment.Preproc */
table.cmbox-speedy {
.mw-highlight .cp {
     margin-top: 4px;
     color: var(--synt-high--color-comment);
    margin-bottom: 4px;
    border: 4px solid #b32424; /* Red */
    background-color: #ffdbdb; /* Pink */
}
}


/* Comment.PreprocFile */
table.cmbox-delete {
.mw-highlight .cpf {
     background-color: #ffdbdb; /* Pink */
     color: var(--synt-high--color-comment);
}
}


/* Comment.Single */
table.cmbox-content {
.mw-highlight .c1 {
     background-color: #ffe7ce; /* Orange */
     color: var(--synt-high--color-comment);
}
}


/* Comment.Special */
table.cmbox-style {
.mw-highlight .cs {
     background-color: #fff9db; /* Yellow */
     color: var(--synt-high--color-comment);
}
}


/* Generic.Deleted */
table.cmbox-move {
.mw-highlight .gd {
     background-color: #e4d8ff; /* Purple */
     color: #f92672;
}
}


/* Generic.Emph */
table.cmbox-protection {
.mw-highlight .ge {
     background-color: #efefe1; /* Gray-gold */
     font-style: italic;
}
}


/* Generic.Inserted */
/* Other pages message box styles */
.mw-highlight .gi {
table.ombox {
     color: var(--synt-high--color-name);
     margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #a2a9b1; /* Default "notice" gray */
    background-color: #f8f9fa;
    box-sizing: border-box;
}
}


/* Generic.Strong */
table.ombox-notice {
.mw-highlight .gs {
     border: 1px solid #a2a9b1; /* Gray */
     font-weight: bold;
}
}


/* Generic.Subheading */
table.ombox-speedy {
.mw-highlight .gu {
    border: 2px solid #b32424; /* Red */
    color: #75715e;
    background-color: #fee7e6; /* Pink */
}
}


/* Keyword.Constant */
table.ombox-delete {
.mw-highlight .kc {
     border: 2px solid #b32424; /* Red */
     color: var(--synt-high--color-keyword);
}
}


/* Keyword.Declaration */
table.ombox-content {
.mw-highlight .kd {
     border: 1px solid #f28500; /* Orange */
     color: var(--synt-high--color-keyword);
}
}


/* Keyword.Namespace */
table.ombox-style {
.mw-highlight .kn {
     border: 1px solid #fc3; /* Yellow */
     color: #f92672;
}
}


/* Keyword.Pseudo */
table.ombox-move {
.mw-highlight .kp {
     border: 1px solid #9932cc; /* Purple */
     color: var(--synt-high--color-keyword);
}
}


/* Keyword.Reserved */
table.ombox-protection {
.mw-highlight .kr {
     border: 2px solid #a2a9b1; /* Gray-gold */
     color: var(--synt-high--color-keyword);
}
}


/* Keyword.Type */
/* Talk page message box styles */
.mw-highlight .kt {
table.tmbox {
     color: var(--synt-high--color-keyword);
     margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #c0c090; /* Default "notice" gray-brown */
    background-color: #f8eaba;
    min-width: 80%;
    box-sizing: border-box;
}
}


/* Literal.Date */
.tmbox.mbox-small {
.mw-highlight .ld {
     min-width: 0; /* reset the min-width of tmbox above        */
     color: var(--synt-high--color-date);
}
}


/* Literal.Number */
.mediawiki .mbox-inside .tmbox {
.mw-highlight .m {
    /* For tmboxes inside other templates. The "mediawiki" class ensures that */
     color: var(--synt-high--color-literal);
     margin: 2px 0; /* this declaration overrides other styles (including mbox-small above)   */
    width: 100%; /* For Safari and Opera */
}
}


/* Literal.String */
.mbox-inside .tmbox.mbox-small {
.mw-highlight .s {
    /* "small" tmboxes should not be small when  */
     color: var(--synt-high--color-string);
    line-height: 1.5em; /* also "nested", so reset styles that are  */
     font-size: 100%; /* set in "mbox-small" above.                */
}
}


/* Name.Attribute */
table.tmbox-speedy {
.mw-highlight .na {
    border: 2px solid #b32424; /* Red */
    color: var(--synt-high--color-name);
    background-color: #fee7e6; /* Pink */
}
}


/* Name.Builtin */
table.tmbox-delete {
.mw-highlight .nb {
     border: 2px solid #b32424; /* Red */
     color: #f8f8f2;
}
}


/* Name.Class */
table.tmbox-content {
.mw-highlight .nc {
     border: 2px solid #f28500; /* Orange */
     color: var(--synt-high--color-name);
}
}


/* Name.Constant */
table.tmbox-style {
.mw-highlight .no {
     border: 2px solid #fc3; /* Yellow */
     color: var(--synt-high--color-keyword);
}
}


/* Name.Decorator */
table.tmbox-move {
.mw-highlight .nd {
     border: 2px solid #9932cc; /* Purple */
     color: var(--synt-high--color-name);
}
}


/* Name.Entity */
table.tmbox-protection,
.mw-highlight .ni {
table.tmbox-notice {
     color: #f8f8f2;
     border: 1px solid #c0c090; /* Gray-brown */
}
}


/* Name.Exception */
/* Footer and header message box styles */
.mw-highlight .ne {
table.fmbox {
     color: var(--synt-high--color-name);
    clear: both;
    margin: 0.2em 0;
    width: 100%;
    border: 1px solid #a2a9b1;
     background-color: #f8f9fa; /* Default "system" gray */
    box-sizing: border-box;
}
}


/* Name.Function */
table.fmbox-system {
.mw-highlight .nf {
     background-color: #191970;
     color: var(--synt-high--color-name);
}
}


/* Name.Label */
table.fmbox-warning {
.mw-highlight .nl {
    border: 1px solid #bb7070; /* Dark pink */
    color: #f8f8f2;
    background-color: #ffdbdb; /* Pink */
}
}


/* Name.Namespace */
table.fmbox-editnotice {
.mw-highlight .nn {
     background-color: transparent;
     color: #f8f8f2;
}
}


/* Name.Other */
/* Div based "warning" style fmbox messages. */
.mw-highlight .nx {
div.mw-warning-with-logexcerpt,
    color: var(--synt-high--color-name);
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
    clear: both;
    margin: 0.2em 0;
    border: 1px solid #bb7070;
    background-color: #ffdbdb;
    padding: 0.25em 0.9em;
    box-sizing: border-box;
}
}


/* Name.Property */
/* Use default color for partial block fmbox banner per [[Special:PermaLink/1028105567#pblock-style]] */
.mw-highlight .py {
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt {
     color: #f8f8f2;
     border-color: #fc3;
    background-color: #fef6e7;
}
}


/* Name.Tag */
/* These mbox-small classes must be placed after all other
.mw-highlight .nt {
ambox/tmbox/ombox etc classes. "html body.mediawiki" is so
     color: #f92672;
they override "table.ambox + table.ambox" above. */
html body.mediawiki .mbox-small {
    /* For the "small=yes" option. */
    /* @noflip */
    clear: right;
    /* @noflip */
    float: right;
    /* @noflip */
    margin: 4px 0 4px 1em;
    box-sizing: border-box;
    width: 238px;
    font-size: 88%;
     line-height: 1.25em;
}
}


/* Name.Variable */
html body.mediawiki .mbox-small-left {
.mw-highlight .nv {
    /* For the "small=left" option. */
     color: #f8f8f2;
    /* @noflip */
    margin: 4px 1em 4px 0;
    box-sizing: border-box;
    overflow: hidden;
    width: 238px;
    border-collapse: collapse;
    font-size: 88%;
     line-height: 1.25em;
}
}


/* Operator.Word */
/* Style for compact ambox */
.mw-highlight .ow {
/* Hide the images */
    color: var(--synt-high--color-operator);
.compact-ambox table .mbox-image,
.compact-ambox table .mbox-imageright,
.compact-ambox table .mbox-empty-cell {
    display: none;
}
}


/* Text.Whitespace */
/* Remove borders, backgrounds, padding, etc. */
.mw-highlight .w {
.compact-ambox table.ambox {
     color: #f8f8f2;
     border: none;
    border-collapse: collapse;
    background-color: transparent;
    margin: 0 0 0 1.6em !important;
    padding: 0 !important;
    width: auto;
    display: block;
}
}


/* Literal.Number.Bin */
body.mediawiki .compact-ambox table.mbox-small-left {
.mw-highlight .mb {
     font-size: 100%;
     color: var(--synt-high--color-literal);
    width: auto;
    margin: 0;
}
}


/* Literal.Number.Float */
/* Style the text cell as a list item and remove its padding */
.mw-highlight .mf {
.compact-ambox table .mbox-text {
     color: var(--synt-high--color-literal);
     padding: 0 !important;
    margin: 0 !important;
}
}


/* Literal.Number.Hex */
.compact-ambox table .mbox-text-span {
.mw-highlight .mh {
     display: list-item;
     color: var(--synt-high--color-literal);
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url(/w/skins/MonoBook/resources/images/bullet.svg);
}
}


/* Literal.Number.Integer */
/* Allow for hiding text in compact form */
.mw-highlight .mi {
.compact-ambox .hide-when-compact {
     color: var(--synt-high--color-literal);
     display: none;
}
}


/* Literal.Number.Oct */
/* Remove underlines from certain links */
.mw-highlight .mo {
.nounderlines a,
     color: var(--synt-high--color-literal);
.IPA a:link,
.IPA a:visited {
     text-decoration: none !important;
}
}


/* Literal.String.Affix */
/* Prevent line breaks in silly places where desired (nowrap)
.mw-highlight .sa {
and links when we don't want them to (nowraplinks a) */
     color: var(--synt-high--color-string);
.nowrap,
.nowraplinks a {
     white-space: nowrap;
}
}


/* Literal.String.Backtick */
/* But allow wrapping where desired: */
.mw-highlight .sb {
.wrap,
     color: var(--synt-high--color-string);
.wraplinks a {
     white-space: normal;
}
}


/* Literal.String.Char */
/* Increase the height of the image upload box */
.mw-highlight .sc {
#wpUploadDescription {
     color: var(--synt-high--color-string);
     height: 13em;
}
}


/* Literal.String.Delimiter */
/* Minimum thumb width */
.mw-highlight .dl {
.thumbinner {
     color: var(--synt-high--color-string);
     min-width: 100px;
}
}


/* Literal.String.Doc */
/* Prevent floating boxes from overlapping any category listings,
.mw-highlight .sd {
file histories, edit previews, and edit [Show changes] views. */
     color: var(--synt-high--color-string);
#mw-subcategories,
#mw-pages,
#mw-category-media,
#filehistory,
#wikiPreview,
#wikiDiff {
     clear: both;
}
}


/* Literal.String.Double */
/* Selectively hide headers in WikiProject banners */
.mw-highlight .s2 {
/* TemplateStyles */
     color: var(--synt-high--color-string);
.wpb .wpb-header {
     display: none;
}
}


/* Literal.String.Escape */
.wpbs-inner .wpb .wpb-header {
.mw-highlight .se {
     display: table-row;
     color: var(--synt-high--color-literal);
}
}


/* Literal.String.Heredoc */
.wpbs-inner .wpb-outside {
.mw-highlight .sh {
     display: none; /* hide things that should only display outside shells */
     color: var(--synt-high--color-string);
}
}


/* Literal.String.Interpol */
/* Styling for Abuse Filter tags */
.mw-highlight .si {
.mw-tag-markers {
     color: var(--synt-high--color-string);
     font-style: italic;
    font-size: 90%;
}
}


/* Literal.String.Other */
/* Hide stuff meant for accounts with special permissions. Made visible again in
.mw-highlight .sx {
[[MediaWiki:Group-checkuser.css]], [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-abusefilter.css]],
    color: var(--synt-high--color-string);
[[MediaWiki:Group-abusefilter-helper.css]], [[MediaWiki:Group-patroller.css]],
[[MediaWiki:Group-templateeditor.css]], [[MediaWiki:Group-extendedmover.css]],
[[MediaWiki:Group-extendedconfirmed.css]], and [[Mediawiki:Group-autoconfirmed.css]]. */
.checkuser-show,
.sysop-show,
.abusefilter-show,
.abusefilter-helper-show,
.patroller-show,
.templateeditor-show,
.extendedmover-show,
.extendedconfirmed-show,
.autoconfirmed-show,
.user-show {
    display: none;
}
}


/* Literal.String.Regex */
/* Hide the redlink generated by {{Editnotice}},
.mw-highlight .sr {
this overrides the ".sysop-show { display: none; }" above that applies
    color: var(--synt-high--color-string);
to the same link as well. See [[phab:T45013]]
 
Hide the images in editnotices to keep them readable in VE view.
Long term, editnotices should become a core feature so that they can be designed responsive. */
.ve-ui-mwNoticesPopupTool-item .editnotice-redlink,
.ve-ui-mwNoticesPopupTool-item .mbox-image,
.ve-ui-mwNoticesPopupTool-item .mbox-imageright {
    display: none !important;
}
}


/* Literal.String.Single */
/* Remove bullets when there are multiple edit page warnings */
.mw-highlight .s1 {
ul.permissions-errors > li {
     color: var(--synt-high--color-string);
     list-style: none none;
}
}


/* Literal.String.Symbol */
ul.permissions-errors {
.mw-highlight .ss {
     margin: 0;
     color: var(--synt-high--color-string);
}
}


/* Name.Builtin.Pseudo */
/* texhtml class for inline math (based on generic times-serif class) */
.mw-highlight .bp {
span.texhtml {
     color: #f8f8f2;
    font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
    font-size: 118%;
    line-height: 1;
    white-space: nowrap;
    /* Force tabular and lining display for texhtml */
    -moz-font-feature-settings: "lnum", "tnum", "kern" 0;
    -webkit-font-feature-settings: "lnum", "tnum", "kern" 0;
    font-feature-settings: "lnum", "tnum", "kern" 0;
    font-variant-numeric: lining-nums tabular-nums;
     font-kerning: none;
}
}


/* Name.Function.Magic */
span.texhtml span.texhtml {
.mw-highlight .fm {
     font-size: 100%;
     color: var(--synt-high--color-name);
}
}


/* Name.Variable.Class */
span.mwe-math-mathml-inline {
.mw-highlight .vc {
     font-size: 118%;
     color: #f8f8f2;
}
}


/* Name.Variable.Global */
/* Make <math display="block"> be left aligned with one space indent for
.mw-highlight .vg {
  * compatibility with style conventions
     color: #f8f8f2;
  */
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
     margin-left: 1.6em !important;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
}
}


/* Name.Variable.Instance */
.mwe-math-mathml-display math {
.mw-highlight .vi {
     display: inline;
     color: #f8f8f2;
}
}


/* Name.Variable.Magic */
/* Work-around for [[phab:T25965]] / [[phab:T100106]] (Kaltura advertisement) */
.mw-highlight .vm {
.k-player .k-attribution {
     color: #f8f8f2;
     visibility: hidden;
}
}


/* Literal.Number.Integer.Long */
/* Move 'play' button of video player to bottom left corner */
.mw-highlight .il {
.PopUpMediaTransform a .play-btn-large {
     color: var(--synt-high--color-literal);
     margin: 0;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
}
}


/* #endregion */
@media screen {
 
    /* Put a chequered background behind images, only visible if they have transparency.
 
'.filehistory a img' and '#file img:hover' are handled by MediaWiki core (as of 1.19) */
/* ============ */
    .gallerybox .thumb img {
/* #region SOURCE EDITOR → SYNTAX HIGHLIGHTING */
        background: #fff
/* based on: https://github.com/wikimedia/mediawiki-extensions-CodeMirror/blob/master/resources/mode/mediawiki/mediawiki.less */
            url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png)
/* ============ */
            repeat;
    }
    /* But not on articles, user pages, portals or with opt-out. */
    .ns-0 .gallerybox .thumb img,
    .ns-2 .gallerybox .thumb img,
    .ns-100 .gallerybox .thumb img,
    .nochecker .gallerybox .thumb img {
        background-image: none;
    }


:root {
     /* Display "From Wikipedia, the free encyclopedia" in skins that support it,
     /* "se-cm" = Source Editor - Code Mirror */
do not apply to print mode */
    /*
  #siteSub {
  display: block;
  }
  */
}


    /* same color as for source editor */
/* Hide FlaggedRevs notice UI when there are no pending changes */
    --se-cm--bg-color: var(--bg-color-light-x2);
.flaggedrevs_draft_synced,
    /* same color as for code block */
  .flaggedrevs_stable_synced,
    --se-cm--gutter-bg-color: var(--code-color-bg);
  /* "Temporary" to remove links in sidebar T255381 */
    /* margin to the left for the main contents of the editor */
  #t-upload,
    --se-cm--main-contents-left-margin: 0.25rem;
  /* Hide broken download box on Special:Book pending T285400 */
 
  .mw-special-Book #coll-downloadbox {
     /* bg color for pre/nowiki tags contents */
     display: none;
    --se-cm--pre-bg-color: hsl(205, 21%, 15%);
}


    /* from the <syntaxhighlight> theme */
/* Fix horizontal scrolling of long edit summaries T158725 */
    --se-cm--comment-color: var(--synt-high--color-comment);
span.comment {
     --se-cm--error-color: var(--red-color);
     overflow-wrap: break-word;
}


    /* link itself */
#mw-page-base {
    --se-cm--link-color: var(--link-color);
     background: #1b1b1f;
    /* link delimiter */
     color: var(--text-color);
     --se-cm--cm-mw-link-delimiter: var(--se-cm--template-delimiter-color);
     border: #1b1b1f;
     /* link text */
}
    --se-cm--link-text-color: var(--text-color);
     --se-cm--link-brackets-color: var(--se-cm--link-text-color);


     /* things like "DISPLAYTITLE" "templates" (the whole template except the value part) */
.mediawiki,
     --se-cm--parser-function-color: var(--synt-high--color-operator);
.mw-page-container {
     background: #1b1b1f;
     color: var(--text-color);
    border: #1b1b1f;
}


     /* table brackets and row delimiter */
.mw-body {
     --se-cm--table-punctuation-color: var(--synt-high--color-punctuation);
     background: #212126;
     /* table settings */
     color: var(--text-color);
    --se-cm--table-settings-color: var(--se-cm--template-arg-name-color);
     border: black;
}


    /* template name */
#mw-panel {
    --se-cm--template-name-color: hsl(80, 76%, 53%);
     background: #1b1b1f;
     /* template arg names */
     color: var(--text-color);
    --se-cm--template-arg-name-color: hsl(80, 76%, 42%);
     border: #1b1b1f;
     /* template brackets */
}
    --se-cm--template-brackets-color: var(--synt-high--color-name);
     /* template arg values */
    --se-cm--template-values-color: var(--blue-color-light-x2);
    /* template arg delimiters */
    --se-cm--template-delimiter-color: hsl(205, 71%, 85%);


    /* template param name */
#mw-content-container,
    --se-cm--template-param-name-color: var(--synt-high--color-keyword);
#mw-header-container,
    /* template param brackets */
#mw-header-nav-hack,
     --se-cm--template-param-brackets-color: hsl(190, 61%, 40%);
#mw-content-wrapper,
     /* template param values */
#mw-content,
    --se-cm--template-param-value-color: var(--blue-color-light-x2);
#p-logo {
     /* template param delimiter */
     background: #1b1b1f;
    --se-cm--template-param-delimiter-color: var(
     color: var(--text-color);
        --se-cm--template-delimiter-color
     border: #1b1b1f;
    );
}


     /* wiki formatting: headers, bullet points, bold/italic quotes, etc. */
#mw-header-nav-hack {
     --se-cm--wikitext-formatting-color: var(--blue-color-light);
     background: #212126;
     /* html tags, including ones specific for the wiki (like syntaxhighlight) */
     color: var(--text-color);
    --se-cm--xml-tag-color: hsl(41, 53%, 67%);
     border: #212126;
}


    /* selection color */
.mw-code {
     --se-cm--selection-color: hsl(205, 21%, 30%);
     background: #212126;
     /* bg color applied when selecting a bracket that has a match (in templates) */
     color: var(--text-color);
    --se-cm--matching-brackets-bg-color: hsl(205, 21%, 44%);
}
}


/* the whole content body code mirror wrapper */
footer,
.CodeMirror-wrap {
#footer-info-lastmod,
    /* same color as for source editor */
#footer-info-copyright {
    background-color: var(--se-cm--bg-color);
 
    /* color for the text that the other rules don't apply to (regular text, header text, etc.) */
     color: var(--text-color);
     color: var(--text-color);
}
}


/* the actual lines of text */
p,
.CodeMirror pre.CodeMirror-line {
h1,
     /* a little bit of margin for the main content */
h2,
    margin-left: var(--se-cm--main-contents-left-margin);
h3,
h4,
h5,
h6,
li {
     color: var(--text-color);
}
}


/* gutters?? */
a,
.CodeMirror-wrap .CodeMirror-gutters {
.vector-menu-portal .vector-menu-content li a,
    border-color: var(--border-color);
.vector-menu-tabs li a,
body.skin--responsive #p-cactions li a {
    color: lightblue;
}
}


/* gutter */
a:visited,
.CodeMirror-wrap .CodeMirror-gutter {
.vector-menu-portal .vector-menu-content li a:visited,
    /* same color as for code block */
.vector-menu-tabs li a:visited,
    background-color: var(--se-cm--gutter-bg-color);
body.skin--responsive #p-cactions li a:visited {
    color: #007fff;
}
}


/* selection */
body.skin--responsive #p-cactions li a {
.CodeMirror-line::selection,
     background: var(--bg-color-light-x2);
/* selection */
.CodeMirror-line>span::selection,
/* selection */
.CodeMirror-line>span>span::selection {
     background-color: var(--se-cm--selection-color);
}
}


/* bullet point symbol */
.mw-prefs-buttons {
.cm-mw-list,
     background: var(--bg-color-light-x2);
/* ???? */
.cm-mw-indenting {
     color: var(--se-cm--wikitext-formatting-color);
}
}


/* magic words */
a.extiw:visited,
.cm-mw-doubleUnderscore,
a.external:visited,
/* magic words */
.mw-parser-output a.extiw:visited,
.cm-mw-double-underscore,
.mw-parser-output a.external:visited,
/* ???? user signature maybe */
body.skin--responsive #p-cactions li a.external:visited {
.cm-mw-signature,
     color: #8a2be2;
/* ???? hr tags prob */
}
.cm-mw-hr {
     color: var(--se-cm--wikitext-formatting-color);


     /* override the defaults */
.vector-menu-tabs .selected a,
     background-color: inherit;
.vector-menu-tabs .selected a:visited,
body.skin--responsive #p-cactions li.selected a {
     color: var(--text-color);
     font-weight: bold;
}
}


/* html sequences like "&nbsp;" */
body.skin--responsive #p-cactions li.selected a {
.cm-mw-mnemonic,
     background: var(--bg-color-light-x2);
/* ???? */
.cm-mw-html-entity {
     color: var(--se-cm--xml-tag-color);
    background-color: #684905;
    border-radius: 2px;
}
}


/* comments */
.vector-menu-tabs li {
.cm-mw-comment {
     background: #212126;
     color: var(--se-cm--comment-color);
}
}


/* formatting: 3 apostrophes for bold text */
.tools-inline li a {
.cm-mw-apostrophes-bold,
     filter: invert(100%);
/* formatting: 2 apostrophes for italic text
todo make them separate? better eligibility */
.cm-mw-apostrophes-italic {
     color: var(--se-cm--wikitext-formatting-color);
}
}


/* template name */
.tools-inline span {
.cm-mw-template-name {
    filter: invert(100%);
     color: var(--se-cm--template-name-color);
     color: var(--text-color);
    /* disable the default */
    text-decoration: none;
}
}


/* template arg names */
#personal h2,
.cm-mw-template-argument-name {
#site-tools h2,
     color: var(--se-cm--template-arg-name-color);
#site-navigation h2,
#searchButton {
     filter: invert(100%);
}
}


/* template arg values */
#personal h2 span {
.cm-mw-template {
     filter: invert(100%);
     color: var(--se-cm--template-values-color);
}
}


/* template pipe delimiters (maybe colon too for modules?) */
#mw-site-navigation .sidebar-chunk,
.cm-mw-template-delimiter {
#mw-site-navigation .sidebar-chunk,
     color: hsl(205, 71%, 85%);
#mw-related-navigation .sidebar-chunk,
body.skin--responsive .portlet,
body.skin--responsive .pBody {
    background: #212126;
     color: var(--text-color);
    border: #1b1b1f;
}
}


/* template brackets */
#p-logo-text a {
.cm-mw-template-bracket {
     color: var(--text-color);
     color: var(--se-cm--template-brackets-color);
}
}


/* template variable (with 3 brackets) name */
#ca-nstab-mediawiki.a {
.cm-mw-templatevariable-name {
     color: var(--text-color);
     color: var(--se-cm--template-param-name-color);
}
}


/* template variable (with 3 brackets) value */
#mw-changeslist-links {
.cm-mw-templatevariable {
    background: #212126;
     color: var(--se-cm--template-param-value-color);
     color: var(--text-color);
}
}


/* template variable brackets (3 brackets) */
#simpleSearch {
.cm-mw-templatevariable-bracket {
    background: var(--bg-color-light-x2);
     color: var(--se-cm--template-param-brackets-color);
     border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


/* template variable (with 3 brackets) delimiter */
#searchInput {
.cm-mw-templatevariable-delimiter {
     color: var(--text-color);
     color: var(--se-cm--param-delimiter-color);
}
}


/* parser functions (things like "DISPLAYTITLE" or invokes) → name */
#pt-createaccount {
.cm-mw-parserfunction-name {
     visibility: hidden;
     color: var(--se-cm--template-name-color);
}
}


/* parser functions (things like "DISPLAYTITLE" or invokes) → value */
.vector-user-links .vector-user-menu-more .vector-menu-content-list li a,
.cm-mw-parserfunction {
#personal .dropdown {
     color: var(--se-cm--template-values-color);
     background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


/* parser functions (things like "DISPLAYTITLE" or invokes) → brackets */
body.skin--responsive #p-cactions li.selected {
.cm-mw-parserfunction-bracket {
     border: var(--bg-color-light-x4);
     color: var(--se-cm--template-brackets-color);
}
}


/* parser functions (things like "DISPLAYTITLE" or invokes) → delimiters */
.vector-menu-tabs .selected {
.cm-mw-parserfunction-delimiter {
     background: #1b1b1f;
     color: var(--se-cm--template-delimiter-color);
}
}


/* wiki html tag names? like >syntaxhighlight> */
#pagehistory li.selected {
.cm-mw-exttag-name,
     background: #1b4d3e;
/* html tag names */
    font-weight: bold;
.cm-mw-htmltag-name {
     color: var(--se-cm--xml-tag-color);
}
}


/* if a string starts with an empty space, it will generate a pre block.
div.mw-warning-with-logexcerpt,
this targets that one single space.
div.mw-lag-warn-high,
same style as for html tag names, but for bg here */
div.mw-cascadeprotectedwarning,
.cm-mw-skipformatting {
div#mw-protect-cascadeon,
     background-color: var(--se-cm--xml-tag-color);
div.titleblacklist-warning {
     background: #7c0a02;
    border: 1px solid #bb7070;
}
}


/* wiki html tag brackets */
.wikitable {
.cm-mw-exttag-bracket,
    background: var(--bg-color-light-x3);
/* wiki html tag attributes (name, delimiter, value) */
    border: 1px solid var(--bg-color-light-x4);
.cm-mw-exttag-attribute,
     color: var(--text-color);
/* html tag brackets */
.cm-mw-htmltag-bracket,
/* html tag attributes (name, delimiter, value) */
.cm-mw-htmltag-attribute {
     color: var(--se-cm--xml-tag-color);
}
}


/* pre tag BLOCK contents */
.toc {
pre.CodeMirror-line.cm-mw-tag-pre,
    background: var(--bg-color-light-x3);
/* pre tag INLINE contents */
    border: 1px solid var(--bg-color-light-x4);
.CodeMirror-line span.cm-mw-tag-pre,
     color: var(--text-color);
/* ???? */
pre.CodeMirror-line-like.cm-mw-tag-pre,
/* pre tag contents */
.cm-mw-tag-pre,
/* ============== */
/* nowiki tag BLOCK contents */
pre.CodeMirror-line.cm-mw-tag-nowiki,
/* nowiki tag INLINE contents */
.CodeMirror-line span.cm-mw-tag-nowiki,
/* ???? */
pre.CodeMirror-line-like.cm-mw-tag-nowiki,
/* nowiki tag contents */
.cm-mw-tag-nowiki {
     background-color: var(--se-cm--pre-bg-color);
}
}


/* pre tag BLOCK contents */
.mw-content-ltr .tocnumber {
pre.CodeMirror-line.cm-mw-tag-pre,
    color: grey;
/* nowiki tag BLOCK contents */
}
pre.CodeMirror-line.cm-mw-tag-nowiki {
 
    /* colors the margin gap bg for block variants */
.wikitable > tr > th,
     box-shadow: calc(-1 * var(--se-cm--main-contents-left-margin)) 0
.wikitable > tr > td,
        var(--se-cm--pre-bg-color);
.wikitable > * > tr > th,
.wikitable > * > tr > td {
     border: 1px solid var(--bg-color-light-x4);
}
}


/* pre tag INLINE contents */
.wikitable > * > tr > th {
.CodeMirror-line span.cm-mw-tag-pre,
    background: var(--bg-color-light-x2);
/* nowiki tag INLINE contents */
    border: 1px solid var(--bg-color-light-x4);
.CodeMirror-line span.cm-mw-tag-nowiki {
     color: var(--text-color);
     /* a little corner rounding won't hurt a thing! */
    border-radius: 2px;
}
}


/* ???? */
.quickbox {
.cm-mw-link,
    border: 1px solid #303038;
/* ???? */
     background: var(--bg-color-light-x2);
.cm-mw-link-tosection,
/* header equal signs */
.cm-mw-section-header {
     color: var(--se-cm--wikitext-formatting-color);
}
}


/* link itself */
.quickboxhead {
.cm-mw-link-pagename,
    border-bottom: 1px solid #303038;
/* external link itself, without protocol */
    background: #1b1b1f;
.cm-mw-extlink,
    text-align: center;
/* ???? same as above, maybe? */
.cm-mw-free-extlink,
/* external link protocol (the "https://" part) */
.cm-mw-extlink-protocol,
/* ???? same as above, maybe? */
.cm-mw-free-extlink-protocol {
    color: var(--se-cm--link-color);
}
}


/* link brackets */
.thumbinner,
.cm-mw-link-bracket,
.thumbinner .thumbimage {
/* external link brackets */
    background: var(--bg-color-light-x2);
.cm-mw-extlink-bracket {
     border: 1px solid var(--bg-color-light-x4);
     color: var(--se-cm--link-brackets-color);
    color: var(--text-color);
}
}


/* link delimiter */
table.ombox tbody,
.cm-mw-link-delimiter {
table.ombox {
     color: var(--se-cm--cm-mw-link-delimiter);
    background: var(--bg-color-light-x2);
     border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


/* link text */
table.ambox tbody,
.cm-mw-link-text,
table.ambox {
/* external link text */
    background: var(--bg-color-light-x2);
.cm-mw-extlink-text {
    border-top: 1px solid var(--bg-color-light-x4);
     color: var(--se-cm--link-text-color);
    border-bottom: 1px solid var(--bg-color-light-x4);
     border-right: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


/* tables opening "{|" and closing "|}" brackets */
table.imbox tbody,
.cm-mw-table-bracket,
table.imbox {
/* table row delimiter (doesn't include cols!) */
    background: var(--bg-color-light-x2);
.cm-mw-table-delimiter {
     border: 1px solid var(--bg-color-light-x4);
     color: var(--se-cm--table-punctuation-color);
    color: var(--text-color);
}
}


/* the table settings I guess? (like «class="wikitable"») */
/* OOUI PAIN */
.cm-mw-table-definition {
/* Recent Changes */
     color: var(--se-cm--table-settings-color);
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
    .oo-ui-tagMultiselectWidget-handle,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
     background: var(--bg-color-light-x2);
    border: 1px solid #303038;
    color: var(--text-color);
}
}


/* ???? idk some kind of formatting errors? */
/* Generic OOUI elements */
.cm-error,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
.cm-mw-error,
     background: var(--bg-color-light-x2);
.cm-s-default .cm-error {
    border: 1px solid #303038;
     color: var(--se-cm--error-color);
    color: var(--text-color);
}
}


.cm-mw-matchingbracket {
.oo-ui-popupWidget-popup {
     background-color: var(--se-cm--matching-brackets-bg-color);
     background: var(--bg-color-light-x3);
     /* disable the default */
    border: 1px solid var(--bg-color-light-x4);
    box-shadow: none;
     color: var(--text-color);
}
}


/* various inline bg targeting things, idk what each of them target exactly */
/* SITE SPECIFIC */
.cm-mw-template2-ground,
/*
.cm-mw-template3-ground,
  .chemrecipeimg img {
.cm-mw-ext-ground,
  background-image: url('https://wiki.spacestation14.com/w/images/7/75/Beaker_Fill.png');
.cm-mw-template-ext-ground,
  background-blend-mode: multiply;
.cm-mw-ext2-ground,
  background-position: center;
.cm-mw-template-ext2-ground,
  }
.cm-mw-ext3-ground,
  */
.cm-mw-template-ext3-ground,
@media screen {
.cm-mw-link-ground,
    .mw-body-content .recipeimg a > img {
.cm-mw-ext-link-ground,
        padding: 0;
.cm-mw-template-link-ground,
        margin: 0;
.cm-mw-ext2-link-ground,
        border: 0;
.cm-mw-template-ext-link-ground,
        width: 32px !important;
.cm-mw-ext3-link-ground,
        max-width: 32px !important;
.cm-mw-template-ext2-link-ground,
        height: 32px !important;
.cm-mw-template-ext3-link-ground,
        max-height: 32px !important;
.cm-mw-template2-ext-ground,
     }
.cm-mw-template2-ext2-ground,
.cm-mw-template2-ext3-ground,
.cm-mw-template2-link-ground,
.cm-mw-template2-ext-link-ground,
.cm-mw-template2-ext2-link-ground,
.cm-mw-template2-ext3-link-ground,
.cm-mw-template3-ext-ground,
.cm-mw-template3-ext2-ground,
.cm-mw-template3-ext3-ground,
.cm-mw-template3-link-ground,
.cm-mw-template3-ext-link-ground,
.cm-mw-template3-ext2-link-ground,
.cm-mw-template3-ext3-link-ground {
    /* just disable them */
     background-color: inherit;
}
}


/* script input in module editor */
.positive {
#mw-scribunto-input {
    color: #00ff00;
font-family: monospace;
    font-weight: bold;
font-weight: normal;
}
color: var(--code-color-text);
background-color: var(--code-color-bg);
}  


.negative {
    color: #ff0000;
    font-weight: bold;
}


/* #endregion */
.anglerect {
 
    --angle-rect-clip-size: 16px;
    clip-path: polygon(
        0 0,
        calc(100% - var(--angle-rect-clip-size)) 0,
        100% var(--angle-rect-clip-size),
        100% 100%,
        var(--angle-rect-clip-size) 100%,
        0 calc(100% - var(--angle-rect-clip-size))
    );
}


/* #endregion */
/* hack for mobile/nomobile */
 
.flex {
/* ============ */
     display: flex;
/* #endregion */
/* ============ */
 
/* Reset italic styling set by user agent */
cite,
dfn {
     font-style: inherit;
}
}


/* Straight quote marks for <q> */
@media screen and (min-width: 851px) {
q {
    .mobile {
    quotes: '"' '"' "'" "'";
        display: none;
    }
}
}


/* Avoid collision of blockquote with floating elements by swapping margin and padding */
@media screen and (max-width: 850px) {
blockquote {
     .nomobile {
     overflow: hidden;
        display: none;
    margin: 1em 0;
     }
     padding: 0 40px;
}
}


/* Consistent size for <small>, <sub> and <sup> */
img {
small {
    -ms-interpolation-mode: nearest-neighbor;
     font-size: 85%;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
     image-rendering: pixelated;
}
}


.mw-body-content sub,
/* allows enabling smooth rendering for images by adding this class to them whenever needed */
  .mw-body-content sup,
img.smooth-render,
  span.reference /* for Parsoid */ {
.smooth-render img {
     font-size: 80%;
     image-rendering: auto;
}
}


/* Same spacing for indented and unindented paragraphs on talk pages */
.layered {
.ns-talk .mw-body-content dd {
     position: absolute;
     margin-top: 0.4em;
    top: 0;
     margin-bottom: 0.4em;
     left: 0;
}
}


/* Main page fixes */
.blend {
#interwiki-completelist {
     mix-blend-mode: multiply;
     font-weight: bold;
}
}


.biglink {
/* replace pencil icon in "edit section" buttons with a version that's visible */
    font-family: "Teko";
.mw-editsection {
    font-style: oblique 10deg;
     background-image: url(/w/images/a/a9/Pencil-lightblue.svg);
     font-variant-caps: small-caps;
    text-shadow: #1b1b1f 2px 3px, #a00d 3px 5px;
}
}


/* Reduce page jumps by hiding collapsed/dismissed content */
/* #endregion */
.client-js .mw-special-Watchlist #watchlist-message,
 
  .client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child),
/* ============ */
 
/* #region GENERAL STYLES */
  /* Hide charinsert base for those not using the gadget */
/* ============ */
  #editpage-specialchars {
 
    display: none;
code {
    color: var(--code-color-text);
    background-color: var(--code-color-bg);
    border: 1px solid var(--code-color-border);
}
}


/* Adds padding above Watchlist announcements where new recentchanges/watchlist filters are enabled */
pre {
.mw-rcfilters-enabled .mw-specialpage-summary {
    color: var(--code-color-text);
     margin-top: 1em;
     background-color: var(--code-color-bg);
    border: 1px solid var(--code-color-border);
}
}


/* Highlight linked elements (such as clicked references) in blue */
a {
.citation:target {
     color: var(--link-color);
     background-color: rgba(0, 127, 255, 0.133);
}
}


/* Styling for citations. Breaks long urls, etc., rather than overflowing box */
a:hover {
.citation {
    /* keep the same color */
     word-wrap: break-word;
    color: var(--link-color);
    /* keep underline */
     text-decoration: underline;
}
}


/* Make the list of references smaller
a:visited {
  * Keep in sync with Template:Refbegin/styles.css
     color: var(--link-color-visited);
  * And Template:Reflist/styles.css
  */
ol.references {
     font-size: 90%;
    margin-bottom: 0.5em;
}
}


/* Style for horizontal lists (separator following item).
a:visited:hover {
@source mediawiki.org/wiki/Snippets/Horizontal_lists
    /* keep the same color */
@revision 8 (2016-05-21)
    color: var(--link-color-visited);
@author [[User:Edokter]]
    /* keep underline */
  */
     text-decoration: underline;
.hlist dl,
.hlist ol,
.hlist ul {
     margin: 0;
    padding: 0;
}
}


/* Display list items inline */
/* big links on the main page */
.hlist dd,
.biglink > a:hover {
.hlist dt,
     color: #2952a3;
.hlist li {
     margin: 0; /* don't trust the note that says margin doesn't work with inline
  * removing margin: 0 makes dds have margins again */
    display: inline;
}
}


/* Display nested lists inline */
/* big links on the main page */
.hlist.inline,
.biglink > a:visited:hover {
.hlist.inline dl,
    color: #1e3666;
.hlist.inline ol,
}
.hlist.inline ul,
 
.hlist dl dl,
/* ============ */
.hlist dl ol,
/* #endregion */
.hlist dl ul,
/* ============ */
.hlist ol dl,
 
.hlist ol ol,
/* ============ */
.hlist ol ul,
/* #region SYSTEM MESSAGES */
.hlist ul dl,
/* ============ */
.hlist ul ol,
 
.hlist ul ul {
/* system message banner */
     display: inline;
.mw-message-box {
     color: var(--text-color);
    border-color: var(--border-color-light);
    background-color: var(--bg-color-light-x4);
}
}


/* Hide empty list items */
/* system success banner */
.hlist .mw-empty-li {
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
     display: none;
     background-color: hsl(167 37% 27% / 1);
    border-color: #096450;
    color: var(--text-color);
}
}


/* Generate interpuncts */
/* system warning banner (e.g. when you preview changes in the source editor and the "changes not yeh published" banner pops up) */
.hlist dt:after {
.mw-message-box-warning,
     content: ": ";
/* another system warning banner */
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
    color: var(--text-color);
     background-color: var(--warning-color);
    border-color: var(--warning-color-border);
}
}


/**
/* another system error banner */
  * Note hlist style usage differs in Minerva and is defined in core as well!
.mw-message-box-error,
  * Please check Minerva desktop (and Minerva.css) when changing
/* system error banner (e.g., when you remove the parameter name from templateData param) */
  * See https://phabricator.wikimedia.org/T213239
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error {
  */
    color: var(--text-color);
.hlist dd:after,
     background-color: var(--danger-color-dark-x2);
.hlist li:after {
     border-color: var(--danger-color-border);
     content: " · ";
     font-weight: bold;
}
}


.hlist dd:last-child:after,
/* #endregion */
.hlist dt:last-child:after,
 
.hlist li:last-child:after {
/* ============ */
    content: none;
/* #region IMAGES & GALLERIES */
/* ============ */
 
/* images with "thumb" type */
figure[typeof~='mw:File/Thumb'],
/* images with "frame" type */
figure[typeof~='mw:File/Frame'],
/* images with "thumb" type → caption */
figure[typeof~='mw:File/Thumb'] > figcaption,
/* images with "frame" type  → caption */
figure[typeof~='mw:File/Frame'] > figcaption,
/* The backgrounds for galleries. */
#content .gallerybox div.thumb {
background-color: var(--bg-color-light-x2);
border-color: var(--border-color);
}
}


/* Add parentheses around nested lists */
/* images with "thumb" type → image */
.hlist dd dd:first-child:before,
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,  
.hlist dd dt:first-child:before,
/* images with "frame" type → image */
.hlist dd li:first-child:before,
figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element,
.hlist dt dd:first-child:before,
/* some other images */
.hlist dt dt:first-child:before,
.mw-image-border .mw-file-element {
.hlist dt li:first-child:before,
border-color: var(--border-color-light);
.hlist li dd:first-child:before,
.hlist li dt:first-child:before,
.hlist li li:first-child:before {
    content: " (";
    font-weight: normal;
}
}


.hlist dd dd:last-child:after,
/* images with "thumb" type → open image icon */
.hlist dd dt:last-child:after,
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,  
.hlist dd li:last-child:after,
/* images with "thumb" type → ????? (something alike to the above) */
.hlist dt dd:last-child:after,
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
.hlist dt dt:last-child:after,
filter: invert(100%);
.hlist dt li:last-child:after,
.hlist li dd:last-child:after,
.hlist li dt:last-child:after,
.hlist li li:last-child:after {
    content: ")";
    font-weight: normal;
}
}


/* Put ordinals in front of ordered list items */
/* #endregion */
.hlist ol {
    counter-reset: listitem;
}


.hlist ol > li {
/* ============ */
    counter-increment: listitem;
/* #region PAGE DIFF */
}
/* ============ */


.hlist ol > li:before {
/* page versions diff → diff entry (one cell) */
     content: " " counter(listitem) "\a0";
.diff .diff-context {
    background: var(--code-color-bg);
    color: var(--text-color);
     border-color: var(--border-color);
}
}


.hlist dd ol > li:first-child:before,
/* page versions diff → cell (deleted text) */
.hlist dt ol > li:first-child:before,
.diff .diff-deletedline {
.hlist li ol > li:first-child:before {
     border-color: var(--red-color);
     content: " (" counter(listitem) "\a0";
}
}


/* Unbulleted lists */
/* page versions diff → cell (added text) */
.plainlist ol,
.diff .diff-addedline {
.plainlist ul {
     border-color: var(--green-color);
     line-height: inherit;
    list-style: none none;
    margin: 0;
}
}


.plainlist ol li,
/* page versions diff → cell → inline diff */
.plainlist ul li {
.diff .diffchange {
     margin-bottom: 0;
     background-color: var(--blue-color-dark-x2);
}
}


/* Default style for navigation boxes */
/* ============ */
.navbox {
/* #endregion */
    /* Navbox container style */
/* ============ */
    box-sizing: border-box;
 
    border: 1px solid #a2a9b1;
/* ============ */
    width: 100%;
/* #region Search */
    clear: both;
/* ============ */
    font-size: 88%;
 
     text-align: center;
/* SEARCH BAR */
     padding: 1px;
 
     margin: 1em auto 0; /* Prevent preceding content from clinging to navboxes */
/* search form → search bar */
.mw-search-form-wrapper #mw-search-top-table input[type=search] {
     background-color: var(--bg-color-light);
     border-color: var(--border-color-light);
     color: var(--text-color);
}
}


.navbox .navbox {
/* search form → search bar → search icon */
     margin-top: 0; /* No top margin for nested navboxes */
.mw-search-form-wrapper #mw-search-top-table .oo-ui-icon-search,
/* search form → search bar → clear search icon */
.mw-search-form-wrapper #mw-search-top-table .oo-ui-indicator-clear {
     filter: invert(100%);
}
}


.navbox + .navbox {
/* search form → search bar → search button */
     margin-top: -1px; /* Single pixel border between adjacent navboxes */
.mw-search-form-wrapper #mw-search-top-table button[type=submit],
/* search form → advanced search options → all/none toggle container → button */
.mw-search-form-wrapper #mw-search-togglebox input[type=button] {
     background-color: var(--action-color);
    border-color: var(--border-color);
    color: var(--text-color);
    transition: background-color 100ms ease-in;
}
}


.navbox-inner,
/* search form → search bar → search button hover */
.navbox-subgroup {
.mw-search-form-wrapper #mw-search-top-table button[type=submit]:hover,
     width: 100%;
/* search form → advanced search options → all/none toggle container → button hover */
.mw-search-form-wrapper #mw-search-togglebox input[type=button]:hover {
     background-color: var(--action-color-light);
    transition: background-color 100ms ease-out;
}
}


.navbox-group,
/* search form → search bar → search button active */
.navbox-title,
.mw-search-form-wrapper #mw-search-top-table button[type=submit]:active,
.navbox-abovebelow {
/* search form → advanced search options → all/none toggle container → button active */
    padding: 0.25em 1em; /* Title, group and above/below styles */
.mw-search-form-wrapper #mw-search-togglebox input[type=button]:active {
     line-height: 1.5em;
     background-color: var(--action-color-dark-x2);
     text-align: center;
     transition: background-color 100ms ease-out;
}
}


th.navbox-group {
/* search form → search in pane → namespace suggest → namespace with a border */
    /* Group style */
.oo-ui-defaultOverlay > .oo-ui-selectWidget .mw-advancedSearch-namespace-border {
    white-space: nowrap;
     border-color: var(--bg-color-light-x3);
    /* @noflip */
     text-align: right;
}
}


.navbox,
/* SEARCH BAR END */
.navbox-subgroup {
 
     background-color: #fdfdfd; /* Background color */
/* search form → results count info */
.mw-search-form-wrapper #mw-search-top-table .results-info {
     color: var(--bg-color-light-x4);
}
}


.navbox-list {
/* search form → advanced search/search in pane */
     line-height: 1.5em;
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button {
     border-color: #fdfdfd; /* Must match background color */
     background-color: var(--bg-color-light);
    color: var(--text-color);
     border-color: var(--border-color-light);
}
}


/* cell spacing for navbox cells */
/* search form → advanced search/search in pane hover */
tr + tr > .navbox-abovebelow,
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button:hover {
tr + tr > .navbox-group,
    background-color: var(--bg-color-light-x2) !important;
tr + tr > .navbox-image,
     /* stays the same */
tr + tr > .navbox-list {
    color: var(--text-color) !important;
     /* Borders above 2nd, 3rd, etc. rows */
     border-color: var(--border-color) !important;
     border-top: 2px solid #fdfdfd; /* Must match background color */
}
}


.navbox th,
/* search form → advanced search/search in pane → "down" indication icon */
.navbox-title {
.mw-search-form-wrapper .oo-ui-indicator-down {
     background-color: #ccccff; /* Level 1 color */
     filter: invert(100%);
}
}


.navbox-abovebelow,
/* search form → advanced search/search in pane → content container */
th.navbox-group,
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-pane > * {
.navbox-subgroup .navbox-title {
    /* a slight "glow" at the top */
     background-color: #ddddff; /* Level 2 color */
    background: linear-gradient(hsla(0, 0%, 100%, 0.1), var(--bg-color) 0.5em);
     border-color: var(--border-color-light);
}
}


.navbox-subgroup .navbox-group,
 
.navbox-subgroup .navbox-abovebelow {
/* TAGS */
     background-color: #e6e6ff; /* Level 3 color */
 
/* search form → tag */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget {
     background-color: var(--bg-color-light-x3) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color-light) !important;
    text-shadow: 0 0 3px var(--bg-color) !important;
}
}


.navbox-even {
/* search form → tag → remove button hover */
     background-color: #f7f7f7; /* Even row striping */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget .oo-ui-buttonElement-button:hover {
     background-color: var(--bg-color-light);
}
}


.navbox-odd {
/* search form → tag → remove icon */
     background-color: transparent; /* Odd row striping */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget .oo-ui-icon-close {
     filter: invert(100%);
}
 
/* search form → disabled tag */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget.oo-ui-widget-disabled {
    background-color: var(--bg-color-light);
    color: color-mix(in srgb, var(--text-color), var(--bg-color) 22%);
    text-shadow: none;
}
}


.navbox .hlist td dl,
/* search form → tag → link */
.navbox .hlist td ol,
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget > a {
.navbox .hlist td ul,
     color: var(--text-color);
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
     padding: 0.125em 0; /* Adjust hlist padding in navboxes */
}
}


/* Styling for JQuery makeCollapsible, matching that of collapseButton */
/* search form → tag with a non-existing link */
.mw-parser-output .mw-collapsible-toggle {
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget:has(a.new) {
     font-weight: normal;
     background-color: var(--warning-color);
     /* @noflip */
     border-color: var(--border-color-light);
    text-align: right;
     text-shadow: 0 0 3px var(--bg-color-light-x2);
     padding-right: 0.2em;
    padding-left: 0.2em;
}
}


.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
/* TAGS END */
     /* @noflip */
/* FIELDS */
    float: left;
 
     /* @noflip */
/* search form → info icon */
     text-align: left;
.mw-search-form-wrapper .oo-ui-icon-info,
/* search form → menu icon */
.mw-search-form-wrapper .oo-ui-icon-menu,
/* search form → search icon */
.mw-search-form-wrapper .oo-ui-icon-search {
     filter: invert(100%);
}
 
/* search form → dropdown input */
.mw-search-form-wrapper .oo-ui-dropdownInputWidget,
/* search form → dropdown input hover */
.mw-search-form-wrapper .oo-ui-dropdownInputWidget:hover {
     /* remove this extra bg */
     background-color: transparent;
}
}


/* Infobox template style */
/* search form → fields group → label */
.infobox {
.mw-search-form-wrapper .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
     border: 1px solid #a2a9b1;
     /* should be the same as the bg to hide the line underneath */
     border-spacing: 3px;
     background: var(--bg-color) !important;
     background-color: #f8f9fa;
     color: var(--text-color) !important;
     color: black;
     font-weight: bold !important;
    /* @noflip */
}
    margin: 0.5em 0 0.5em 1em;
 
    padding: 0.2em;
/* search form → tag select field */
    /* @noflip */
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget,
    float: right;
/* search form → text input field → input */
    /* @noflip */
.mw-search-form-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input,
    clear: right;
/* search form → dropdown select */
     font-size: 88%;
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle,
    line-height: 1.5em;
/* search form → dropdown select hover */
     width: 22em;
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle:hover {
     background-color: var(--bg-color-light) !important;
     color: var(--text-color) !important;
}
}


.infobox-header,
/* search form → tag select field → input */
  .infobox-label,
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget input {
  .infobox-above,
    color: var(--text-color);
  .infobox-full-data,
  .infobox-data,
  .infobox-below,
  .infobox-subheader,
  .infobox-image,
  .infobox-navbar,
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox th,
  .infobox td {
    vertical-align: top;
}
}


.infobox-label,
/* search form → tag select field → next nested container element */
  .infobox-data,
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget > .oo-ui-tagMultiselectWidget-handle,
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
/* search form → text input field → input */
  .infobox th,
.mw-search-form-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input,
  .infobox td {
/* search form → dropdown select */
    /* @noflip */
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle {
     text-align: left;
     border-color: var(--border-color-light) !important;
}
}


/* Remove .infobox when element selectors above are removed */
/* search form → tag select field hover → next nested container element */
.infobox .infobox-above,
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget:hover > .oo-ui-tagMultiselectWidget-handle,
  .infobox .infobox-title,
/* search form → text input field → input hover */
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
.mw-search-form-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input:hover,
  .infobox caption {
/* search form → dropdown select hover */
     font-size: 125%;
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle:hover {
    font-weight: bold;
     border-color: var(--border-color-light) !important;
    text-align: center;
}
}


.infobox-title,
 
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
/* FIELDS END */
  .infobox caption {
 
     padding: 0.2em;
/* #endregion */
 
/* ============ */
/* #region Popups */
/* various popup windows */
/* some of them live in ".oo-ui-defaultOverlay" */
/* ============ */
 
/* OPTION SELECT */
 
/* option select popup */
.oo-ui-selectWidget {
     background-color: var(--bg-color);
    border-color: var(--border-color);
}
}


/* Remove .infobox when element selectors above are removed */
/* option select popup → option */
.infobox .infobox-header,
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget {
.infobox .infobox-subheader,
    background-color: var(--bg-color);
.infobox .infobox-image,
    transition: background-color 100ms ease-in;
.infobox .infobox-full-data,
     color: var(--text-color);
.infobox .infobox-below {
     text-align: center;
}
}


/* Remove .infobox when element selectors above are removed */
/* option select popup → option hover */
.infobox .infobox-navbar {
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
     /* @noflip */
     background-color: var(--bg-color-light);
     text-align: right;
     transition: none;
}
}


/* Normal font styling for wikitable row headers with scope="row" tag */
/* option select popup → selected option hover */
.wikitable.plainrowheaders th[scope="row"] {
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-optionWidget-highlighted {
     font-weight: normal;
     color: var(--text-color);
     /* @noflip */
     background-color: var(--action-color-dark);
    text-align: left;
}
}


/* Lists in wikitable data cells are always left-aligned */
/* option select popup → option active */
.wikitable td ul,
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed,
.wikitable td ol,
/* option select popup → selected option */
.wikitable td dl {
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
    /* @noflip */
     color: var(--text-color);
     text-align: left;
    transition: none;
    background-color: var(--action-color-dark);
    background: linear-gradient(90deg,
        var(--action-color) 0%,
        var(--action-color-dark-x2) 100%
    );
}
}


/* Fix for hieroglyphs specificity issue in infoboxes ([[phab:T43869]]) */
/* OPTION SELECT END */
table.mw-hiero-table td {
    vertical-align: middle;
}


/* Change the external link icon to an Adobe icon for all PDF files */
/* #endregion */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
    background: url("//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif")
        no-repeat right;
    /* @noflip */
    padding-right: 18px;
}


/* Messagebox templates */
.messagebox {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    width: 80%;
    margin: 0 auto 1em auto;
    padding: 0.2em;
}


.messagebox.merge {
/* ============ */
     border: 1px solid #c0b8cc;
/* #region =📕= SOURCE EDITOR =📕= */
     background-color: #f0e5ff;
/* ============ */
    text-align: center;
 
/* existing styles */
 
textarea {
    background: var(--bg-color-light-x3);
     border: 1px solid var(--bg-color-light-x4);
     color: var(--text-color);
}
}


.messagebox.cleanup {
/* new styles */
    border: 1px solid #9f9fff;
    background-color: #efefff;
    text-align: center;
}


.messagebox.standard-talk {
:root {
     border: 1px solid #c0c090;
     --se-mode-icon: var(--icon-source-editor-cosmoGreen);
    background-color: #f8eaba;
    margin: 4px auto;
}
}


/* For old WikiProject banners inside banner shells. */
/* page editor content */
.mbox-inside .standard-talk {
.mw-editform #wpTextbox1 {
    border: 1px solid #c0c090;
     background-color: var(--bg-color-light-x2);
     background-color: #f8eaba;
     color: var(--text-color);
     width: 100%;
    margin: 2px 0;
    padding: 2px;
}
}


.messagebox.small {
/* page editor footer section */
     width: 238px;
.mw-editform .editOptions {
     font-size: 85%;
     background-color: var(--bg-color-light);
    /* @noflip */
     color: var(--text-color);
    float: right;
}
     clear: both;
 
     /* @noflip */
/* page editor footer section → edit summary */
    margin: 0 0 1em 1em;
.mw-editform .editOptions input#wpSummary {
     line-height: 1.25em;
     background-color: var(--bg-color-light-x2);
     color: var(--text-color);
     border-color: var(--border-color-light);
}
}


.messagebox.small-talk {
/* page editor footer section → edit summary hover */
    width: 238px;
.mw-editform .editOptions input#wpSummary:hover {
    font-size: 85%;
     border-color: var(--border-color-light-x2);
    /* @noflip */
    float: right;
     clear: both;
    /* @noflip */
    margin: 0 0 1em 1em;
    line-height: 1.25em;
    background-color: #f8eaba;
}
}


/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
/* page editor footer section "save changes" button */
th.mbox-text,
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpSave {
td.mbox-text {
     background-color: var(--action-color);
     /* The message body cell(s) */
     border-color: var(--border-color);
     border: none;
    /* @noflip */
    padding: 0.25em 0.9em; /* 0.9em left/right */
    width: 100%; /* Make all mboxes the same width regardless of text length */
}
}


td.mbox-image {
/* page editor footer section "save changes" button hover */
    /* The left image cell */
.mw-editform
     border: none;
     .editOptions
     /* @noflip */
     .editButtons
     padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */
     .oo-ui-buttonElement-button#wpSave:hover {
     text-align: center;
     background-color: var(--action-color-light);
}
}


td.mbox-imageright {
/* page editor footer section "save changes" button active */
    /* The right image cell */
.mw-editform
     border: none;
     .editOptions
     /* @noflip */
     .editButtons
     padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */
     .oo-ui-buttonElement-button#wpSave:active {
     text-align: center;
     background-color: var(--action-color-dark);
}
}


td.mbox-empty-cell {
/* page editor footer section "show preview/changes" buttons */
    /* An empty narrow cell */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview,
     border: none;
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff,
     padding: 0;
  /* "Manage TemplateData" button above the text editor when editing a template
     width: 1px;
  !important directives are used to override the defaults */
  .tdg-editscreen-main .oo-ui-buttonElement-button {
     background-color: var(--bg-color-light) !important;
     color: var(--text-color) !important;
     border: 1px solid var(--bg-color-light-x4) !important;
}
}


/* Article message box styles */
/* page editor → footer section → show preview/changes buttons hover */
table.ambox {
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:hover,
    margin: 0 10%; /* 10% = Will not overlap with other elements */
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff:hover,
    border: 1px solid #a2a9b1;
  /* "Manage TemplateData" button above the text editor when editing a template
     /* @noflip */
  !important directives are used to override the defaults */
    border-left: 10px solid #36c; /* Default "notice" blue */
  .tdg-editscreen-main .oo-ui-buttonElement-button:hover {
     background-color: #fbfbfb;
     background-color: var(--action-color-light) !important;
    box-sizing: border-box;
    /* override of the default selector */
     color: var(--text-color) !important;
}
}


/* Single border between stacked boxes. */
/* page editor → footer section → show preview/changes buttons active */
table.ambox + table.ambox,
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:active,
table.ambox + .mw-empty-elt + table.ambox {
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff:active,
    margin-top: -1px;
  /* "Manage TemplateData" button above the text editor when editing a template
}
  !important directives are used to override the defaults */
 
  .tdg-editscreen-main .oo-ui-buttonElement-button:active {
.ambox th.mbox-text,
    background-color: var(--action-color-dark) !important;
.ambox td.mbox-text {
     /* override of the default selector */
     /* The message body cell(s) */
     color: var(--text-color) !important;
     padding: 0.25em 0.5em; /* 0.5em left/right */
}
}


.ambox td.mbox-image {
/* text editor toolbar */
    /* The left image cell */
.wikiEditor-ui-toolbar {
     /* @noflip */
     background-color: var(--bg-color-light);
     padding: 2px 0 2px 0.5em; /* 0.5em left, 0px right */
     color: var(--text-color);
}
}


.ambox td.mbox-imageright {
/* text editor toolbar icons - inverting from black to white */
    /* The right image cell */
.wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
    /* @noflip */
.wikiEditor-ui-toolbar .oo-ui-indicator-down {
     padding: 2px 0.5em 2px 0; /* 0px left, 0.5em right */
     filter: invert(100%);
}
}


table.ambox-notice {
/* text editor toolbar icons on hover */
     /* @noflip */
.wikiEditor-ui-toolbar .oo-ui-buttonElement-button:hover,
     border-left: 10px solid #36c; /* Blue */
  /* text editor toolbar mode switch icon button on hover */
  .wikiEditor-ui-toolbar .oo-ui-widget .oo-ui-popupToolGroup-handle:hover {
     /* !important directive makes the override much easier here */
     background-color: var(--bg-color-light-x3) !important;
 
    /* more "snappier" transition */
    transition: background-color 50ms ease-out, color 50ms ease-out,
        border-color 50ms ease-out, box-shadow 50ms ease-out;
}
}


table.ambox-speedy {
/* text editor toolbar mode switch icon button (when active) */
     /* @noflip */
.wikiEditor-ui-toolbar
     border-left: 10px solid #b32424; /* Red */
     .oo-ui-popupToolGroup-active
     background-color: #fee7e6; /* Pink */
     .oo-ui-popupToolGroup-handle {
     background-color: var(--bg-color-light-x4);
}
}


table.ambox-delete {
/* text editor toolbar mode switch icon button → icon (when active) */
     /* @noflip */
.wikiEditor-ui-toolbar
     border-left: 10px solid #b32424; /* Red */
    .oo-ui-popupToolGroup-active
    .oo-ui-popupToolGroup-handle
    .oo-ui-iconElement-icon {
     filter: none;
     background-image: url("data:image/svg+xml, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3E%20edit%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22rgb(10%2C%20212%2C%2098)%22%20d%3D%22m16.77%208%201.94-2a1%201%200%200%200%200-1.41l-3.34-3.3a1%201%200%200%200-1.41%200L12%203.23zM1%2014.25V19h4.75l9.96-9.96-4.75-4.75z%22%2F%3E%3C%2Fsvg%3E");
}
}


table.ambox-content {
/* text editor toolbar → syntax highlight button → icon (when active) */
     /* @noflip */
span.oo-ui-iconElement-icon.oo-ui-icon-highlight.oo-ui-image-progressive {
     border-left: 10px solid #f28500; /* Orange */
     /* disable icon filter applied earlier */
     filter: none;
    /* replace with a proper image instead */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGhpZ2hsaWdodCA8L3RpdGxlPjxnIGZpbGw9IiMzNmMiPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Ik0xNS4xNCAyLjI3YTEgMSAwIDAgMC0xLjQxIDBsLTEwIDEwYTEgMSAwIDAgMCAwIDEuNDFMNCAxNGwtMyA0aDVsMS0xIC4yOS4yOWExIDEgMCAwIDAgMS40MSAwbDEwLTEwYTEgMSAwIDAgMCAuMDMtMS40M3pNNyAxNWwtMi0yIDktOSAyIDJ6Ii8+PC9nPjwvc3ZnPg==");
}
}


table.ambox-style {
/* text editor toolbar labels */
     /* @noflip */
.wikiEditor-ui-toolbar .group .label {
     border-left: 10px solid #fc3; /* Yellow */
     color: var(--text-color);
     filter: brightness(80%);
}
}


table.ambox-move {
/* text editor toolbar labels with .tool-select class (they act as select) */
     /* @noflip */
.wikiEditor-ui-toolbar .group .tool-select .label {
     border-left: 10px solid #9932cc; /* Purple */
     color: var(--text-color);
     filter: none;
}
}


table.ambox-protection {
/* text editor toolbar label (that acts as select) options container */
    /* @noflip */
.wikiEditor-ui-toolbar .group .tool-select .options {
     border-left: 10px solid #a2a9b1; /* Gray-gold */
     background-color: var(--bg-color-light-x2);
}
}


/* Image message box styles */
/* text editor toolbar label (that acts as select) options */
table.imbox {
.wikiEditor-ui-toolbar .group .tool-select .options .option,
     margin: 4px 10%;
  /* text editor toolbar → group lists inside tabs → options */
    border-collapse: collapse;
  .wikiEditor-ui-toolbar .booklet>.index {
     border: 3px solid #36c; /* Default "notice" blue */
     color: var(--text-color);
     background-color: #fbfbfb;
 
    box-sizing: border-box;
     /* a new prop, introduced because of hover */
     transition: background-color 50ms ease-in;
}
}


.imbox .mbox-text .imbox {
/* text editor toolbar → special characters tab → special characters */
     /* For imboxes inside imbox-text cells. */
.wikiEditor-ui-toolbar .page-characters div span {
     margin: 0 -0.5em; /* 0.9 - 0.5 = 0.4em left/right.        */
     color: var(--text-color);
     display: block; /* Fix for webkit to force 100% width.  */
    background-color: var(--bg-color-light);
     border-color: var(--border-color);
 
    /* a new prop, introduced because of hover */
     transition: background-color 50ms ease-in;
}
}


.mbox-inside .imbox {
/* text editor toolbar label (that acts as select) options on hover
    /* For imboxes inside other templates. */
  note: no hover is defined by default, this is an addition */
     margin: 4px;
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover,
  /* text editor toolbar → group lists inside tabs → options on hover */
  .wikiEditor-ui-toolbar .booklet>.index> :hover,
  /* text editor toolbar → special characters tab → special characters on hover */
  .wikiEditor-ui-toolbar .page-characters div span:hover {
     background-color: var(--bg-color-light-x2);
    transition: background-color 50ms ease-out;
}
}


table.imbox-notice {
/* text editor toolbar → special characters tab → special characters on hover */
     border: 3px solid #36c; /* Blue */
.wikiEditor-ui-toolbar .page-characters div span:hover {
     border-color: var(--border-color-light);
}
}


table.imbox-speedy {
/* text editor toolbar → group lists inside tabs → active option */
     border: 3px solid #b32424; /* Red */
.wikiEditor-ui-toolbar .booklet > .index > .current {
     background-color: #fee7e6; /* Pink */
     color: var(--link-color);
     background-color: var(--bg-color-light-x4);
    transition: background-color 50ms ease-out;
}
}


table.imbox-delete {
/* text editor toolbar tab buttons
     border: 3px solid #b32424; /* Red */
  the color property to the selected tab since it has higher priority */
}
.wikiEditor-ui-toolbar .tabs span.tab a {
     color: var(--link-color);


table.imbox-content {
     transition: background-color 100ms ease-out;
     border: 3px solid #f28500; /* Orange */
}
}


table.imbox-style {
/* text editor toolbar selected tab */
     border: 3px solid #fc3; /* Yellow */
.wikiEditor-ui-toolbar .tabs span.tab a.current,
  /* text editor toolbar selected tab, visited */
  .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
     color: var(--link-color);
    background-color: var(--bg-color-light-x4);
 
    transition: background-color 100ms ease-in;
}
}


table.imbox-move {
/* an arrow icon to the left in text editor toolbar tabs */
     border: 3px solid #9932cc; /* Purple */
.wikiEditor-ui-toolbar .tabs span.tab a::before {
     filter: invert(100%);
}
}


table.imbox-protection {
/* editor footer → checkbox */
     border: 3px solid #a2a9b1; /* Gray-gold */
.oo-ui-checkboxInputWidget [type="checkbox"] + span {
    background-color: var(--bg-color-light-x2);
     border-color: var(--border-color-light);
}
}


table.imbox-license {
/* editor footer → checkbox hover */
     border: 3px solid #88a; /* Dark gray */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:hover + span {
    background-color: #f7f8ff; /* Light gray */
     border-color: var(--border-color-light-x2);
}
}


table.imbox-featured {
/* editor footer → checkbox active */
     border: 3px solid #cba135; /* Brown-gold */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
    [type="checkbox"]:active
    + span {
    background-color: var(--action-color);
    /* same as the bg color to make it seamless
  !important here overrides the more lighter color in hover state*/
     border-color: var(--action-color) !important;
    /* disabling the default box shadow, which just doubles the border when active/in focus  */
    box-shadow: none;
}
}


/* Category message box styles */
/* editor footer → checkbox focus */
table.cmbox {
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:focus + span {
    margin: 3px 10%;
     /* background-color: var(--action-color-dark-x2er); */
    border-collapse: collapse;
    border: 1px solid #a2a9b1;
     background-color: #dfe8ff; /* Default "notice" blue */
    box-sizing: border-box;
}
}


table.cmbox-notice {
/* editor footer → checkbox (checked) */
     background-color: #d8e8ff; /* Blue */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
    [type="checkbox"]:checked
    + span {
     background-color: var(--action-color-light);
}
}


table.cmbox-speedy {
/* editor footer → checkbox (checked) hover */
    margin-top: 4px;
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
     margin-bottom: 4px;
     [type="checkbox"]:checked
     border: 4px solid #b32424; /* Red */
     + span:hover {
     background-color: #ffdbdb; /* Pink */
     background-color: var(--action-color-light-x2);
}
}


table.cmbox-delete {
/* editor footer → checkbox (checked) active */
     background-color: #ffdbdb; /* Pink */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
    [type="checkbox"]:checked
    + span:active {
     background-color: var(--action-color-dark);
}
}


table.cmbox-content {
/* legal stuff above the buttons at the footer of the editor
     background-color: #ffe7ce; /* Orange */
  note: this just adds additional spacing between the text and the checkboxes for visual clarity */
#editpage-copywarn {
     margin-top: 1rem;
}
}


table.cmbox-style {
/* override for page editor toolbar → help tab → table → th */
     background-color: #fff9db; /* Yellow */
.wikiEditor-ui-toolbar .page-table th {
     text-align: center;
    color: var(--text-color);
}
}


table.cmbox-move {
/* override for page editor toolbar → help tab → table → td */
     background-color: #e4d8ff; /* Purple */
.wikiEditor-ui-toolbar .page-table td {
     color: var(--text-color);
}
}


table.cmbox-protection {
/* override page editor toolbar → tabs → left section
     background-color: #efefe1; /* Gray-gold */
  note: both these overrides are done just
  to make the help section a little larger and thus more readable */
.wikiEditor-ui-toolbar .booklet>.index,
  /* override page editor toolbar → tabs → right section */
  .wikiEditor-ui-toolbar .booklet .pages {
     height: 12rem;
}
}


/* Other pages message box styles */
/* editor → toolbar → mode switch button → popup (that opens on click) */
table.ombox {
.wikiEditor-ui-toolbar .oo-ui-popupToolGroup-tools {
    margin: 4px 10%;
     background-color: var(--bg-color-light);
    border-collapse: collapse;
    border: 1px solid #a2a9b1; /* Default "notice" gray */
     background-color: #f8f9fa;
    box-sizing: border-box;
}
}


table.ombox-notice {
/* editor → toolbar → mode switch button → popup on click → inactive mode (span) */
     border: 1px solid #a2a9b1; /* Gray */
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled {
     transition: background-color 100ms ease-in;
    color: var(--text-color);
}
}


table.ombox-speedy {
/* editor → toolbar → mode switch button → popup on click → inactive mode (span) hover */
     border: 2px solid #b32424; /* Red */
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled:hover,
     background-color: #fee7e6; /* Pink */
  /* editor → toolbar → mode switch button → popup on click → inactive mode (a) active */
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled .oo-ui-tool-link:active {
     color: var(--text-color);
     background-color: var(--bg-color-light-x2);
    transition: background-color 100ms ease-out;
}
}


table.ombox-delete {
/* editor → toolbar → mode switch button → popup on click → inactive mode (a) hover */
     border: 2px solid #b32424; /* Red */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled
    .oo-ui-tool-link:hover {
     /* duplicate background, removing it */
    background-color: transparent;
}
}


table.ombox-content {
/* editor → toolbar → mode switch button → popup on click → selected mode (span) */
     border: 1px solid #f28500; /* Orange */
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active,
  /* editor → toolbar → mode switch button → popup on click → selected mode (a) */
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active .oo-ui-tool-link,
  /* editor → toolbar → mode switch button → popup on click → selected mode (a) active */
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active .oo-ui-tool-link:active {
     background-color: var(--bg-color-light-x3);
}
}


table.ombox-style {
/* editor → toolbar → mode switch button → popup on click → selected mode (a) hover */
    border: 1px solid #fc3; /* Yellow */
.wikiEditor-ui-toolbar
}
    .oo-ui-toolbar-popups
 
    .oo-ui-widget-enabled.oo-ui-tool-active
table.ombox-move {
    .oo-ui-tool-link:hover {
     border: 1px solid #9932cc; /* Purple */
     background-color: var(--bg-color-light-x3);
}
}


table.ombox-protection {
/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → title */
     border: 2px solid #a2a9b1; /* Gray-gold */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeVisual.oo-ui-tool-active
    .oo-ui-tool-title {
     color: var(--text-color);
}
}


/* Talk page message box styles */
/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → icon */
table.tmbox {
.wikiEditor-ui-toolbar
     margin: 4px 10%;
    .oo-ui-toolbar-popups
     border-collapse: collapse;
     .oo-ui-widget-enabled.oo-ui-tool-name-editModeVisual.oo-ui-tool-active
     border: 1px solid #c0c090; /* Default "notice" gray-brown */
     .oo-ui-iconElement-icon {
     background-color: #f8eaba;
     /* hue rotate  to ≈strongBlue (instead of a separate image) */
    min-width: 80%;
     filter: hue-rotate(-23.06deg) saturate(150%) brightness(120%);
    box-sizing: border-box;
}
}


.tmbox.mbox-small {
/* editor → toolbar → mode switch button → popup on click → source editing mode active → title */
     min-width: 0; /* reset the min-width of tmbox above        */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeSource.oo-ui-tool-active
    .oo-ui-tool-title {
     color: var(--text-color);
}
}


.mediawiki .mbox-inside .tmbox {
/* editor → toolbar → mode switch button → popup on click → source editing mode active → icon */
     /* For tmboxes inside other templates. The "mediawiki" class ensures that */
.wikiEditor-ui-toolbar
     margin: 2px 0; /* this declaration overrides other styles (including mbox-small above)  */
    .oo-ui-toolbar-popups
     width: 100%; /* For Safari and Opera */
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeSource.oo-ui-tool-active
    .oo-ui-iconElement-icon {
     /* cosmoGreen "source editing" mode icon */
     background-image: linear-gradient(transparent, transparent),
        var(--se-mode-icon);
    /* disable the hue rotating filter since the correct icon is provided */
     filter: none;
}
}


.mbox-inside .tmbox.mbox-small {
/* #region borders */
    /* "small" tmboxes should not be small when  */
 
    line-height: 1.5em; /* also "nested", so reset styles that are   */
/* editor toolbar and content combined */
    font-size: 100%; /* set in "mbox-small" above.               */
.wikiEditor-ui .wikiEditor-ui-view,
  /* editor toolbar section that open with tabs */
  .wikiEditor-ui-toolbar .sections .section,
  /* editor toolbar label (that acts as select) options container */
  .wikiEditor-ui-toolbar .group .tool-select .options,
  /* text editor toolbar → special characters tab → special characters */
  .wikiEditor-ui-toolbar .page-characters div span,
  /* editor → toolbar → mode switch button → popup (that opens on click) */
   .wikiEditor-ui-toolbar .oo-ui-popupToolGroup-tools,
  /* editor footer */
  div.editOptions,
  /* summary input */
  div.editOptions #wpSummary,
  /* content body */
  #wpTextbox1 {
    border: 1px solid var(--border-color-light);
}
}


table.tmbox-speedy {
/* editor toolbar groups of buttons, except the last one */
     border: 2px solid #b32424; /* Red */
.wikiEditor-ui-toolbar .group:not(:last-child) {
    background-color: #fee7e6; /* Pink */
     border-right: 1px solid var(--border-color-light);
}
}


table.tmbox-delete {
/* editor toolbar last groups of buttons */
     border: 2px solid #b32424; /* Red */
.wikiEditor-ui-toolbar .group:last-child {
     border-left: 1px solid var(--border-color-light);
}
}


table.tmbox-content {
/* this is the last button on the main row of the editor toolbar */
     border: 2px solid #f28500; /* Orange */
.wikiEditor-ui-toolbar .section-main .group:last-child {
     border-right: 1px solid var(--border-color-light);
}
}


table.tmbox-style {
/* editor toolbar */
     border: 2px solid #fc3; /* Yellow */
.wikiEditor-ui .wikiEditor-ui-top {
     border-bottom: 1px solid var(--border-color-light);
}
}


table.tmbox-move {
/* editor toolbar → mode switch button
     border: 2px solid #9932cc; /* Purple */
  it has extra border on the bottom */
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
     border-bottom: none;
}
}


table.tmbox-protection,
/* ================================================ */
table.tmbox-notice {
/* #region <syntaxhighlight> CODE BLOCKS  */
    border: 1px solid #c0c090; /* Gray-brown */
/* ================================================ */
}


/* Footer and header message box styles */
:root {
table.fmbox {
    --synt-high--color-darkCreamy: #262421;
     clear: both;
    --synt-high--color-lightCreamy: hsl(38, 5%, 45%);
     margin: 0.2em 0;
 
     width: 100%;
     --synt-high--color-comment: var(--synt-high--color-lightCreamy);
     border: 1px solid #a2a9b1;
     --synt-high--color-err: #ff1a94;
     background-color: #f8f9fa; /* Default "system" gray */
     --synt-high--color-operator: #f92672;
     box-sizing: border-box;
    --synt-high--color-punctuation: #f8f8f2;
     --synt-high--color-string: #e6db74;
     --synt-high--color-date: var(--synt-high--color-string);
    /* names for things such as variables, functions, classes, etc. */
    --synt-high--color-name: #a6e22e;
    /* literals, mostly numbers, some string stuff too. */
     --synt-high--color-literal: #ae81ff;
    /* keywords and constants */
    --synt-high--color-keyword: #66d9ef;
}
}


table.fmbox-system {
/* Modified version of https://github.com/richleland/pygments-css/blob/master/monokai.css */
     background-color: #191970;
 
}
/* Code block container  */
.mw-content-ltr.mw-highlight-lines pre {
     background-color: var(--code-color-bg);
    color: var(--code-color-text);
    border-color: var(--code-color-border);
    font-size: 90%;


table.fmbox-warning {
     /* targets the line numbers bg, when they (line numbers) are present */
     border: 1px solid #bb7070; /* Dark pink */
     box-shadow: rgb(34, 37, 39) 2.75em 0px 0px inset;
     background-color: #ffdbdb; /* Pink */
}
}


table.fmbox-editnotice {
/* Code block → line numbers  */
     background-color: transparent;
.mw-highlight .linenos {
    color: rgb(165, 155, 142);
}
 
/* Highlighted Lines */
.mw-highlight .hll {
     background-color: var(--action-color);
}
}


/* Div based "warning" style fmbox messages. */
.mw-highlight {
div.mw-warning-with-logexcerpt,
     background: #272822;
div.mw-lag-warn-high,
     color: #f8f8f2;
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
     clear: both;
    margin: 0.2em 0;
    border: 1px solid #bb7070;
     background-color: #ffdbdb;
    padding: 0.25em 0.9em;
    box-sizing: border-box;
}
}


/* Use default color for partial block fmbox banner per [[Special:PermaLink/1028105567#pblock-style]] */
/* Error */
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt {
.mw-highlight .err {
    border-color: #fc3;
    color: var(--synt-high--color-err);
     background-color: #fef6e7;
     background-color: hsl(328, 40%, 16%);
}
}


/* These mbox-small classes must be placed after all other
/* Keyword */
ambox/tmbox/ombox etc classes. "html body.mediawiki" is so
.mw-highlight .k {
they override "table.ambox + table.ambox" above. */
     color: var(--synt-high--color-keyword);
html body.mediawiki .mbox-small {
     /* For the "small=yes" option. */
    /* @noflip */
    clear: right;
    /* @noflip */
    float: right;
    /* @noflip */
    margin: 4px 0 4px 1em;
    box-sizing: border-box;
    width: 238px;
    font-size: 88%;
    line-height: 1.25em;
}
}


html body.mediawiki .mbox-small-left {
/* Literal */
    /* For the "small=left" option. */
.mw-highlight .l {
    /* @noflip */
     color: var(--synt-high--color-literal);
     margin: 4px 1em 4px 0;
    box-sizing: border-box;
    overflow: hidden;
    width: 238px;
    border-collapse: collapse;
    font-size: 88%;
    line-height: 1.25em;
}
}


/* Style for compact ambox */
/* Name */
/* Hide the images */
.mw-highlight .n {
.compact-ambox table .mbox-image,
     color: #f8f8f2;
.compact-ambox table .mbox-imageright,
.compact-ambox table .mbox-empty-cell {
     display: none;
}
}


/* Remove borders, backgrounds, padding, etc. */
/* Operator */
.compact-ambox table.ambox {
.mw-highlight .o {
     border: none;
     color: var(--synt-high--color-operator);
    border-collapse: collapse;
    background-color: transparent;
    margin: 0 0 0 1.6em !important;
    padding: 0 !important;
    width: auto;
    display: block;
}
}


body.mediawiki .compact-ambox table.mbox-small-left {
/* Punctuation */
     font-size: 100%;
.mw-highlight .p {
    width: auto;
     color: var(--synt-high--color-punctuation);
    margin: 0;
}
}


/* Style the text cell as a list item and remove its padding */
/* Comment */
.compact-ambox table .mbox-text {
.mw-highlight .c {
     padding: 0 !important;
     color: var(--synt-high--color-comment);
    margin: 0 !important;
}
}


.compact-ambox table .mbox-text-span {
/* Comment.Hashbang */
     display: list-item;
.mw-highlight .ch {
    line-height: 1.5em;
     color: var(--synt-high--color-comment);
    list-style-type: square;
    list-style-image: url(/w/skins/MonoBook/resources/images/bullet.svg);
}
}


/* Allow for hiding text in compact form */
/* Comment.Multiline */
.compact-ambox .hide-when-compact {
.mw-highlight .cm {
     display: none;
     color: var(--synt-high--color-comment);
}
}


/* Remove underlines from certain links */
/* Comment.Preproc */
.nounderlines a,
.mw-highlight .cp {
.IPA a:link,
     color: var(--synt-high--color-comment);
.IPA a:visited {
     text-decoration: none !important;
}
}


/* Prevent line breaks in silly places where desired (nowrap)
/* Comment.PreprocFile */
and links when we don't want them to (nowraplinks a) */
.mw-highlight .cpf {
.nowrap,
     color: var(--synt-high--color-comment);
.nowraplinks a {
     white-space: nowrap;
}
}


/* But allow wrapping where desired: */
/* Comment.Single */
.wrap,
.mw-highlight .c1 {
.wraplinks a {
     color: var(--synt-high--color-comment);
     white-space: normal;
}
}


/* Increase the height of the image upload box */
/* Comment.Special */
#wpUploadDescription {
.mw-highlight .cs {
     height: 13em;
     color: var(--synt-high--color-comment);
}
}


/* Minimum thumb width */
/* Generic.Deleted */
.thumbinner {
.mw-highlight .gd {
     min-width: 100px;
     color: #f92672;
}
}


/* Prevent floating boxes from overlapping any category listings,
/* Generic.Emph */
file histories, edit previews, and edit [Show changes] views. */
.mw-highlight .ge {
#mw-subcategories,
     font-style: italic;
#mw-pages,
#mw-category-media,
#filehistory,
#wikiPreview,
#wikiDiff {
     clear: both;
}
}


/* Selectively hide headers in WikiProject banners */
/* Generic.Inserted */
/* TemplateStyles */
.mw-highlight .gi {
.wpb .wpb-header {
     color: var(--synt-high--color-name);
     display: none;
}
}


.wpbs-inner .wpb .wpb-header {
/* Generic.Strong */
     display: table-row;
.mw-highlight .gs {
     font-weight: bold;
}
}


.wpbs-inner .wpb-outside {
/* Generic.Subheading */
     display: none; /* hide things that should only display outside shells */
.mw-highlight .gu {
     color: #75715e;
}
}


/* Styling for Abuse Filter tags */
/* Keyword.Constant */
.mw-tag-markers {
.mw-highlight .kc {
     font-style: italic;
     color: var(--synt-high--color-keyword);
    font-size: 90%;
}
}


/* Hide stuff meant for accounts with special permissions. Made visible again in
/* Keyword.Declaration */
[[MediaWiki:Group-checkuser.css]], [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-abusefilter.css]],
.mw-highlight .kd {
[[MediaWiki:Group-abusefilter-helper.css]], [[MediaWiki:Group-patroller.css]],
    color: var(--synt-high--color-keyword);
[[MediaWiki:Group-templateeditor.css]], [[MediaWiki:Group-extendedmover.css]],
[[MediaWiki:Group-extendedconfirmed.css]], and [[Mediawiki:Group-autoconfirmed.css]]. */
.checkuser-show,
.sysop-show,
.abusefilter-show,
.abusefilter-helper-show,
.patroller-show,
.templateeditor-show,
.extendedmover-show,
.extendedconfirmed-show,
.autoconfirmed-show,
.user-show {
    display: none;
}
}


/* Hide the redlink generated by {{Editnotice}},
/* Keyword.Namespace */
this overrides the ".sysop-show { display: none; }" above that applies
.mw-highlight .kn {
to the same link as well. See [[phab:T45013]]
     color: #f92672;
 
Hide the images in editnotices to keep them readable in VE view.
Long term, editnotices should become a core feature so that they can be designed responsive. */
.ve-ui-mwNoticesPopupTool-item .editnotice-redlink,
.ve-ui-mwNoticesPopupTool-item .mbox-image,
.ve-ui-mwNoticesPopupTool-item .mbox-imageright {
     display: none !important;
}
}


/* Remove bullets when there are multiple edit page warnings */
/* Keyword.Pseudo */
ul.permissions-errors > li {
.mw-highlight .kp {
     list-style: none none;
     color: var(--synt-high--color-keyword);
}
}


ul.permissions-errors {
/* Keyword.Reserved */
     margin: 0;
.mw-highlight .kr {
     color: var(--synt-high--color-keyword);
}
}


/* texhtml class for inline math (based on generic times-serif class) */
/* Keyword.Type */
span.texhtml {
.mw-highlight .kt {
     font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
     color: var(--synt-high--color-keyword);
    font-size: 118%;
    line-height: 1;
    white-space: nowrap;
    /* Force tabular and lining display for texhtml */
    -moz-font-feature-settings: "lnum", "tnum", "kern" 0;
    -webkit-font-feature-settings: "lnum", "tnum", "kern" 0;
    font-feature-settings: "lnum", "tnum", "kern" 0;
    font-variant-numeric: lining-nums tabular-nums;
    font-kerning: none;
}
}


span.texhtml span.texhtml {
/* Literal.Date */
     font-size: 100%;
.mw-highlight .ld {
     color: var(--synt-high--color-date);
}
}


span.mwe-math-mathml-inline {
/* Literal.Number */
     font-size: 118%;
.mw-highlight .m {
     color: var(--synt-high--color-literal);
}
}


/* Make <math display="block"> be left aligned with one space indent for
/* Literal.String */
  * compatibility with style conventions
.mw-highlight .s {
  */
    color: var(--synt-high--color-string);
.mwe-math-fallback-image-display,
}
.mwe-math-mathml-display {
 
    margin-left: 1.6em !important;
/* Name.Attribute */
    margin-top: 0.6em;
.mw-highlight .na {
     margin-bottom: 0.6em;
     color: var(--synt-high--color-name);
}
}


.mwe-math-mathml-display math {
/* Name.Builtin */
     display: inline;
.mw-highlight .nb {
     color: #f8f8f2;
}
}


/* Work-around for [[phab:T25965]] / [[phab:T100106]] (Kaltura advertisement) */
/* Name.Class */
.k-player .k-attribution {
.mw-highlight .nc {
     visibility: hidden;
     color: var(--synt-high--color-name);
}
}


/* Move 'play' button of video player to bottom left corner */
/* Name.Constant */
.PopUpMediaTransform a .play-btn-large {
.mw-highlight .no {
     margin: 0;
     color: var(--synt-high--color-keyword);
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
}
}


@media screen {
/* Name.Decorator */
    /* Gallery styles background changes are restricted to screen view.
.mw-highlight .nd {
In printing we should avoid applying backgrounds. */
    color: var(--synt-high--color-name);
    /* The backgrounds for galleries. */
}
    #content .gallerybox div.thumb {
        /* Light gray padding */
        background-color: #f8f9fa;
    }
    /* Put a chequered background behind images, only visible if they have transparency.
'.filehistory a img' and '#file img:hover' are handled by MediaWiki core (as of 1.19) */
    .gallerybox .thumb img {
        background: #fff
            url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png)
            repeat;
    }
    /* But not on articles, user pages, portals or with opt-out. */
    .ns-0 .gallerybox .thumb img,
    .ns-2 .gallerybox .thumb img,
    .ns-100 .gallerybox .thumb img,
    .nochecker .gallerybox .thumb img {
        background-image: none;
    }


    /* Display "From Wikipedia, the free encyclopedia" in skins that support it,
/* Name.Entity */
do not apply to print mode */
.mw-highlight .ni {
    /*
    color: #f8f8f2;
  #siteSub {
  display: block;
  }
  */
}
}


/* Hide FlaggedRevs notice UI when there are no pending changes */
/* Name.Exception */
.flaggedrevs_draft_synced,
.mw-highlight .ne {
  .flaggedrevs_stable_synced,
     color: var(--synt-high--color-name);
  /* "Temporary" to remove links in sidebar T255381 */
  #t-upload,
  /* Hide broken download box on Special:Book pending T285400 */
  .mw-special-Book #coll-downloadbox {
     display: none;
}
}


/* Fix horizontal scrolling of long edit summaries T158725 */
/* Name.Function */
span.comment {
.mw-highlight .nf {
     overflow-wrap: break-word;
     color: var(--synt-high--color-name);
}
}


#mw-page-base {
/* Name.Label */
    background: #1b1b1f;
.mw-highlight .nl {
     color: var(--text-color);
     color: #f8f8f2;
    border: #1b1b1f;
}
}


.mediawiki,
/* Name.Namespace */
.mw-page-container {
.mw-highlight .nn {
    background: #1b1b1f;
     color: #f8f8f2;
     color: var(--text-color);
    border: #1b1b1f;
}
}


.mw-body {
/* Name.Other */
    background: #212126;
.mw-highlight .nx {
     color: var(--text-color);
     color: var(--synt-high--color-name);
    border: black;
}
}


#mw-panel {
/* Name.Property */
    background: #1b1b1f;
.mw-highlight .py {
     color: var(--text-color);
     color: #f8f8f2;
    border: #1b1b1f;
}
}


#mw-content-container,
/* Name.Tag */
#mw-header-container,
.mw-highlight .nt {
#mw-header-nav-hack,
    color: #f92672;
#mw-content-wrapper,
}
#mw-content,
 
#p-logo {
/* Name.Variable */
    background: #1b1b1f;
.mw-highlight .nv {
     color: var(--text-color);
     color: #f8f8f2;
    border: #1b1b1f;
}
}


#mw-header-nav-hack {
/* Operator.Word */
    background: #212126;
.mw-highlight .ow {
     color: var(--text-color);
     color: var(--synt-high--color-operator);
    border: #212126;
}
}


.mw-code {
/* Text.Whitespace */
     background: #212126;
.mw-highlight .w {
    color: var(--text-color);
     color: #f8f8f2;
}
}


footer,
/* Literal.Number.Bin */
#footer-info-lastmod,
.mw-highlight .mb {
#footer-info-copyright {
     color: var(--synt-high--color-literal);
     color: var(--text-color);
}
}


p,
/* Literal.Number.Float */
h1,
.mw-highlight .mf {
h2,
     color: var(--synt-high--color-literal);
h3,
h4,
h5,
h6,
li {
     color: var(--text-color);
}
}


a,
/* Literal.Number.Hex */
.vector-menu-portal .vector-menu-content li a,
.mw-highlight .mh {
.vector-menu-tabs li a,
    color: var(--synt-high--color-literal);
body.skin--responsive #p-cactions li a {
    color: lightblue;
}
}


a:visited,
/* Literal.Number.Integer */
.vector-menu-portal .vector-menu-content li a:visited,
.mw-highlight .mi {
.vector-menu-tabs li a:visited,
    color: var(--synt-high--color-literal);
body.skin--responsive #p-cactions li a:visited {
    color: #007fff;
}
}


body.skin--responsive #p-cactions li a {
/* Literal.Number.Oct */
     background: var(--bg-color-light-x2);
.mw-highlight .mo {
     color: var(--synt-high--color-literal);
}
}


.mw-prefs-buttons {
/* Literal.String.Affix */
     background: var(--bg-color-light-x2);
.mw-highlight .sa {
     color: var(--synt-high--color-string);
}
}


a.extiw:visited,
/* Literal.String.Backtick */
a.external:visited,
.mw-highlight .sb {
.mw-parser-output a.extiw:visited,
    color: var(--synt-high--color-string);
.mw-parser-output a.external:visited,
body.skin--responsive #p-cactions li a.external:visited {
    color: #8a2be2;
}
}


.vector-menu-tabs .selected a,
/* Literal.String.Char */
.vector-menu-tabs .selected a:visited,
.mw-highlight .sc {
body.skin--responsive #p-cactions li.selected a {
     color: var(--synt-high--color-string);
     color: var(--text-color);
    font-weight: bold;
}
}


body.skin--responsive #p-cactions li.selected a {
/* Literal.String.Delimiter */
     background: var(--bg-color-light-x2);
.mw-highlight .dl {
     color: var(--synt-high--color-string);
}
}


.vector-menu-tabs li {
/* Literal.String.Doc */
     background: #212126;
.mw-highlight .sd {
     color: var(--synt-high--color-string);
}
}


.tools-inline li a {
/* Literal.String.Double */
     filter: invert(100%);
.mw-highlight .s2 {
     color: var(--synt-high--color-string);
}
}


.tools-inline span {
/* Literal.String.Escape */
    filter: invert(100%);
.mw-highlight .se {
     color: var(--text-color);
     color: var(--synt-high--color-literal);
}
}


#personal h2,
/* Literal.String.Heredoc */
#site-tools h2,
.mw-highlight .sh {
#site-navigation h2,
     color: var(--synt-high--color-string);
#searchButton {
     filter: invert(100%);
}
}


#personal h2 span {
/* Literal.String.Interpol */
     filter: invert(100%);
.mw-highlight .si {
     color: var(--synt-high--color-string);
}
}


#mw-site-navigation .sidebar-chunk,
/* Literal.String.Other */
#mw-site-navigation .sidebar-chunk,
.mw-highlight .sx {
#mw-related-navigation .sidebar-chunk,
     color: var(--synt-high--color-string);
body.skin--responsive .portlet,
body.skin--responsive .pBody {
    background: #212126;
     color: var(--text-color);
    border: #1b1b1f;
}
}


#p-logo-text a {
/* Literal.String.Regex */
     color: var(--text-color);
.mw-highlight .sr {
     color: var(--synt-high--color-string);
}
}


#ca-nstab-mediawiki.a {
/* Literal.String.Single */
     color: var(--text-color);
.mw-highlight .s1 {
     color: var(--synt-high--color-string);
}
}


#mw-changeslist-links {
/* Literal.String.Symbol */
    background: #212126;
.mw-highlight .ss {
     color: var(--text-color);
     color: var(--synt-high--color-string);
}
}


#simpleSearch {
/* Name.Builtin.Pseudo */
    background: var(--bg-color-light-x2);
.mw-highlight .bp {
    border: 1px solid var(--bg-color-light-x4);
     color: #f8f8f2;
     color: var(--text-color);
}
}


#searchInput {
/* Name.Function.Magic */
     color: var(--text-color);
.mw-highlight .fm {
     color: var(--synt-high--color-name);
}
}


#pt-createaccount {
/* Name.Variable.Class */
     visibility: hidden;
.mw-highlight .vc {
     color: #f8f8f2;
}
}


.vector-user-links .vector-user-menu-more .vector-menu-content-list li a,
/* Name.Variable.Global */
#personal .dropdown {
.mw-highlight .vg {
     background: var(--bg-color-light-x2);
     color: #f8f8f2;
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


body.skin--responsive #p-cactions li.selected {
/* Name.Variable.Instance */
     border: var(--bg-color-light-x4);
.mw-highlight .vi {
     color: #f8f8f2;
}
}


.vector-menu-tabs .selected {
/* Name.Variable.Magic */
     background: #1b1b1f;
.mw-highlight .vm {
     color: #f8f8f2;
}
}


#pagehistory li.selected {
/* Literal.Number.Integer.Long */
     background: #1b4d3e;
.mw-highlight .il {
    font-weight: bold;
     color: var(--synt-high--color-literal);
}
}


div.mw-warning-with-logexcerpt,
/* #endregion */
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
    background: #7c0a02;
    border: 1px solid #bb7070;
}


.wikitable {
    background: var(--bg-color-light-x3);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}


.toc {
/* ============ */
    background: var(--bg-color-light-x3);
/* #region SOURCE EDITOR → SYNTAX HIGHLIGHTING */
    border: 1px solid var(--bg-color-light-x4);
/* based on: https://github.com/wikimedia/mediawiki-extensions-CodeMirror/blob/master/resources/mode/mediawiki/mediawiki.less */
    color: var(--text-color);
/* ============ */
}


.mw-content-ltr .tocnumber {
:root {
     color: grey;
     /* "se-cm" = Source Editor - Code Mirror */
}


.wikitable > tr > th,
    /* same color as for source editor */
.wikitable > tr > td,
    --se-cm--bg-color: var(--bg-color-light-x2);
.wikitable > * > tr > th,
    /* same color as for code block */
.wikitable > * > tr > td {
     --se-cm--gutter-bg-color: var(--code-color-bg);
     border: 1px solid var(--bg-color-light-x4);
    /* margin to the left for the main contents of the editor */
}
    --se-cm--main-contents-left-margin: 0.25rem;
 
    /* bg color for pre/nowiki tags contents */
    --se-cm--pre-bg-color: hsl(205, 21%, 15%);


.wikitable > * > tr > th {
    /* from the <syntaxhighlight> theme */
     background: var(--bg-color-light-x2);
     --se-cm--comment-color: var(--synt-high--color-comment);
     border: 1px solid var(--bg-color-light-x4);
     --se-cm--error-color: var(--red-color);
    color: var(--text-color);
}


.quickbox {
    /* link itself */
     border: 1px solid #303038;
     --se-cm--link-color: var(--link-color);
     background: var(--bg-color-light-x2);
     /* link delimiter */
}
    --se-cm--cm-mw-link-delimiter: var(--se-cm--template-delimiter-color);
    /* link text */
    --se-cm--link-text-color: var(--text-color);
    --se-cm--link-brackets-color: var(--se-cm--link-text-color);


.quickboxhead {
    /* things like "DISPLAYTITLE" "templates" (the whole template except the value part) */
     border-bottom: 1px solid #303038;
     --se-cm--parser-function-color: var(--synt-high--color-operator);
    background: #1b1b1f;
    text-align: center;
}


.thumbinner,
    /* table brackets and row delimiter */
.thumbinner .thumbimage {
     --se-cm--table-punctuation-color: var(--synt-high--color-punctuation);
     background: var(--bg-color-light-x2);
     /* table settings */
     border: 1px solid var(--bg-color-light-x4);
    --se-cm--table-settings-color: var(--se-cm--template-arg-name-color);
    color: var(--text-color);
}


table.ombox tbody,
    /* template name */
table.ombox {
    --se-cm--template-name-color: hsl(80, 76%, 53%);
     background: var(--bg-color-light-x2);
    /* template arg names */
     border: 1px solid var(--bg-color-light-x4);
     --se-cm--template-arg-name-color: hsl(80, 76%, 42%);
     color: var(--text-color);
     /* template brackets */
}
    --se-cm--template-brackets-color: var(--synt-high--color-name);
     /* template arg values */
    --se-cm--template-values-color: hsl(207,90%,83%);
    /* template arg delimiters */
    --se-cm--template-delimiter-color: hsl(205, 71%, 85%);


table.ambox tbody,
    /* template param name */
table.ambox {
     --se-cm--template-param-name-color: var(--synt-high--color-keyword);
     background: var(--bg-color-light-x2);
     /* template param brackets */
     border-top: 1px solid var(--bg-color-light-x4);
    --se-cm--template-param-brackets-color: hsl(190, 61%, 40%);
     border-bottom: 1px solid var(--bg-color-light-x4);
    /* template param values */
     border-right: 1px solid var(--bg-color-light-x4);
    --se-cm--template-param-value-color: hsl(207,90%,83%);
     color: var(--text-color);
     /* template param delimiter */
    --se-cm--template-param-delimiter-color: var(
        --se-cm--template-delimiter-color
    );
 
     /* wiki formatting: headers, bullet points, bold/italic quotes, etc. */
    --se-cm--wikitext-formatting-color: var(--blue-color-light);
    /* html tags, including ones specific for the wiki (like syntaxhighlight) */
    --se-cm--xml-tag-color: hsl(41, 53%, 67%);
 
     /* selection color */
    --se-cm--selection-color: hsl(205, 21%, 30%);
    /* bg color applied when selecting a bracket that has a match (in templates) */
    --se-cm--matching-brackets-bg-color: hsl(205, 21%, 44%);
}
}


table.imbox tbody,
/* the whole content body code mirror wrapper */
table.imbox {
.CodeMirror-wrap {
     background: var(--bg-color-light-x2);
    /* same color as for source editor */
     border: 1px solid var(--bg-color-light-x4);
     background-color: var(--se-cm--bg-color);
 
     /* color for the text that the other rules don't apply to (regular text, header text, etc.) */
     color: var(--text-color);
     color: var(--text-color);
}
}


/* OOUI PAIN */
/* the actual lines of text */
/* Recent Changes */
.CodeMirror pre.CodeMirror-line {
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
    /* a little bit of margin for the main content */
     .oo-ui-tagMultiselectWidget-handle,
     margin-left: var(--se-cm--main-contents-left-margin);
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background: var(--bg-color-light-x2);
    border: 1px solid #303038;
    color: var(--text-color);
}
}


/* Generic OOUI elements */
/* gutters?? */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
.CodeMirror-wrap .CodeMirror-gutters {
     background: var(--bg-color-light-x2);
     border-color: var(--border-color);
     border: 1px solid #303038;
}
     color: var(--text-color);
 
/* gutter */
.CodeMirror-wrap .CodeMirror-gutter {
     /* same color as for code block */
     background-color: var(--se-cm--gutter-bg-color);
}
}


.oo-ui-popupWidget-popup {
/* selection */
     background: var(--bg-color-light-x3);
.CodeMirror-line::selection,
    border: 1px solid var(--bg-color-light-x4);
/* selection */
    color: var(--text-color);
.CodeMirror-line>span::selection,
/* selection */
.CodeMirror-line>span>span::selection {
     background-color: var(--se-cm--selection-color);
}
}


/* SITE SPECIFIC */
/* bullet point symbol */
/*
.cm-mw-list,
  .chemrecipeimg img {
/* ???? */
  background-image: url('https://wiki.spacestation14.com/w/images/7/75/Beaker_Fill.png');
.cm-mw-indenting {
  background-blend-mode: multiply;
    color: var(--se-cm--wikitext-formatting-color);
  background-position: center;
  }
  */
@media screen {
    .mw-body-content .recipeimg a > img {
        padding: 0;
        margin: 0;
        border: 0;
        width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        max-height: 32px !important;
    }
}
}


.positive {
/* magic words */
     color: #00ff00;
.cm-mw-doubleUnderscore,
     font-weight: bold;
/* magic words */
.cm-mw-double-underscore,
/* ???? user signature maybe */
.cm-mw-signature,
/* ???? hr tags prob */
.cm-mw-hr {
     color: var(--se-cm--wikitext-formatting-color);
 
     /* override the defaults */
    background-color: inherit;
}
}


.negative {
/* html sequences like "&nbsp;" */
     color: #ff0000;
.cm-mw-mnemonic,
     font-weight: bold;
/* ???? */
.cm-mw-html-entity {
     color: var(--se-cm--xml-tag-color);
    background-color: #684905;
     border-radius: 2px;
}
}


.anglerect {
/* comments */
    --angle-rect-clip-size: 16px;
.cm-mw-comment {
     clip-path: polygon(
     color: var(--se-cm--comment-color);
        0 0,
        calc(100% - var(--angle-rect-clip-size)) 0,
        100% var(--angle-rect-clip-size),
        100% 100%,
        var(--angle-rect-clip-size) 100%,
        0 calc(100% - var(--angle-rect-clip-size))
    );
}
}


/* hack for mobile/nomobile */
/* formatting: 3 apostrophes for bold text */
.flex {
.cm-mw-apostrophes-bold,
     display: flex;
/* formatting: 2 apostrophes for italic text
todo make them separate? better eligibility */
.cm-mw-apostrophes-italic {
     color: var(--se-cm--wikitext-formatting-color);
}
}


@media screen and (min-width: 851px) {
/* template name */
     .mobile {
.cm-mw-template-name {
        display: none;
    color: var(--se-cm--template-name-color);
    }
     /* disable the default */
    text-decoration: none;
}
}


@media screen and (max-width: 850px) {
/* template arg names */
     .nomobile {
.cm-mw-template-argument-name {
        display: none;
     color: var(--se-cm--template-arg-name-color);
    }
}
}


img {
/* template arg values */
    -ms-interpolation-mode: nearest-neighbor;
.cm-mw-template {
     image-rendering: -moz-crisp-edges;
     color: var(--se-cm--template-values-color);
    image-rendering: -o-crisp-edges;
}
    image-rendering: -webkit-optimize-contrast;
 
     image-rendering: crisp-edges;
/* template pipe delimiters (maybe colon too for modules?) */
    image-rendering: pixelated;
.cm-mw-template-delimiter {
     color: hsl(205, 71%, 85%);
}
}


/* allows enabling smooth rendering for images by adding this class to them whenever needed */
/* template brackets */
img.smooth-render {
.cm-mw-template-bracket {
     image-rendering: auto;
     color: var(--se-cm--template-brackets-color);
}
}


.layered {
/* template variable (with 3 brackets) name */
     position: absolute;
.cm-mw-templatevariable-name {
    top: 0;
     color: var(--se-cm--template-param-name-color);
    left: 0;
}
}


.blend {
/* template variable (with 3 brackets) value */
     mix-blend-mode: multiply;
.cm-mw-templatevariable {
     color: var(--se-cm--template-param-value-color);
}
}


/* replace pencil icon in "edit section" buttons with a version that's visible */
/* template variable brackets (3 brackets) */
.mw-editsection {
.cm-mw-templatevariable-bracket {
     background-image: url(/w/images/a/a9/Pencil-lightblue.svg);
     color: var(--se-cm--template-param-brackets-color);
}
}
/* template variable (with 3 brackets) delimiter */
.cm-mw-templatevariable-delimiter {
    color: var(--se-cm--param-delimiter-color);
}
/* parser functions (things like "DISPLAYTITLE" or invokes) → name */
.cm-mw-parserfunction-name {
    color: var(--se-cm--template-name-color);
}
/* parser functions (things like "DISPLAYTITLE" or invokes) → value */
.cm-mw-parserfunction {
    color: var(--se-cm--template-values-color);
}
/* parser functions (things like "DISPLAYTITLE" or invokes) → brackets */
.cm-mw-parserfunction-bracket {
    color: var(--se-cm--template-brackets-color);
}
/* parser functions (things like "DISPLAYTITLE" or invokes) → delimiters */
.cm-mw-parserfunction-delimiter {
    color: var(--se-cm--template-delimiter-color);
}
/* wiki html tag names? like >syntaxhighlight> */
.cm-mw-exttag-name,
/* html tag names */
.cm-mw-htmltag-name {
    color: var(--se-cm--xml-tag-color);
}
/* if a string starts with an empty space, it will generate a pre block.
this targets that one single space.
same style as for html tag names, but for bg here */
.cm-mw-skipformatting {
    background-color: var(--se-cm--xml-tag-color);
}
/* wiki html tag brackets */
.cm-mw-exttag-bracket,
/* wiki html tag attributes (name, delimiter, value) */
.cm-mw-exttag-attribute,
/* html tag brackets */
.cm-mw-htmltag-bracket,
/* html tag attributes (name, delimiter, value) */
.cm-mw-htmltag-attribute {
    color: var(--se-cm--xml-tag-color);
}
/* pre tag BLOCK contents */
pre.CodeMirror-line.cm-mw-tag-pre,
/* pre tag INLINE contents */
.CodeMirror-line span.cm-mw-tag-pre,
/* ???? */
pre.CodeMirror-line-like.cm-mw-tag-pre,
/* pre tag contents */
.cm-mw-tag-pre,
/* ============== */
/* nowiki tag BLOCK contents */
pre.CodeMirror-line.cm-mw-tag-nowiki,
/* nowiki tag INLINE contents */
.CodeMirror-line span.cm-mw-tag-nowiki,
/* ???? */
pre.CodeMirror-line-like.cm-mw-tag-nowiki,
/* nowiki tag contents */
.cm-mw-tag-nowiki {
    background-color: var(--se-cm--pre-bg-color);
}
/* pre tag BLOCK contents */
pre.CodeMirror-line.cm-mw-tag-pre,
/* nowiki tag BLOCK contents */
pre.CodeMirror-line.cm-mw-tag-nowiki {
    /* colors the margin gap bg for block variants */
    box-shadow: calc(-1 * var(--se-cm--main-contents-left-margin)) 0
        var(--se-cm--pre-bg-color);
}
/* pre tag INLINE contents */
.CodeMirror-line span.cm-mw-tag-pre,
/* nowiki tag INLINE contents */
.CodeMirror-line span.cm-mw-tag-nowiki {
    /* a little corner rounding won't hurt a thing! */
    border-radius: 2px;
}
/* ???? */
.cm-mw-link,
/* ???? */
.cm-mw-link-tosection,
/* header equal signs */
.cm-mw-section-header {
    color: var(--se-cm--wikitext-formatting-color);
}
/* link itself */
.cm-mw-link-pagename,
/* external link itself, without protocol */
.cm-mw-extlink,
/* ???? same as above, maybe? */
.cm-mw-free-extlink,
/* external link protocol (the "https://" part) */
.cm-mw-extlink-protocol,
/* ???? same as above, maybe? */
.cm-mw-free-extlink-protocol {
    color: var(--se-cm--link-color);
}
/* link brackets */
.cm-mw-link-bracket,
/* external link brackets */
.cm-mw-extlink-bracket {
    color: var(--se-cm--link-brackets-color);
}
/* link delimiter */
.cm-mw-link-delimiter {
    color: var(--se-cm--cm-mw-link-delimiter);
}
/* link text */
.cm-mw-link-text,
/* external link text */
.cm-mw-extlink-text {
    color: var(--se-cm--link-text-color);
}
/* tables opening "{|" and closing "|}" brackets */
.cm-mw-table-bracket,
/* table row delimiter (doesn't include cols!) */
.cm-mw-table-delimiter {
    color: var(--se-cm--table-punctuation-color);
}
/* the table settings I guess? (like «class="wikitable"») */
.cm-mw-table-definition {
    color: var(--se-cm--table-settings-color);
}
/* ???? idk some kind of formatting errors? */
.cm-error,
.cm-mw-error,
.cm-s-default .cm-error {
    color: var(--se-cm--error-color);
}
.cm-mw-matchingbracket {
    background-color: var(--se-cm--matching-brackets-bg-color);
    /* disable the default */
    box-shadow: none;
}
/* various inline bg targeting things, idk what each of them target exactly */
.cm-mw-template2-ground,
.cm-mw-template3-ground,
.cm-mw-ext-ground,
.cm-mw-template-ext-ground,
.cm-mw-ext2-ground,
.cm-mw-template-ext2-ground,
.cm-mw-ext3-ground,
.cm-mw-template-ext3-ground,
.cm-mw-link-ground,
.cm-mw-ext-link-ground,
.cm-mw-template-link-ground,
.cm-mw-ext2-link-ground,
.cm-mw-template-ext-link-ground,
.cm-mw-ext3-link-ground,
.cm-mw-template-ext2-link-ground,
.cm-mw-template-ext3-link-ground,
.cm-mw-template2-ext-ground,
.cm-mw-template2-ext2-ground,
.cm-mw-template2-ext3-ground,
.cm-mw-template2-link-ground,
.cm-mw-template2-ext-link-ground,
.cm-mw-template2-ext2-link-ground,
.cm-mw-template2-ext3-link-ground,
.cm-mw-template3-ext-ground,
.cm-mw-template3-ext2-ground,
.cm-mw-template3-ext3-ground,
.cm-mw-template3-link-ground,
.cm-mw-template3-ext-link-ground,
.cm-mw-template3-ext2-link-ground,
.cm-mw-template3-ext3-link-ground {
    /* just disable them */
    background-color: inherit;
}
/* script input in module editor */
#mw-scribunto-input {
font-family: monospace;
font-weight: normal;
color: var(--code-color-text);
background-color: var(--code-color-bg);
} 
/* #endregion */
/* #endregion */
/* ============ */
/* #endregion */
/* ============ */
/* ============ */
/* #region =🖌️= VISUAL EDITOR =🖌️= */
/* ============ */
/* visual editor (content) → template [puzzle] icon
the content selector is to not affect other places where this icon is used */
.content-body .oo-ui-icon-puzzle {
    background-image: linear-gradient(transparent, transparent),
        var(--icon-template-puzzle-white);
    opacity: 1;
}
/* template name
the content selector is to not affect other places where this icon is used */
.content-body .oo-ui-icon-puzzle + .oo-ui-labelElement-label {
    color: white;
}
/* visual editor → editor loading → placeholder (?) navbar container */
.ve-init-mw-desktopArticleTarget-targetContainer
    .ve-init-mw-desktopArticleTarget-toolbarPlaceholder-open {
    /* disables progress bar cropping when moving it down */
    overflow: visible;
}
/* visual editor → editor loading → progress bar (bg) */
.ve-init-mw-progressBarWidget {
    background-color: var(--bg-color-light);
}
/* visual editor → editor loading → progress bar (loading stripe) */
.ve-init-mw-progressBarWidget .ve-init-mw-progressBarWidget-bar {
    background-color: var(--action-color);
}
/* visual editor → toolbar (left part)  */
.ve-init-target-visual > .oo-ui-toolbar > .oo-ui-toolbar-bar {
    background-color: var(--bg-color-light-x3);
    color: var(--text-color);
}
/* visual editor → toolbar → icons */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-iconElement-icon,
/* visual editor → toolbar → arrow down icon */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-indicator-down {
    filter: invert(100%);
}
/* visual editor → toolbar (whole, one level up from the left one) */
.ve-init-target-visual > .oo-ui-toolbar {
    /* reset */
    margin: 0;
    /* get the same offset that the search box has */
    margin-right: -0.95rem;
    /* get the same offset that the "Page" link has */
    margin-left: -1.25rem;
}
/* visual editor → toolbar (right part) → «save changes» button (disabled, when no changes were made yet) */
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link {
    /* disables selecting of the button text
    same behavior is already present in an available button */
    user-select: none;
    /* just for the button bg */
    transition: background-color 0.1s ease-out;
    background-color: var(--bg-color-light-x5);
}
/* visual editor → toolbar (right part) → «save changes» button (disabled, when no changes were made yet) → title */
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link .oo-ui-tool-title {
    color: var(--text-color-grayed-out);
}
/* visual editor → toolbar (right part) → «save changes» button (available) */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled
    .ve-ui-toolbar-saveButton {
    background-color: var(--action-color);
}
/* visual editor → toolbar (right part) → «save changes» button (available) hover */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled
    .ve-ui-toolbar-saveButton:hover {
    background-color: var(--action-color-light-x2);
}
/* visual editor → toolbar (right part) → «save changes» button (available) active */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled.oo-ui-tool-active
    .ve-ui-toolbar-saveButton {
    background-color: var(--action-color-dark-x2);
}
/* visual editor → toolbar (right part) → «save changes» button (available) → label */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled
    .ve-ui-toolbar-saveButton
    .oo-ui-tool-title {
    color: var(--text-color);
}
/* visual editor → toolbar → dropdown button (div) hover */
.ve-init-target-visual>.oo-ui-toolbar .oo-ui-popupToolGroup-handle:hover,
/* visual editor → toolbar → button (a) hover (except the «save changes» button */
.ve-init-target-visual>.oo-ui-toolbar .oo-ui-tool-link:not(.ve-ui-toolbar-saveButton):hover {
    background-color: var(--bg-color-light-x2);
    /* more "snappier" transition */
    transition: background-color 50ms ease-out;
}
/* visual editor → toolbar → dropdown button (span) active → icon */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-iconElement-icon,
/* visual editor → toolbar → button (span) active (except the «save changes» button → icon */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-iconElement-icon {
    /* rotate from the default dark blue to the the bright, saturated version of cosmoBlue.
    this results in this color: hsl(198, 93%, 49%) */
    filter: brightness(150%) saturate(150%) contrast(180%);
}
/* visual editor → toolbar → tabber icon (only in the «insert» menu afaik) → icon */
.ve-init-target-visual
    > .oo-ui-toolbar
    > .oo-ui-toolbar-bar
    .oo-ui-tool-active
    .oo-ui-icon-tabber {
    /* this icon don't have a default dark blue color when it's active, instead they have just black (which is inverted to white in this theme), so we can't rotate to the proper color. instead here's the same icon but in cosmoBlueBright color. */
    filter: none;
    background-image: var(--icon-tabber-black);
}
/* visual editor → toolbar → dropdown button (span 1 level up) active */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-popupToolGroup-handle,
/* visual editor → toolbar → button active (a) */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-tool-link {
    background-color: var(--bg-color-light-x3);
}
/* visual editor → toolbar → dropdown button (span) active → label */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-labelElement-label,
/* visual editor → toolbar → button (span) active (except the «save changes» button → label */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-labelElement-label,
/* visual editor → tool popups → button (span) active → label */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-widget.oo-ui-tool-active .oo-ui-tool-title {
    color: var(--action-color-light-x2);
}
/* visual editor → toolbar → adding new image → caption */
.ve-ui-targetWidget:not(.oo-ui-pendingElement-pending) {
    /* remove white bg */
    background: unset;
}
/* visual editor → toolbar → adding new image → caption */
.ve-ui-targetWidget {
    /* set to proper color instead of white */
    border-color: var(--border-color-light);
}
/* visual editor → tool popups */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools {
    background-color: var(--bg-color-light);
}
/* visual editor → tool popups → button (span) */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool {
    background-color: var(--bg-color-light);
}
/* visual editor → tool popups → button (span) hover */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool:hover {
    background-color: var(--bg-color-light-x2);
}
/* visual editor → tool popups → button (span) active */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
    .oo-ui-widget.oo-ui-tool-active {
    background-color: var(--bg-color-light-x3);
}
/* visual editor → tool popups → button (span) active → label */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
    .oo-ui-widget.oo-ui-tool-active
    .oo-ui-tool-title {
    /* more responsive transition */
    transition: color 0.1s ease-out;
}
/* visual editor → tool popups → button (span) active → icon */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
    .oo-ui-widget.oo-ui-tool-active
    .oo-ui-iconElement-icon {
}
/* visual editor → tool popups → button (a) */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-link {
    color: var(--text-color);
}
/* visual editor → tool popups → button (a) → keybind label */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-accel {
    /* gets hidden on active, since it the same color.
    can we call it a feature? :D */
    color: var(--bg-color-light-x6);
}
/* visual editor → tool popups → button (a) hover */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-link:hover,
/* visual editor → tool popups → button (a) active */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-link {
    /* remove the bg color since it's already set in the button.
    this prevents the flicker. */
    background-color: unset;
}
/* visual editor → tool popups → editor mode switch popup → «source editor» button active → label */
.oo-ui-toolbar-popups
    .oo-ui-widget.oo-ui-tool-active.oo-ui-tool-name-editModeSource
    .oo-ui-tool-title {
    color: var(--green-color);
}
/* visual editor → tool popups → editor mode switch popup → «source editor» button active → icon */
.oo-ui-toolbar-popups
    .oo-ui-widget.oo-ui-tool-active.oo-ui-tool-name-editModeSource
    .oo-ui-iconElement-icon {
    background-image: var(--se-mode-icon);
}
/* ============ */
/* #region STYLES FROM THE SOURCE */
/* some of the styles below were sourced from https://github.com/wikimedia/mediawiki-extensions-VisualEditor/blob/c295a731ec5ef261e4e5659c30f14b0b1b3e11d2/modules/ve-mw/ui/styles/dialogs/ve.ui.MWTransclusionDialog.css */
/* ============ */
@keyframes ve-modal-opening-backdrop {
    from {
        backdrop-filter: blur(0px);
        background-color: transparent;
    }
    to {
        backdrop-filter: blur(3px);
        background-color: color-mix(in srgb, var(--bg-color) 25%, transparent);
    }
}
/* visual editor → modal container */
.oo-ui-windowManager-modal > .oo-ui-dialog {
    background-color: transparent;
    animation: ve-modal-opening-backdrop 400ms ease-in-out forwards;
}
/* visual editor → modal */
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--bg-color-light-x3);
}
/* visual editor → modal head */
.oo-ui-windowManager-modal .oo-ui-window-head {
    background-color: var(--bg-color-light);
    color: var(--text-color);
    /* lighter than the usual border color - for visibility */
    outline-color: var(--bg-color-light-x4);
}
/* visual editor → modal head → «apply changes» button (a) inactive */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-widget-disabled .oo-ui-buttonElement-button,
/* visual editor → modal → action button (a) inactive */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-disabled .oo-ui-buttonElement-button {
    color: var(--text-color);
    background-color: var(--action-color-inactive);
    border-color: var(--bg-color-light-x3);
} 
/* visual editor → modal head → «apply changes» button (a) */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-buttonElement-button,
/* visual editor → modal → action button (a) */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled .oo-ui-buttonElement-button,
/* visual editor → modal message dialog → action button (a) */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-buttonElement-button,
/* visual editor → save changes modal → «review changes» button (a) */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-buttonElement-button {
    color: var(--text-color);
    background-color: var(--action-color);
    border-color: var(--bg-color-light-x4);
    transition: background-color 100ms ease-in;
} 
/* visual editor → modal → action button (a) hover */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled
.oo-ui-buttonElement-button:hover,
/* visual editor → modal head → «apply changes» button (a) hover */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget
.oo-ui-buttonElement-button:hover,
/* visual editor → modal → modal message dialog → action button (a) hover */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget
.oo-ui-buttonElement-button:hover,
/* visual editor → save changes modal → «review changes» button (a) hover */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-actionWidget
.oo-ui-buttonElement-button:hover {
    color: var(--text-color);
    background-color: var(--action-color-light-x2);
    border-color: var(--bg-color-light-x4);
    transition: background-color 100ms ease-out;
} 
/* visual editor → modal → action button (a) active */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled
.oo-ui-buttonElement-button:active,
/* visual editor → modal → action button (a) pressed hover */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled.oo-ui-buttonElement-pressed
.oo-ui-buttonElement-button:hover,
/* visual editor → modal head → «apply changes» button (a) active */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget
.oo-ui-buttonElement-button:active,
/* visual editor → modal head → «apply changes» button (a) pressed hover */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-pressed .oo-ui-buttonElement-button:hover,
/* visual editor → modal → modal message dialog → action button (a) pressed */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-buttonElement-pressed 
.oo-ui-buttonElement-button,
/* visual editor → modal → modal message dialog → action button (a) pressed hover */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-buttonElement-pressed
.oo-ui-buttonElement-button:hover,
/* visual editor → save changes modal → «review changes» button (a) active */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-actionWidget
.oo-ui-buttonElement-button:active {
    color: var(--text-color);
    background-color: var(--action-color-dark-x2);
    border-color: var(--bg-color-light-x4);
    transition: background-color 100ms ease-out;
}
/* visual editor → modal head → close button (a) hover */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonElement-button:hover,
/* visual editor → modal head → close button (a) active */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonElement-button:active {
    background-color: var(--bg-color-light-x2);
    border-color: var(--bg-color-light-x3);
}
/* visual editor → modal head → close button (a) → icon */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonElement-button .oo-ui-iconElement-icon  {
    filter: invert(100%);
}
/* visual editor → modal footer (which is empty for template modal) */
.oo-ui-processDialog-content .oo-ui-window-foot {
    /* override default */
    outline-color: transparent;
}
/* visual editor → modal → big header (e.g. for template name) */
.oo-ui-windowManager-modal .oo-ui-fieldsetLayout-header,
/* visual editor → modal → medium header (e.g. template param header) */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-info {
    color: var(--text-colorStrong);
}
/* visual editor → modal → medium header (e.g. template param header) → "undocumented param" label */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-info .ve-ui-mwParameterPage-undocumentedLabel {
    color: var(--bg-color-light-x4);
}
/* visual editor → modal → big header (e.g. for template name) → puzzle icon  */
.oo-ui-windowManager-modal .oo-ui-fieldsetLayout-header .oo-ui-icon-puzzle {
    filter: invert(92%);
}
/* visual editor → modal → big header (e.g. for template name) → deprecated icon  */
.oo-ui-windowManager-modal .oo-ui-indicatorElement[title="Deprecated field"] {
    /* default is .5 */
    opacity: .8;
    /* same icon, "warning-color-border" color */
    background-image:
    linear-gradient(transparent,transparent),
    var(--icon-popup-notice-warn-cosmoGreen);
}
/* visual editor → modal → url icon (e.g. for template URL params) */
.oo-ui-windowManager-modal .oo-ui-icon-linkExternal {
    /* default is 0.67 */
    opacity: .8;
    /* same icon, but in "cosmoGreen" color */
    background-image:
    linear-gradient(transparent,transparent),
    var(--icon-external-link-cosmoGreen);
}
/* visual editor → modal → param description block (like a template param) → entries */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > p {
    color: var(--text-color);
}
/* visual editor → modal (template) → template search block → description */
.oo-ui-windowManager-modal .ve-ui-mwTemplatePlaceholderPage .oo-ui-inline-help,
/* visual editor → modal (template) → template description */
.oo-ui-windowManager-modal .ve-ui-mwTemplatePage-description,
/* visual editor → modal → param description block (like a template param) → "deprecated" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-deprecated,
/* visual editor → modal → param description block (like a template param) → "reqired" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-required,
/* visual editor → modal → param description block (like a template param) → "reqired" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-example,
/* visual editor → modal → param description block (like a template param) → "default" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-default,
/* visual editor → modal → param search results → no results text */
.ve-ui-mwTransclusionOutlineTemplateWidget-no-match {
    color: var(--bg-color-light-x4);
}
/* visual editor → modal (template) → template description hr */
.oo-ui-windowManager-modal .ve-ui-mwTemplatePage-description hr {
    background-color: var(--bg-color-light-x4);
}
/* visual editor → modal → param input (type=text) */
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
    color: var(--text-color);
    background-color: var(--bg-color-dark);
    border: 1px solid var(--bg-color-light-x2);
} 
/* visual editor → modal → param input (type=text) placeholder */
.oo-ui-windowManager-modal .oo-ui-widget-enabled .oo-ui-inputWidget-input::placeholder {
    color: var(--bg-color-light-x4);
} 
/* visual editor → modal → param input (type=text) hover */
.oo-ui-windowManager-modal .oo-ui-inputWidget-input:hover,
/* visual editor → modal → param input when a param input dropdown button is hovered  */
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
    border-color: var(--bg-color-light-x3);
}
/* visual editor → modal → param input (type=text) (invalid state) */
.oo-ui-windowManager-modal .oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
    border-color: var(--color-red);
}
/* visual editor → modal → param input (type=text) in invalid state hover */
.oo-ui-windowManager-modal .oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input:hover {
    border-color: var(--color-red);
}
/* visual editor → modal → required indicator (for params only I guess?) */
.oo-ui-windowManager-modal .oo-ui-indicator-required {
    /* same icon, "warning-color-border" color */
    background-image:
        linear-gradient(transparent,transparent),
        var(--icon-asterisk-yellow);
}
/* visual editor → modal → param input dropdown button (for suggested values) */
.oo-ui-windowManager-modal .oo-ui-widget-enabled .oo-ui-comboBoxInputWidget-dropdownButton a {
    background-color: var(--bg-color);
    border-color: var(--bg-color-light-x2);
    border-left: none;
}
/* visual editor → modal → param input dropdown button (for suggested values) hover */
.oo-ui-windowManager-modal .oo-ui-widget-enabled .oo-ui-comboBoxInputWidget-dropdownButton a:hover,
/* visual editor → modal → param input dropdown button (for suggested values) when dropdown is open */
.oo-ui-windowManager-modal .oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton a {
    background-color: var(--bg-color-light);
    /* default override */
    border-color: var(--bg-color-light-x3);
}
/* visual editor → modal → param input dropdown button (for suggested values) when dropdown is open */
.oo-ui-windowManager-modal .oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton a {
    /* disable default transition, so the color will change instantly, because dropdown appears instantly too */
    transition: background-color 0s;
}
/* visual editor → modal → param input dropdown button (for suggested values) → icon */
.oo-ui-windowManager-modal .oo-ui-comboBoxInputWidget-dropdownButton a .oo-ui-indicatorElement-indicator {
    filter: invert(100%);
}
/* visual editor → modal → "add undocumented paramter" block → button hover  */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-buttonElement-button:hover {
    background-color: var(--bg-color-light);
}
/* visual editor → modal → "add undocumented paramter" block → button → icon */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-buttonElement-button .oo-ui-iconElement-icon  {
    filter: invert(100%);
}
/* visual editor → modal → "add undocumented paramter" block → button → label */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-buttonElement-button .oo-ui-labelElement-label {
    color: var(--text-color);
}
/* visual editor → modal → "add undocumented paramter" block → description */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-inline-help  {
    color: var(--bg-color-light-x4);
}
/* visual editor → modal → modal message dialog → action button (a) focus */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-buttonElement-button:focus,
/* visual editor → save changes modal → «review changes» button (a) focus */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-buttonElement-button:focus {
    border-color: var(--bg-color-light-x4);
}
/* visual editor → modal → modal message dialog → "destructive" action button */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-widget-enabled.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button  {
    background-color: var(--color-red);
    transition: background-color 100ms ease-in;
}
/* visual editor → modal → modal message dialog → "destructive" action button hover */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-widget-enabled.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button:hover  {
    background-color: var(--color-red-light);
    transition: background-color 100ms ease-out;
}
/* visual editor → modal → modal message dialog → "destructive" action button pressed */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-widget-enabled.oo-ui-buttonElement-pressed.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button  {
    background-color: var(--color-red-dark);
    transition: background-color 100ms ease-out;
}
/* visual editor → modal → left menu */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu {
    border-color: var(--bg-color-light-x2);
}
/* visual editor → modal → left menu → search block */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky {
    /* override default */
background-color: var(--bg-color);
}
/* visual editor → modal → left menu → search block → query input → placeholder */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky input::placeholder {
    color: var(--bg-color-light-x4);
}
/* visual editor → modal → search icon */
.oo-ui-windowManager-modal .oo-ui-icon-search {
    filter: invert(100%);
}
/* visual editor → modal → left menu → search block → "hide unused" (params) button → label */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky .ve-ui-mwTransclusionOutlineToggleUnusedWidget .oo-ui-labelElement-label {
    color: var(--action-color-light-x2);
    transition: color 100ms ease-in;
}
/* visual editor → modal → left menu → search block → "hide unused" (params) button hover → label */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky .ve-ui-mwTransclusionOutlineToggleUnusedWidget .oo-ui-labelElement-label:hover {
    color: var(--action-color-light-x3);
    transition: color 100ms ease-out;
}
/* visual editor → modal → left menu → params container → item */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > * {
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color 100ms ease-in;
}
/* visual editor → modal → left menu → params container → item checkbox disabled checked → bg */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > * input[type=checkbox][disabled] + span {
    background-color: var(--bg-color-light-x3);
    border-color: var(--bg-color-light-x4);
}
/* visual editor → modal → left menu → params container → item hover */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > *:hover {
    color: var(--text-color);
    background-color: var(--bg-color-light);
    transition: background-color 75ms ease-out;
}
/* visual editor → modal → left menu → params container → item label */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > * .oo-ui-labelElement-label {
    color: var(--text-color);
}
/* visual editor → modal → popup windows and such */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable {
    background-color: var(--bg-color-light);
    border-color: var(--bg-color-light-x3);
}
/* visual editor → modal → popup windows and such → item */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled {
    background-color: var(--bg-color-light);
    color: var(--text-color);
}
/* visual editor → modal → popup windows and such → item hover */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled:hover {
    background-color: var(--bg-color-light-x2);
}
/* visual editor → modal → popup windows and such → item pressed (mouse down) */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled.oo-ui-optionWidget-pressed,
/* visual editor → modal → popup windows and such → item selected */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled.oo-ui-optionWidget-selected{
    color: var(--text-colorStrong);
    background-color: var(--bg-color-light-x3);
    transition:
        color 100ms ease-out,
        text-shadow 100ms ease-out,
        background-color 100ms ease-out;
}
/* visual editor → modal → help button */
.oo-ui-windowManager-modal .ve-ui-mwFloatingHelpElement  > .oo-ui-buttonElement-button {
    background-color: var(--text-color);
    transition: background-color 100ms ease-out;
}
/* visual editor → modal → help button active */
.oo-ui-windowManager-modal .ve-ui-mwFloatingHelpElement .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    transition: background-color 100ms ease-out;
}
/** visual editor → modal → something loading "stripes" */
.oo-ui-windowManager-modal .oo-ui-pendingElement-pending {
    --strip-col: var(--bg-color-light-x2);
    background-image: linear-gradient(
        135deg,
        var(--strip-col) 25%,
        transparent 25%,
        transparent 50%,
        var(--strip-col) 50%,
        var(--strip-col) 75%,
        transparent 75%,
        transparent
    );
}
/** visual editor → modal → template search results block → item → description */
.oo-ui-windowManager-modal .mw-widget-titleWidget-menu .mw-widget-titleOptionWidget-description {
    color: var(--text-color);
    /* disable text shadow enabled for selected elements */
    text-shadow: none;
}
/** visual editor → modal message dialog → */
.oo-ui-windowManager-modal.oo-ui-windowManager-floating .oo-ui-messageDialog .oo-ui-window-frame {
    border-color: var(--bg-color-light-x3);
}
/** visual editor → modal message dialog → title */
.oo-ui-windowManager-modal .oo-ui-messageDialog .oo-ui-window-frame .oo-ui-messageDialog-title {
    color: var(--action-color-light-x2);
    font-weight: bold;
}
/** visual editor → modal message dialog → message */
.oo-ui-windowManager-modal .oo-ui-messageDialog .oo-ui-window-frame .oo-ui-labelElement-label {
    color: var(--text-color);
}
/* visual editor → save changes modal → summary */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .ve-ui-mwSaveDialog-summary {
    background-color: inherit;
}
/* visual editor → save changes modal → options (where the checkboxes are) */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .ve-ui-mwSaveDialog-options {
    background-color: inherit;
    border: none;
}
/* visual editor → save changes modal → options → checkboxes container */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .ve-ui-mwSaveDialog-options .ve-ui-mwSaveDialog-checkboxes {
    padding-left: 0;
}
/* visual editor → save changes modal → copyright warning */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog #editpage-copywarn {
    color: var(--bg-color-light-x3);
}
/* visual editor → popups  */
.oo-ui-popupWidget-popup {
    background-color: var(--bg-color-light);
    color: var(--text-color);
    border-color: var(--border-color);
}
/* #endregion */
/* ============ */
/* #region =🖌️= VISUAL EDITOR BORDERS =🖌️= */
/* ============ */
/* visual editor → tool popups */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools,
/* visual editor → toolbar → paragraph button (I think?) */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-menuToolGroup,
/* visual editor → toolbar → dropdown button (span) hover */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-handle:hover {
    border-color: var(--border-color-light);
}
/* #endregion */
/* #endregion */

Revision as of 00:31, 15 August 2024

@font-face {
    font-family: "Teko";
    font-weight: 500;
    src: url(https://wiki.spacestation14.com/w/images/stuff/Teko-Medium.woff2)
            format("woff2"),
        url(https://wiki.spacestation14.com/w/images/stuff/Teko-Medium.woff)
            format("woff");
    ascent-override: 65%;
    descent-override: 10%;
}

:root {
    color-scheme: dark;

    --bg-color: hsl(240, 7%, 11%);
    --bg-color-light: hsl(240, 7%, 14%);
    --bg-color-light-x2: hsl(240, 8%, 17%);
    --bg-color-light-x3: hsl(240, 7%, 20%);
    --bg-color-light-x4: hsl(240, 7%, 23%);
    --bg-color-light-x5: hsl(240, 7%, 26%);
    --bg-color-light-x6: hsl(240, 7%, 32%);

    --border-color-light: hsl(240, 7%, 35%);
    --border-color-light-x2: hsl(240, 7%, 45%);
    --border-color: hsl(240, 7%, 24%);

    --text-color: lightgrey;
    --text-color-grayed-out: gray;

    --code-color-bg: #1b1e1f;
    --code-color-text: #e8e6e3;
    --code-color-border: #353a3c;

    --link-color: lightblue;
    --link-color-visited: #007fff;

    --action-color-light-x2: var(--blue-color-light-x2);
    --action-color-light: var(--blue-color-light);
    --action-color: var(--blue-color);
    --action-color-dark: var(--blue-color-dark);
    --action-color-dark-x2: var(--blue-color-dark-x2);

	--warning-color: hsl(54 100% 15% / 1);
	--warning-color-border: hsl(60, 55%, 30%);

	--danger-color: var(--red-color);
	--danger-color-dark: var(--red-color-dark);
	--danger-color-dark-x2: var(--red-color-dark-x2);
	--danger-color-border: var(--red-color-border);

    --blue-color-light-x2: hsl(220, 66%, 63%);
    --blue-color-light: hsl(220, 60%, 56%);
    --blue-color: hsl(220, 60%, 50%);
    --blue-color-dark: hsl(220, 54%, 43%);
    --blue-color-dark-x2: hsl(220, 54%, 36%);

    --green-color-light: hsl(167, 80%, 50%);
    --green-color: hsl(167, 80%, 45%);
    --green-color-dark: hsl(167, 74%, 30%);

    --red-color: hsl(0, 75%, 50%);
    --red-color-dark: hsl(0, 67%, 42%);
    --red-color-dark-x2: hsl(0, 62%, 36%);
    --red-color-border: hsl(0, 47%, 22%);


    /* ============= */
    /* ICONS GO HERE */
    /* ============= */
    
    /* white table sort icon */
    --icon-table-sort-white: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjEiIGhlaWdodD0iOSI+PGRlZnM+PGZpbHRlciBpZD0iZGFya3JlYWRlci1pbWFnZS1maWx0ZXIiPjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwLjI0OSAtMC42MTQgLTAuNjcyIDAuMDAwIDEuMDM1IC0wLjY0NiAwLjI4OCAtMC42NjQgMC4wMDAgMS4wMjAgLTAuNjM2IC0wLjYwOSAwLjI1MCAwLjAwMCAwLjk5NCAwLjAwMCAwLjAwMCAwLjAwMCAxLjAwMCAwLjAwMCIgLz48L2ZpbHRlcj48L2RlZnM+PGltYWdlIHdpZHRoPSIyMSIgaGVpZ2h0PSI5IiBmaWx0ZXI9InVybCgjZGFya3JlYWRlci1pbWFnZS1maWx0ZXIpIiB4bGluazpocmVmPSJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBEOTRiV3dnZG1WeWMybHZiajBpTVM0d0lpQmxibU52WkdsdVp6MGlWVlJHTFRnaVB6NEtQSE4yWnlCNGJXeHVjejBpYUhSMGNEb3ZMM2QzZHk1M015NXZjbWN2TWpBd01DOXpkbWNpSUhkcFpIUm9QU0l5TVNJZ2FHVnBaMmgwUFNJNUlpQjJhV1YzUW05NFBTSXdJREFnTWpFZ09TSStDZ2s4Y0dGMGFDQmtQU0p0TVRRdU5TQTFMVFFnTkMwMExUUjZiVEF0TVMwMExUUXROQ0EwZWlJdlBnbzhMM04yWno0SyIgLz48L3N2Zz4=");

    /* wiki help button icon - transparent question mark in circle of cosmoBlue */
    --icon-wiki-help-cosmoBlue: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQloZWxwCgk8L3RpdGxlPgoJPHBhdGggZmlsbD0icmdiKDIxMiAyMzYgMjU1KSIgZD0iTTEwIDBhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTAgMHptMSAxNkg5di0yaDJ6bTIuNzEtNy42YTIuNjQgMi42NCAwIDAgMS0uMzMuNzQgMy4xNiAzLjE2IDAgMCAxLS40OC41NWwtLjU0LjQ4Yy0uMjEuMTgtLjQxLjM1LS41OC41MmEyLjU0IDIuNTQgMCAwIDAtLjQ3LjU2QTIuMyAyLjMgMCAwIDAgMTEgMTJhMy43OSAzLjc5IDAgMCAwLS4xMSAxSDkuMDhhOC45IDguOSAwIDAgMSAuMDctMS4yNSAzLjI4IDMuMjggMCAwIDEgLjI1LS45IDIuNzkgMi43OSAwIDAgMSAuNDEtLjY3IDQgNCAwIDAgMSAuNTgtLjU4Yy4xNy0uMTYuMzQtLjMuNTEtLjQ0YTMgMyAwIDAgMCAuNDMtLjQ0IDEuODMgMS44MyAwIDAgMCAuMy0uNTUgMiAyIDAgMCAwIC4xMS0uNzIgMi4wNiAyLjA2IDAgMCAwLS4xNy0uODYgMS43MSAxLjcxIDAgMCAwLTEtLjkgMS43IDEuNyAwIDAgMC0uNS0uMSAxLjc3IDEuNzcgMCAwIDAtMS41My42OCAzIDMgMCAwIDAtLjUgMS44Mkg2LjE2YTQuNzQgNC43NCAwIDAgMSAuMjgtMS42OCAzLjU2IDMuNTYgMCAwIDEgLjgtMS4yOSAzLjg4IDMuODggMCAwIDEgMS4yOC0uODNBNC41OSA0LjU5IDAgMCAxIDEwLjE4IDRhNC40NCA0LjQ0IDAgMCAxIDEuNDQuMjMgMy41MSAzLjUxIDAgMCAxIDEuMTUuNjUgMy4wOCAzLjA4IDAgMCAxIC43OCAxLjA2IDMuNTQgMy41NCAwIDAgMSAuMjkgMS40NSAzLjM5IDMuMzkgMCAwIDEtLjEzIDEuMDF6Ii8+Cjwvc3ZnPg==");

    /* navbar search magnifying glass search icon in greyish colors */
    --icon-navbar-search-greyish: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQlzZWFyY2gKCTwvdGl0bGU+Cgk8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IndoaXRlIiBkPSJNMTIuMiAxMy42YTcgNyAwIDEgMSAxLjQtMS40bDUuNCA1LjQtMS40IDEuNC01LjQtNS40ek0xMyA4QTUgNSAwIDEgMSAzIDhhNSA1IDAgMCAxIDEwIDB6Ii8+Cjwvc3ZnPgo=");

    /* transparent exclamation mark in a circle filled with cosmoGreen */
    --icon-popup-notice-info-cosmoGreen: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQlub3RpY2UKCTwvdGl0bGU+Cgk8cGF0aCBmaWxsPSJyZ2IoMTAsIDIxMiwgOTgpIiBkPSJNMTAgMGExMCAxMCAwIDEgMCAxMCAxMEExMCAxMCAwIDAgMCAxMCAwem0xIDE2SDl2LTJoMnptMC00SDlWNGgyeiIvPgo8L3N2Zz4=");
    
    /* transparent exclamation mark in a circle filled with some kind of orange */
    --icon-popup-notice-warn-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHRpdGxlPiBhbGVydCA8L3RpdGxlPiA8cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Ik02IDBhNiA2IDAgMCAwLTYgNiA2IDYgMCAwIDAgNiA2IDYgNiAwIDAgMCA2LTYgNiA2IDAgMCAwLTYtNnpNNSAyaDJ2NUg1VjJ6bTAgNmgydjJINVY4eiIvPiA8L3N2Zz4=");

    /* an icon to use to mark external links, in cosmoGreen */
    --icon-external-link-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGV4dGVybmFsIGxpbmsgPC90aXRsZT48cGF0aCBmaWxsPSJyZ2IoMTAsIDIxMiwgOTgpIiBkPSJNMTcgMTdIM1YzaDVWMUgzYTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0ydi01aC0yeiIvPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Im0xMSAxIDMuMjkgMy4yOS01LjczIDUuNzMgMS40MiAxLjQyIDUuNzMtNS43M0wxOSA5VjF6Ii8+PC9zdmc+");

    /* an asterisk icon used to mark required template fields, in yellow */
    --icon-asterisk-yellow: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IHJlcXVpcmVkIDwvdGl0bGU+PHBhdGggZmlsbD0iaHNsKDM5LCAxMDAlLCA1MCUpIiBkPSJNOC41IDBoM3YyMGgtM3oiLz48cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Ik0xOS40IDEzLjcgMTggMTYuMy42IDYuMyAyIDMuN3oiLz48cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Im0xOCAzLjcgMS40IDIuNi0xNy4zIDEwLTEuNS0yLjZ6Ii8+PC9zdmc+");
    
    /* source editor icon - double brackets [[]], cosmoGreen color */
    --icon-source-editor-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IFdpa2l0ZXh0IDwvdGl0bGU+PGcgZmlsbD0icmdiKDEwLCAyMTIsIDk4KSI+PHBhdGggZD0iTTEgM3YxNGgzdi0ySDNWNWgxVjN6bTQgMHYxNGg0di0ySDdWNWgyVjN6bTExIDB2MmgxdjEwaC0xdjJoM1Yzem0tNSAwdjJoMnYxMGgtMnYyaDRWM3oiLz48L2c+PC9zdmc+");

    /* source editor mode switch icon in active state (which you open mode switch menu) - a pencil, in cosmo green */
    --icon-source-editor-mode-switch-active-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGVkaXQgPC90aXRsZT48cGF0aCBmaWxsPSJyZ2IoMTAsIDIxMiwgOTgpIiBkPSJtMTYuNzcgOCAxLjk0LTJhMSAxIDAgMCAwIDAtMS40MWwtMy4zNC0zLjNhMSAxIDAgMCAwLTEuNDEgMEwxMiAzLjIzek0xIDE0LjI1VjE5aDQuNzVsOS45Ni05Ljk2LTQuNzUtNC43NXoiLz48L3N2Zz4=");

    /* source editor syntax highlight icon in active state (when syntax higlighting is on) - a pen, in cosmo green */
    --icon-source-editor-syntax-highlight-mode-active-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGhpZ2hsaWdodCA8L3RpdGxlPjxnIGZpbGw9IiMzNmMiPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Ik0xNS4xNCAyLjI3YTEgMSAwIDAgMC0xLjQxIDBsLTEwIDEwYTEgMSAwIDAgMCAwIDEuNDFMNCAxNGwtMyA0aDVsMS0xIC4yOS4yOWExIDEgMCAwIDAgMS40MSAwbDEwLTEwYTEgMSAwIDAgMCAuMDMtMS40M3pNNyAxNWwtMi0yIDktOSAyIDJ6Ii8+PC9nPjwvc3ZnPg==");

    /* a puzzle icon present in templates in visual editor, in white */
    --icon-template-puzzle-white: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IHB1enpsZSA8L3RpdGxlPjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJ3aGl0ZSIgY3g9IjE3IiBjeT0iMTAiIHI9IjMiLz48cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Ik0xMC41OCAzQTMgMyAwIDAgMSAxMSA0LjVhMyAzIDAgMCAxLTYgMEEzIDMgMCAwIDEgNS40MiAzSDF2MTJhMiAyIDAgMCAwIDIgMmgxMlYzeiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=");

    /* tabber icon present in visual editor → insert, in black */
    --icon-tabber-black: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPiA8dGl0bGU+dGFiYmVyPC90aXRsZT4gPHBhdGggZmlsbD0iIzA5YWJmMSIgZD0iTTE4IDJIMkMuOSAyIDAgMi45IDAgNHYxMmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjRjMC0xLjEtLjktMi0yLTJ6bTEgNWgtOGMtLjYgMC0xLS40LTEtMVYzaDhjLjYgMCAxIC40IDEgMXYzeiIvPiA8L3N2Zz4=");

    /* dropdown icon (arrow-like), in cosmo blue */
    --icon-dropdown-cosmoBlue: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48dGl0bGU+IGRvd24gPC90aXRsZT48cGF0aCBmaWxsPSIjZDZlZGZmIiBkPSJNOS45IDIuOSA2IDYuOCAyLjEgMi45IDEgNGw1IDUgNS01eiIvPjwvc3ZnPg==");

}

/* ============ */
/* #region Uncategorized */
/* ============ */

/* Reset italic styling set by user agent */
cite,
dfn {
    font-style: inherit;
}

/* Straight quote marks for <q> */
q {
    quotes: '"' '"' "'" "'";
}

/* Avoid collision of blockquote with floating elements by swapping margin and padding */
blockquote {
    overflow: hidden;
    margin: 1em 0;
    padding: 0 40px;
}

/* Consistent size for <small>, <sub> and <sup> */
small {
    font-size: 85%;
}

.mw-body-content sub,
  .mw-body-content sup,
  span.reference /* for Parsoid */ {
    font-size: 80%;
}

/* Same spacing for indented and unindented paragraphs on talk pages */
.ns-talk .mw-body-content dd {
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}

/* Main page fixes */
#interwiki-completelist {
    font-weight: bold;
}

.biglink {
    font-family: "Teko";
    font-style: oblique 10deg;
    font-variant-caps: small-caps;
    text-shadow: #1b1b1f 2px 3px, #a00d 3px 5px;
}

/* Reduce page jumps by hiding collapsed/dismissed content */
.client-js .mw-special-Watchlist #watchlist-message,
  .client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child),
  
  /* Hide charinsert base for those not using the gadget */
  #editpage-specialchars {
    display: none;
}

/* Adds padding above Watchlist announcements where new recentchanges/watchlist filters are enabled */
.mw-rcfilters-enabled .mw-specialpage-summary {
    margin-top: 1em;
}

/* Highlight linked elements (such as clicked references) in blue */
.citation:target {
    background-color: rgba(0, 127, 255, 0.133);
}

/* Styling for citations. Breaks long urls, etc., rather than overflowing box */
.citation {
    word-wrap: break-word;
}

/* Make the list of references smaller
   * Keep in sync with Template:Refbegin/styles.css
   * And Template:Reflist/styles.css
   */
ol.references {
    font-size: 90%;
    margin-bottom: 0.5em;
}

/* Style for horizontal lists (separator following item).
	 @source mediawiki.org/wiki/Snippets/Horizontal_lists
	 @revision 8 (2016-05-21)
	 @author [[User:Edokter]]
   */
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0; /* don't trust the note that says margin doesn't work with inline
				  * removing margin: 0 makes dds have margins again */
    display: inline;
}

/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
    display: inline;
}

/* Hide empty list items */
.hlist .mw-empty-li {
    display: none;
}

/* Generate interpuncts */
.hlist dt:after {
    content: ": ";
}

/**
   * Note hlist style usage differs in Minerva and is defined in core as well!
   * Please check Minerva desktop (and Minerva.css) when changing
   * See https://phabricator.wikimedia.org/T213239
   */
.hlist dd:after,
.hlist li:after {
    content: " · ";
    font-weight: bold;
}

.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}

/* Add parentheses around nested lists */
.hlist dd dd:first-child:before,
.hlist dd dt:first-child:before,
.hlist dd li:first-child:before,
.hlist dt dd:first-child:before,
.hlist dt dt:first-child:before,
.hlist dt li:first-child:before,
.hlist li dd:first-child:before,
.hlist li dt:first-child:before,
.hlist li li:first-child:before {
    content: " (";
    font-weight: normal;
}

.hlist dd dd:last-child:after,
.hlist dd dt:last-child:after,
.hlist dd li:last-child:after,
.hlist dt dd:last-child:after,
.hlist dt dt:last-child:after,
.hlist dt li:last-child:after,
.hlist li dd:last-child:after,
.hlist li dt:last-child:after,
.hlist li li:last-child:after {
    content: ")";
    font-weight: normal;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
    counter-reset: listitem;
}

.hlist ol > li {
    counter-increment: listitem;
}

.hlist ol > li:before {
    content: " " counter(listitem) "\a0";
}

.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
    content: " (" counter(listitem) "\a0";
}

/* Unbulleted lists */
.plainlist ol,
.plainlist ul {
    line-height: inherit;
    list-style: none none;
    margin: 0;
}

.plainlist ol li,
.plainlist ul li {
    margin-bottom: 0;
}

/* Default style for navigation boxes */
.navbox {
    /* Navbox container style */
    box-sizing: border-box;
    border: 1px solid #a2a9b1;
    width: 100%;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
    margin: 1em auto 0; /* Prevent preceding content from clinging to navboxes */
}

.navbox .navbox {
    margin-top: 0; /* No top margin for nested navboxes */
}

.navbox + .navbox {
    margin-top: -1px; /* Single pixel border between adjacent navboxes */
}

.navbox-inner,
.navbox-subgroup {
    width: 100%;
}

.navbox-group,
.navbox-title,
.navbox-abovebelow {
    padding: 0.25em 1em; /* Title, group and above/below styles */
    line-height: 1.5em;
    text-align: center;
}

th.navbox-group {
    /* Group style */
    white-space: nowrap;
    /* @noflip */
    text-align: right;
}

.navbox,
.navbox-subgroup {
    background-color: #fdfdfd; /* Background color */
}

.navbox-list {
    line-height: 1.5em;
    border-color: #fdfdfd; /* Must match background color */
}

/* cell spacing for navbox cells */
tr + tr > .navbox-abovebelow,
tr + tr > .navbox-group,
tr + tr > .navbox-image,
tr + tr > .navbox-list {
    /* Borders above 2nd, 3rd, etc. rows */
    border-top: 2px solid #fdfdfd; /* Must match background color */
}

.navbox th,
.navbox-title {
    background-color: #ccccff; /* Level 1 color */
}

.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
    background-color: #ddddff; /* Level 2 color */
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background-color: #e6e6ff; /* Level 3 color */
}

.navbox-even {
    background-color: #f7f7f7; /* Even row striping */
}

.navbox-odd {
    background-color: transparent; /* Odd row striping */
}

.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
    padding: 0.125em 0; /* Adjust hlist padding in navboxes */
}

/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-parser-output .mw-collapsible-toggle {
    font-weight: normal;
    /* @noflip */
    text-align: right;
    padding-right: 0.2em;
    padding-left: 0.2em;
}

.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
    /* @noflip */
    float: left;
    /* @noflip */
    text-align: left;
}

/* Infobox template style */
.infobox {
    border: 1px solid #a2a9b1;
    border-spacing: 3px;
    background-color: #f8f9fa;
    color: black;
    /* @noflip */
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    /* @noflip */
    float: right;
    /* @noflip */
    clear: right;
    font-size: 88%;
    line-height: 1.5em;
    width: 22em;
}

.infobox-header,
  .infobox-label,
  .infobox-above,
  .infobox-full-data,
  .infobox-data,
  .infobox-below,
  .infobox-subheader,
  .infobox-image,
  .infobox-navbar,
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox th,
  .infobox td {
    vertical-align: top;
}

.infobox-label,
  .infobox-data,
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox th,
  .infobox td {
    /* @noflip */
    text-align: left;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-above,
  .infobox .infobox-title,
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox caption {
    font-size: 125%;
    font-weight: bold;
    text-align: center;
}

.infobox-title,
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox caption {
    padding: 0.2em;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
    text-align: center;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-navbar {
    /* @noflip */
    text-align: right;
}

/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope="row"] {
    font-weight: normal;
    /* @noflip */
    text-align: left;
}

/* Lists in wikitable data cells are always left-aligned */
.wikitable td ul,
.wikitable td ol,
.wikitable td dl {
    /* @noflip */
    text-align: left;
}

/* Fix for hieroglyphs specificity issue in infoboxes ([[phab:T43869]]) */
table.mw-hiero-table td {
    vertical-align: middle;
}

/* Change the external link icon to an Adobe icon for all PDF files */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
    background: url("//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif")
        no-repeat right;
    /* @noflip */
    padding-right: 18px;
}

/* Messagebox templates */
.messagebox {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    width: 80%;
    margin: 0 auto 1em auto;
    padding: 0.2em;
}

.messagebox.merge {
    border: 1px solid #c0b8cc;
    background-color: #f0e5ff;
    text-align: center;
}

.messagebox.cleanup {
    border: 1px solid #9f9fff;
    background-color: #efefff;
    text-align: center;
}

.messagebox.standard-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
    margin: 4px auto;
}

/* For old WikiProject banners inside banner shells. */
.mbox-inside .standard-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
    width: 100%;
    margin: 2px 0;
    padding: 2px;
}

.messagebox.small {
    width: 238px;
    font-size: 85%;
    /* @noflip */
    float: right;
    clear: both;
    /* @noflip */
    margin: 0 0 1em 1em;
    line-height: 1.25em;
}

.messagebox.small-talk {
    width: 238px;
    font-size: 85%;
    /* @noflip */
    float: right;
    clear: both;
    /* @noflip */
    margin: 0 0 1em 1em;
    line-height: 1.25em;
    background-color: #f8eaba;
}

/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
th.mbox-text,
td.mbox-text {
    /* The message body cell(s) */
    border: none;
    /* @noflip */
    padding: 0.25em 0.9em; /* 0.9em left/right */
    width: 100%; /* Make all mboxes the same width regardless of text length */
}

td.mbox-image {
    /* The left image cell */
    border: none;
    /* @noflip */
    padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */
    text-align: center;
}

td.mbox-imageright {
    /* The right image cell */
    border: none;
    /* @noflip */
    padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */
    text-align: center;
}

td.mbox-empty-cell {
    /* An empty narrow cell */
    border: none;
    padding: 0;
    width: 1px;
}

/* Article message box styles */
table.ambox {
    margin: 0 10%; /* 10% = Will not overlap with other elements */
    border: 1px solid #a2a9b1;
    /* @noflip */
    border-left: 10px solid #36c; /* Default "notice" blue */
    background-color: #fbfbfb;
    box-sizing: border-box;
}

/* Single border between stacked boxes. */
table.ambox + table.ambox,
table.ambox + .mw-empty-elt + table.ambox {
    margin-top: -1px;
}

.ambox th.mbox-text,
.ambox td.mbox-text {
    /* The message body cell(s) */
    padding: 0.25em 0.5em; /* 0.5em left/right */
}

.ambox td.mbox-image {
    /* The left image cell */
    /* @noflip */
    padding: 2px 0 2px 0.5em; /* 0.5em left, 0px right */
}

.ambox td.mbox-imageright {
    /* The right image cell */
    /* @noflip */
    padding: 2px 0.5em 2px 0; /* 0px left, 0.5em right */
}

table.ambox-notice {
    /* @noflip */
    border-left: 10px solid #36c; /* Blue */
}

table.ambox-speedy {
    /* @noflip */
    border-left: 10px solid #b32424; /* Red */
    background-color: #fee7e6; /* Pink */
}

table.ambox-delete {
    /* @noflip */
    border-left: 10px solid #b32424; /* Red */
}

table.ambox-content {
    /* @noflip */
    border-left: 10px solid #f28500; /* Orange */
}

table.ambox-style {
    /* @noflip */
    border-left: 10px solid #fc3; /* Yellow */
}

table.ambox-move {
    /* @noflip */
    border-left: 10px solid #9932cc; /* Purple */
}

table.ambox-protection {
    /* @noflip */
    border-left: 10px solid #a2a9b1; /* Gray-gold */
}

/* Image message box styles */
table.imbox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 3px solid #36c; /* Default "notice" blue */
    background-color: #fbfbfb;
    box-sizing: border-box;
}

.imbox .mbox-text .imbox {
    /* For imboxes inside imbox-text cells. */
    margin: 0 -0.5em; /* 0.9 - 0.5 = 0.4em left/right.        */
    display: block; /* Fix for webkit to force 100% width.  */
}

.mbox-inside .imbox {
    /* For imboxes inside other templates.  */
    margin: 4px;
}

table.imbox-notice {
    border: 3px solid #36c; /* Blue */
}

table.imbox-speedy {
    border: 3px solid #b32424; /* Red */
    background-color: #fee7e6; /* Pink */
}

table.imbox-delete {
    border: 3px solid #b32424; /* Red */
}

table.imbox-content {
    border: 3px solid #f28500; /* Orange */
}

table.imbox-style {
    border: 3px solid #fc3; /* Yellow */
}

table.imbox-move {
    border: 3px solid #9932cc; /* Purple */
}

table.imbox-protection {
    border: 3px solid #a2a9b1; /* Gray-gold */
}

table.imbox-license {
    border: 3px solid #88a; /* Dark gray */
    background-color: #f7f8ff; /* Light gray */
}

table.imbox-featured {
    border: 3px solid #cba135; /* Brown-gold */
}

/* Category message box styles */
table.cmbox {
    margin: 3px 10%;
    border-collapse: collapse;
    border: 1px solid #a2a9b1;
    background-color: #dfe8ff; /* Default "notice" blue */
    box-sizing: border-box;
}

table.cmbox-notice {
    background-color: #d8e8ff; /* Blue */
}

table.cmbox-speedy {
    margin-top: 4px;
    margin-bottom: 4px;
    border: 4px solid #b32424; /* Red */
    background-color: #ffdbdb; /* Pink */
}

table.cmbox-delete {
    background-color: #ffdbdb; /* Pink */
}

table.cmbox-content {
    background-color: #ffe7ce; /* Orange */
}

table.cmbox-style {
    background-color: #fff9db; /* Yellow */
}

table.cmbox-move {
    background-color: #e4d8ff; /* Purple */
}

table.cmbox-protection {
    background-color: #efefe1; /* Gray-gold */
}

/* Other pages message box styles */
table.ombox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #a2a9b1; /* Default "notice" gray */
    background-color: #f8f9fa;
    box-sizing: border-box;
}

table.ombox-notice {
    border: 1px solid #a2a9b1; /* Gray */
}

table.ombox-speedy {
    border: 2px solid #b32424; /* Red */
    background-color: #fee7e6; /* Pink */
}

table.ombox-delete {
    border: 2px solid #b32424; /* Red */
}

table.ombox-content {
    border: 1px solid #f28500; /* Orange */
}

table.ombox-style {
    border: 1px solid #fc3; /* Yellow */
}

table.ombox-move {
    border: 1px solid #9932cc; /* Purple */
}

table.ombox-protection {
    border: 2px solid #a2a9b1; /* Gray-gold */
}

/* Talk page message box styles */
table.tmbox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #c0c090; /* Default "notice" gray-brown */
    background-color: #f8eaba;
    min-width: 80%;
    box-sizing: border-box;
}

.tmbox.mbox-small {
    min-width: 0; /* reset the min-width of tmbox above        */
}

.mediawiki .mbox-inside .tmbox {
    /* For tmboxes inside other templates. The "mediawiki" class ensures that */
    margin: 2px 0; /* this declaration overrides other styles (including mbox-small above)   */
    width: 100%; /* For Safari and Opera */
}

.mbox-inside .tmbox.mbox-small {
    /* "small" tmboxes should not be small when  */
    line-height: 1.5em; /* also "nested", so reset styles that are   */
    font-size: 100%; /* set in "mbox-small" above.                */
}

table.tmbox-speedy {
    border: 2px solid #b32424; /* Red */
    background-color: #fee7e6; /* Pink */
}

table.tmbox-delete {
    border: 2px solid #b32424; /* Red */
}

table.tmbox-content {
    border: 2px solid #f28500; /* Orange */
}

table.tmbox-style {
    border: 2px solid #fc3; /* Yellow */
}

table.tmbox-move {
    border: 2px solid #9932cc; /* Purple */
}

table.tmbox-protection,
table.tmbox-notice {
    border: 1px solid #c0c090; /* Gray-brown */
}

/* Footer and header message box styles */
table.fmbox {
    clear: both;
    margin: 0.2em 0;
    width: 100%;
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa; /* Default "system" gray */
    box-sizing: border-box;
}

table.fmbox-system {
    background-color: #191970;
}

table.fmbox-warning {
    border: 1px solid #bb7070; /* Dark pink */
    background-color: #ffdbdb; /* Pink */
}

table.fmbox-editnotice {
    background-color: transparent;
}

/* Div based "warning" style fmbox messages. */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
    clear: both;
    margin: 0.2em 0;
    border: 1px solid #bb7070;
    background-color: #ffdbdb;
    padding: 0.25em 0.9em;
    box-sizing: border-box;
}

/* Use default color for partial block fmbox banner per [[Special:PermaLink/1028105567#pblock-style]] */
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt {
    border-color: #fc3;
    background-color: #fef6e7;
}

/* These mbox-small classes must be placed after all other
	 ambox/tmbox/ombox etc classes. "html body.mediawiki" is so
	 they override "table.ambox + table.ambox" above. */
html body.mediawiki .mbox-small {
    /* For the "small=yes" option. */
    /* @noflip */
    clear: right;
    /* @noflip */
    float: right;
    /* @noflip */
    margin: 4px 0 4px 1em;
    box-sizing: border-box;
    width: 238px;
    font-size: 88%;
    line-height: 1.25em;
}

html body.mediawiki .mbox-small-left {
    /* For the "small=left" option. */
    /* @noflip */
    margin: 4px 1em 4px 0;
    box-sizing: border-box;
    overflow: hidden;
    width: 238px;
    border-collapse: collapse;
    font-size: 88%;
    line-height: 1.25em;
}

/* Style for compact ambox */
/* Hide the images */
.compact-ambox table .mbox-image,
.compact-ambox table .mbox-imageright,
.compact-ambox table .mbox-empty-cell {
    display: none;
}

/* Remove borders, backgrounds, padding, etc. */
.compact-ambox table.ambox {
    border: none;
    border-collapse: collapse;
    background-color: transparent;
    margin: 0 0 0 1.6em !important;
    padding: 0 !important;
    width: auto;
    display: block;
}

body.mediawiki .compact-ambox table.mbox-small-left {
    font-size: 100%;
    width: auto;
    margin: 0;
}

/* Style the text cell as a list item and remove its padding */
.compact-ambox table .mbox-text {
    padding: 0 !important;
    margin: 0 !important;
}

.compact-ambox table .mbox-text-span {
    display: list-item;
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url(/w/skins/MonoBook/resources/images/bullet.svg);
}

/* Allow for hiding text in compact form */
.compact-ambox .hide-when-compact {
    display: none;
}

/* Remove underlines from certain links */
.nounderlines a,
.IPA a:link,
.IPA a:visited {
    text-decoration: none !important;
}

/* Prevent line breaks in silly places where desired (nowrap)
	 and links when we don't want them to (nowraplinks a) */
.nowrap,
.nowraplinks a {
    white-space: nowrap;
}

/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
    white-space: normal;
}

/* Increase the height of the image upload box */
#wpUploadDescription {
    height: 13em;
}

/* Minimum thumb width */
.thumbinner {
    min-width: 100px;
}

/* Prevent floating boxes from overlapping any category listings,
	 file histories, edit previews, and edit [Show changes] views. */
#mw-subcategories,
#mw-pages,
#mw-category-media,
#filehistory,
#wikiPreview,
#wikiDiff {
    clear: both;
}

/* Selectively hide headers in WikiProject banners */
/* TemplateStyles */
.wpb .wpb-header {
    display: none;
}

.wpbs-inner .wpb .wpb-header {
    display: table-row;
}

.wpbs-inner .wpb-outside {
    display: none; /* hide things that should only display outside shells */
}

/* Styling for Abuse Filter tags */
.mw-tag-markers {
    font-style: italic;
    font-size: 90%;
}

/* Hide stuff meant for accounts with special permissions. Made visible again in
	 [[MediaWiki:Group-checkuser.css]], [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-abusefilter.css]],
	 [[MediaWiki:Group-abusefilter-helper.css]], [[MediaWiki:Group-patroller.css]],
	 [[MediaWiki:Group-templateeditor.css]], [[MediaWiki:Group-extendedmover.css]],
	 [[MediaWiki:Group-extendedconfirmed.css]], and [[Mediawiki:Group-autoconfirmed.css]]. */
.checkuser-show,
.sysop-show,
.abusefilter-show,
.abusefilter-helper-show,
.patroller-show,
.templateeditor-show,
.extendedmover-show,
.extendedconfirmed-show,
.autoconfirmed-show,
.user-show {
    display: none;
}

/* Hide the redlink generated by {{Editnotice}},
	 this overrides the ".sysop-show { display: none; }" above that applies
	 to the same link as well. See [[phab:T45013]]
  
	 Hide the images in editnotices to keep them readable in VE view.
	 Long term, editnotices should become a core feature so that they can be designed responsive. */
.ve-ui-mwNoticesPopupTool-item .editnotice-redlink,
.ve-ui-mwNoticesPopupTool-item .mbox-image,
.ve-ui-mwNoticesPopupTool-item .mbox-imageright {
    display: none !important;
}

/* Remove bullets when there are multiple edit page warnings */
ul.permissions-errors > li {
    list-style: none none;
}

ul.permissions-errors {
    margin: 0;
}

/* texhtml class for inline math (based on generic times-serif class) */
span.texhtml {
    font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
    font-size: 118%;
    line-height: 1;
    white-space: nowrap;
    /* Force tabular and lining display for texhtml */
    -moz-font-feature-settings: "lnum", "tnum", "kern" 0;
    -webkit-font-feature-settings: "lnum", "tnum", "kern" 0;
    font-feature-settings: "lnum", "tnum", "kern" 0;
    font-variant-numeric: lining-nums tabular-nums;
    font-kerning: none;
}

span.texhtml span.texhtml {
    font-size: 100%;
}

span.mwe-math-mathml-inline {
    font-size: 118%;
}

/* Make <math display="block"> be left aligned with one space indent for 
   * compatibility with style conventions
   */
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
    margin-left: 1.6em !important;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
}

.mwe-math-mathml-display math {
    display: inline;
}

/* Work-around for [[phab:T25965]] / [[phab:T100106]] (Kaltura advertisement) */
.k-player .k-attribution {
    visibility: hidden;
}

/* Move 'play' button of video player to bottom left corner */
.PopUpMediaTransform a .play-btn-large {
    margin: 0;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
}

@media screen {
    /* Put a chequered background behind images, only visible if they have transparency.
		 '.filehistory a img' and '#file img:hover' are handled by MediaWiki core (as of 1.19) */
    .gallerybox .thumb img {
        background: #fff
            url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png)
            repeat;
    }
    /* But not on articles, user pages, portals or with opt-out. */
    .ns-0 .gallerybox .thumb img,
    .ns-2 .gallerybox .thumb img,
    .ns-100 .gallerybox .thumb img,
    .nochecker .gallerybox .thumb img {
        background-image: none;
    }

    /* Display "From Wikipedia, the free encyclopedia" in skins that support it,
		 do not apply to print mode */
    /*
	  #siteSub {
		  display: block;
	  }
	  */
}

/* Hide FlaggedRevs notice UI when there are no pending changes */
.flaggedrevs_draft_synced,
  .flaggedrevs_stable_synced,
  /* "Temporary" to remove links in sidebar T255381 */
  #t-upload,
  /* Hide broken download box on Special:Book pending T285400 */
  .mw-special-Book #coll-downloadbox {
    display: none;
}

/* Fix horizontal scrolling of long edit summaries T158725 */
span.comment {
    overflow-wrap: break-word;
}

#mw-page-base {
    background: #1b1b1f;
    color: var(--text-color);
    border: #1b1b1f;
}

.mediawiki,
.mw-page-container {
    background: #1b1b1f;
    color: var(--text-color);
    border: #1b1b1f;
}

.mw-body {
    background: #212126;
    color: var(--text-color);
    border: black;
}

#mw-panel {
    background: #1b1b1f;
    color: var(--text-color);
    border: #1b1b1f;
}

#mw-content-container,
#mw-header-container,
#mw-header-nav-hack,
#mw-content-wrapper,
#mw-content,
#p-logo {
    background: #1b1b1f;
    color: var(--text-color);
    border: #1b1b1f;
}

#mw-header-nav-hack {
    background: #212126;
    color: var(--text-color);
    border: #212126;
}

.mw-code {
    background: #212126;
    color: var(--text-color);
}

footer,
#footer-info-lastmod,
#footer-info-copyright {
    color: var(--text-color);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
li {
    color: var(--text-color);
}

a,
.vector-menu-portal .vector-menu-content li a,
.vector-menu-tabs li a,
body.skin--responsive #p-cactions li a {
    color: lightblue;
}

a:visited,
.vector-menu-portal .vector-menu-content li a:visited,
.vector-menu-tabs li a:visited,
body.skin--responsive #p-cactions li a:visited {
    color: #007fff;
}

body.skin--responsive #p-cactions li a {
    background: var(--bg-color-light-x2);
}

.mw-prefs-buttons {
    background: var(--bg-color-light-x2);
}

a.extiw:visited,
a.external:visited,
.mw-parser-output a.extiw:visited,
.mw-parser-output a.external:visited,
body.skin--responsive #p-cactions li a.external:visited {
    color: #8a2be2;
}

.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited,
body.skin--responsive #p-cactions li.selected a {
    color: var(--text-color);
    font-weight: bold;
}

body.skin--responsive #p-cactions li.selected a {
    background: var(--bg-color-light-x2);
}

.vector-menu-tabs li {
    background: #212126;
}

.tools-inline li a {
    filter: invert(100%);
}

.tools-inline span {
    filter: invert(100%);
    color: var(--text-color);
}

#personal h2,
#site-tools h2,
#site-navigation h2,
#searchButton {
    filter: invert(100%);
}

#personal h2 span {
    filter: invert(100%);
}

#mw-site-navigation .sidebar-chunk,
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk,
body.skin--responsive .portlet,
body.skin--responsive .pBody {
    background: #212126;
    color: var(--text-color);
    border: #1b1b1f;
}

#p-logo-text a {
    color: var(--text-color);
}

#ca-nstab-mediawiki.a {
    color: var(--text-color);
}

#mw-changeslist-links {
    background: #212126;
    color: var(--text-color);
}

#simpleSearch {
    background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

#searchInput {
    color: var(--text-color);
}

#pt-createaccount {
    visibility: hidden;
}

.vector-user-links .vector-user-menu-more .vector-menu-content-list li a,
#personal .dropdown {
    background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

body.skin--responsive #p-cactions li.selected {
    border: var(--bg-color-light-x4);
}

.vector-menu-tabs .selected {
    background: #1b1b1f;
}

#pagehistory li.selected {
    background: #1b4d3e;
    font-weight: bold;
}

div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
    background: #7c0a02;
    border: 1px solid #bb7070;
}

.wikitable {
    background: var(--bg-color-light-x3);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

.toc {
    background: var(--bg-color-light-x3);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

.mw-content-ltr .tocnumber {
    color: grey;
}

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
    border: 1px solid var(--bg-color-light-x4);
}

.wikitable > * > tr > th {
    background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

.quickbox {
    border: 1px solid #303038;
    background: var(--bg-color-light-x2);
}

.quickboxhead {
    border-bottom: 1px solid #303038;
    background: #1b1b1f;
    text-align: center;
}

.thumbinner,
.thumbinner .thumbimage {
    background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

table.ombox tbody,
table.ombox {
    background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

table.ambox tbody,
table.ambox {
    background: var(--bg-color-light-x2);
    border-top: 1px solid var(--bg-color-light-x4);
    border-bottom: 1px solid var(--bg-color-light-x4);
    border-right: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

table.imbox tbody,
table.imbox {
    background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

/* OOUI PAIN */
/* Recent Changes */
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
    .oo-ui-tagMultiselectWidget-handle,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background: var(--bg-color-light-x2);
    border: 1px solid #303038;
    color: var(--text-color);
}

/* Generic OOUI elements */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background: var(--bg-color-light-x2);
    border: 1px solid #303038;
    color: var(--text-color);
}

.oo-ui-popupWidget-popup {
    background: var(--bg-color-light-x3);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

/* SITE SPECIFIC */
/*
  .chemrecipeimg img {
	  background-image: url('https://wiki.spacestation14.com/w/images/7/75/Beaker_Fill.png');
	  background-blend-mode: multiply;
	  background-position: center;
  }
  */
@media screen {
    .mw-body-content .recipeimg a > img {
        padding: 0;
        margin: 0;
        border: 0;
        width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        max-height: 32px !important;
    }
}

.positive {
    color: #00ff00;
    font-weight: bold;
}

.negative {
    color: #ff0000;
    font-weight: bold;
}

.anglerect {
    --angle-rect-clip-size: 16px;
    clip-path: polygon(
        0 0,
        calc(100% - var(--angle-rect-clip-size)) 0,
        100% var(--angle-rect-clip-size),
        100% 100%,
        var(--angle-rect-clip-size) 100%,
        0 calc(100% - var(--angle-rect-clip-size))
    );
}

/* hack for mobile/nomobile */
.flex {
    display: flex;
}

@media screen and (min-width: 851px) {
    .mobile {
        display: none;
    }
}

@media screen and (max-width: 850px) {
    .nomobile {
        display: none;
    }
}

img {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* allows enabling smooth rendering for images by adding this class to them whenever needed */
img.smooth-render,
.smooth-render img {
    image-rendering: auto;
}

.layered {
    position: absolute;
    top: 0;
    left: 0;
}

.blend {
    mix-blend-mode: multiply;
}

/* replace pencil icon in "edit section" buttons with a version that's visible */
.mw-editsection {
    background-image: url(/w/images/a/a9/Pencil-lightblue.svg);
}

/* #endregion */

/* ============ */
/* #region GENERAL STYLES */
/* ============ */

code {
    color: var(--code-color-text);
    background-color: var(--code-color-bg);
    border: 1px solid var(--code-color-border);
}

pre {
    color: var(--code-color-text);
    background-color: var(--code-color-bg);
    border: 1px solid var(--code-color-border);
}

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

a:hover {
    /* keep the same color */
    color: var(--link-color);
    /* keep underline */
    text-decoration: underline;
}

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

a:visited:hover {
    /* keep the same color */
    color: var(--link-color-visited);
    /* keep underline */
    text-decoration: underline;
}

/* big links on the main page */
.biglink > a:hover {
    color: #2952a3;
}

/* big links on the main page */
.biglink > a:visited:hover {
    color: #1e3666;
}

/* ============ */
/* #endregion */
/* ============ */

/* ============ */
/* #region SYSTEM MESSAGES */
/* ============ */

/* system message banner */
.mw-message-box {
    color: var(--text-color);
    border-color: var(--border-color-light);
    background-color: var(--bg-color-light-x4);
}

/* system success banner */
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
    background-color: hsl(167 37% 27% / 1);
    border-color: #096450;
    color: var(--text-color);
}

/* system warning banner (e.g. when you preview changes in the source editor and the "changes not yeh published" banner pops up) */
.mw-message-box-warning,
/* another system warning banner */
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
    color: var(--text-color);
    background-color: var(--warning-color);
    border-color: var(--warning-color-border);
}

/* another system error banner */
.mw-message-box-error,
/* system error banner (e.g., when you remove the parameter name from templateData param) */
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error {
    color: var(--text-color);
    background-color: var(--danger-color-dark-x2);
    border-color: var(--danger-color-border);
}

/* #endregion */

/* ============ */
/* #region IMAGES & GALLERIES */
/* ============ */

/* images with "thumb" type */
figure[typeof~='mw:File/Thumb'], 
/* images with "frame" type */
figure[typeof~='mw:File/Frame'],
/* images with "thumb" type → caption */
figure[typeof~='mw:File/Thumb'] > figcaption, 
/* images with "frame" type  → caption */
figure[typeof~='mw:File/Frame'] > figcaption,
/* The backgrounds for galleries. */
#content .gallerybox div.thumb {
	background-color: var(--bg-color-light-x2);
	border-color: var(--border-color);
}

/* images with "thumb" type → image */
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element, 
/* images with "frame" type → image */
figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element,
/* some other images */
.mw-image-border .mw-file-element {
	border-color: var(--border-color-light);
}

/* images with "thumb" type → open image icon */
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after, 
/* images with "thumb" type → ????? (something alike to the above) */
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
	filter: invert(100%);
}

/* #endregion */

/* ============ */
/* #region PAGE DIFF */
/* ============ */

/* page versions diff → diff entry (one cell) */
.diff .diff-context {
    background: var(--code-color-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* page versions diff → cell (deleted text) */
.diff .diff-deletedline {
    border-color: var(--red-color);
}

/* page versions diff → cell (added text) */
.diff .diff-addedline {
    border-color: var(--green-color);
}

/* page versions diff → cell → inline diff */
.diff .diffchange {
    background-color: var(--blue-color-dark-x2);
}

/* ============ */
/* #endregion */
/* ============ */

/* ============ */
/* #region Search */
/* ============ */

/* SEARCH BAR */

/* search form → search bar */
.mw-search-form-wrapper #mw-search-top-table input[type=search] {
    background-color: var(--bg-color-light);
    border-color: var(--border-color-light);
    color: var(--text-color);
}

/* search form → search bar → search icon */
.mw-search-form-wrapper #mw-search-top-table .oo-ui-icon-search,
/* search form → search bar → clear search icon */
.mw-search-form-wrapper #mw-search-top-table .oo-ui-indicator-clear {
    filter: invert(100%);
}

/* search form → search bar → search button */
.mw-search-form-wrapper #mw-search-top-table button[type=submit],
/* search form → advanced search options → all/none toggle container → button */
.mw-search-form-wrapper #mw-search-togglebox input[type=button] {
    background-color: var(--action-color);
    border-color: var(--border-color);
    color: var(--text-color);
    transition: background-color 100ms ease-in;
}

/* search form → search bar → search button hover */
.mw-search-form-wrapper #mw-search-top-table button[type=submit]:hover,
/* search form → advanced search options → all/none toggle container → button hover */
.mw-search-form-wrapper #mw-search-togglebox input[type=button]:hover {
    background-color: var(--action-color-light);
    transition: background-color 100ms ease-out;
}

/* search form → search bar → search button active */
.mw-search-form-wrapper #mw-search-top-table button[type=submit]:active,
/* search form → advanced search options → all/none toggle container → button active */
.mw-search-form-wrapper #mw-search-togglebox input[type=button]:active {
    background-color: var(--action-color-dark-x2);
    transition: background-color 100ms ease-out;
}

/* search form → search in pane → namespace suggest → namespace with a border */
.oo-ui-defaultOverlay > .oo-ui-selectWidget .mw-advancedSearch-namespace-border {
    border-color: var(--bg-color-light-x3);
}

/* SEARCH BAR END */

/* search form → results count info */
.mw-search-form-wrapper #mw-search-top-table .results-info {
    color: var(--bg-color-light-x4);
}

/* search form → advanced search/search in pane */
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button {
    background-color: var(--bg-color-light);
    color: var(--text-color);
    border-color: var(--border-color-light);
}

/* search form → advanced search/search in pane hover */
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button:hover {
    background-color: var(--bg-color-light-x2) !important;
    /* stays the same */
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* search form → advanced search/search in pane → "down" indication icon */
.mw-search-form-wrapper .oo-ui-indicator-down {
    filter: invert(100%);
}

/* search form → advanced search/search in pane → content container */
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-pane > * {
    /* a slight "glow" at the top */
    background: linear-gradient(hsla(0, 0%, 100%, 0.1), var(--bg-color) 0.5em);
    border-color: var(--border-color-light);
}


/* TAGS */

/* search form → tag */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget {
    background-color: var(--bg-color-light-x3) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color-light) !important;
    text-shadow: 0 0 3px var(--bg-color) !important;
}

/* search form → tag → remove button hover */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget .oo-ui-buttonElement-button:hover {
    background-color: var(--bg-color-light);
}

/* search form → tag → remove icon */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget .oo-ui-icon-close {
    filter: invert(100%);
}

/* search form → disabled tag */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget.oo-ui-widget-disabled {
    background-color: var(--bg-color-light);
    color: color-mix(in srgb, var(--text-color), var(--bg-color) 22%);
    text-shadow: none;
}

/* search form → tag → link */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget > a {
    color: var(--text-color);
}

/* search form → tag with a non-existing link */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget:has(a.new) {
    background-color: var(--warning-color);
    border-color: var(--border-color-light);
    text-shadow: 0 0 3px var(--bg-color-light-x2);
}

/* TAGS END */
/* FIELDS */

/* search form → info icon */
.mw-search-form-wrapper .oo-ui-icon-info,
/* search form → menu icon */
.mw-search-form-wrapper .oo-ui-icon-menu,
/* search form → search icon */
.mw-search-form-wrapper .oo-ui-icon-search {
    filter: invert(100%);
} 

/* search form → dropdown input */
.mw-search-form-wrapper .oo-ui-dropdownInputWidget,
/* search form → dropdown input hover */
.mw-search-form-wrapper .oo-ui-dropdownInputWidget:hover {
    /* remove this extra bg */
    background-color: transparent;
}

/* search form → fields group → label */
.mw-search-form-wrapper .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
    /* should be the same as the bg to hide the line underneath */
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    font-weight: bold !important;
}

/* search form → tag select field */
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget,
/* search form → text input field → input */
.mw-search-form-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input,
/* search form → dropdown select */
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle,
/* search form → dropdown select hover */
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle:hover {
    background-color: var(--bg-color-light) !important;
    color: var(--text-color) !important;
}

/* search form → tag select field → input */
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget input {
    color: var(--text-color);
}

/* search form → tag select field → next nested container element */
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget > .oo-ui-tagMultiselectWidget-handle,
/* search form → text input field → input */
.mw-search-form-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input,
/* search form → dropdown select */
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle {
    border-color: var(--border-color-light) !important;
}

/* search form → tag select field hover → next nested container element */
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget:hover > .oo-ui-tagMultiselectWidget-handle,
/* search form → text input field → input hover */
.mw-search-form-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input:hover,
/* search form → dropdown select hover */
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle:hover {
    border-color: var(--border-color-light) !important;
}


/* FIELDS END */

/* #endregion */

/* ============ */
/* #region Popups */
/* various popup windows */
/* some of them live in ".oo-ui-defaultOverlay" */
/* ============ */

/* OPTION SELECT */

/* option select popup */
.oo-ui-selectWidget {
    background-color: var(--bg-color);
    border-color: var(--border-color);
}

/* option select popup → option */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget {
    background-color: var(--bg-color);
    transition: background-color 100ms ease-in;
    color: var(--text-color);
}

/* option select popup → option hover */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
    background-color: var(--bg-color-light);
    transition: none;
}

/* option select popup → selected option hover */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-optionWidget-highlighted {
    color: var(--text-color);
    background-color: var(--action-color-dark);
}

/* option select popup → option active */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed,
/* option select popup → selected option */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
    color: var(--text-color);
    transition: none;
    background-color: var(--action-color-dark);
    background: linear-gradient(90deg,
        var(--action-color) 0%, 
        var(--action-color-dark-x2) 100%
    );
}

/* OPTION SELECT END */

/* #endregion */


/* ============ */
/* #region =📕= SOURCE EDITOR =📕= */
/* ============ */

/* existing styles */

textarea {
    background: var(--bg-color-light-x3);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

/* new styles */

:root {
    --se-mode-icon: var(--icon-source-editor-cosmoGreen);
}

/* page editor content */
.mw-editform #wpTextbox1 {
    background-color: var(--bg-color-light-x2);
    color: var(--text-color);
}

/* page editor footer section */
.mw-editform .editOptions {
    background-color: var(--bg-color-light);
    color: var(--text-color);
}

/* page editor footer section → edit summary */
.mw-editform .editOptions input#wpSummary {
    background-color: var(--bg-color-light-x2);
    color: var(--text-color);
    border-color: var(--border-color-light);
}

/* page editor footer section → edit summary hover */
.mw-editform .editOptions input#wpSummary:hover {
    border-color: var(--border-color-light-x2);
}

/* page editor footer section "save changes" button */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpSave {
    background-color: var(--action-color);
    border-color: var(--border-color);
}

/* page editor footer section "save changes" button hover */
.mw-editform
    .editOptions
    .editButtons
    .oo-ui-buttonElement-button#wpSave:hover {
    background-color: var(--action-color-light);
}

/* page editor footer section "save changes" button active */
.mw-editform
    .editOptions
    .editButtons
    .oo-ui-buttonElement-button#wpSave:active {
    background-color: var(--action-color-dark);
}

/* page editor footer section "show preview/changes" buttons */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview,
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff,
  /* "Manage TemplateData" button above the text editor when editing a template
  !important directives are used to override the defaults */
  .tdg-editscreen-main .oo-ui-buttonElement-button {
    background-color: var(--bg-color-light) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--bg-color-light-x4) !important;
}

/* page editor → footer section → show preview/changes buttons hover */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:hover,
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff:hover,
  /* "Manage TemplateData" button above the text editor when editing a template
  !important directives are used to override the defaults */
  .tdg-editscreen-main .oo-ui-buttonElement-button:hover {
    background-color: var(--action-color-light) !important;
    /* override of the default selector */
    color: var(--text-color) !important;
}

/* page editor → footer section → show preview/changes buttons active */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:active,
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff:active,
  /* "Manage TemplateData" button above the text editor when editing a template
  !important directives are used to override the defaults */
  .tdg-editscreen-main .oo-ui-buttonElement-button:active {
    background-color: var(--action-color-dark) !important;
    /* override of the default selector */
    color: var(--text-color) !important;
}

/* text editor toolbar */
.wikiEditor-ui-toolbar {
    background-color: var(--bg-color-light);
    color: var(--text-color);
}

/* text editor toolbar icons - inverting from black to white */
.wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
.wikiEditor-ui-toolbar .oo-ui-indicator-down {
    filter: invert(100%);
}

/* text editor toolbar icons on hover */
.wikiEditor-ui-toolbar .oo-ui-buttonElement-button:hover,
  /* text editor toolbar mode switch icon button on hover */
  .wikiEditor-ui-toolbar .oo-ui-widget .oo-ui-popupToolGroup-handle:hover {
    /* !important directive makes the override much easier here */
    background-color: var(--bg-color-light-x3) !important;

    /* more "snappier" transition */
    transition: background-color 50ms ease-out, color 50ms ease-out,
        border-color 50ms ease-out, box-shadow 50ms ease-out;
}

/* text editor toolbar mode switch icon button (when active) */
.wikiEditor-ui-toolbar
    .oo-ui-popupToolGroup-active
    .oo-ui-popupToolGroup-handle {
    background-color: var(--bg-color-light-x4);
}

/* text editor toolbar mode switch icon button → icon (when active) */
.wikiEditor-ui-toolbar
    .oo-ui-popupToolGroup-active
    .oo-ui-popupToolGroup-handle
    .oo-ui-iconElement-icon {
    filter: none;
    background-image: url("data:image/svg+xml, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3E%20edit%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22rgb(10%2C%20212%2C%2098)%22%20d%3D%22m16.77%208%201.94-2a1%201%200%200%200%200-1.41l-3.34-3.3a1%201%200%200%200-1.41%200L12%203.23zM1%2014.25V19h4.75l9.96-9.96-4.75-4.75z%22%2F%3E%3C%2Fsvg%3E");
}

/* text editor toolbar → syntax highlight button → icon (when active) */
span.oo-ui-iconElement-icon.oo-ui-icon-highlight.oo-ui-image-progressive {
    /* disable icon filter applied earlier */
    filter: none;
    /* replace with a proper image instead */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGhpZ2hsaWdodCA8L3RpdGxlPjxnIGZpbGw9IiMzNmMiPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Ik0xNS4xNCAyLjI3YTEgMSAwIDAgMC0xLjQxIDBsLTEwIDEwYTEgMSAwIDAgMCAwIDEuNDFMNCAxNGwtMyA0aDVsMS0xIC4yOS4yOWExIDEgMCAwIDAgMS40MSAwbDEwLTEwYTEgMSAwIDAgMCAuMDMtMS40M3pNNyAxNWwtMi0yIDktOSAyIDJ6Ii8+PC9nPjwvc3ZnPg==");
}

/* text editor toolbar labels */
.wikiEditor-ui-toolbar .group .label {
    color: var(--text-color);
    filter: brightness(80%);
}

/* text editor toolbar labels with .tool-select class (they act as select) */
.wikiEditor-ui-toolbar .group .tool-select .label {
    color: var(--text-color);
    filter: none;
}

/* text editor toolbar label (that acts as select) options container */
.wikiEditor-ui-toolbar .group .tool-select .options {
    background-color: var(--bg-color-light-x2);
}

/* text editor toolbar label (that acts as select) options */
.wikiEditor-ui-toolbar .group .tool-select .options .option,
  /* text editor toolbar → group lists inside tabs → options */
  .wikiEditor-ui-toolbar .booklet>.index {
    color: var(--text-color);

    /* a new prop, introduced because of hover */
    transition: background-color 50ms ease-in;
}

/* text editor toolbar → special characters tab → special characters */
.wikiEditor-ui-toolbar .page-characters div span {
    color: var(--text-color);
    background-color: var(--bg-color-light);
    border-color: var(--border-color);

    /* a new prop, introduced because of hover */
    transition: background-color 50ms ease-in;
}

/* text editor toolbar label (that acts as select) options on hover
  note: no hover is defined by default, this is an addition */
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover,
  /* text editor toolbar → group lists inside tabs → options on hover */
  .wikiEditor-ui-toolbar .booklet>.index> :hover,
  /* text editor toolbar → special characters tab → special characters on hover */
  .wikiEditor-ui-toolbar .page-characters div span:hover {
    background-color: var(--bg-color-light-x2);
    transition: background-color 50ms ease-out;
}

/* text editor toolbar → special characters tab → special characters on hover */
.wikiEditor-ui-toolbar .page-characters div span:hover {
    border-color: var(--border-color-light);
}

/* text editor toolbar → group lists inside tabs → active option */
.wikiEditor-ui-toolbar .booklet > .index > .current {
    color: var(--link-color);
    background-color: var(--bg-color-light-x4);
    transition: background-color 50ms ease-out;
}

/* text editor toolbar tab buttons 
  the color property to the selected tab since it has higher priority */
.wikiEditor-ui-toolbar .tabs span.tab a {
    color: var(--link-color);

    transition: background-color 100ms ease-out;
}

/* text editor toolbar selected tab */
.wikiEditor-ui-toolbar .tabs span.tab a.current,
  /* text editor toolbar selected tab, visited */
  .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
    color: var(--link-color);
    background-color: var(--bg-color-light-x4);

    transition: background-color 100ms ease-in;
}

/* an arrow icon to the left in text editor toolbar tabs */
.wikiEditor-ui-toolbar .tabs span.tab a::before {
    filter: invert(100%);
}

/* editor footer → checkbox */
.oo-ui-checkboxInputWidget [type="checkbox"] + span {
    background-color: var(--bg-color-light-x2);
    border-color: var(--border-color-light);
}

/* editor footer → checkbox hover */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:hover + span {
    border-color: var(--border-color-light-x2);
}

/* editor footer → checkbox active */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
    [type="checkbox"]:active
    + span {
    background-color: var(--action-color);
    /* same as the bg color to make it seamless 
	  !important here overrides the more lighter color in hover state*/
    border-color: var(--action-color) !important;
    /* disabling the default box shadow, which just doubles the border when active/in focus  */
    box-shadow: none;
}

/* editor footer → checkbox focus */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:focus + span {
    /* background-color: var(--action-color-dark-x2er); */
}

/* editor footer → checkbox (checked) */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
    [type="checkbox"]:checked
    + span {
    background-color: var(--action-color-light);
}

/* editor footer → checkbox (checked) hover */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
    [type="checkbox"]:checked
    + span:hover {
    background-color: var(--action-color-light-x2);
}

/* editor footer → checkbox (checked) active */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
    [type="checkbox"]:checked
    + span:active {
    background-color: var(--action-color-dark);
}

/* legal stuff above the buttons at the footer of the editor
  note: this just adds additional spacing between the text and the checkboxes for visual clarity */
#editpage-copywarn {
    margin-top: 1rem;
}

/* override for page editor toolbar → help tab → table → th */
.wikiEditor-ui-toolbar .page-table th {
    text-align: center;
    color: var(--text-color);
}

/* override for page editor toolbar → help tab → table → td */
.wikiEditor-ui-toolbar .page-table td {
    color: var(--text-color);
}

/* override page editor toolbar → tabs → left section
  note: both these overrides are done just 
  to make the help section a little larger and thus more readable */
.wikiEditor-ui-toolbar .booklet>.index,
  /* override page editor toolbar → tabs → right section */
  .wikiEditor-ui-toolbar .booklet .pages {
    height: 12rem;
}

/* editor → toolbar → mode switch button → popup (that opens on click) */
.wikiEditor-ui-toolbar .oo-ui-popupToolGroup-tools {
    background-color: var(--bg-color-light);
}

/* editor → toolbar → mode switch button → popup on click → inactive mode (span) */
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled {
    transition: background-color 100ms ease-in;
    color: var(--text-color);
}

/* editor → toolbar → mode switch button → popup on click → inactive mode (span) hover */
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled:hover,
  /* editor → toolbar → mode switch button → popup on click → inactive mode (a) active */
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled .oo-ui-tool-link:active {
    color: var(--text-color);
    background-color: var(--bg-color-light-x2);
    transition: background-color 100ms ease-out;
}

/* editor → toolbar → mode switch button → popup on click → inactive mode (a) hover */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled
    .oo-ui-tool-link:hover {
    /* duplicate background, removing it */
    background-color: transparent;
}

/* editor → toolbar → mode switch button → popup on click → selected mode (span) */
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active,
  /* editor → toolbar → mode switch button → popup on click → selected mode (a) */
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active .oo-ui-tool-link,
  /* editor → toolbar → mode switch button → popup on click → selected mode (a) active */
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active .oo-ui-tool-link:active {
    background-color: var(--bg-color-light-x3);
}

/* editor → toolbar → mode switch button → popup on click → selected mode (a) hover */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled.oo-ui-tool-active
    .oo-ui-tool-link:hover {
    background-color: var(--bg-color-light-x3);
}

/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → title */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeVisual.oo-ui-tool-active
    .oo-ui-tool-title {
    color: var(--text-color);
}

/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → icon */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeVisual.oo-ui-tool-active
    .oo-ui-iconElement-icon {
    /* hue rotate  to ≈strongBlue (instead of a separate image) */
    filter: hue-rotate(-23.06deg) saturate(150%) brightness(120%);
}

/* editor → toolbar → mode switch button → popup on click → source editing mode active → title */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeSource.oo-ui-tool-active
    .oo-ui-tool-title {
    color: var(--text-color);
}

/* editor → toolbar → mode switch button → popup on click → source editing mode active → icon */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeSource.oo-ui-tool-active
    .oo-ui-iconElement-icon {
    /* cosmoGreen "source editing" mode icon */
    background-image: linear-gradient(transparent, transparent),
        var(--se-mode-icon);
    /* disable the hue rotating filter since the correct icon is provided */
    filter: none;
}

/* #region borders */

/* editor toolbar and content combined */
.wikiEditor-ui .wikiEditor-ui-view,
  /* editor toolbar section that open with tabs */
  .wikiEditor-ui-toolbar .sections .section,
  /* editor toolbar label (that acts as select) options container */
  .wikiEditor-ui-toolbar .group .tool-select .options,
  /* text editor toolbar → special characters tab → special characters */
  .wikiEditor-ui-toolbar .page-characters div span,
  /* editor → toolbar → mode switch button → popup (that opens on click) */
  .wikiEditor-ui-toolbar .oo-ui-popupToolGroup-tools,
  /* editor footer */
  div.editOptions,
  /* summary input */
  div.editOptions #wpSummary,
  /* content body */
  #wpTextbox1 {
    border: 1px solid var(--border-color-light);
}

/* editor toolbar groups of buttons, except the last one */
.wikiEditor-ui-toolbar .group:not(:last-child) {
    border-right: 1px solid var(--border-color-light);
}

/* editor toolbar last groups of buttons */
.wikiEditor-ui-toolbar .group:last-child {
    border-left: 1px solid var(--border-color-light);
}

/* this is the last button on the main row of the editor toolbar */
.wikiEditor-ui-toolbar .section-main .group:last-child {
    border-right: 1px solid var(--border-color-light);
}

/* editor toolbar */
.wikiEditor-ui .wikiEditor-ui-top {
    border-bottom: 1px solid var(--border-color-light);
}

/* editor toolbar → mode switch button
  it has extra border on the bottom */
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
    border-bottom: none;
}

/* ================================================ */
/* #region <syntaxhighlight> CODE BLOCKS  */
/* ================================================ */

:root {
    --synt-high--color-darkCreamy: #262421;
    --synt-high--color-lightCreamy: hsl(38, 5%, 45%);

    --synt-high--color-comment: var(--synt-high--color-lightCreamy);
    --synt-high--color-err: #ff1a94;
    --synt-high--color-operator: #f92672;
    --synt-high--color-punctuation: #f8f8f2;
    --synt-high--color-string: #e6db74;
    --synt-high--color-date: var(--synt-high--color-string);
    /* names for things such as variables, functions, classes, etc. */
    --synt-high--color-name: #a6e22e;
    /* literals, mostly numbers, some string stuff too. */
    --synt-high--color-literal: #ae81ff;
    /* keywords and constants */
    --synt-high--color-keyword: #66d9ef;
}

/* Modified version of https://github.com/richleland/pygments-css/blob/master/monokai.css */

/* Code block container  */
.mw-content-ltr.mw-highlight-lines pre {
    background-color: var(--code-color-bg);
    color: var(--code-color-text);
    border-color: var(--code-color-border);
    font-size: 90%;

    /* targets the line numbers bg, when they (line numbers) are present */
    box-shadow: rgb(34, 37, 39) 2.75em 0px 0px inset;
}

/* Code block → line numbers  */
.mw-highlight .linenos {
    color: rgb(165, 155, 142);
}

/* Highlighted Lines */
.mw-highlight .hll {
    background-color: var(--action-color);
}

.mw-highlight {
    background: #272822;
    color: #f8f8f2;
}

/* Error */
.mw-highlight .err {
    color: var(--synt-high--color-err);
    background-color: hsl(328, 40%, 16%);
}

/* Keyword */
.mw-highlight .k {
    color: var(--synt-high--color-keyword);
}

/* Literal */
.mw-highlight .l {
    color: var(--synt-high--color-literal);
}

/* Name */
.mw-highlight .n {
    color: #f8f8f2;
}

/* Operator */
.mw-highlight .o {
    color: var(--synt-high--color-operator);
}

/* Punctuation */
.mw-highlight .p {
    color: var(--synt-high--color-punctuation);
}

/* Comment */
.mw-highlight .c {
    color: var(--synt-high--color-comment);
}

/* Comment.Hashbang */
.mw-highlight .ch {
    color: var(--synt-high--color-comment);
}

/* Comment.Multiline */
.mw-highlight .cm {
    color: var(--synt-high--color-comment);
}

/* Comment.Preproc */
.mw-highlight .cp {
    color: var(--synt-high--color-comment);
}

/* Comment.PreprocFile */
.mw-highlight .cpf {
    color: var(--synt-high--color-comment);
}

/* Comment.Single */
.mw-highlight .c1 {
    color: var(--synt-high--color-comment);
}

/* Comment.Special */
.mw-highlight .cs {
    color: var(--synt-high--color-comment);
}

/* Generic.Deleted */
.mw-highlight .gd {
    color: #f92672;
}

/* Generic.Emph */
.mw-highlight .ge {
    font-style: italic;
}

/* Generic.Inserted */
.mw-highlight .gi {
    color: var(--synt-high--color-name);
}

/* Generic.Strong */
.mw-highlight .gs {
    font-weight: bold;
}

/* Generic.Subheading */
.mw-highlight .gu {
    color: #75715e;
}

/* Keyword.Constant */
.mw-highlight .kc {
    color: var(--synt-high--color-keyword);
}

/* Keyword.Declaration */
.mw-highlight .kd {
    color: var(--synt-high--color-keyword);
}

/* Keyword.Namespace */
.mw-highlight .kn {
    color: #f92672;
}

/* Keyword.Pseudo */
.mw-highlight .kp {
    color: var(--synt-high--color-keyword);
}

/* Keyword.Reserved */
.mw-highlight .kr {
    color: var(--synt-high--color-keyword);
}

/* Keyword.Type */
.mw-highlight .kt {
    color: var(--synt-high--color-keyword);
}

/* Literal.Date */
.mw-highlight .ld {
    color: var(--synt-high--color-date);
}

/* Literal.Number */
.mw-highlight .m {
    color: var(--synt-high--color-literal);
}

/* Literal.String */
.mw-highlight .s {
    color: var(--synt-high--color-string);
}

/* Name.Attribute */
.mw-highlight .na {
    color: var(--synt-high--color-name);
}

/* Name.Builtin */
.mw-highlight .nb {
    color: #f8f8f2;
}

/* Name.Class */
.mw-highlight .nc {
    color: var(--synt-high--color-name);
}

/* Name.Constant */
.mw-highlight .no {
    color: var(--synt-high--color-keyword);
}

/* Name.Decorator */
.mw-highlight .nd {
    color: var(--synt-high--color-name);
}

/* Name.Entity */
.mw-highlight .ni {
    color: #f8f8f2;
}

/* Name.Exception */
.mw-highlight .ne {
    color: var(--synt-high--color-name);
}

/* Name.Function */
.mw-highlight .nf {
    color: var(--synt-high--color-name);
}

/* Name.Label */
.mw-highlight .nl {
    color: #f8f8f2;
}

/* Name.Namespace */
.mw-highlight .nn {
    color: #f8f8f2;
}

/* Name.Other */
.mw-highlight .nx {
    color: var(--synt-high--color-name);
}

/* Name.Property */
.mw-highlight .py {
    color: #f8f8f2;
}

/* Name.Tag */
.mw-highlight .nt {
    color: #f92672;
}

/* Name.Variable */
.mw-highlight .nv {
    color: #f8f8f2;
}

/* Operator.Word */
.mw-highlight .ow {
    color: var(--synt-high--color-operator);
}

/* Text.Whitespace */
.mw-highlight .w {
    color: #f8f8f2;
}

/* Literal.Number.Bin */
.mw-highlight .mb {
    color: var(--synt-high--color-literal);
}

/* Literal.Number.Float */
.mw-highlight .mf {
    color: var(--synt-high--color-literal);
}

/* Literal.Number.Hex */
.mw-highlight .mh {
    color: var(--synt-high--color-literal);
}

/* Literal.Number.Integer */
.mw-highlight .mi {
    color: var(--synt-high--color-literal);
}

/* Literal.Number.Oct */
.mw-highlight .mo {
    color: var(--synt-high--color-literal);
}

/* Literal.String.Affix */
.mw-highlight .sa {
    color: var(--synt-high--color-string);
}

/* Literal.String.Backtick */
.mw-highlight .sb {
    color: var(--synt-high--color-string);
}

/* Literal.String.Char */
.mw-highlight .sc {
    color: var(--synt-high--color-string);
}

/* Literal.String.Delimiter */
.mw-highlight .dl {
    color: var(--synt-high--color-string);
}

/* Literal.String.Doc */
.mw-highlight .sd {
    color: var(--synt-high--color-string);
}

/* Literal.String.Double */
.mw-highlight .s2 {
    color: var(--synt-high--color-string);
}

/* Literal.String.Escape */
.mw-highlight .se {
    color: var(--synt-high--color-literal);
}

/* Literal.String.Heredoc */
.mw-highlight .sh {
    color: var(--synt-high--color-string);
}

/* Literal.String.Interpol */
.mw-highlight .si {
    color: var(--synt-high--color-string);
}

/* Literal.String.Other */
.mw-highlight .sx {
    color: var(--synt-high--color-string);
}

/* Literal.String.Regex */
.mw-highlight .sr {
    color: var(--synt-high--color-string);
}

/* Literal.String.Single */
.mw-highlight .s1 {
    color: var(--synt-high--color-string);
}

/* Literal.String.Symbol */
.mw-highlight .ss {
    color: var(--synt-high--color-string);
}

/* Name.Builtin.Pseudo */
.mw-highlight .bp {
    color: #f8f8f2;
}

/* Name.Function.Magic */
.mw-highlight .fm {
    color: var(--synt-high--color-name);
}

/* Name.Variable.Class */
.mw-highlight .vc {
    color: #f8f8f2;
}

/* Name.Variable.Global */
.mw-highlight .vg {
    color: #f8f8f2;
}

/* Name.Variable.Instance */
.mw-highlight .vi {
    color: #f8f8f2;
}

/* Name.Variable.Magic */
.mw-highlight .vm {
    color: #f8f8f2;
}

/* Literal.Number.Integer.Long */
.mw-highlight .il {
    color: var(--synt-high--color-literal);
}

/* #endregion */


/* ============ */
/* #region SOURCE EDITOR → SYNTAX HIGHLIGHTING */
/* based on: https://github.com/wikimedia/mediawiki-extensions-CodeMirror/blob/master/resources/mode/mediawiki/mediawiki.less */
/* ============ */

:root {
    /* "se-cm" = Source Editor - Code Mirror */

    /* same color as for source editor */
    --se-cm--bg-color: var(--bg-color-light-x2);
    /* same color as for code block */
    --se-cm--gutter-bg-color: var(--code-color-bg);
    /* margin to the left for the main contents of the editor */
    --se-cm--main-contents-left-margin: 0.25rem;

    /* bg color for pre/nowiki tags contents */
    --se-cm--pre-bg-color: hsl(205, 21%, 15%);

    /* from the <syntaxhighlight> theme */
    --se-cm--comment-color: var(--synt-high--color-comment);
    --se-cm--error-color: var(--red-color);

    /* link itself */
    --se-cm--link-color: var(--link-color);
    /* link delimiter */
    --se-cm--cm-mw-link-delimiter: var(--se-cm--template-delimiter-color);
    /* link text */
    --se-cm--link-text-color: var(--text-color);
    --se-cm--link-brackets-color: var(--se-cm--link-text-color);

    /* things like "DISPLAYTITLE" "templates" (the whole template except the value part) */
    --se-cm--parser-function-color: var(--synt-high--color-operator);

    /* table brackets and row delimiter */
    --se-cm--table-punctuation-color: var(--synt-high--color-punctuation);
    /* table settings */
    --se-cm--table-settings-color: var(--se-cm--template-arg-name-color);

    /* template name */
    --se-cm--template-name-color: hsl(80, 76%, 53%);
    /* template arg names */
    --se-cm--template-arg-name-color: hsl(80, 76%, 42%);
    /* template brackets */
    --se-cm--template-brackets-color: var(--synt-high--color-name);
    /* template arg values */
    --se-cm--template-values-color: hsl(207,90%,83%);
    /* template arg delimiters */
    --se-cm--template-delimiter-color: hsl(205, 71%, 85%);

    /* template param name */
    --se-cm--template-param-name-color: var(--synt-high--color-keyword);
    /* template param brackets */
    --se-cm--template-param-brackets-color: hsl(190, 61%, 40%);
    /* template param values */
    --se-cm--template-param-value-color: hsl(207,90%,83%);
    /* template param delimiter */
    --se-cm--template-param-delimiter-color: var(
        --se-cm--template-delimiter-color
    );

    /* wiki formatting: headers, bullet points, bold/italic quotes, etc. */
    --se-cm--wikitext-formatting-color: var(--blue-color-light);
    /* html tags, including ones specific for the wiki (like syntaxhighlight) */
    --se-cm--xml-tag-color: hsl(41, 53%, 67%);

    /* selection color */
    --se-cm--selection-color: hsl(205, 21%, 30%);
    /* bg color applied when selecting a bracket that has a match (in templates) */
    --se-cm--matching-brackets-bg-color: hsl(205, 21%, 44%);
}

/* the whole content body code mirror wrapper */
.CodeMirror-wrap {
    /* same color as for source editor */
    background-color: var(--se-cm--bg-color);

    /* color for the text that the other rules don't apply to (regular text, header text, etc.) */
    color: var(--text-color);
}

/* the actual lines of text */
.CodeMirror pre.CodeMirror-line {
    /* a little bit of margin for the main content */
    margin-left: var(--se-cm--main-contents-left-margin);
}

/* gutters?? */
.CodeMirror-wrap .CodeMirror-gutters {
    border-color: var(--border-color);
}

/* gutter */
.CodeMirror-wrap .CodeMirror-gutter {
    /* same color as for code block */
    background-color: var(--se-cm--gutter-bg-color);
}

/* selection */
.CodeMirror-line::selection,
/* selection */
.CodeMirror-line>span::selection,
/* selection */
.CodeMirror-line>span>span::selection {
    background-color: var(--se-cm--selection-color);
}

/* bullet point symbol */
.cm-mw-list,
/* ???? */
.cm-mw-indenting {
    color: var(--se-cm--wikitext-formatting-color);
}

/* magic words */
.cm-mw-doubleUnderscore,
/* magic words */
.cm-mw-double-underscore,
/* ???? user signature maybe */
.cm-mw-signature,
/* ???? hr tags prob */
.cm-mw-hr {
    color: var(--se-cm--wikitext-formatting-color);

    /* override the defaults */
    background-color: inherit;
}

/* html sequences like "&nbsp;" */
.cm-mw-mnemonic,
/* ???? */
.cm-mw-html-entity {
    color: var(--se-cm--xml-tag-color);
    background-color: #684905;
    border-radius: 2px;
}

/* comments */
.cm-mw-comment {
    color: var(--se-cm--comment-color);
}

/* formatting: 3 apostrophes for bold text */
.cm-mw-apostrophes-bold,
/* formatting: 2 apostrophes for italic text
todo make them separate? better eligibility */
.cm-mw-apostrophes-italic {
    color: var(--se-cm--wikitext-formatting-color);
}

/* template name */
.cm-mw-template-name {
    color: var(--se-cm--template-name-color);
    /* disable the default */
    text-decoration: none;
}

/* template arg names */
.cm-mw-template-argument-name {
    color: var(--se-cm--template-arg-name-color);
}

/* template arg values */
.cm-mw-template {
    color: var(--se-cm--template-values-color);
}

/* template pipe delimiters (maybe colon too for modules?) */
.cm-mw-template-delimiter {
    color: hsl(205, 71%, 85%);
}

/* template brackets */
.cm-mw-template-bracket {
    color: var(--se-cm--template-brackets-color);
}

/* template variable (with 3 brackets) name */
.cm-mw-templatevariable-name {
    color: var(--se-cm--template-param-name-color);
}

/* template variable (with 3 brackets) value */
.cm-mw-templatevariable {
    color: var(--se-cm--template-param-value-color);
}

/* template variable brackets (3 brackets) */
.cm-mw-templatevariable-bracket {
    color: var(--se-cm--template-param-brackets-color);
}

/* template variable (with 3 brackets) delimiter */
.cm-mw-templatevariable-delimiter {
    color: var(--se-cm--param-delimiter-color);
}

/* parser functions (things like "DISPLAYTITLE" or invokes) → name */
.cm-mw-parserfunction-name {
    color: var(--se-cm--template-name-color);
}

/* parser functions (things like "DISPLAYTITLE" or invokes) → value */
.cm-mw-parserfunction {
    color: var(--se-cm--template-values-color);
}

/* parser functions (things like "DISPLAYTITLE" or invokes) → brackets */
.cm-mw-parserfunction-bracket {
    color: var(--se-cm--template-brackets-color);
}

/* parser functions (things like "DISPLAYTITLE" or invokes) → delimiters */
.cm-mw-parserfunction-delimiter {
    color: var(--se-cm--template-delimiter-color);
}

/* wiki html tag names? like >syntaxhighlight> */
.cm-mw-exttag-name,
/* html tag names */
.cm-mw-htmltag-name {
    color: var(--se-cm--xml-tag-color);
}

/* if a string starts with an empty space, it will generate a pre block.
this targets that one single space.
same style as for html tag names, but for bg here */
.cm-mw-skipformatting {
    background-color: var(--se-cm--xml-tag-color);
}

/* wiki html tag brackets */
.cm-mw-exttag-bracket,
/* wiki html tag attributes (name, delimiter, value) */
.cm-mw-exttag-attribute,
/* html tag brackets */
.cm-mw-htmltag-bracket,
/* html tag attributes (name, delimiter, value) */
.cm-mw-htmltag-attribute {
    color: var(--se-cm--xml-tag-color);
}

/* pre tag BLOCK contents */
pre.CodeMirror-line.cm-mw-tag-pre,
/* pre tag INLINE contents */
.CodeMirror-line span.cm-mw-tag-pre,
/* ???? */
pre.CodeMirror-line-like.cm-mw-tag-pre,
/* pre tag contents */
.cm-mw-tag-pre,
/* ============== */
/* nowiki tag BLOCK contents */
pre.CodeMirror-line.cm-mw-tag-nowiki,
/* nowiki tag INLINE contents */
.CodeMirror-line span.cm-mw-tag-nowiki,
/* ???? */
pre.CodeMirror-line-like.cm-mw-tag-nowiki,
/* nowiki tag contents */
.cm-mw-tag-nowiki {
    background-color: var(--se-cm--pre-bg-color);
}

/* pre tag BLOCK contents */
pre.CodeMirror-line.cm-mw-tag-pre,
/* nowiki tag BLOCK contents */
pre.CodeMirror-line.cm-mw-tag-nowiki {
    /* colors the margin gap bg for block variants */
    box-shadow: calc(-1 * var(--se-cm--main-contents-left-margin)) 0
        var(--se-cm--pre-bg-color);
}

/* pre tag INLINE contents */
.CodeMirror-line span.cm-mw-tag-pre,
/* nowiki tag INLINE contents */
.CodeMirror-line span.cm-mw-tag-nowiki {
    /* a little corner rounding won't hurt a thing! */
    border-radius: 2px;
}

/* ???? */
.cm-mw-link,
/* ???? */
.cm-mw-link-tosection,
/* header equal signs */
.cm-mw-section-header {
    color: var(--se-cm--wikitext-formatting-color);
}

/* link itself */
.cm-mw-link-pagename,
/* external link itself, without protocol */
.cm-mw-extlink,
/* ???? same as above, maybe? */
.cm-mw-free-extlink,
/* external link protocol (the "https://" part) */
.cm-mw-extlink-protocol,
/* ???? same as above, maybe? */
.cm-mw-free-extlink-protocol {
    color: var(--se-cm--link-color);
}

/* link brackets */
.cm-mw-link-bracket,
/* external link brackets */
.cm-mw-extlink-bracket {
    color: var(--se-cm--link-brackets-color);
}

/* link delimiter */
.cm-mw-link-delimiter {
    color: var(--se-cm--cm-mw-link-delimiter);
}

/* link text */
.cm-mw-link-text,
/* external link text */
.cm-mw-extlink-text {
    color: var(--se-cm--link-text-color);
}

/* tables opening "{|" and closing "|}" brackets */
.cm-mw-table-bracket,
/* table row delimiter (doesn't include cols!) */
.cm-mw-table-delimiter {
    color: var(--se-cm--table-punctuation-color);
}

/* the table settings I guess? (like «class="wikitable"») */
.cm-mw-table-definition {
    color: var(--se-cm--table-settings-color);
}

/* ???? idk some kind of formatting errors? */
.cm-error,
.cm-mw-error,
.cm-s-default .cm-error {
    color: var(--se-cm--error-color);
}

.cm-mw-matchingbracket {
    background-color: var(--se-cm--matching-brackets-bg-color);
    /* disable the default */
    box-shadow: none;
}

/* various inline bg targeting things, idk what each of them target exactly */
.cm-mw-template2-ground,
.cm-mw-template3-ground,
.cm-mw-ext-ground,
.cm-mw-template-ext-ground,
.cm-mw-ext2-ground,
.cm-mw-template-ext2-ground,
.cm-mw-ext3-ground,
.cm-mw-template-ext3-ground,
.cm-mw-link-ground,
.cm-mw-ext-link-ground,
.cm-mw-template-link-ground,
.cm-mw-ext2-link-ground,
.cm-mw-template-ext-link-ground,
.cm-mw-ext3-link-ground,
.cm-mw-template-ext2-link-ground,
.cm-mw-template-ext3-link-ground,
.cm-mw-template2-ext-ground,
.cm-mw-template2-ext2-ground,
.cm-mw-template2-ext3-ground,
.cm-mw-template2-link-ground,
.cm-mw-template2-ext-link-ground,
.cm-mw-template2-ext2-link-ground,
.cm-mw-template2-ext3-link-ground,
.cm-mw-template3-ext-ground,
.cm-mw-template3-ext2-ground,
.cm-mw-template3-ext3-ground,
.cm-mw-template3-link-ground,
.cm-mw-template3-ext-link-ground,
.cm-mw-template3-ext2-link-ground,
.cm-mw-template3-ext3-link-ground {
    /* just disable them */
    background-color: inherit;
}

/* script input in module editor */
#mw-scribunto-input {
	font-family: monospace;
	font-weight: normal;
	color: var(--code-color-text);
	background-color: var(--code-color-bg);
}   


/* #endregion */


/* #endregion */

/* ============ */
/* #endregion */
/* ============ */

/* ============ */
/* #region =🖌️= VISUAL EDITOR =🖌️= */
/* ============ */

/* visual editor (content) → template [puzzle] icon
the content selector is to not affect other places where this icon is used */
.content-body .oo-ui-icon-puzzle {
    background-image: linear-gradient(transparent, transparent),
        var(--icon-template-puzzle-white);
    opacity: 1;
}

/* template name
the content selector is to not affect other places where this icon is used */
.content-body .oo-ui-icon-puzzle + .oo-ui-labelElement-label {
    color: white;
}


/* visual editor → editor loading → placeholder (?) navbar container */
.ve-init-mw-desktopArticleTarget-targetContainer
    .ve-init-mw-desktopArticleTarget-toolbarPlaceholder-open {
    /* disables progress bar cropping when moving it down */
    overflow: visible;
}

/* visual editor → editor loading → progress bar (bg) */
.ve-init-mw-progressBarWidget {
    background-color: var(--bg-color-light);
}

/* visual editor → editor loading → progress bar (loading stripe) */
.ve-init-mw-progressBarWidget .ve-init-mw-progressBarWidget-bar {
    background-color: var(--action-color);
}

/* visual editor → toolbar (left part)  */
.ve-init-target-visual > .oo-ui-toolbar > .oo-ui-toolbar-bar {
    background-color: var(--bg-color-light-x3);
    color: var(--text-color);
}

/* visual editor → toolbar → icons */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-iconElement-icon,
/* visual editor → toolbar → arrow down icon */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-indicator-down {
    filter: invert(100%);
}

/* visual editor → toolbar (whole, one level up from the left one) */
.ve-init-target-visual > .oo-ui-toolbar {
    /* reset */
    margin: 0;
    /* get the same offset that the search box has */
    margin-right: -0.95rem;
    /* get the same offset that the "Page" link has */
    margin-left: -1.25rem;
}

/* visual editor → toolbar (right part) → «save changes» button (disabled, when no changes were made yet) */
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link {
    /* disables selecting of the button text
    same behavior is already present in an available button */
    user-select: none;

    /* just for the button bg */
    transition: background-color 0.1s ease-out;

    background-color: var(--bg-color-light-x5);
}
/* visual editor → toolbar (right part) → «save changes» button (disabled, when no changes were made yet) → title */
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link .oo-ui-tool-title {
    color: var(--text-color-grayed-out);
}

/* visual editor → toolbar (right part) → «save changes» button (available) */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled
    .ve-ui-toolbar-saveButton {
    background-color: var(--action-color);
}

/* visual editor → toolbar (right part) → «save changes» button (available) hover */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled
    .ve-ui-toolbar-saveButton:hover {
    background-color: var(--action-color-light-x2);
}

/* visual editor → toolbar (right part) → «save changes» button (available) active */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled.oo-ui-tool-active
    .ve-ui-toolbar-saveButton {
    background-color: var(--action-color-dark-x2);
}

/* visual editor → toolbar (right part) → «save changes» button (available) → label */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled
    .ve-ui-toolbar-saveButton
    .oo-ui-tool-title {
    color: var(--text-color);
}

/* visual editor → toolbar → dropdown button (div) hover */
.ve-init-target-visual>.oo-ui-toolbar .oo-ui-popupToolGroup-handle:hover,
/* visual editor → toolbar → button (a) hover (except the «save changes» button */
.ve-init-target-visual>.oo-ui-toolbar .oo-ui-tool-link:not(.ve-ui-toolbar-saveButton):hover {
    background-color: var(--bg-color-light-x2);

    /* more "snappier" transition */
    transition: background-color 50ms ease-out;
}

/* visual editor → toolbar → dropdown button (span) active → icon */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-iconElement-icon,
/* visual editor → toolbar → button (span) active (except the «save changes» button → icon */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-iconElement-icon {
    /* rotate from the default dark blue to the the bright, saturated version of cosmoBlue.
    this results in this color: hsl(198, 93%, 49%) */
    filter: brightness(150%) saturate(150%) contrast(180%);
}

/* visual editor → toolbar → tabber icon (only in the «insert» menu afaik) → icon */
.ve-init-target-visual
    > .oo-ui-toolbar
    > .oo-ui-toolbar-bar
    .oo-ui-tool-active
    .oo-ui-icon-tabber {
    /* this icon don't have a default dark blue color when it's active, instead they have just black (which is inverted to white in this theme), so we can't rotate to the proper color. instead here's the same icon but in cosmoBlueBright color. */
    filter: none;
    background-image: var(--icon-tabber-black);
}

/* visual editor → toolbar → dropdown button (span 1 level up) active */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-popupToolGroup-handle,
/* visual editor → toolbar → button active (a) */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-tool-link {
    background-color: var(--bg-color-light-x3);
}

/* visual editor → toolbar → dropdown button (span) active → label */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-labelElement-label,
/* visual editor → toolbar → button (span) active (except the «save changes» button → label */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-labelElement-label,
/* visual editor → tool popups → button (span) active → label */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-widget.oo-ui-tool-active .oo-ui-tool-title {
    color: var(--action-color-light-x2);
}

/* visual editor → toolbar → adding new image → caption */
.ve-ui-targetWidget:not(.oo-ui-pendingElement-pending) {
    /* remove white bg */
    background: unset;
}

/* visual editor → toolbar → adding new image → caption */
.ve-ui-targetWidget {
    /* set to proper color instead of white */
    border-color: var(--border-color-light);
}


/* visual editor → tool popups */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools {
    background-color: var(--bg-color-light);
}

/* visual editor → tool popups → button (span) */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool {
    background-color: var(--bg-color-light);
}

/* visual editor → tool popups → button (span) hover */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool:hover {
    background-color: var(--bg-color-light-x2);
}

/* visual editor → tool popups → button (span) active */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
    .oo-ui-widget.oo-ui-tool-active {
    background-color: var(--bg-color-light-x3);
}

/* visual editor → tool popups → button (span) active → label */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
    .oo-ui-widget.oo-ui-tool-active
    .oo-ui-tool-title {
    /* more responsive transition */
    transition: color 0.1s ease-out;
}

/* visual editor → tool popups → button (span) active → icon */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
    .oo-ui-widget.oo-ui-tool-active
    .oo-ui-iconElement-icon {
}

/* visual editor → tool popups → button (a) */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-link {
    color: var(--text-color);
}

/* visual editor → tool popups → button (a) → keybind label */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-accel {
    /* gets hidden on active, since it the same color.
    can we call it a feature? :D */
    color: var(--bg-color-light-x6);
}

/* visual editor → tool popups → button (a) hover */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-link:hover,
/* visual editor → tool popups → button (a) active */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-link {
    /* remove the bg color since it's already set in the button.
    this prevents the flicker. */
    background-color: unset;
}

/* visual editor → tool popups → editor mode switch popup → «source editor» button active → label */
.oo-ui-toolbar-popups
    .oo-ui-widget.oo-ui-tool-active.oo-ui-tool-name-editModeSource
    .oo-ui-tool-title {
    color: var(--green-color);
}

/* visual editor → tool popups → editor mode switch popup → «source editor» button active → icon */
.oo-ui-toolbar-popups
    .oo-ui-widget.oo-ui-tool-active.oo-ui-tool-name-editModeSource
    .oo-ui-iconElement-icon {
    background-image: var(--se-mode-icon);
}



/* ============ */
/* #region STYLES FROM THE SOURCE */
/* some of the styles below were sourced from https://github.com/wikimedia/mediawiki-extensions-VisualEditor/blob/c295a731ec5ef261e4e5659c30f14b0b1b3e11d2/modules/ve-mw/ui/styles/dialogs/ve.ui.MWTransclusionDialog.css */
/* ============ */

@keyframes ve-modal-opening-backdrop {
    from {
        backdrop-filter: blur(0px);
        background-color: transparent;
    }

    to {
        backdrop-filter: blur(3px);
        background-color: color-mix(in srgb, var(--bg-color) 25%, transparent);
    }
}

/* visual editor → modal container */
.oo-ui-windowManager-modal > .oo-ui-dialog {
    background-color: transparent;
    animation: ve-modal-opening-backdrop 400ms ease-in-out forwards;
}

/* visual editor → modal */
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--bg-color-light-x3);
}

/* visual editor → modal head */
.oo-ui-windowManager-modal .oo-ui-window-head {
    background-color: var(--bg-color-light);
    color: var(--text-color);
    /* lighter than the usual border color - for visibility */
    outline-color: var(--bg-color-light-x4);
}

/* visual editor → modal head → «apply changes» button (a) inactive */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-widget-disabled .oo-ui-buttonElement-button,
/* visual editor → modal → action button (a) inactive */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-disabled .oo-ui-buttonElement-button {
    color: var(--text-color);
    background-color: var(--action-color-inactive);
    border-color: var(--bg-color-light-x3);
}   

/* visual editor → modal head → «apply changes» button (a) */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-buttonElement-button,
/* visual editor → modal → action button (a) */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled .oo-ui-buttonElement-button,
/* visual editor → modal message dialog → action button (a) */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-buttonElement-button,
/* visual editor → save changes modal → «review changes» button (a) */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-buttonElement-button {
    color: var(--text-color);
    background-color: var(--action-color);
    border-color: var(--bg-color-light-x4);

    transition: background-color 100ms ease-in;
}   



/* visual editor → modal → action button (a) hover */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled 
.oo-ui-buttonElement-button:hover,
/* visual editor → modal head → «apply changes» button (a) hover */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget 
.oo-ui-buttonElement-button:hover,
/* visual editor → modal → modal message dialog → action button (a) hover */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget 
.oo-ui-buttonElement-button:hover,
/* visual editor → save changes modal → «review changes» button (a) hover */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-actionWidget 
.oo-ui-buttonElement-button:hover {
    color: var(--text-color);
    background-color: var(--action-color-light-x2);
    border-color: var(--bg-color-light-x4); 

    transition: background-color 100ms ease-out;
}   

/* visual editor → modal → action button (a) active */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled 
.oo-ui-buttonElement-button:active,
/* visual editor → modal → action button (a) pressed hover */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled.oo-ui-buttonElement-pressed 
.oo-ui-buttonElement-button:hover,

/* visual editor → modal head → «apply changes» button (a) active */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget 
.oo-ui-buttonElement-button:active,
/* visual editor → modal head → «apply changes» button (a) pressed hover */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-pressed .oo-ui-buttonElement-button:hover,

/* visual editor → modal → modal message dialog → action button (a) pressed */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-buttonElement-pressed  
.oo-ui-buttonElement-button,
/* visual editor → modal → modal message dialog → action button (a) pressed hover */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-buttonElement-pressed 
.oo-ui-buttonElement-button:hover,

/* visual editor → save changes modal → «review changes» button (a) active */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-actionWidget 
.oo-ui-buttonElement-button:active {
    color: var(--text-color);
    background-color: var(--action-color-dark-x2);
    border-color: var(--bg-color-light-x4); 

    transition: background-color 100ms ease-out;
}



/* visual editor → modal head → close button (a) hover */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonElement-button:hover,
/* visual editor → modal head → close button (a) active */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonElement-button:active {
    background-color: var(--bg-color-light-x2);
    border-color: var(--bg-color-light-x3);
}

/* visual editor → modal head → close button (a) → icon */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonElement-button .oo-ui-iconElement-icon  {
    filter: invert(100%);
}



/* visual editor → modal footer (which is empty for template modal) */
.oo-ui-processDialog-content .oo-ui-window-foot {
    /* override default */
    outline-color: transparent;
}


/* visual editor → modal → big header (e.g. for template name) */
.oo-ui-windowManager-modal .oo-ui-fieldsetLayout-header,
/* visual editor → modal → medium header (e.g. template param header) */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-info {
    color: var(--text-colorStrong);
}

/* visual editor → modal → medium header (e.g. template param header) → "undocumented param" label */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-info .ve-ui-mwParameterPage-undocumentedLabel {
    color: var(--bg-color-light-x4);
}

/* visual editor → modal → big header (e.g. for template name) → puzzle icon  */
.oo-ui-windowManager-modal .oo-ui-fieldsetLayout-header .oo-ui-icon-puzzle {
    filter: invert(92%);
}

/* visual editor → modal → big header (e.g. for template name) → deprecated icon  */
.oo-ui-windowManager-modal .oo-ui-indicatorElement[title="Deprecated field"] {
    /* default is .5 */
    opacity: .8;
    /* same icon, "warning-color-border" color */
    background-image: 
    linear-gradient(transparent,transparent),
    var(--icon-popup-notice-warn-cosmoGreen);
}

/* visual editor → modal → url icon (e.g. for template URL params) */
.oo-ui-windowManager-modal .oo-ui-icon-linkExternal {
    /* default is 0.67 */
    opacity: .8;
    /* same icon, but in "cosmoGreen" color */
    background-image: 
    linear-gradient(transparent,transparent),
    var(--icon-external-link-cosmoGreen);
}

/* visual editor → modal → param description block (like a template param) → entries */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > p {
    color: var(--text-color);
}

/* visual editor → modal (template) → template search block → description */
.oo-ui-windowManager-modal .ve-ui-mwTemplatePlaceholderPage .oo-ui-inline-help,
/* visual editor → modal (template) → template description */
.oo-ui-windowManager-modal .ve-ui-mwTemplatePage-description,
/* visual editor → modal → param description block (like a template param) → "deprecated" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-deprecated,
/* visual editor → modal → param description block (like a template param) → "reqired" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-required,
/* visual editor → modal → param description block (like a template param) → "reqired" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-example,
/* visual editor → modal → param description block (like a template param) → "default" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-default,
/* visual editor → modal → param search results → no results text */
.ve-ui-mwTransclusionOutlineTemplateWidget-no-match {
    color: var(--bg-color-light-x4);
}

/* visual editor → modal (template) → template description hr */
.oo-ui-windowManager-modal .ve-ui-mwTemplatePage-description hr {
    background-color: var(--bg-color-light-x4);
}

/* visual editor → modal → param input (type=text) */
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
    color: var(--text-color);
    background-color: var(--bg-color-dark);
    border: 1px solid var(--bg-color-light-x2);
}   

/* visual editor → modal → param input (type=text) placeholder */
.oo-ui-windowManager-modal .oo-ui-widget-enabled .oo-ui-inputWidget-input::placeholder {
    color: var(--bg-color-light-x4);
}   

/* visual editor → modal → param input (type=text) hover */
.oo-ui-windowManager-modal .oo-ui-inputWidget-input:hover,
/* visual editor → modal → param input when a param input dropdown button is hovered  */
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
    border-color: var(--bg-color-light-x3);
}

/* visual editor → modal → param input (type=text) (invalid state) */
.oo-ui-windowManager-modal .oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
    border-color: var(--color-red);
}

/* visual editor → modal → param input (type=text) in invalid state hover */
.oo-ui-windowManager-modal .oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input:hover {
    border-color: var(--color-red);
}

/* visual editor → modal → required indicator (for params only I guess?) */
.oo-ui-windowManager-modal .oo-ui-indicator-required {
    /* same icon, "warning-color-border" color */
    background-image: 
        linear-gradient(transparent,transparent),
        var(--icon-asterisk-yellow);
}

/* visual editor → modal → param input dropdown button (for suggested values) */
.oo-ui-windowManager-modal .oo-ui-widget-enabled .oo-ui-comboBoxInputWidget-dropdownButton a {
    background-color: var(--bg-color);
    border-color: var(--bg-color-light-x2);
    border-left: none;
}

/* visual editor → modal → param input dropdown button (for suggested values) hover */
.oo-ui-windowManager-modal .oo-ui-widget-enabled .oo-ui-comboBoxInputWidget-dropdownButton a:hover,
/* visual editor → modal → param input dropdown button (for suggested values) when dropdown is open */
.oo-ui-windowManager-modal .oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton a {
    background-color: var(--bg-color-light);
    /* default override */
    border-color: var(--bg-color-light-x3);
} 

/* visual editor → modal → param input dropdown button (for suggested values) when dropdown is open */
.oo-ui-windowManager-modal .oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton a {
    /* disable default transition, so the color will change instantly, because dropdown appears instantly too */
    transition: background-color 0s;
}

/* visual editor → modal → param input dropdown button (for suggested values) → icon */
.oo-ui-windowManager-modal .oo-ui-comboBoxInputWidget-dropdownButton a .oo-ui-indicatorElement-indicator {
    filter: invert(100%);
} 



/* visual editor → modal → "add undocumented paramter" block → button hover  */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-buttonElement-button:hover {
    background-color: var(--bg-color-light);
}

/* visual editor → modal → "add undocumented paramter" block → button → icon */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-buttonElement-button .oo-ui-iconElement-icon  {
    filter: invert(100%);
}

/* visual editor → modal → "add undocumented paramter" block → button → label */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-buttonElement-button .oo-ui-labelElement-label {
    color: var(--text-color);
}

/* visual editor → modal → "add undocumented paramter" block → description */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-inline-help  {
    color: var(--bg-color-light-x4);
}



/* visual editor → modal → modal message dialog → action button (a) focus */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-buttonElement-button:focus,
/* visual editor → save changes modal → «review changes» button (a) focus */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-buttonElement-button:focus {
    border-color: var(--bg-color-light-x4); 
}



/* visual editor → modal → modal message dialog → "destructive" action button */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-widget-enabled.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button  {
    background-color: var(--color-red);

    transition: background-color 100ms ease-in;
}

/* visual editor → modal → modal message dialog → "destructive" action button hover */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-widget-enabled.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button:hover  {
    background-color: var(--color-red-light);

    transition: background-color 100ms ease-out;
}

/* visual editor → modal → modal message dialog → "destructive" action button pressed */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-widget-enabled.oo-ui-buttonElement-pressed.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button  {
    background-color: var(--color-red-dark);

    transition: background-color 100ms ease-out;
}



/* visual editor → modal → left menu */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu {
    border-color: var(--bg-color-light-x2);
}

/* visual editor → modal → left menu → search block */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky {
    /* override default */
	background-color: var(--bg-color);
}

/* visual editor → modal → left menu → search block → query input → placeholder */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky input::placeholder {
    color: var(--bg-color-light-x4);
}

/* visual editor → modal → search icon */
.oo-ui-windowManager-modal .oo-ui-icon-search {
    filter: invert(100%);
}


/* visual editor → modal → left menu → search block → "hide unused" (params) button → label */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky .ve-ui-mwTransclusionOutlineToggleUnusedWidget .oo-ui-labelElement-label {
    color: var(--action-color-light-x2);

    transition: color 100ms ease-in;
}

/* visual editor → modal → left menu → search block → "hide unused" (params) button hover → label */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky .ve-ui-mwTransclusionOutlineToggleUnusedWidget .oo-ui-labelElement-label:hover {
    color: var(--action-color-light-x3);

    transition: color 100ms ease-out; 
}

/* visual editor → modal → left menu → params container → item */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > * {
    color: var(--text-color);
    background-color: var(--bg-color);

    transition: background-color 100ms ease-in;
}

/* visual editor → modal → left menu → params container → item checkbox disabled checked → bg */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > * input[type=checkbox][disabled] + span {
    background-color: var(--bg-color-light-x3);
    border-color: var(--bg-color-light-x4);
}

/* visual editor → modal → left menu → params container → item hover */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > *:hover {
    color: var(--text-color);
    background-color: var(--bg-color-light);

    transition: background-color 75ms ease-out;
}

/* visual editor → modal → left menu → params container → item label */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > * .oo-ui-labelElement-label {
    color: var(--text-color);
}



/* visual editor → modal → popup windows and such */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable {
    background-color: var(--bg-color-light);
    border-color: var(--bg-color-light-x3);
}

/* visual editor → modal → popup windows and such → item */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled {
    background-color: var(--bg-color-light);
    color: var(--text-color);
}

/* visual editor → modal → popup windows and such → item hover */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled:hover {
    background-color: var(--bg-color-light-x2);
}

/* visual editor → modal → popup windows and such → item pressed (mouse down) */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled.oo-ui-optionWidget-pressed,
/* visual editor → modal → popup windows and such → item selected */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled.oo-ui-optionWidget-selected{
    color: var(--text-colorStrong);
    background-color: var(--bg-color-light-x3);

    transition: 
        color 100ms ease-out,
        text-shadow 100ms ease-out,
        background-color 100ms ease-out;
}



/* visual editor → modal → help button */
.oo-ui-windowManager-modal .ve-ui-mwFloatingHelpElement  > .oo-ui-buttonElement-button {
    background-color: var(--text-color);
    transition: background-color 100ms ease-out;
}

/* visual editor → modal → help button active */
.oo-ui-windowManager-modal .ve-ui-mwFloatingHelpElement .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    transition: background-color 100ms ease-out;
}


/** visual editor → modal → something loading "stripes" */
.oo-ui-windowManager-modal .oo-ui-pendingElement-pending {
    --strip-col: var(--bg-color-light-x2);

    background-image: linear-gradient(
        135deg,
        var(--strip-col) 25%,
        transparent 25%,
        transparent 50%,
        var(--strip-col) 50%,
        var(--strip-col) 75%,
        transparent 75%,
        transparent
    );
}

/** visual editor → modal → template search results block → item → description */
.oo-ui-windowManager-modal .mw-widget-titleWidget-menu .mw-widget-titleOptionWidget-description {
    color: var(--text-color);
    /* disable text shadow enabled for selected elements */
    text-shadow: none;
}



/** visual editor → modal message dialog → */
.oo-ui-windowManager-modal.oo-ui-windowManager-floating .oo-ui-messageDialog .oo-ui-window-frame {
    border-color: var(--bg-color-light-x3);
}

/** visual editor → modal message dialog → title */
.oo-ui-windowManager-modal .oo-ui-messageDialog .oo-ui-window-frame .oo-ui-messageDialog-title {
    color: var(--action-color-light-x2);
    font-weight: bold;
}

/** visual editor → modal message dialog → message */
.oo-ui-windowManager-modal .oo-ui-messageDialog .oo-ui-window-frame .oo-ui-labelElement-label {
    color: var(--text-color);
}

 

/* visual editor → save changes modal → summary */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .ve-ui-mwSaveDialog-summary {
    background-color: inherit;
}

/* visual editor → save changes modal → options (where the checkboxes are) */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .ve-ui-mwSaveDialog-options {
    background-color: inherit;
    border: none;
}

/* visual editor → save changes modal → options → checkboxes container */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .ve-ui-mwSaveDialog-options .ve-ui-mwSaveDialog-checkboxes {
    padding-left: 0;
}

/* visual editor → save changes modal → copyright warning */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog #editpage-copywarn {
    color: var(--bg-color-light-x3);
}



/* visual editor → popups  */
.oo-ui-popupWidget-popup {
    background-color: var(--bg-color-light);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* #endregion */

/* ============ */
/* #region =🖌️= VISUAL EDITOR BORDERS =🖌️= */
/* ============ */

/* visual editor → tool popups */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools,
/* visual editor → toolbar → paragraph button (I think?) */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-menuToolGroup,
/* visual editor → toolbar → dropdown button (span) hover */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-handle:hover {
    border-color: var(--border-color-light);
}

/* #endregion */

/* #endregion */
Retrieved from "https://wiki.spacestation14.com/w/index.php?title=MediaWiki:Common.css&oldid=7609"