MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
@import url("https://fonts.googleapis.com/css?family=Play");
/* CSS Reset Before We Begin */
body {
background: none;
}
/* Set Variables */
/* Note: The CSS linter complains about a missing rbrace, but this can be ignored as it is erroneous*/
:root {
/* this makes all scrollbars on a page dark
doesn't seem to affect any editors */
color-scheme: dark;
--theme-site-background: #151b57
url("https://cosmoteer.net/site_images/bg.jpg") top center / cover
no-repeat fixed;
--theme-site-borderImage: url("https://cosmoteer.net/site_images/column_border.png");
--theme-site-logoImage: url(/images/thumb/8/82/CosmoteerLogoLong.png/720px-CosmoteerLogoLong.png);
/* the bg color of --theme-site-borderImage */
--theme-bg-color: hsla(208, 95%, 8%, 0.651);
--color-cosmoBlue: hsl(207, 100%, 92%);
--color-cosmoBlue--slightly-darker: hsl(207, 100%, 88%);
--color-cosmoBlue--darker: hsl(207, 90%, 83%);
/* Original: rgb(168, 202, 229) */
--color-cosmoGreen--darker: hsl(146, 80%, 30%);
--color-cosmoGreen--slightly-darker: hsl(146, 88%, 40%);
--color-cosmoGreen: hsl(146, 91%, 44%);
--color-cosmoGreen--slightly-lighter: hsl(146, 91%, 50%);
--color-cosmoGreen--lighter: hsl(146, 100%, 60%);
--color-border: hsl(207, 67%, 33%);
--color-border--slightly-lighter: hsl(207, 67%, 38%);
--color-cosmoBorderTop: hsl(207.69deg 88.35% 15.2% / 80%);
--color-cosmoBorderMid: hsl(208.95deg 89.06% 19.1% / 80%);
--color-cosmoBorderBottom: hsl(208.7deg 92% 27.31% / 80%);
/* alternative border color, based on grays */
--color-border-alt: var(--gray--light);
--color-border-alt--slightly-lighter: var(--gray--lighter);
--color-strongBlue: hsl(197, 100%, 50%);
--color-wikiDark: rgb(25, 27, 28);
--code-block-bg: hsl(207, 8%, 12%);
--code-block-text: var(--color-cosmoBlue);
--code-block-border: hsl(207, 6%, 23%);
--gray--slightly-darker: hsl(207, 20%, 11%);
--gray: hsl(207, 20%, 15%);
--gray--slightly-lighter: hsl(207, 20%, 20%);
--gray--light: hsl(207, 20%, 30%);
--gray--lighter: hsl(207, 15%, 40%);
--gray--very-light: hsl(207, 12%, 50%);
--action-color--darker: hsl(220, 50%, 30%);
--action-color--dark: hsl(220, 60%, 40%);
--action-color--slightly-darker: hsl(220, 60%, 45%);
--action-color: hsl(220, 60%, 50%);
--action-color--slightly-lighter: hsl(220, 65%, 55%);
--action-color--light: hsl(220, 74%, 58%);
--action-color--very-light: hsl(220, 80%, 63%);
--action-color-inactive: hsl(220, 15%, 30%);
--info-color--very-dark: hsl(196, 95%, 9%);
--info-color--dark: hsl(196, 95%, 12%);
--info-color--slightly-darker: hsl(196, 95%, 15%);
--info-color: hsl(196, 100%, 18%);
--info-color--slightly-lighter: hsl(196, 100%, 23%);
--info-color--light: hsl(196, 100%, 30%);
--info-color--very-light: hsl(196, 100%, 40%);
--info-color-border: var(--color-strongBlue);
--warning-color: hsl(39, 100%, 11%);
--warning-color-border: hsl(39, 100%, 50%);
--warning-color-border-hover: hsl(39, 100%, 75%);
--error-color: hsl(0, 61%, 20%);
--error-color-border: var(--red);
--red--slightly-darker: hsl(0, 71%, 48%);
/* this is specifically used in-game */
--red: hsl(0, 71%, 53%);
--red--slightly-lighter: hsl(0, 71%, 58%);
/* properties for different elements specifically
some sections might have their own props defined locally */
--text-editor-toolbar-tab-section-height: 12rem;
--non-existing-link--color: var(--red);
/* --red hue, but much less saturated and slightly darker */
--non-existing-link--visited--color: hsl(0, 30%, 48%);
}
/* ============ */
/* #region Existing CSS */
/* ============ */
body {
color: var(--color-cosmoBlue);
font-family: "Play", sans-serif;
}
main {
margin-top: 1.5em;
}
#mw-page-base {
background-color: transparent;
background-image: none;
}
/* Style Table of Contents */
.tocnumber {
color: var(--color-cosmoBlue);
}
.toctogglelabel {
color: var(--color-strongBlue);
}
ul {
list-style-image: none;
}
.mw-body,
#mw-head-base,
#left-navigation,
#mw-data-after-content,
.mw-footer {
background-color: transparent;
color: var(--color-cosmoBlue);
margin-left: 13em;
}
.mw-body {
margin-right: 10px;
margin-top: -35px;
margin-bottom: 20px;
padding: 20px;
}
.mw-footer li {
color: var(--color-cosmoBlue);
}
#mw-head {
text-decoration: none;
color: var(--color-cosmoGreen);
font-weight: bold;
}
.vector-menu-tabs li a {
background-color: transparent;
border-color: transparent;
text-decoration: none;
color: var(--color-cosmoGreen);
font-weight: bold;
}
.vector-menu-tabs li,
#mw-head .vector-menu-dropdown .vector-menu-heading,
.vector-menu-tabs .selected,
.vector-menu-tabs,
.vector-menu-tabs a {
background-image: none;
background: none;
}
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited {
text-decoration: none;
color: var(--color-cosmoGreen);
font-weight: bold;
}
/* Style all links */
a,
a:visited,
.mw-editsection,
.mw-editsection-like,
.mw-parser-output a.external,
.mw-parser-output a.external:visited {
text-decoration: none;
color: var(--color-cosmoGreen);
font-family: "Play", sans-serif;
}
.vector-menu-portal .vector-menu-content li a:visited,
.vector-menu-portal .vector-menu-content li a {
text-decoration: none;
color: var(--color-cosmoGreen);
font-weight: bold;
}
b,
strong {
color: var(--color-strongBlue);
}
h1,
h2 {
background-image: linear-gradient(
to right,
rgba(200, 204, 209, 0) 0,
#c8ccd1 33%,
#c8ccd1 66%,
rgba(200, 204, 209, 0) 100%
);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% 1px;
background-color: transparent;
border-color: transparent;
}
h1,
#firstHeading.firstHeading,
.mw-body h1,
.mw-body-content h1 {
color: var(--color-strongBlue);
font-family: "Play", sans-serif;
font-weight: bold;
}
h2,
#mw-previewheader,
.mw-body-content h2,
.vector-body .toc h2 {
color: var(--color-strongBlue);
font-family: "Play", sans-serif;
font-weight: bold;
}
h3,
.vector-menu-portal .vector-menu-heading,
.vector-menu-dropdown .vector-menu-heading {
color: var(--color-strongBlue);
font-family: "Play", sans-serif;
}
h4 {
color: var(--color-strongBlue);
font-family: "Play", sans-serif;
}
h5,
h6 {
color: var(--color-cosmoBlue);
}
h2.feature {
margin-top: 40px;
}
li {
text-align: left;
}
.mw-body {
background-image: linear-gradient(
to right,
rgba(200, 204, 209, 0) 0,
#c8ccd1 33%,
#c8ccd1 66%,
rgba(200, 204, 209, 0) 100%
);
background-position: center 2em;
background-repeat: no-repeat;
background-size: 100% 1px;
background-color: transparent;
border-color: transparent;
border-image-source: var(--theme-site-borderImage);
border-image-slice: 14 fill;
border-image-width: 14;
border-image-outset: 13;
/* Overwriting some nonsense that breaks the border*/
border-right-width: 1px;
}
#mw-panel {
margin-left: 10px;
margin-right: 20px;
}
/* VisualEditor Toolbar Placement Dirty Fix */
@media screen and (min-width: 721px) {
#mw-panel {
height: 33px;
margin-top: 24px;
}
}
.vector-menu-portal {
padding: 0.25em 0;
direction: ltr;
width: 100%;
}
.catlinks {
background-color: transparent;
border: 1px var(--color-border) solid;
border-image-source: var(--theme-site-borderImage);
border-image-slice: 14 fill;
border-image-width: 14;
border-image-outset: 13;
}
ul.gallery,
.oo-ui-panelLayout-framed,
.mw-datatable {
margin: 20px 0 10px 0;
background-color: transparent;
border: 1px var(--color-border) solid;
border-image-source: var(--theme-site-borderImage);
border-image-slice: 14 fill;
border-image-width: 14;
border-image-outset: 13;
}
/* Stop gallery overlapping infobox*/
ul.gallery.mw-gallery-traditional {
display: flex;
flex-wrap: wrap;
}
/* Center align gallery captions infobox*/
.gallery .gallerytext {
text-align: center;
}
/* infoboxes */
.portable-infobox,
/* styled wiki-table */
.wikitable,
/* unstyled wiki-table */
table,
/* toc */
.toccolours,
/* ???? */
#filetoc {
background-color: transparent;
color: var(--color-cosmoBlue);
border: 1px var(--color-border) solid;
border-image-source: var(--theme-site-borderImage);
border-image-slice: 14 fill;
border-image-width: 14;
border-image-outset: 13;
}
/* Table nonsense */
table {
box-sizing: border-box;
max-width: max-content;
white-space: normal;
}
table.mw-enhanced-rc {
display: table;
}
tr,
.wikitable > tr > th,
.wikitable > * > tr > th,
.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
background-image: linear-gradient(
to right,
rgba(200, 204, 209, 0) 0,
#c8ccd1 33%,
#c8ccd1 66%,
rgba(200, 204, 209, 0) 100%
);
background-position: center top;
background-repeat: no-repeat;
background-size: 100% 1px;
background-color: transparent;
border-color: transparent;
}
td,
th,
/* override for page editor toolbar → help tab → table → th */
.wikiEditor-ui-toolbar .page-table th {
padding: 4px 20px 2px 12px;
}
/* Fix the column sort icons.
/* As the table rows use a 1px thick background image as their dividers,
it breaks the sort icons. We need to revert it for them.
*/
.jquery-tablesorter th.headerSort {
background-size: initial;
/* Replaces the default sort icon with a white version */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjEiIGhlaWdodD0iOSI+PGRlZnM+PGZpbHRlciBpZD0iZGFya3JlYWRlci1pbWFnZS1maWx0ZXIiPjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwLjI0OSAtMC42MTQgLTAuNjcyIDAuMDAwIDEuMDM1IC0wLjY0NiAwLjI4OCAtMC42NjQgMC4wMDAgMS4wMjAgLTAuNjM2IC0wLjYwOSAwLjI1MCAwLjAwMCAwLjk5NCAwLjAwMCAwLjAwMCAwLjAwMCAxLjAwMCAwLjAwMCIgLz48L2ZpbHRlcj48L2RlZnM+PGltYWdlIHdpZHRoPSIyMSIgaGVpZ2h0PSI5IiBmaWx0ZXI9InVybCgjZGFya3JlYWRlci1pbWFnZS1maWx0ZXIpIiB4bGluazpocmVmPSJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBEOTRiV3dnZG1WeWMybHZiajBpTVM0d0lpQmxibU52WkdsdVp6MGlWVlJHTFRnaVB6NEtQSE4yWnlCNGJXeHVjejBpYUhSMGNEb3ZMM2QzZHk1M015NXZjbWN2TWpBd01DOXpkbWNpSUhkcFpIUm9QU0l5TVNJZ2FHVnBaMmgwUFNJNUlpQjJhV1YzUW05NFBTSXdJREFnTWpFZ09TSStDZ2s4Y0dGMGFDQmtQU0p0TVRRdU5TQTFMVFFnTkMwMExUUjZiVEF0TVMwMExUUXROQ0EwZWlJdlBnbzhMM04yWno0SyIgLz48L3N2Zz4=);
}
/* Stop collapsed tables from wrapping really small */
.mw-collapsible.wikitable.mw-collapsed {
white-space: nowrap;
}
.portable-infobox .pi-border-color {
background-image: linear-gradient(
to right,
rgba(200, 204, 209, 0) 0,
#c8ccd1 33%,
#c8ccd1 66%,
rgba(200, 204, 209, 0) 100%
);
background-position: center top;
background-repeat: no-repeat;
background-size: 100% 1px;
border-color: transparent;
}
.portable-infobox .pi-title {
font-size: 2.2em;
text-align: center;
}
.portable-infobox .pi-header {
padding-top: 15px;
font-size: 14pt;
text-align: center;
}
.portable-infobox .pi-data-value {
hyphens: none;
}
/* navigation links in infoboxes */
.portable-infobox .pi-navigation:last-child {
text-align: center;
}
.mw-datatable td,
.mw-datatable th,
.portable-infobox .pi-secondary-background {
background-color: transparent;
}
.mw-wiki-logo {
background-size: 160px;
}
@media screen and (max-width: 720px) {
#mw-head {
top: 0;
}
#mw-panel {
width: 90%;
}
#mw-head-base,
#left-navigation,
#mw-data-after-content,
.mw-footer {
margin-left: 0;
}
.mw-body,
#content {
margin-left: 10px;
}
}
/* #endregion */
/* ============ */
/* #region GENERAL STYLES */
/* styles applicable to the wiki in general (body, headers, links, etc.) */
/* ============ */
body {
background: var(--theme-site-background);
/* Removes second vertical scrollbar(mw 1.37 fix) */
overflow-y: unset;
/* must be unset or visible, can not be auto, or side ad will not be sticky */
height: auto;
}
html,
body {
min-height: 100%;
}
html {
/* Always show scroll bar for short page. By doing this page background size won't change when expand/collapse sidebar sections.
*/
overflow-y: scroll;
height: 100%;
scroll-padding-top: 35px;
}
/* image block (floating) with .noclear class */
div:has(a > img.noclear) {
/* remove "clear" from the image block, making it float around other floating elements */
clear: none;
}
/* system message banner */
.mw-message-box {
color: var(--color-cosmoBlue);
border-color: var(--warning-color-border);
}
/* 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(--color-cosmoBlue);
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(--color-cosmoBlue);
background-color: var(--error-color);
border-color: var(--error-color-border);
}
/* ============ */
/* #region GENERAL STYLES → Article Elements */
/* ============ */
:root {
--h1-font-size: 28px;
--h2-font-size: 24px;
--h3-font-size: 20px;
--h4-font-size: 17px;
--h5-font-size: 16px;
--h6-font-size: 1em;
}
.vector-body h1 {
font-size: var(--h1-font-size);
}
.vector-body h2 {
font-size: var(--h2-font-size);
}
.vector-body h3 {
font-size: var(--h3-font-size);
}
.vector-body h4 {
font-size: var(--h4-font-size);
font-weight: bold;
color: var(--color-cosmoBlue);
}
.vector-body h5 {
font-size: var(--h5-font-size);
}
.vector-body h6 {
font-size: var(--h6-font-size);
}
/* Standard TOC */
:root {
/* padding used on the toc container */
--toc-padding: 10px;
}
/* toc */
.toc {
background-color: var(--theme-bg-color);
border-color: var(--color-border);
margin-top: 20px;
padding: var(--toc-padding);
/* doesn't actually do anything with border, since they are image borders,
but helps with clipping header background with rounder corners */
border-radius: 4px;
/* clips the header bg */
overflow: hidden;
}
/* toc → header block */
.toc > .toctitle {
background-color: var(--color-border);
padding: 5px 10px 5px 10px;
/* negates parent padding */
margin: calc(-1 * var(--toc-padding));
/* except the bottom, where there's content, spacing to which doesn't need to be removed */
margin-bottom: 0;
color: var(--color-cosmoBlue);
}
/* toc → header block → header */
.vector-body .toc h2 {
/* better visibility on the picked light bg */
color: var(--color-cosmoBlue);
/* disable the underline-like border, similar to what's used in tables */
background-image: none;
}
/* toc → header block → show/hide toggle button */
.vector-body .toc .toctogglelabel {
/* better visibility */
font-weight: bold;
/* link color, same as the collapse/expand used in tables */
color: var(--color-cosmoGreen)
}
/* #endregion */
/* ============ */
/* #region GENERAL STYLES → LINKS AND BUTTONS */
/* ============ */
/* wiki help button link */
#mw-indicator-mw-helplink a {
/* help icon - replacing since inverting the color will also affect the link */
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQloZWxwCgk8L3RpdGxlPgoJPHBhdGggZmlsbD0icmdiKDIxMiAyMzYgMjU1KSIgZD0iTTEwIDBhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTAgMHptMSAxNkg5di0yaDJ6bTIuNzEtNy42YTIuNjQgMi42NCAwIDAgMS0uMzMuNzQgMy4xNiAzLjE2IDAgMCAxLS40OC41NWwtLjU0LjQ4Yy0uMjEuMTgtLjQxLjM1LS41OC41MmEyLjU0IDIuNTQgMCAwIDAtLjQ3LjU2QTIuMyAyLjMgMCAwIDAgMTEgMTJhMy43OSAzLjc5IDAgMCAwLS4xMSAxSDkuMDhhOC45IDguOSAwIDAgMSAuMDctMS4yNSAzLjI4IDMuMjggMCAwIDEgLjI1LS45IDIuNzkgMi43OSAwIDAgMSAuNDEtLjY3IDQgNCAwIDAgMSAuNTgtLjU4Yy4xNy0uMTYuMzQtLjMuNTEtLjQ0YTMgMyAwIDAgMCAuNDMtLjQ0IDEuODMgMS44MyAwIDAgMCAuMy0uNTUgMiAyIDAgMCAwIC4xMS0uNzIgMi4wNiAyLjA2IDAgMCAwLS4xNy0uODYgMS43MSAxLjcxIDAgMCAwLTEtLjkgMS43IDEuNyAwIDAgMC0uNS0uMSAxLjc3IDEuNzcgMCAwIDAtMS41My42OCAzIDMgMCAwIDAtLjUgMS44Mkg2LjE2YTQuNzQgNC43NCAwIDAgMSAuMjgtMS42OCAzLjU2IDMuNTYgMCAwIDEgLjgtMS4yOSAzLjg4IDMuODggMCAwIDEgMS4yOC0uODNBNC41OSA0LjU5IDAgMCAxIDEwLjE4IDRhNC40NCA0LjQ0IDAgMCAxIDEuNDQuMjMgMy41MSAzLjUxIDAgMCAxIDEuMTUuNjUgMy4wOCAzLjA4IDAgMCAxIC43OCAxLjA2IDMuNTQgMy41NCAwIDAgMSAuMjkgMS40NSAzLjM5IDMuMzkgMCAwIDEtLjEzIDEuMDF6Ii8+Cjwvc3ZnPg==");
}
/* red links */
a.new {
color: var(--non-existing-link--color);
}
/* red links (visited) */
a.new:visited {
color: var(--non-existing-link--visited--color);
}
/* #endregion */
/* ============ */
/* #region GENERAL STYLES → Main Logo */
/* main logo of the wiki */
/* ============ */
/* 1. Set the logo */
.mw-wiki-logo {
background-image: var(--theme-site-logoImage);
-webkit-filter: drop-shadow(2px 2px 5px #222);
filter: drop-shadow(2px 2px 5px #222);
}
/* 2. Reposition the logo*/
#p-logo {
left: 50%;
position: absolute;
top: 35px;
transform: translate(-50%, 0);
}
/* 3. Re-size the logo */
#p-logo,
#p-logo a {
background-size: 100%;
height: 140px;
width: 500px;
}
/* 4. Fix navigation offset */
#left-navigation,
#right-navigation {
margin-top: 175px;
}
/* 5. Offset page content to account for new logo placement */
#content {
margin-top: 6.4em;
}
/* #endregion */
/* ============ */
/* #region GENERAL STYLES → Code Blocks */
/* ============ */
/* inline code blocks */
code {
background-color: var(--code-block-bg);
color: var(--code-block-text-color);
border-color: var(--code-block-border);
overflow-wrap: break-word;
padding: 1px 2px;
}
/* Simple Image Responsive */
.responsiveIMG img {
max-width: 100%;
height: auto;
}
/* #endregion */
/* ============ */
/* #region GENERAL STYLES → Mobile Fixes From Terraria Wiki */
/* ============ */
/*** responsive ***/
/* Mobile view fixes */
@media screen and (max-width: 720px) {
div#p-personal {
right: unset;
padding-right: unset;
}
#content,
#footer {
margin-right: 0;
}
}
@media screen and (max-width: 720px) {
footer#wikigg-footer .footer-right {
margin-left: 0;
}
footer#wikigg-footer .footer-left {
margin-right: 0;
}
}
@media screen and (max-width: 600px) {
footer#wikigg-footer {
display: grid;
grid-template-columns: 35px 1fr;
grid-template-rows: auto auto;
align-items: center;
justify-items: start;
padding: 3px 0 3px 10px;
}
footer#wikigg-footer .footer-middle {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
footer#wikigg-footer .footer-right {
grid-column: 2 / 3;
grid-row: 1 / 2;
margin: 0;
}
footer#wikigg-footer .footer-left {
grid-column: 2 / 3;
grid-row: 2 / 3;
margin: 0;
}
}
/* #endregion */
/* ============ */
/* #region GENERAL STYLES → Sidebar */
/* ============ */
.vector-menu-portal .vector-menu-content li {
margin: 0;
padding: 5px;
font-size: .75em;
line-height: 1.125em;
word-wrap: break-word;
margin-bottom: 5px;
border: 2px groove #00b7ff70;
border-radius: 4px;
transition: transform, 300ms;
background: linear-gradient(180deg, var(--color-cosmoBorderTop) 0%, var(--color-cosmoBorderMid) 50%, var(--color-cosmoBorderBottom));
position: relative;
}
.vector-menu-portal .vector-menu-content li:hover {
transform: scale(1.05);
}
/* Makes the entire box clickable as a link. Needs position relative on the parent li element */
.vector-menu-portal .vector-menu-content li a::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
}
.vector-menu-portal .vector-menu-heading {
text-align: center;
font-size: smaller;
}
/* #endregion */
/* ============ */
/* #region GENERAL STYLES → NAV BAR */
/* ============ */
/* nav bar "More" dropdown popup bg */
.vector-menu-dropdown .vector-menu-content {
background-color: var(--gray);
}
/* nav bar "More" dropdown popup items */
.vector-menu-dropdown .mw-list-item a {
color: var(--color-cosmoGreen);
}
/* nav bar search input */
#searchInput,
/* nav bar search results
:not excludes styling this component when it's hovered */
.suggestions-result:not(.suggestions-result-current),
/* nav bar search result popup «search for pages containing» button
:not excludes styling this component when it's hovered */
.suggestions-special:not(.suggestions-result-current),
/* nav bar search result popup «search for pages containing» button
:not excludes styling this component when it's hovered */
.suggestions-special:not(.suggestions-result-current) .special-query {
background-color: var(--gray--slightly-lighter);
color: var(--color-cosmoBlue);
}
/* nav bar search input button */
.searchButton[name="go"] {
background: no-repeat center/1.23076923em url(/images/b/b3/Search-white.svg);
}
/* #endregion */
/* ============ */
/* #region GENERAL STYLES → IMAGES */
/* ============ */
li.gallerybox div.thumb {
border: none;
background-color: transparent;
}
img.inline_gif {
float: right;
padding: 20px 10px 10px 20px;
}
img.gif {
display: block;
margin-left: auto;
margin-right: auto;
}
/* thumbnail image block */
div.thumbinner,
/* visual editor thumbnail image block */
figure.ve-ce-mwBlockImageNode-type-thumb,
/* (???? not sure if this is correct) visual editor thumbnail image block → caption */
figure.ve-ce-mwBlockImageNode-type-thumb figcaption,
/* source editor or view → image with a border (frameless or basic types with border enabled) */
img.thumbborder,
/* visual editor → image with a border (frameless or basic types with border enabled) */
.mw-image-border > a:first-child > :first-child:not(.mw-broken-media),
/* image file page → image container → image */
.fullImageLink img,
/* file page → toc aka header block */
#filetoc {
background-color: transparent;
border: 1px var(--color-border) solid;
border-image-source: var(--theme-site-borderImage);
border-image-slice: 14 fill;
border-image-width: 14;
border-image-outset: 8;
}
/* visual editor thumbnail image block */
figure.ve-ce-mwBlockImageNode-type-thumb {
/* remove the border between this element and the caption element */
border-bottom: none;
/* if set to "collapse", breaks the border image */
border-collapse: unset;
}
/* visual editor thumbnail image block → caption */
figure.ve-ce-mwBlockImageNode-type-thumb figcaption {
/* remove the border between this element and the figure element */
border-top: none;
background-color: transparent;
}
/* visual editor thumbnail image block → image */
figure.ve-ce-mwBlockImageNode-type-thumb img {
/* !important here is just better than overriding a selector with 0, 4, 2 specificity */
border: none !important;
}
.thumbimage {
background-color: transparent;
border: none;
}
/* #endregion */
/* ============ */
/* #region GENERAL STYLES → VIDEO */
/* ============ */
/* video el with a border */
video.thumbborder {
border-color: var(--color-border);
}
/* #endregion */
/* ============ */
/* #region GENERAL STYLES → AUDIO */
/* ============ */
/* audio el with a border */
audio.thumbborder {
border-color: var(--color-border);
}
/* #endregion */
/* ============ */
/* #region =🐦= ALERTS & NOTICES POPUPS =🐦= */
/* ============ */
:root {
/* header and footer bg */
--notif-popup--bg: var(--info-color--dark);
--notif-popup--header--loading-strip: var(--info-color--light);
/* this also applies to the items in expandable section */
--notif-popup--item-read: var(--info-color--slightly-darker);
--notif-popup--item-read--expandable-section--surrounding-bg: var(
--info-color--dark
);
--notif-popup--item-read--expandable-section--bg: var(--info-color--dark);
/* this also applies to the items in expandable section */
--notif-popup--item-unread: var(--info-color);
--notif-popup--item-unread--expandable-section--surrounding-bg: var(
--info-color--slightly-darker
);
--notif-popup--item-unread--expandable-section--bg: var(
--info-color--slightly-darker
);
/* for new notifs that haven't been seen yet */
--notif-popup--item-unseen: var(--info-color--slightly-lighter);
/* same as item (unread) */
--notif-popup--item--expandable-section--hamburger-menu--bg: var(
--info-color
);
--notif-popup--item--expandable-section--hamburger-menu--item-bg-hover: var(
--info-color--slightly-lighter
);
--notif-popup--footer-btn-bg: var(--info-color--slightly-darker);
--notif-popup--footer-btn-bg-hover: var(--info-color);
--notif-popup--footer-btn-bg-active: var(--info-color--slightly-lighter);
--notif-and-alert-popups--notification-badge--bg: var(--color-strongBlue);
--notif-and-alert-popups--notification-badge--text: var(
--info-color--very-dark
);
--notif-and-alert-popups--notification-badge--border: var(
--info-color-border
);
/* ===== */
--notif-and-alert-popups--loading-strip-bg-image: linear-gradient(
135deg,
var(--notif-popup--header--loading-strip) 25%,
transparent 25%,
transparent 50%,
var(--notif-popup--header--loading-strip) 50%,
var(--notif-popup--header--loading-strip) 75%,
transparent 75%,
transparent
);
}
/* notifications popup → header */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-head,
/* notifications popup → footer → button (a) */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-footer .oo-ui-buttonElement-button {
background-color: var(--notif-popup--bg);
}
/* notifications popup → header loading */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-head.oo-ui-pendingElement-pending {
background-image: var(--notif-and-alert-popups--loading-strip-bg-image);
}
/* notifications popup → "mark all as read" button */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-head
.mw-echo-ui-notificationsWidget-markAllReadButton {
/* smooth hover */
transition: background-color 100ms ease-in;
}
/* notifications popup → "mark all as read" button hover */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-head
.mw-echo-ui-notificationsWidget-markAllReadButton:hover {
background-color: var(--info-color--slightly-darker);
/* smooth hover */
transition: background-color 100ms ease-out;
}
/* notifications popup → "mark all as read" button active */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-head
.mw-echo-ui-notificationsWidget-markAllReadButton.oo-ui-buttonElement-pressed {
background-color: var(--info-color);
/* smooth hover */
transition: background-color 100ms ease-out;
}
/* notifications popup → "mark all as read" button → text */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-head
.mw-echo-ui-notificationsWidget-markAllReadButton
.oo-ui-labelElement-label {
color: var(--color-cosmoBlue);
/* smooth hover */
transition: color 100ms ease-in;
}
/* notifications popup → "mark all as read" button hover → text */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-head
.mw-echo-ui-notificationsWidget-markAllReadButton:hover
.oo-ui-labelElement-label {
color: var(--color-cosmoGreen);
/* smooth hover */
transition: color 100ms ease-out;
}
/* notifications popup → header → "notices" icon */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-head .oo-ui-iconElement,
/* notifications popup → body → item → "view changes" label button → icon */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-body .mw-echo-ui-notificationItemWidget .oo-ui-buttonElement .oo-ui-icon-changes,
/* notifications popup → body → item → "expand" label button → icon */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-body .mw-echo-ui-notificationItemWidget .oo-ui-buttonElement .oo-ui-icon-expand,
/* notifications popup → body → item → collapse" label button → icon */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-body .mw-echo-ui-notificationItemWidget .oo-ui-buttonElement .oo-ui-icon-collapse,
/* notifications popup → body → item → expanded → hamburger icon */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-body .mw-echo-ui-notificationItemWidget .oo-ui-buttonElement .oo-ui-icon-ellipsis,
/* alerts popup → body → item → user link label button → user avatar icon */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-body .mw-echo-ui-notificationItemWidget .oo-ui-buttonElement .oo-ui-icon-userAvatar,
/* notifications popup → body → item → expandable section → hamburger menu → popup → "view changes" icon */
.mw-echo-ui-actionMenuPopupWidget-menu:has(.mw-echo-ui-menuItemWidget) .oo-ui-icon-changes {
/* black by default, invert to white */
filter: invert(100%);
}
/* notifications popup → body placeholder (while loading after opening the popup for the first time after page load) */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.mw-echo-ui-placeholderItemWidget {
background-color: var(--notif-popup--item-read);
}
/* notifications popup → body → item
+ item expandable section → item bg */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-body .mw-echo-ui-notificationItemWidget,
/* notifications popup → body */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-body {
background-color: var(--notif-popup--item-read);
}
/* notifications popup → body → item (unseen yet)
this and keyframes below are copied straight from the original css to override the white bg */
.mw-echo-ui-notificationItemWidget-initiallyUnseen.mw-echo-ui-notificationItemWidget-unread {
-webkit-animation-name: unseen-fadeout-to-unread;
animation-name: unseen-fadeout-to-unread;
}
@keyframes unseen-fadeout-to-unread {
to {
background-color: var(--notif-popup--item-unseen);
}
}
@keyframes unseen-fadeout-to-read {
to {
background-color: var(--notif-popup--item-read);
}
}
/* notifications popup → body → item (unread)
+ item (unread) expandable section → item bg */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-body
.mw-echo-ui-notificationItemWidget-unread {
background-color: var(--notif-popup--item-unread);
}
/* notifications popup → body → item (unread) → "mark as read/unread" icon */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-body
.mw-echo-ui-notificationItemWidget-unread
.mw-echo-ui-toggleReadCircleButtonWidget-circle {
background-color: var(--color-cosmoGreen);
/* smooth hover */
transition: background-color 100ms ease-in;
}
/* notifications popup → body → item (unread) → "mark as read/unread" icon hover */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-body
.mw-echo-ui-notificationItemWidget-unread
.mw-echo-ui-toggleReadCircleButtonWidget-circle:hover {
background-color: var(--color-cosmoGreen--lighter);
/* smooth hover */
transition: background-color 60ms ease-out;
}
/* notifications popup → body → item → main icon */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-body .mw-echo-ui-notificationItemWidget .mw-echo-ui-notificationItemWidget-icon img,
/* notifications popup → body → item → "all links to this page" label button → icon */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-body .mw-echo-ui-notificationItemWidget .oo-ui-buttonElement .oo-ui-icon-linked,
/* notifications popup → body → item → expandable section → hamburger menu → popup → link icon */
.mw-echo-ui-actionMenuPopupWidget-menu:has(.mw-echo-ui-menuItemWidget) .oo-ui-icon-linked {
/* convert the blue color to one similar to cosmoGreen */
filter: hue-rotate(-72deg) brightness(140%) saturate(150%);
}
/* notifications popup → body → item → main icon (warn) */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-body
.mw-echo-ui-notificationItemWidget
.mw-echo-ui-notificationItemWidget-icon
img[src*="notice.svg"] {
/* since here a filter will be useless, disable it */
filter: none;
content: url(/images/5/5e/Notice_icon_cosmoGreen.svg);
}
/* notifications popup → body → item → label button */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-body
.mw-echo-ui-notificationItemWidget
.oo-ui-buttonElement {
/* for smooth hovers */
transition: opacity 100ms ease-in;
}
/* notifications popup → body → item → label button on hover */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-body
.mw-echo-ui-notificationItemWidget
.oo-ui-buttonElement:hover {
color: var(--color-cosmoBlue);
/* for smooth hovers */
transition: opacity 100ms ease-out;
}
/* notifications popup → body → item → labels */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-body
.mw-echo-ui-notificationItemWidget
.oo-ui-labelElement-label {
color: var(--color-cosmoBlue);
}
/* notifications popup → body → item → content message */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-body
.mw-echo-ui-notificationItemWidget
.mw-echo-ui-notificationItemWidget-content-message-header {
color: var(--color-cosmoBlue);
}
/* notifications popup → body → item → expandable section surrounding bg */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-body
.mw-echo-ui-notificationItemWidget
.mw-echo-ui-bundleNotificationItemWidget-group {
background-color: var(
--notif-popup--item-read--expandable-section--surrounding-bg
);
}
/* notifications popup → body → item (unread) → expandable section surrounding bg */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-body
.mw-echo-ui-notificationItemWidget-unread
.mw-echo-ui-bundleNotificationItemWidget-group {
background-color: var(
--notif-popup--item-unread--expandable-section--surrounding-bg
);
}
/* notifications popup → body → item → expandable section → hamburger menu → popup */
.mw-echo-ui-actionMenuPopupWidget-menu:has(.mw-echo-ui-menuItemWidget),
/* notifications popup → body → item → expandable section → hamburger menu → popup → button*/
.mw-echo-ui-actionMenuPopupWidget-menu:has(.mw-echo-ui-menuItemWidget) .oo-ui-buttonElement {
background-color: var(
--notif-popup--item--expandable-section--hamburger-menu--bg
);
/* transition for the items only */
transition: background-color 100ms ease-in;
}
/* notifications popup → body → item → expandable section → hamburger menu → popup → button hover */
.mw-echo-ui-actionMenuPopupWidget-menu:has(.mw-echo-ui-menuItemWidget)
.oo-ui-buttonElement:hover {
background-color: var(
--notif-popup--item--expandable-section--hamburger-menu--item-bg-hover
);
transition: background-color 100ms ease-out;
}
/* notifications popup → body → item → expandable section → hamburger menu → popup → label */
.mw-echo-ui-actionMenuPopupWidget-menu:has(.mw-echo-ui-menuItemWidget)
.oo-ui-buttonElement
.oo-ui-labelElement-label {
color: var(--color-cosmoBlue);
}
/* notifications popup → footer → button (a) */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-footer
.oo-ui-buttonElement-button {
background-color: var(--notif-popup--footer-btn-bg);
}
/* notifications popup → footer → button (a) hover */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-footer
.oo-ui-buttonElement-button:hover {
background-color: var(--notif-popup--footer-btn-bg-hover);
}
/* notifications popup → footer → button (a) active */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-footer
.oo-ui-buttonElement-button:active {
background-color: var(--notif-popup--footer-btn-bg-active);
}
/* notifications popup → footer → button (a) → text */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-footer
.oo-ui-buttonElement-button
.oo-ui-labelElement-label {
color: var(--color-cosmoBlue);
}
/* notifications popup → footer → button (a) → icon */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
.oo-ui-popupWidget-popup
.oo-ui-popupWidget-footer
.oo-ui-buttonElement-button
.oo-ui-iconElement-icon {
filter: invert(100%);
}
/* alerts button → notification count badge */
#pt-notifications-alert .mw-echo-notifications-badge::after,
/* notifications button → notification count badge */
#pt-notifications-notice .mw-echo-notifications-badge::after,
/* alerts button → notification count badge (unseen) */
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-unseen-notifications::after,
/* notifications button → notification count badge (unseen) */
#pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications::after,
/* alerts button → notification count badge (unseen) */
#pt-notifications-alert .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen::after,
/* notifications button → notification count badge (unseen) */
#pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen::after {
background-color: var(--notif-and-alert-popups--notification-badge--bg);
color: var(--notif-and-alert-popups--notification-badge--text);
border-color: var(--notif-and-alert-popups--notification-badge--border);
}
/* notifications button → link with image */
#pt-notifications-alert > a.mw-echo-notifications-badge,
/* notifications button → link with image */
#pt-notifications-notice > a.mw-echo-notifications-badge {
/* remove negative margin */
top: 0;
}
/* notifications button → notification count badge */
#pt-notifications-notice .mw-echo-notifications-badge::after {
/* revert built-in inversion */
filter: invert(100%);
}
/* #endregion */
/* ============ */
/* #region GENERAL STYLES → SEARCH PAGE */
/* ============ */
/* search form → search bar */
.mw-search-form-wrapper #mw-search-top-table input[type=search] {
background-color: var(--gray--slightly-lighter);
border-color: var(--color-border-alt--slightly-lighter);
color: var(--color-cosmoBlue);
}
/* 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 from → 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(--color-border);
color: var(--color-cosmoBlue);
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 from → 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--slightly-lighter);
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 from → 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);
transition: background-color 100ms ease-out;
}
/* search bar results */
.oo-ui-defaultOverlay > .oo-ui-menuSelectWidget {
background-color: var(--gray);
border-color: var(--color-border);
}
/* search bar results → option */
.oo-ui-defaultOverlay > .oo-ui-menuSelectWidget > .oo-ui-menuOptionWidget {
background-color: var(--gray);
transition: background-color 100ms ease-in;
color: var(--color-cosmoBlue);
}
/* search bar results → option hover */
.oo-ui-defaultOverlay > .oo-ui-menuSelectWidget > .oo-ui-menuOptionWidget:hover {
background-color: var(--gray--slightly-lighter);
transition: none;
}
/* search bar results → option active */
.oo-ui-defaultOverlay > .oo-ui-menuSelectWidget > .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed {
background-color: var(--action-color--dark);
transition: none;
}
/* search form → results count info */
.mw-search-form-wrapper #mw-search-top-table .results-info {
color: var(--gray--lighter);
}
/* search from → filter */
.mw-search-form-wrapper .mw-search-profile-tabs,
/* search from → advanced search options */
.mw-search-form-wrapper #mw-searchoptions {
background-color: var(--theme-bg-color);
border-color: color-mix(in srgb, var(--action-color) 40%, transparent);
}
/* search from → filter → search type selected (li) */
.mw-search-form-wrapper .mw-search-profile-tabs .search-types .current a {
color: var(--color-cosmoBlue);
}
/* search from → filter → search type selected (li > a) */
.mw-search-form-wrapper .mw-search-profile-tabs .search-types .current a {
--padding: 0.4rem;
/* = default padding of .5em */
--spacing-total: .5em;
color: var(--color-cosmoBlue);
box-shadow: inset 0 0 3px 1px var(--info-color-border);
margin: calc(var(--spacing-total) - var(--padding));
/* default is .5em, so */
padding: var(--padding);
border-radius: 0.25rem;
pointer-events: none;
user-select: none;
}
/* search from → advanced search options */
.mw-search-form-wrapper #mw-searchoptions {
border-top-width: 2px;
}
/* search from → advanced search options → section divider */
.mw-search-form-wrapper #mw-searchoptions .divider {
border-color: var(--color-strongBlue);
}
/* search from → advanced search options → all/none toggle container → button */
.mw-search-form-wrapper #mw-search-togglebox input[type=button] {
border-radius: 2px;
}
/* search results → page exists notice */
.searchresults .mw-search-exists,
/* search results → "did you mean X" notice */
.searchdidyoumean,
/* search results → create query page notice */
.searchresults .mw-search-createlink {
border-left: .45rem solid var(--color-strongBlue);
padding-left: .25rem;
border-radius: 0.3rem / 0.2rem;
}
/* search results → entry → metadata */
.searchresults .mw-search-result-data {
color: var(--gray--very-light);
}
/* search results → query match */
.searchresults .searchmatch {
color: var(--warning-color-border);
}
/* search results (media) → entry */
.searchresults table.searchResultImage {
/* removes gaps */
border-collapse: collapse;
}
/* #endregion */
/* #endregion */
/* ============ */
/* #region MAIN PAGE STYLES */
/* styles used on a main page, including the main-page-only templates */
/* ============ */
/* NOTE: the 3 styles below are automatically appened by the server to this file,
so if you gonna replace tham make sure either one of those things:
1. the server doesn't append these styles at the end of the file. if so, you can safely change them here.
2. if the server still appends them, then you gonna either have to add more specific selectors
or use different class names */
/* main page → body (excluding the header) */
.mp-flex {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 15px
}
/* main page → body (excluding the header) → left column */
.mp-left {
flex: 4
}
/* main page → body (excluding the header) → right column */
.mp-right {
flex: 1 275px
}
/* ============ */
/* #region MAIN PAGE STYLES → Generic Framed Box */
/* ============ */
.MPFramedBox {
/* enabled taking floating elements dimensions into account when calculating the height of this element */
display: flow-root;
background-color: transparent;
border: 1px var(--color-border) solid;
border-image-source: var(--theme-site-borderImage);
border-image-slice: 14 fill;
border-image-width: 14;
border-image-outset: 13;
padding: 10px;
margin-bottom: 20px;
margin-top: 20px;
}
.MPFramedBox h1 {
margin-top: 0;
}
/* #endregion */
/* ============ */
/* #region MAIN PAGE STYLES → HOME HEADER */
/* ============ */
/* home header section */
.home-header-section {
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 0 0.5rem
color-mix(in srgb, rgb(43, 114, 174) 100%, transparent),
inset 0 0 0.5rem
color-mix(in srgb, var(--color-strongBlue) 100%, transparent);
}
/* home header section → bg img container */
.home-header-section-bg {
position: absolute;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
left: 0rem;
display: flex;
top: 0;
z-index: -1;
}
/* home header section → bg img container → img */
.home-header-section-bg img {
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: cover;
object-position: 0 32%;
left: 0;
top: 0;
z-index: -1;
}
/* home header section → bg logo img container */
.home-header-section-bg-logo {
position: absolute;
display: flex;
align-items: end;
height: 100%;
box-sizing: border-box;
padding-bottom: 0.5rem;
/* makes the logo appear more aligned */
padding-left: 0.35rem;
z-index: -1;
}
/* home header section → bg logo img container → img */
.home-header-section-bg-logo img {
height: auto;
}
/* home header section → text content container */
.home-header-section-content-container {
display: flex;
justify-content: end;
}
/* home header section → text content container → text content */
.home-header-section-content {
--grad-col: hsl(206, 100%, 15%);
--grad-col-opacity-start: 80%;
--grad-col-opacity-end: 60%;
--grad-col-opactiy-after-end-falloff-distance: 3rem;
--grad-col-1: color-mix(
in srgb,
var(--grad-col) var(--grad-col-opacity-start),
transparent
);
--grad-col-2: color-mix(
in srgb,
var(--grad-col) var(--grad-col-opacity-end),
transparent
);
display: flex;
flex-direction: column;
align-items: end;
width: fit-content;
padding: 3rem 2rem;
/* starts from the left, goes right */
background: linear-gradient(
to right,
transparent 0%,
var(--grad-col-2)
calc(0% + var(--grad-col-opactiy-after-end-falloff-distance)),
var(--grad-col-1) 100%
);
}
/* home header section → text content container → a hover */
.home-header-section-content a:hover {
text-decoration: underline;
}
/* home header section → text content container → header */
.home-header-section-content--header {
font-size: x-large;
}
/* home header section → text content container → line of text */
.home-header-section-content--line {
font-size: large;
}
/* home header section → text content container → media links block */
.home-header-section-content--media-links {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
gap: 1rem;
margin-top: 0.5rem;
max-width: 100%;
}
/* home header section → text content container → media links block → link block */
.home-header-section-content--media-link-block {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.4rem;
border-radius: 0.5rem;
transition: box-shadow 100ms ease-in;
}
/* home header section → text content container → media links block → link block hover */
.home-header-section-content--media-link-block:hover {
box-shadow: 0 0 1rem 2px #ffffffbd, inset 0 0 0.3rem 0px #ffffffbd;
transition: box-shadow 100ms ease-out;
}
/* home header section → text content container → media links block → links (a) */
.home-header-section-content--media-link-block a {
/* stretches the link vertically, making it easier to click */
height: 100%;
display: flex;
align-items: center;
}
/* home header section → text content container → media links block → link text */
.home-header-section-content--media-link-text {
/* margin-left: 0.5em; */
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
/* stretches the link vertically, making it easier to click */
height: 100%;
font-weight: bold;
}
/* #endregion */
/* #endregion */
/* ============ */
/* #region TEMPLATES */
/* styles used in templates */
/* ============ */
/* ============ */
/* #region TEMPLATES → MPShelf (main page item shelf - a more compact version) */
/* ============ */
.MPShelf {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
}
.MPShelfItem {
margin: 5px;
width: 120px;
display: flex;
border: 2px groove #00b7ff70;
border-radius: 4px;
transition: transform, 300ms;
background: linear-gradient(180deg, var(--color-cosmoBorderTop) 0%, var(--color-cosmoBorderMid) 50%, var(--color-cosmoBorderBottom));
transition: transform 300ms;
flex-direction: column;
gap: 10px;
padding: 0.6rem 0.2rem 0.2rem 0.2rem;
position: relative;
}
.MPShelfItem:hover {
transform: scale(1.05);
}
.MPShelfItemImage {
display: flex;
justify-content: center;
height: 100px;
}
.MPShelfItemText {
text-align: center;
}
.MPShelfItem a::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
}
/* #endregion */
/* ============ */
/* #region TEMPLATES → Shelf (item shelf) */
/* ============ */
.Shelf {
display: flex;
flex-wrap: wrap;
align-items: center;
}
@media screen and (max-width: 720px) {
.Shelf {
justify-content: center;
}
}
.ShelfItem {
margin: 5px;
width: 130px;
height: 190px;
display: flex;
align-items: center;
flex-flow: column;
border: 2px groove #00b7ff70;
border-radius: 4px;
background: linear-gradient(180deg, var(--color-cosmoBorderTop) 0%, var(--color-cosmoBorderMid) 50%, var(--color-cosmoBorderBottom));
transition: transform, 0.3s;
padding: 20px 10px 0 10px;
position: relative;
}
.ShelfItem:hover {
transform: scale(1.05);
}
.ShelfItemImage {
display: flex;
height: 130px;
align-items: end;
}
.ShelfItemText {
text-align: center;
margin-top: 10px;
}
.ShelfItem a::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
}
/* #endregion */
/* ============ */
/* #region TEMPLATES → Callout */
/* ============ */
/* all variants */
/* callout container */
.cosmo-callout-container {
display: flex;
/* default margin for paragraphs */
margin: 0.5rem 0;
}
/* regular variant */
:root {
/* bg opacity */
--callout-opacity: 5%;
/* opacity of all borders */
--callout--border-opacity: 85%;
}
/* callout (non-compact) */
.cosmo-callout {
display: flex;
align-items: center;
/* color is set by variants */
border: 1px solid;
/* color is set by variants */
border-left: 7px solid;
border-radius: 5px;
/* margin is provided by the container */
margin: 0;
padding-right: 6px;
width: fit-content;
}
/* callout (non-compact) → content block */
.cosmo-callout .cosmo-callout--content {
display: flex;
flex-direction: column;
margin: 2px 2px 2px 0;
line-height: 1.4;
}
/* callout (non-compact) → content block → text content */
.cosmo-callout .cosmo-callout--content .cosmo-callout--text {
/* break long words on small resolutions */
word-break: break-word;
color: var(--color-cosmoBlue);
}
/* callout (non-compact) → content block → title */
.cosmo-callout .cosmo-callout--content .cosmo-callout--title {
margin: 0;
font-weight: bold;
}
/* compact variant */
:root {
--callout-compact--border-opacity: 60%;
--callout-compact--dotted-delimiter-border-opacity: 75%;
/* the opacity of the bg where the icon and the title sit */
--callout-compact--label-opacity: 20%;
}
/* callout (compact) */
.cosmo-callout-compact {
display: flex;
width: fit-content;
border: 2px solid;
border-radius: 0.25rem;
/* margin is provided by the container
!important overrides the default without needing to use more specific selector */
margin: 0 !important;
}
/* callout (compact) → icon and title wrapper */
.cosmo-callout-compact--icon-and-title-wrapper {
display: flex;
align-items: center;
padding-right: 8px;
padding-left: 0.25rem;
border-right: 1px dotted;
}
/* callout (compact) → icon and title wrapper → title */
.cosmo-callout-compact--title {
font-weight: bold;
}
/* callout (compact) → text content */
.cosmo-callout-compact--text {
color: var(--color-cosmoBlue);
padding: 0.4rem;
word-break: break-word;
}
/* #endregion */
/* ============ */
/* #region TEMPLATES → InfoBoxes */
/* ============ */
/* ------- Main Infobox Tabs ----------------------------------------------------------------- */
/* These are the ones above infoboxes, like on the Hyperdrive pages */
.tabbedinfobox {
float: right;
width: calc(var(--pi-width) + 10px);
clear: none;
margin-left: 20px;
}
.tabbedinfobox .tabber__tab[aria-selected="true"],
.tabber__tab[aria-selected="true"]:visited {
color: white;
background-color: var(--color-border);
border-radius: 5px;
}
.tabbedinfobox .tabber__tab {
color: var(--color-cosmoGreen);
}
.tabbedinfobox .tabber__tabs {
justify-content: center;
flex-wrap: wrap;
}
.tabbedinfobox .tabber__indicator {
background: var(--color-strongBlue);
}
.tabbedinfobox .tabber__header {
box-shadow: inset 0 -1px 0 0 var(--color-border);
}
/* ------- Infobox Image Tabs ---------------------------------------------------------------- */
/* These are the tabs used to switch between images, like on ship pages */
.pi-section-navigation .pi-section-tab.pi-section-active {
background: var(--color-border);
}
.pi-section-navigation .pi-section-tab {
background-color: transparent;
border: 1px solid var(--color-border);
border-radius: 0 0 10px 10px;
}
.vector-body blockquote {
border-left: 4px solid var(--color-strongBlue);
}
/* OTHER INFOBOX STUFF */
/* infobox → data item (container for label and value)
it has "display: flex" */
.pi-item.pi-data {
align-items: center;
}
/* infobox → data item → label */
.pi-item.pi-data > *:first-child {
/* disable the centering align set previously */
align-self: flex-start;
}
/* #endregion */
/* ============ */
/* #region TEMPLATES → 🎨COLOR LABELS🎨 */
/* ============ */
.color-label {
display: inline-block;
border: 1px solid var(--color-border);
padding: 0px 3px 2px 4px;
border-radius: 0.2rem;
margin: -1px 0px -3px 0px;
text-wrap: nowrap;
}
/* color label → label */
.color-label-name {
/* offset from the color rect */
margin-right: 0.3rem;
}
/* color label → color rect */
.color-label-color {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
border-radius: 2px;
margin-right: 0.15rem;
}
/* color label → color name */
.color-label-color-code {
font-family: monospace;
}
/* #endregion */
/* ============ */
/* #region TEMPLATES → TOC */
/* ============ */
/* nearby pages toc */
.nearby-pages-toc {
float: right;
/* alows to stack TOCs */
clear: right;
max-width: 30rem;
border: 1px solid var(--color-border);
padding: 0 0.75rem;
box-sizing: border-box;
margin-left: 1rem;
margin-bottom: 1rem;
/* copied from regular toc */
background-color: transparent;
color: var(--color-cosmoBlue);
border: 1px var(--color-border) solid;
border-image-source: var(--theme-site-borderImage);
border-image-slice: 14 fill;
border-image-width: 14;
border-image-outset: 13;
}
/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (max-width: 961px) {
/* nearby pages toc */
.nearby-pages-toc {
/* disables float on small resolutions, so the text around it goes below the toc block
instead of to the side, wrapping on each word. */
float: none;
/* removes the left margin, so the block won't appear offset to the right without the float. */
margin-left: 0;
/* add some margin to separate from any content that might be above */
margin-top: 1rem;
}
}
/* nearby pages toc → header */
.nearby-pages-toc .nearby-pages-toc-title {
display: block;
margin: 0.5rem;
color: var(--color-strongBlue);
font-family: play, sans-serif;
font-weight: bold;
font-size: large;
text-align: center;
background-image: linear-gradient(
to right,
rgba(200, 204, 209, 0) 0,
#c8ccd1 33%,
#c8ccd1 66%,
rgba(200, 204, 209, 0) 100%
);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% 1px;
background-color: transparent;
border-color: transparent;
}
/* nearby pages toc → content → list container */
.nearby-pages-toc .nearby-pages-toc-content ul {
list-style-type: disc;
list-style-position: inside;
}
/* nearby pages toc level limits. allows to hide headers of certain level.
the count starts from the level 2 header = .toclevel-1 */
/* hide all links under level 2 header */
.toclimit-2 .toclevel-1 ul,
/* hide all links under level 3 header */
.toclimit-3 .toclevel-2 ul,
/* hide all links under level 4 header */
.toclimit-4 .toclevel-3 ul,
/* hide all links under level 5 header */
.toclimit-5 .toclevel-4 ul {
display: none;
}
/* #endregion */
/* ============ */
/* #region TEMPLATES → Image Banner */
/* ============ */
/*
css variables provided by the template:
* --banner--font-size-mult - multiplier for the font size of banner headings
* --banner--img-offset-x - horizontal offset for the image
* --banner--img-offset-y - vertical offset for the image
* --banner--img-height - height of the image
* --banner--header-wrapper-backdrop-blur - backdrop blur for the header wrapper
*/
/* banner → image container */
.img-banner p:has(img) {
/* remove default margin, since it will interfere with inner positioning */
margin: 0;
}
/* banner → header */
.img-banner h2 { font-size: calc(var(--h2-font-size) * var(--banner--font-size-mult)); }
.img-banner h3 { font-size: calc(var(--h3-font-size) * var(--banner--font-size-mult)); }
.img-banner h4 { font-size: calc(var(--h4-font-size) * var(--banner--font-size-mult)); }
.img-banner h5 { font-size: calc(var(--h5-font-size) * var(--banner--font-size-mult)); }
.img-banner h6 { font-size: calc(var(--h6-font-size) * var(--banner--font-size-mult)); }
/* banner → header wrapper */
.img-banner > .img-banner-header-wrapper {
backdrop-filter: blur(var(--banner--header-wrapper-backdrop-blur));
}
/* #endregion */
/* #endregion */
/* ============ */
/* #region EXTENSIONS */
/* ============ */
/* ============ */
/* #region EXTENSIONS → Tooltips */
/* ============ */
/* Container */
.cosmoTooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted var(--color-strongBlue);
}
.cosmoTooltip .cosmoTooltipText {
visibility: hidden;
background-color: #000000cf;
color: #fff;
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-radius: 6px;
border: 1px var(--color-border) solid;
border-image-source: var(--theme-site-borderImage);
border-image-slice: 14 fill;
border-image-width: 14;
border-image-outset: 9;
min-width: 120px;
max-width: 300px;
padding: 5px 10px 5px 10px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 0.5s;
}
.cosmoTooltip:hover .cosmoTooltipText {
visibility: visible;
opacity: 1;
}
/* inline tooltip → underlying text */
.simple-tooltip-inline {
/* remove extensions defaults */
border-bottom: none;
text-decoration: 1px underline dashed var(--color-strongBlue);
text-underline-position: under;
}
/* inline tooltip → tooltip block */
.tooltipster-base {
/* !important overrides the inline style set by default */
/* TODO: set inline in the template */
/* max-width: 600px !important; */
/* by default, the tooltip block width is 400px, and it has "left" offset that accounts for its size */
/* to keep the offset centered at the middle of the tooltiped text, we need to additionaly offset */
/* the element to account for any extra (or lacking) width */
/* TODO: set inline in the template */
/* transform: translate((max-width - 400px) / 2); */
background-color: #000000cf;
color: #fff;
padding: 5px 0;
border-radius: 6px;
border: 1px var(--color-border) solid;
border-image-source: var(--theme-site-borderImage);
border-image-slice: 14 fill;
border-image-width: 14;
border-image-outset: 9;
min-width: 120px;
padding: 5px 10px 5px 10px;
}
/* inline tooltip → tooltip block → tooltip text */
.tooltipster-base .tooltipster-content {
/* remove extensions defaults */
color: var(--color-cosmoBlue);
/* inherits «play» */
font-family: inherit;
font-size: small;
/* same as regular text */
line-height: 1.6;
padding: 0;
/* remove the wiki default */
margin: 0;
}
/* #endregion */
/* ================================================ */
/* #region EXTENSIONS → <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-block-bg);
color: var(--code-block-text-color);
border-color: var(--code-block-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--dark);
}
.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 EXTENSIONS → Popups */
/* (copied from the embedded stylesheet) */
/* ============ */
:root {
--popups--bg-color: color-mix(in srgb,
var(--info-color--slightly-lighter) 21%,
var(--gray)
);
--popups--bg-color--hover: color-mix(in srgb,
var(--popups--bg-color) 80%,
white
);
--popups--bg-color--active: color-mix(in srgb,
var(--popups--bg-color) 70%,
white
);
}
/* popup */
.mwe-popups {
/* override default */
background: none;
background-color: var(--popups--bg-color);
}
/* popup (inner container) */
.mwe-popups .mwe-popups-container {
color: var(--color-cosmoBlue);
}
/* popup → settings icon → icon */
.mwe-popups .mwe-popups-settings-icon .mw-ui-icon::before,
/* popup (error state) → error icon */
.mwe-popups .mwe-popups-container .mw-ui-icon-preview-generic::before {
filter: invert(100%);
}
/* popup (error state) → error icon (container) */
.mwe-popups .mwe-popups-container .mw-ui-icon-preview-generic {
/* default is .25 */
opacity: .35;
}
/* popup → settings icon (a) hover */
.mwe-popups .mwe-popups-settings-icon:hover {
background-color: var(--popups--bg-color--hover);
}
/* popup → settings icon (a) active */
.mwe-popups .mwe-popups-settings-icon:active {
background-color: var(--popups--bg-color--active);
opacity: 1;
}
/* popup → extracted content */
.mwe-popups .mwe-popups-extract {
color: var(--color-cosmoBlue);
}
/* popup → ellipsis (but in form of a gradient) */
.mwe-popups .mwe-popups-extract[dir="ltr"]:after {
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 0),
var(--popups--bg-color) 50%
);
}
/* popup → ellipsis (but in form of a gradient) */
.mwe-popups .mwe-popups-extract[dir="rtl"]:after {
background-image: linear-gradient(
to left,
rgba(255, 255, 255, 0),
var(--popups--bg-color) 50%
);
}
/* popup → ???? quote or someething? */
.mwe-popups .mwe-popups-extract blockquote:after {
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0),
var(--popups--bg-color) 75%
);
}
/* ???? */
@supports (clip-path: polygon(1px 1px)) {
.mwe-popups .mwe-popups-container {
background-color: var(--popups--bg-color);
}
}
/* ???? maybe something ellipsis-like? */
.mwe-popups.mwe-popups-type-reference .mwe-popups-extract .mwe-popups-fade {
background-image: linear-gradient(
rgba(255, 255, 255, 0),
var(--popups--bg-color)
);
}
/* ???? */
.mwe-popups-overlay {
background-color: color-mix(in srgb, var(--popups--bg-color) 90%, transparent);
}
/* #endregion */
/* #endregion */
/* ============ */
/* #region =📕= SOURCE EDITOR =📕= */
/* ============ */
:root {
--se-mode-icon: 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%20Wikitext%20%3C%2Ftitle%3E%3Cg%20fill%3D%22rgb(10%2C%20212%2C%2098)%22%3E%3Cpath%20d%3D%22M1%203v14h3v-2H3V5h1V3zm4%200v14h4v-2H7V5h2V3zm11%200v2h1v10h-1v2h3V3zm-5%200v2h2v10h-2v2h4V3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
/* page editor content */
.wikiEditor-ui-bottom textarea {
background-color: var(--gray--slightly-darker);
color: var(--color-cosmoBlue);
}
/* page editor footer section */
.editOptions {
background-color: var(--gray);
color: var(--color-cosmoBlue);
}
/* page editor footer section → edit summary */
.editOptions input#wpSummary {
background-color: var(--gray--slightly-darker);
color: var(--color-cosmoBlue);
}
/* page editor footer section "save changes" button */
.editOptions .editButtons .oo-ui-buttonElement-button#wpSave {
background-color: var(--action-color);
border-color: var(--color-border);
}
/* page editor footer section "save changes" button hover */
.editOptions .editButtons .oo-ui-buttonElement-button#wpSave:hover {
background-color: var(--action-color--slightly-lighter);
}
/* page editor footer section "save changes" button active */
.editOptions .editButtons .oo-ui-buttonElement-button#wpSave:active {
background-color: var(--action-color--dark);
}
/* page editor footer section "show preview/changes" buttons */
.editOptions .editButtons .oo-ui-buttonElement-button#wpPreview,
.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(--gray) !important;
color: var(--color-cosmoBlue) !important;
border: 1px solid var(--gray--lighter) !important;
}
/* page editor → footer section → show preview/changes buttons hover */
.editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:hover,
.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(--gray--slightly-lighter) !important;
/* override of the default selector */
color: var(--color-cosmoBlue) !important;
}
/* page editor → footer section → show preview/changes buttons active */
.editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:active,
.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(--gray--slightly-darker) !important;
/* override of the default selector */
color: var(--color-cosmoBlue) !important;
}
/* text editor toolbar */
.wikiEditor-ui-toolbar {
background-color: var(--gray);
color: var(--color-cosmoBlue);
}
/* 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(--gray--light) !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(--gray--lighter);
}
/* 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(--color-cosmoBlue);
filter: brightness(80%);
}
/* text editor toolbar labels with .tool-select class (they act as select) */
.wikiEditor-ui-toolbar .group .tool-select .label {
color: var(--color-cosmoBlue);
filter: none;
}
/* text editor toolbar label (that acts as select) options container */
.wikiEditor-ui-toolbar .group .tool-select .options {
background-color: var(--gray--slightly-lighter);
}
/* 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(--color-cosmoBlue);
/* 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(--color-cosmoBlue);
background-color: var(--gray);
/* 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(--gray--slightly-lighter);
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: 1px solid var(--gray--lighter);
}
/* text editor toolbar → group lists inside tabs → active option */
.wikiEditor-ui-toolbar .booklet > .index > .current {
color: var(--color-cosmoBlue);
background-color: var(--gray--lighter);
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(--color-strongBlue);
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(--color-cosmoBlue);
background-color: var(--gray--light);
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(--gray--slightly-darker);
border-color: var(--color-border-alt);
}
/* editor footer → checkbox hover */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:hover + span {
border-color: var(--action-color--light);
}
/* editor footer → checkbox active */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
[type="checkbox"]:active
+ span {
background-color: var(--action-color--dark);
/* same as the bg color to make it seamless
!important here overrides the more lighter color in hover state*/
border-color: var(--action-color--dark) !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--darker); */
}
/* editor footer → checkbox (checked) */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
[type="checkbox"]:checked
+ span {
background-color: var(--action-color);
}
/* editor footer → checkbox (checked) hover */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
[type="checkbox"]:checked
+ span {
background-color: var(--action-color--slightly-lighter);
}
/* editor footer → checkbox (checked) active */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
[type="checkbox"]:checked
+ span {
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(--color-cosmoBlue);
}
/* override for page editor toolbar → help tab → table → td */
.wikiEditor-ui-toolbar .page-table td {
color: var(--color-cosmoBlue);
}
/* 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: var(--text-editor-toolbar-tab-section-height);
}
/* editor → toolbar → mode switch button → popup (that opens on click) */
.wikiEditor-ui-toolbar .oo-ui-popupToolGroup-tools {
background-color: var(--gray);
}
/* 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(--color-cosmoBlue);
}
/* 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(--color-cosmoBlue);
background-color: var(--gray--slightly-lighter);
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(--gray--light);
}
/* 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(--gray--light);
}
/* 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(--color-strongBlue);
}
/* 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(--color-cosmoGreen);
}
/* 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 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(--gray--slightly-darker);
/* same color as for code block */
--se-cm--gutter-bg-color: var(--gray);
/* 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);
/* link itself */
--se-cm--link-color: hsl(146, 80%, 35%);
/* link delimiter */
--se-cm--cm-mw-link-delimiter: var(--se-cm--template-delimiter-color);
/* link text */
--se-cm--link-text-color: var(--color-cosmoGreen);
--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: var(--color-cosmoBlue--darker);
/* 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: var(--color-cosmoBlue--darker);
/* 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(--color-strongBlue);
/* 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(--color-cosmoBlue);
}
/* 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(--color-border);
}
/* 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 " " */
.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;
}
/* #endregion */
/* #endregion */
/* ============ */
/* #region =🖌️= VISUAL EDITOR =🖌️= */
/* ============ */
:root {
--ve-cosmoBlueBright: #09abf1;
}
/* visual editor toolbar */
.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
/* this fixes the sticky toolbar not being visible because of wiki.gg banner */
top: 35px;
}
/* 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),
url(/images/8/81/Template_icon_light.svg);
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;
/* match the visual editor toolbar height after the load to prevent any shifting around. */
height: 52px;
}
/* visual editor → editor loading → progress bar (bg) */
.ve-init-mw-progressBarWidget {
/* offsetting it below the navbar, so it doesn't overlap with both the toolbar and the page */
margin-top: 2.6rem;
background-color: var(--gray--slightly-lighter);
}
/* visual editor → editor loading → progress bar (loading stripe) */
.ve-init-mw-progressBarWidget .ve-init-mw-progressBarWidget-bar {
background-color: var(--action-color);
}
/* visual editor → editor loading → sliding vertical line */
.ve-init-mw-desktopArticleTarget-toolbarPlaceholder-bar {
/* just for some alignment just under the navbar instead of more downwards position */
height: 35px;
}
/* visual editor → toolbar (left part) */
.ve-init-target-visual > .oo-ui-toolbar > .oo-ui-toolbar-bar {
background-color: var(--gray);
color: var(--color-cosmoBlue);
}
/* 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-toolbar-actions .ve-ui-toolbar-group-save .oo-ui-toolGroup-tools .oo-ui-widget.oo-ui-widget-disabled .ve-ui-toolbar-saveButton,
/* visual editor → toolbar (right part) → «save changes» button (disabled, when no changes were made yet) → label */
.oo-ui-toolbar-actions .ve-ui-toolbar-group-save .oo-ui-toolGroup-tools .oo-ui-widget.oo-ui-widget-disabled .ve-ui-toolbar-saveButton .oo-ui-tool-title {
color: var(--color-cosmoBlue--slightly-darker);
/* 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;
}
/* visual editor → toolbar (right part) → «save changes» button (disabled, when no changes were made yet) */
.oo-ui-toolbar-actions .ve-ui-toolbar-group-save .oo-ui-toolGroup-tools .oo-ui-widget.oo-ui-widget-disabled .ve-ui-toolbar-saveButton {
background-color: var(--action-color-inactive);
}
/* 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);
}
/* 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);
}
/* 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(--color-cosmoBlue);
}
/* 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(--gray--light);
/* 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: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPiA8dGl0bGU+dGFiYmVyPC90aXRsZT4gPHBhdGggZmlsbD0iIzA5YWJmMSIgZD0iTTE4IDJIMkMuOSAyIDAgMi45IDAgNHYxMmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjRjMC0xLjEtLjktMi0yLTJ6bTEgNWgtOGMtLjYgMC0xLS40LTEtMVYzaDhjLjYgMCAxIC40IDEgMXYzeiIvPiA8L3N2Zz4=");
}
/* 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(--gray--lighter);
}
/* 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(--ve-cosmoBlueBright);
/* some glow for more readability (also looks like it from the game!) */
text-shadow: 0 0 2px var(--ve-cosmoBlueBright);
}
/* visual editor → tool popups */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools {
background-color: var(--gray--slightly-lighter);
}
/* visual editor → tool popups → button (span) */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool {
background-color: var(--gray--slightly-lighter);
}
/* visual editor → tool popups → button (span) hover */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool:hover {
background-color: var(--gray--light);
}
/* 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(--gray--lighter);
}
/* 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(--color-cosmoBlue);
}
/* 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(--gray--lighter);
}
/* 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(--color-cosmoGreen);
}
/* 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(--gray) 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(--gray);
color: var(--color-cosmoBlue);
border-color: var(--gray--lighter);
}
/* visual editor → modal head */
.oo-ui-windowManager-modal .oo-ui-window-head {
background-color: var(--gray--slightly-lighter);
color: var(--color-cosmoBlue);
/* lighter than the usual border color - for visibility */
outline-color: var(--gray--very-light);
}
/* 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(--color-cosmoBlue);
background-color: var(--action-color-inactive);
border-color: var(--gray--lighter);
}
/* 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(--color-cosmoBlue);
background-color: var(--action-color);
border-color: var(--gray--very-light);
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(--color-cosmoBlue);
background-color: var(--action-color--light);
border-color: var(--gray--very-light);
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(--color-cosmoBlue);
background-color: var(--action-color--dark);
border-color: var(--gray--very-light);
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(--gray--light);
border-color: var(--gray--lighter);
}
/* 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(--color-strongBlue);
}
/* 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(--gray--very-light);
}
/* 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),
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHRpdGxlPiBhbGVydCA8L3RpdGxlPiA8cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Ik02IDBhNiA2IDAgMCAwLTYgNiA2IDYgMCAwIDAgNiA2IDYgNiAwIDAgMCA2LTYgNiA2IDAgMCAwLTYtNnpNNSAyaDJ2NUg1VjJ6bTAgNmgydjJINVY4eiIvPiA8L3N2Zz4=");
}
/* 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),
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGV4dGVybmFsIGxpbmsgPC90aXRsZT48cGF0aCBmaWxsPSJyZ2IoMTAsIDIxMiwgOTgpIiBkPSJNMTcgMTdIM1YzaDVWMUgzYTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0ydi01aC0yeiIvPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Im0xMSAxIDMuMjkgMy4yOS01LjczIDUuNzMgMS40MiAxLjQyIDUuNzMtNS43M0wxOSA5VjF6Ii8+PC9zdmc+");
}
/* visual editor → modal → param description block (like a template param) → entries */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > p {
color: var(--color-cosmoBlue);
}
/* 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(--gray--very-light);
}
/* visual editor → modal (template) → template description hr */
.oo-ui-windowManager-modal .ve-ui-mwTemplatePage-description hr {
background-color: var(--gray--very-light);
}
/* visual editor → modal → param input (type=text) */
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
color: var(--color-cosmoBlue);
background-color: var(--gray--slightly-darker);
border: 1px solid var(--gray--light);
}
/* visual editor → modal → param input (type=text) placeholder */
.oo-ui-windowManager-modal .oo-ui-widget-enabled .oo-ui-inputWidget-input::placeholder {
color: var(--gray--very-light);
}
/* 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(--gray--lighter);
}
/* 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(--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(--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),
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IHJlcXVpcmVkIDwvdGl0bGU+PHBhdGggZmlsbD0iaHNsKDM5LCAxMDAlLCA1MCUpIiBkPSJNOC41IDBoM3YyMGgtM3oiLz48cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Ik0xOS40IDEzLjcgMTggMTYuMy42IDYuMyAyIDMuN3oiLz48cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Im0xOCAzLjcgMS40IDIuNi0xNy4zIDEwLTEuNS0yLjZ6Ii8+PC9zdmc+");
}
/* 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(--gray);
border-color: var(--gray--light);
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(--gray--slightly-lighter);
/* default override */
border-color: var(--gray--lighter);
}
/* 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(--gray--slightly-lighter);
}
/* 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(--color-cosmoBlue);
}
/* visual editor → modal → "add undocumented paramter" block → description */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-inline-help {
color: var(--gray--very-light);
}
/* 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(--gray--very-light);
}
/* 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(--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(--red--slightly-lighter);
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(--red--slightly-darker);
transition: background-color 100ms ease-out;
}
/* visual editor → modal → left menu */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu {
border-color: var(--gray--light);
}
/* visual editor → modal → left menu → search block */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky {
/* override default */
background-color: var(--gray);
}
/* 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(--gray--very-light);
}
/* 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);
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--very-light);
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(--color-cosmoBlue);
background-color: var(--gray);
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(--gray--lighter);
border-color: var(--gray--very-light);
}
/* visual editor → modal → left menu → params container → item hover */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > *:hover {
color: var(--color-cosmoBlue);
background-color: var(--gray--slightly-lighter);
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(--color-cosmoBlue);
}
/* visual editor → modal → popup windows and such */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable {
background-color: var(--gray--slightly-lighter);
border-color: var(--gray--lighter);
}
/* visual editor → modal → popup windows and such → item */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled {
background-color: var(--gray--slightly-lighter);
color: var(--color-cosmoBlue);
}
/* 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(--gray--light);
}
/* 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(--color-strongBlue);
text-shadow: 0 0 2px var(--ve-cosmoBlueBright);
background-color: var(--gray--lighter);
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(--color-cosmoBlue);
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(--gray--light);
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(--color-cosmoBlue);
/* 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(--gray--lighter);
}
/** 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);
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(--color-cosmoBlue);
}
/* 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(--gray--lighter);
}
/* visual editor → popups */
.oo-ui-popupWidget-popup {
background-color: var(--gray--slightly-lighter);
color: var(--color-cosmoBlue);
border-color: var(--color-border);
}
/* #endregion */
/* #endregion */
/* ============ */
/* #region PAGE DIFF */
/* ============ */
/* page versions diff → diff entry (one cell) */
.diff .diff-context {
background: var(--code-block-bg);
color: var(--color-cosmoBlue);
}
/* page versions diff → cell (deleted text) */
.diff .diff-deletedline {
background-color: var(--gray--slightly-darker);
/* color already set to cosmoBlue with "table" selector */
}
/* page versions diff → cell (added text) */
.diff .diff-addedline {
background-color: var(--gray--slightly-darker);
/* color already set to cosmoBlue with "table" selector */
}
/* page versions diff → cell → inline diff */
.diff .diffchange-inline {
background-color: var(--gray--lighter);
/* color already set to cosmoBlue with "table" selector */
}
/* #endregion */
/* ============ */
/* #region PAGE VERSION HISTORY & RECENT CHANGES PAGE (Special:RecentChanges) */
/* ============ */
/* page history → selected revisions */
#pagehistory li.selected {
background-color: var(--gray--light);
color: var(--color-cosmoBlue);
outline: none;
border-radius: 3px;
box-shadow: 0 0 3px var(--gray--lighter);
}
/* page history → selected revisions → page anchor name */
#pagehistory li.selected .autocomment a {
/* just the gray that was used there already,
but a bit brighter to provide some better visual clarity */
color: hsl(212, 5%, 70%);
}
/* page history → changes counter symbol (negative) */
#pagehistory .mw-plusminus-neg,
/* recent changes → changes counter symbol (negative) */
.mw-changeslist .mw-plusminus-neg {
/* more visible red */
color: var(--red);
}
/* page history → selected revisions → changes counter symbol (negative) */
#pagehistory li.selected .mw-plusminus-neg {
--bg-col: color-mix(in srgb, var(--code-block-bg) 100%, transparent);
color: red;
background-color: var(--bg-col);
border-radius: 2px;
outline: 2px solid var(--bg-col);
}
/* page history → changes counter symbol (positive) */
#pagehistory .mw-plusminus-pos,
/* recent changes → changes counter symbol (positive) */
.mw-changeslist .mw-plusminus-pos {
/* more visible green */
color: var(--color-cosmoGreen--slightly-darker);
}
/* page history → selected revisions → changes counter symbol (positive) */
#pagehistory li.selected .mw-plusminus-pos {
color: var(--color-cosmoGreen--slightly-lighter);
}
/* page history → separator (the two dots: «..») */
#pagehistory .mw-changeslist-separator,
/* recent changes page → separator (the two dots: «..») */
.mw-changeslist .mw-changeslist-separator {
color: var(--gray--lighter);
}
/* page history → «compare selected» button */
#mw-history-compare .mw-ui-button.historysubmit,
/* page history → filter → «Tag filter» input → dropdown button */
.mw-body-content:has(#mw-history-compare) #mw-history-searchform .oo-ui-textInputWidget .oo-ui-buttonElement-button {
background-color: var(--gray);
color: var(--color-cosmoBlue);
border-color: var(--gray--lighter);
}
/* page history → «compare selected» button on hover */
#mw-history-compare .mw-ui-button.historysubmit:hover,
/* page history → filter → «Tag filter» input → dropdown button */
.mw-body-content:has(#mw-history-compare) #mw-history-searchform .oo-ui-textInputWidget .oo-ui-buttonElement-button {
background-color: var(--gray--slightly-lighter);
/* override of the default selector */
color: var(--color-cosmoBlue);
}
/* page history → «compare selected» button on active */
#mw-history-compare .mw-ui-button.historysubmit:active,
/* page history → filter → «Tag filter» input → dropdown button */
.mw-body-content:has(#mw-history-compare) #mw-history-searchform .oo-ui-textInputWidget .oo-ui-buttonElement-button {
background-color: var(--gray--slightly-darker);
/* override of the default selector */
color: var(--color-cosmoBlue);
}
/* page history → filter → «Tag filter» input → dropdown button → icon */
.mw-body-content:has(#mw-history-compare) #mw-history-searchform .oo-ui-textInputWidget .oo-ui-buttonElement-button .oo-ui-indicator-down,
/* page history → filter → header → arrow icon */
.mw-body-content:has(#mw-history-compare) #mw-history-searchform .oo-ui-fieldsetLayout-header .oo-ui-iconElement {
filter: invert(100%);
}
/* page history → filter → «to date» input */
.mw-body-content:has(#mw-history-compare) #mw-history-searchform .mw-widget-dateInputWidget-handle,
/* page history → filter → «Tag filter» input */
.mw-body-content:has(#mw-history-compare) #mw-history-searchform .oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--gray--slightly-darker);
color: var(--color-cosmoBlue);
border-color: var(--gray--lighter);
}
/* page history → «updated since your last visit» tag */
#pagehistory .updatedmarker {
background-color: var(--action-color--dark);
border-radius: 2px;
padding: 0 2px;
}
/* recent changes section
some of the styles are present above */
:root {
--rc-chgs--entry-padding: .2rem;
--rc-chgs--entry-border-radius: .2rem;
}
/* recent changes page → legend */
.mw-changeslist .mw-changeslist-legend {
background-color: var(--gray);
border-color: var(--color-border);
}
/* recent changes page (grouping mode) → entry */
.mw-changeslist > div > .mw-changeslist-line tr {
/* remove styled table borders */
background-image: none;
}
/* recent changes page (non-grouping mode) → entry */
.mw-changeslist li.mw-changeslist-line {
padding: var(--rc-chgs--entry-padding);
border-radius: var(--rc-chgs--entry-border-radius);
}
/* recent changes page (grouping mode) → entry in grouping mode → cell */
.mw-changeslist > div > .mw-changeslist-line tr td {
/* only add the vertical padding, as horizontal would create gaps between all cells */
padding: var(--rc-chgs--entry-padding) 0;
}
/* recent changes page (grouping mode) → entry */
.mw-changeslist > div > .mw-changeslist-line tr {
/* the "tr" doesn't actually apply corner rounding.
this is set for the outline to be rounded too. */
border-radius: var(--rc-chgs--entry-border-radius);
}
/* recent changes page (non-grouping mode) → entry hover */
.mw-changeslist li.mw-changeslist-line:not(.mw-collapsible):hover,
/* recent changes page (grouping mode) → entry hover */
.mw-changeslist > div > .mw-changeslist-line tr:hover {
outline: 1px solid var(--color-cosmoBlue);
}
/* recent changes page (grouping mode) → block with nested entries (expanded)
(targeting tbody here because table (the .mw-changeslist-line.) doesn't like border-radius */
.mw-changeslist > div > .mw-changeslist-line.mw-collapsible:not(.mw-collapsed) tbody {
outline: 1px solid var(--action-color--light);
border-radius: var(--rc-chgs--entry-border-radius);
}
/* recent changes page (grouping mode) → entry → first cell */
.mw-changeslist > div > .mw-changeslist-line tr > td:first-child {
border-top-left-radius: var(--rc-chgs--entry-border-radius);
border-bottom-left-radius: var(--rc-chgs--entry-border-radius);
}
/* recent changes page (grouping mode) → entry → last cell */
.mw-changeslist > div > .mw-changeslist-line tr > td:last-child {
/* add right padding to the last cell, since that padding is set to 0 by previous rule */
padding-right: var(--rc-chgs--entry-padding);
border-top-right-radius: var(--rc-chgs--entry-border-radius);
border-bottom-right-radius: var(--rc-chgs--entry-border-radius);
/* the table limits how big it contents can be horizontally-wide,
so this just makes all rows as wide as possible, stretching the cell containing the content. */
width: 100vw;
}
/* recent changes page (non-grouping mode) → odd entry */
.mw-changeslist li.mw-changeslist-line:not(.mw-collapsible):nth-child(odd),
/* recent changes page (grouping mode) → odd entry (top level) → cell */
.mw-changeslist > div > .mw-changeslist-line:nth-child(odd) tr:first-child td,
/* recent changes page (grouping mode) → even entry (top level) → collapsable odd entry → cell
(sine the "tr" start with non-collapsible entries, the odd-even are switched) */
.mw-changeslist > div > .mw-changeslist-line:nth-child(even) tr + tr:nth-child(even) td,
/* recent changes page (grouping mode) → odd entry (top level) → collapsable even entry → cell
(sine the "tr" start with non-collapsible entries, the odd-even are switched) */
.mw-changeslist > div > .mw-changeslist-line:nth-child(odd) tr + tr:nth-child(odd) td {
/* light variant */
background-color: color-mix(in srgb, var(--gray--light) 50%, transparent);
}
/* recent changes page (non-grouping mode) → even entry */
.mw-changeslist li.mw-changeslist-line:not(.mw-collapsible):nth-child(even),
/* recent changes page (grouping mode) → even entry (top level) → cell */
.mw-changeslist > div > .mw-changeslist-line:nth-child(even) tr:first-child td,
/* recent changes page (grouping mode) → even entry (top level) → collapsable even entry → cell
(sine the "tr" start with non-collapsible entries, the odd-even are switched) */
.mw-changeslist > div > .mw-changeslist-line:nth-child(even) tr + tr:nth-child(odd) td,
/* recent changes page (grouping mode) → odd entry (top level) → collapsable odd entry → cell
(sine the "tr" start with non-collapsible entries, the odd-even are switched) */
.mw-changeslist > div > .mw-changeslist-line:nth-child(odd) tr + tr:nth-child(even) td {
/* dark variant */
background-color: color-mix(in srgb, var(--gray--light) 10%, transparent);
}
/* recent changes page (non-grouping mode) → odd entry → autocomment */
.mw-changeslist li.mw-changeslist-line:not(.mw-collapsible):nth-child(odd) .autocomment a,
/* recent changes page (grouping mode) → odd entry (top level)→ autocomment */
.mw-changeslist > div > .mw-changeslist-line:nth-child(odd) tr:first-child .autocomment a,
/* recent changes page (grouping mode) → even entry (top level) → collapsable odd entry → autocomment
(sine the "tr" start with non-collapsible entries, the odd-even are switched) */
.mw-changeslist > div > .mw-changeslist-line:nth-child(even) tr + tr:nth-child(even) .autocomment a,
/* recent changes page (grouping mode) → odd entry (top level) → collapsable even entry → autocomment
(sine the "tr" start with non-collapsible entries, the odd-even are switched) */
.mw-changeslist > div > .mw-changeslist-line:nth-child(odd) tr + tr:nth-child(odd) .autocomment a {
/* more legible */
filter: brightness(122%);
}
/* #endregion */
/* ============ */
/* #region Special:NewPages */
/* ============ */
/* new pages page → item (not patrolled) */
.not-patrolled {
--bg-col: var(--warning-color);
background-color: var(--bg-col);
border-radius: 3px;
box-shadow: 0 0 3px var(--bg-col);
}
/* #endregion */
/* ============ */
/* #region === BORDERS === */
/*
(not all border changes are there,
only thouse that require
drastically different selectors)
*/
/* ============ */
/* ============ */
/* #region =📕= SOURCE EDITOR =📕= */
/* ============ */
/* 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 */
.editOptions,
/* summary input */
.editOptions #wpSummary {
border: 1px solid var(--gray--light);
}
/* editor toolbar groups of buttons, except the last one */
.wikiEditor-ui-toolbar .group:not(:last-child) {
border-right: 1px solid var(--gray--light);
}
/* editor toolbar last groups of buttons */
.wikiEditor-ui-toolbar .group:last-child {
border-left: 1px solid var(--gray--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(--gray--light);
}
/* editor toolbar */
.wikiEditor-ui .wikiEditor-ui-top {
border-bottom: 1px solid var(--gray--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;
}
/* #endregion */
/* ============ */
/* #region =🐦= ALERTS & NOTICES POPUPS =🐦= */
/* ============ */
/* notifications popup */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup {
border-color: var(--info-color-border);
}
/* notifications popup → header */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-head,
/* notifications popup → body → item */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-body .mw-echo-ui-notificationItemWidget,
/* notifications popup → body → item → expanded → hamburger menu */
.mw-echo-ui-actionMenuPopupWidget-menu:has(.mw-echo-ui-menuItemWidget) {
/* not a preset variable border color because this needs
something more lighter to achieve visual clarity */
border-color: rgba(212, 236, 255, 0.45);
}
/* notifications popup → footer */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-popupWidget-footer,
/* notifications popup → footer → last (right) button (span) */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup>.oo-ui-popupWidget-popup>.oo-ui-popupWidget-footer .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement:last-child {
/* this is different from another rule for notif popus because the other rule doesn't property apply for some reason,
making for very eye-sore-y bright borders */
border-color: rgba(13, 54, 82, 0.68);
}
/* #endregion */
/* ============ */
/* #region =🖌️= VISUAL EDITOR =🖌️= */
/* ============ */
/* 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(--color-border-alt);
}
/* #endregion */
/* ============ */
/* #region OTHER */
/* ============ */
/* diff */
/* diff table */
table.diff {
/* it's "block" by default, which results in it
ignoring the width of the container. setting it back to "table"
contraints the width of content to what the parent elemets allows. */
display: table;
}
/* page versions diff → a diff row (two cells, left and right) */
.diff tr:not(.diff-title):not(.diff tr.diff-title + tr) {
/* disables the stylized borders */
background: none;
}
/* page versions diff → cell (unchanged) */
.diff .diff-context {
border-color: var(--code-block-border);
}
/* page versions diff → cell (deleted text) */
.diff .diff-deletedline {
border-color: var(--warning-color-border);
}
/* page versions diff → cell (added text) */
.diff .diff-addedline {
border-color: var(--color-cosmoGreen);
}
/* #endregion */
/* #endregion */
/* ============ */
/* #region =🫸🫷= OTHER STUFF =🫸🫷= */
/* ============ */
/* sign up stats block → stat number */
.mw-ui-container:has(#signupstart) .mw-createacct-benefits-list h3 {
color: var(--color-cosmoGreen);
}
/* sign up stats block → stat title */
.mw-ui-container:has(#signupstart) .mw-createacct-benefits-list p {
color: var(--color-cosmoBlue);
}
/* references block → selected reference */
.mw-references-wrap .references li:target {
/* an override */
background-color: var(--gray--light);
/* an addition */
border-radius: 4px;
}
/* quotes */
.vector-body blockquote {
/* a little bit less than the default */
margin-left: 2rem;
/* much less than the default */
padding-left: 1rem;
}
/* preformatted blocks
(this is an override for the default code blocks, which wiki
might use still in some places - currently, <syntaxhighlight>
tag is used, which has its own formatting. since this selector
is the least specific it could be, it shouldn't break anything) */
pre {
background-color: var(--code-block-bg);
color: var(--code-block-text);
border: 1px solid var(--code-block-border);
}
hr {
/* reset the current "visible" value to the default,
preventing it from overlapping with elements such as floating TOCs */
overflow: hidden;
}
/* TOTP setup page → qr code */
form[action="/wiki/Special:Manage_Two-factor_authentication"]
#mw-input-wpqrcode {
/* adds a white outline around the qr code, making it actually scannable */
outline: 0.4rem solid white;
}
/* script input in module editor */
#mw-scribunto-input {
font-family: monospace;
font-weight: normal;
color: var(--code-block-text);
background-color: var(--code-block-bg);
}
/* #endregion */