MediaWiki:Common.css
Jump to navigation
Jump to search
MediaWiki:Common.css is our main CSS styling page. There are a few subpages containing styling categories that take up quite a lot of space and thus make sense to have their own page. Note: these include a few CSS variables not used outside of these places. These subpages are loaded in using css imports and can be found here:
- MediaWiki:Common.css/Editor.css For styling related to the editors used on the wiki as well as the display of code blocks such CSS pages or anything affected by the SyntaxHighlight extension.
- MediaWiki:Common.css/Icons.css For style resetting all icons on the wiki to match the rest of our colors.
- MediaWiki:Common.css/MultiMediaViewer.css For the display of media shown by the MultiMediaViewer extension.
For wiki content specific styling (such as main page styling) see MediaWiki:Vector.css
Colors
Our wiki is set up to use CSS variables to make reusing the same colors easy.
| Variable Name | Color | Notes |
|---|---|---|
| Main and Accent colors | ||
| --primary-color | The main color basis | |
| --primary-color-darker | In most modern browsers is derived from --primary-color | |
| --primary-color-darkest | In most modern browsers is derived from --primary-color | |
| --secondary-color | The accent color basis | |
| --secondary-color-darker | In most modern browsers is derived from --secondary-color | |
| --secondary-color-darkest | In most modern browsers is derived from --secondary-color | |
| Text colors | ||
| --text-color | ||
| --text-color-lighter | For text with more contrast (lighter in dark themes, darker in light themes) | |
| --text-color-darker | For text with less contrast (darker in dark themes, lighter in light themes).
In most modern browsers is derived from --text-color | |
| Link colors | ||
| --blue-link-color | Primarily used for internal links that haven't been visited before | |
| --external-blue-link-color | Primarily used for external links that haven't been visited before | |
| --purple-link-color | Primarily used for internal links that have been visited before | |
| --external-purple-link-color | Primarily used for external links that have been visited before | |
| --red-link-color | Primarily used for internal links that lead to non-existant pages | |
| Infobox colors (pi = Portable Infobox) | ||
| --pi-background | ||
| --pi-border-color | ||
| --pi-secondary-background | ||
| Edit history & comparison colors | ||
| --history-change-green-color | ||
| --history-change-red-color | ||
| --history-change-grey-color | ||
| --change-removed-color | Used in edit comparison for lines that were removed | |
| --change-added-color | Used in edit comparison for lines that were added | |
This documentation can be edited at MediaWiki:Common.css/doc. Documentation inclusion is managed at MediaWiki:Clearyourcache.
Style changes not showing up
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.
@import url(https://survivorsofatlantis.wiki.gg/index.php?title=MediaWiki:Common.css/Editor.css&action=raw&ctype=text/css);
@import url(https://survivorsofatlantis.wiki.gg/index.php?title=MediaWiki:Common.css/Icons.css&action=raw&ctype=text/css);
@import url(https://survivorsofatlantis.wiki.gg/index.php?title=MediaWiki:Common.css/MultiMediaViewer.css&action=raw&ctype=text/css);
/* CSS placed here will be applied to all skins */
/* ====================[Color Definitions]==================== */
:root{
--primary-color:#483f3c;
--secondary-color:#eabe87;
--text-color:#e5e5e5;
--text-color-lighter:#fff;
--blue-link-color:#7faeff;
--external-blue-link-color:#5694ff;
--purple-link-color:#aba3ff;
--external-purple-link-color: #8f84ff;
--red-link-color:#ff8d8d;
--pi-background:rgba(20,20,20,0.2);
--pi-border-color:var(--secondary-color-darkest);
--pi-secondary-background:var(--primary-color-darkest);
--history-change-green-color:limegreen;
--history-change-red-color:#ff8d8d;
--history-change-grey-color:#a2a9b1;
--change-removed-color:#ff6060;
--change-added-color:limegreen
}
:root {
/* samsung internet doesn't yet support color-mix so it's getting offbrand colors >:( */
--primary-color-darker:#3a3331;
--primary-color-darkest:#2c2726;
--secondary-color-darker:#e6b170;
--secondary-color-darkest:#e2a55a;
--text-color-darker:#cccccc;
}
@supports(color:color-mix(in srgb,#fff,#000 15%)) {
:root {
--primary-color-darker:color-mix(in srgb,var(--primary-color),#000 15%);
--primary-color-darkest:color-mix(in srgb,var(--primary-color),#000 30%);
--secondary-color-darker:color-mix(in srgb,var(--secondary-color),#000 15%);
--secondary-color-darkest:color-mix(in srgb,var(--secondary-color),#000 45%);
--text-color-darker:color-mix(in srgb,var(--text-color),#000 30%);
}
}
/* make scrollbars on windows dark to be closer to our theme */
html {
color-scheme: dark light;
}
/* ====================[Style Resets]==================== */
table {
white-space: unset;
}
.ns-8 .mw-body-content table,
.mw-parser-output table {
display: inline-block;
max-width: 100%;
white-space: unset;
}
img {
image-rendering: pixelated;
}
/* ====================[Sidebar]==================== */
/* make sidebar scroll down with screen */
#mw-navigation {
display: inline;
}
#mw-panel {
position: sticky;
top: calc(var(--wikigg-header-height) + 3px);
}
/* logo */
.mw-wiki-logo {
background-size: contain;
}
/* ====================[UI Related]==================== */
body {
background-color: var(--primary-color-darker);
}
#wikigg-footer {
position: sticky;
top: 100%;
}
.vector-menu-tabs-legacy li {
background-image: linear-gradient(to top,var(--secondary-color) 0,color-mix(in srgb,var(--secondary-color) , transparent 80%) 1px,transparent 100%);
}
.vector-menu-tabs-legacy .selected {
background-color: var(--primary-color);
}
#mw-page-base {
background-image: linear-gradient(to bottom,var(--primary-color) 50%,var(--primary-color-darker) 100%);
background-color: var(--primary-color-darker);
}
.mw-ui-input {
border-color: var(--secondary-color);
/* use system ui colors to match our dark/light color-scheme without having to manually set them */
background-color: revert;
color: revert;
}
.oo-ui-checkboxInputWidget [type=checkbox]+span,
.mw-ui-checkbox [type=checkbox]+label:before {
background-color: var(--primary-color-darker);
border-color: var(--secondary-color);
}
.oo-ui-checkboxInputWidget [type=checkbox]:disabled+span {
/* checkmark is always white because it's an image */
background-color: #4e5a65;
border-color: #4e5a65;
}
.oo-ui-radioInputWidget [type=radio]+span {
background-color: var(--primary-color-darker);
border-color: var(--secondary-color);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:checked+span {
background-color: #fff;
}
.oo-ui-toggleSwitchWidget {
background-color: var(--primary-color-darker);
border-color: var(--secondary-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
background-color: var(--primary-color-darker);
}
#preferences .mw-htmlform-submit-buttons,
.mw-body, .parsoid-body {
background-color: var(--primary-color);
}
.vector-menu-dropdown .vector-menu-content {
background-color: var(--primary-color);
border-color: var(--secondary-color);
}
.vector-menu-tabs-legacy a:visited,
.vector-menu-dropdown .mw-list-item a:visited,
.vector-menu-tabs-legacy li a:visited,
.vector-menu-portal .vector-menu-content li a:visited,
a:visited {
color: var(--purple-link-color);
}
.vector-menu-tabs-legacy a,
.vector-menu-dropdown .mw-list-item a,
.vector-menu-tabs-legacy li a,
.vector-menu-portal .vector-menu-content li a,
a {
color: var(--blue-link-color);
}
ul {
list-style-image: none;
}
.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
color: var(--external-purple-link-color);
}
.mw-parser-output a.extiw, .mw-parser-output a.external {
color: var(--external-blue-link-color);
}
.mw-parser-output a.external {
background-image: none;
}
.mw-parser-output a.external:not(.plainlinks a.external):after {
content: "";
position: absolute;
z-index: -1;
width: 16px;
height: 16px;
background-color: var(--external-blue-link-color);
background-image: none;
-webkit-mask: url(/skins/Vector/resources/skins.vector.styles/images/link-external-small-ltr-progressive.svg?14644);
mask: url(/skins/Vector/resources/skins.vector.styles/images/link-external-small-ltr-progressive.svg?14644);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* magic numbers to align */
-webkit-mask-size: 0.86em;
mask-size: 0.86em;
-webkit-mask-position-x: 0.15em;
-webkit-mask-position-y: 0.363em;
mask-position-x: 0.15em;
mask-position-y: 0.363em;
}
.vector-menu-tabs-legacy .new a, .vector-menu-tabs-legacy .new a:visited,
.vector-menu-dropdown .mw-list-item a.new,
.vector-menu-tabs-legacy li a.new,
.vector-menu-portal .vector-menu-content li a.new,
a.new, a.new:visited {
color: var(--red-link-color);
}
.oo-ui-labelWidget.oo-ui-inline-help,
.vector-menu-portal .vector-menu-heading,
.vector-menu-dropdown .vector-menu-heading {
color: var(--text-color-darker);
}
.vector-menu-portal .vector-menu-heading {
background-image: linear-gradient(to right,rgba(200,204,209,0) 0,var(--secondary-color) 33%,var(--secondary-color) 66%,rgba(200,204,209,0) 100%);
}
.vector-menu-dropdown .mw-list-item.selected a, .vector-menu-dropdown .mw-list-item.selected a:visited,
.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited {
color: var(--text-color-lighter);
}
.vector-search-box-input {
border-color: var(--secondary-color);
}
.vector-search-box-inner:hover .vector-search-box-input {
border-color: var(--secondary-color-darker);
}
.vector-search-box-input::placeholder {
font-style: italic;
color: #363636;
}
.mw-search-profile-tabs {
background-color: var(--primary-color-darker);
border-color: var(--secondary-color-darker);
}
.search-types .current a {
color: var(--text-color-darker);
}
#mw-searchoptions {
background-color: var(--primary-color-darker);
border-color: var(--secondary-color-darker);
}
#mw-searchoptions .divider {
border-color: var(--secondary-color-darker);
}
.mw-advancedSearch-namespace-selection {
background: unset;
border-color: var(--secondary-color);
}
.mw-advancedSearch-fieldContainer {
background: unset;
border-color: var(--secondary-color);
}
.mw-advancedSearch-fieldContainer fieldset {
border-color: var(--secondary-color);
}
.mw-advancedSearch-fieldContainer .oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
background: var(--primary-color);color: var(--text-color-darker);
}
.mw-advancedSearch-expandablePane-button.oo-ui-widget-enabled.oo-ui-buttonWidget > .oo-ui-buttonElement-button:hover {
background-color: var(--primary-color-darker);
color: var(--text-color-darker);
}
.mw-body {
border-color: var(--secondary-color);
}
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
background-image: linear-gradient(to bottom,transparent 0,var(--secondary-color) 100%);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
background-color: var(--primary-color);
}
.oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-inputWidget-input {
background-color: var(--primary-color);
background-image: linear-gradient(rgb(255 255 255 / 5%), rgb(255 255 255 / 5%));
border-color: var(--secondary-color-darker);
}
.oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle {
background-color: var(--primary-color);
background-image: linear-gradient(rgb(255 255 255 / 5%), rgb(255 255 255 / 5%));
border-color: var(--secondary-color-darker);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
background-color: var(--primary-color-darker);
border-color: var(--secondary-color);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
background-color: var(--primary-color-darkest);
border-color: var(--secondary-color);
}
/* wacky :not(:focus) to not overwrite default styling due to order of appearance */
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover:not(:focus),
.oo-ui-dropdownInputWidget select {
border-color: var(--secondary-color);
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select {
background-color: inherit ;
color: inherit;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
background: var(--primary-color-darker);
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover {
background: var(--primary-color-darkest);
}
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
background-color: darkgrey;
border-color: var(--secondary-color-darkest);
}
.mw-advancedSearch-expandablePane-button.oo-ui-widget-enabled.oo-ui-buttonWidget > .oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: var(--primary-color-darker);
color: var(--text-color-darker);
border-color: var(--secondary-color-darkest);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color: var(--primary-color-darker);
color: var(--text-color);
border-color: var(--secondary-color-darker);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
background-color: var(--primary-color-darkest);
border-color: var(--secondary-color-darker);
color: var(--text-color);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
color: var(--blue-link-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
background-color: var(--primary-color-darkest);
border-color: var(--secondary-color-darker);
}
.oo-ui-menuSelectWidget {
background-color: var(--primary-color-darker);
border-color: var(--secondary-color-darker);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
background-color: var(--primary-color-darkest);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled {
background-color: var(--primary-color);
}
.oo-ui-tagMultiselectWidget-handle {
border-color: var(--secondary-color);
}
.oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input {
color: var(--text-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget-handle {
border-color: var(--secondary-color-darker);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled:not(.oo-ui-tagItemWidget-fixed) {
background-color: var(--primary-color-darker);
border-color: var(--secondary-color-darker);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
background-color: var(--primary-color);
}
.oo-ui-tabSelectWidget-framed {
background-color: var(--primary-color-darkest);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
background-color: rgba(255, 255, 255, 50%);
color: var(--text-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover,
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
background-color: var(--primary-color);
color: var(--text-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
border-color: var(--secondary-color-darker);
}
.oo-ui-tabOptionWidget {
color: var(--text-color-darker);
}
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td {
background-color: var(--primary-color-darker);
}
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td {
background-color: var(--primary-color-darkest);
}
#contentSub, #contentSub2 {
color: var(--text-color-darker);
}
.mw-number-text {
color: var(--text-color-darker);
}
.mw-body-content .mw-number-text h3 {
color: var(--text-color);
}
.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled {
background-color: var(--primary-color-darker);
color: var(--text-color);
border-color: var(--secondary-color);
}
.cdx-button:enabled:active, .cdx-button.cdx-button--fake-button--enabled:active, .cdx-button:enabled.cdx-button--is-active, .cdx-button.cdx-button--fake-button--enabled.cdx-button--is-active,
.cdx-button:enabled:hover, .cdx-button.cdx-button--fake-button--enabled:hover {
background-color: var(--primary-color-darker);
color: var(--text-color-lighter);
border-color: var(--secondary-color-darker);
}
/* preferences page */
.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed, .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
border-color: var(--secondary-color);
}
#preferences .mw-htmlform-submit-buttons {
border-color: var(--secondary-color);
}
#preferences .mw-htmlform-submit-buttons {
background-color: var(--primary-color-darker);
border-color: var(--secondary-color);
margin: -1px -1rem -1rem -1rem;
padding: 1rem;
}
@media screen and (min-width: 982px) {
#preferences .mw-htmlform-submit-buttons {
margin: -1px -1.5rem -1.5rem -1.5rem;
padding-inline: 1.5rem;
}
}
/* notification/alert specific */
.mw-echo-ui-placeholderItemWidget,
.mw-echo-ui-notificationItemWidget-unread, .mw-echo-ui-notificationItemWidget-unread:hover,
.mw-echo-ui-notificationItemWidget, .mw-echo-ui-notificationItemWidget:hover {
background: var(--primary-color-darker);
}
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
background: var(--primary-color);
}
.oo-ui-pendingElement-pending {
background-color: var(--secondary-color-darker);
background-image: linear-gradient(135deg,var(--secondary-color) 25%,transparent 25%,transparent 50%,var(--secondary-color) 50%,var(--secondary-color) 75%,transparent 75%,transparent);
}
.mw-echo-ui-crossWikiUnreadFilterWidget {
border-color: var(--secondary-color);
}
.mw-echo-ui-crossWikiNotificationItemWidget-group, .mw-echo-ui-bundleNotificationItemWidget-group {
background-color: var(--primary-color-darker);
}
.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected {
background-color: var(--primary-color-darkest);
}
.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted,
.mw-echo-ui-pageNotificationsOptionWidget-label-count {
background-color: var(--primary-color-darker);
}
.mw-echo-ui-notificationItemWidget,
.mw-echo-ui-notificationItemWidget:last-child{
border-color: var(--secondary-color);
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement:last-child {
border-color: var(--secondary-color-darkest)
}
.mw-echo-ui-notificationItemWidget-content-message-header {
color: var(--text-color);
}
/* any ui popup? for sure: notification popup */
.oo-ui-labelElement-label {
color: var(--text-color);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
color: inherit;
}
.oo-ui-popupWidget-popup {
background-color:var(--primary-color-darker);
border-color: var(--secondary-color-darker);
}
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor:before,
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before {
border-bottom-color: var(--secondary-color-darker);
}
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor:after,
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:after {
border-bottom-color: var(--primary-color-darker);
}
.mw-notification {
background-color: var(--primary-color-darker);
border-color: var(--secondary-color-darker);
color: var(--text-color);
}
.mw-message-box {
color: var(--text-color);;
background-color: var(--primary-color-darker);
border-color: var(--secondary-color);
}
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning,
.mw-message-box-warning {
background-color: var(--primary-color-darkest);
border-color: var(--secondary-color-darker);
}
/* data table as seen for example on special:tags */
.mw-datatable, .mw-datatable td, .mw-datatable th {
border-color: var(--secondary-color-darker);
}
.mw-datatable th {
background-color: var(--primary-color-darkest);
}
.mw-datatable td {
background-color: var(--primary-color-darker);
}
.mw-datatable tr:hover td {
background-color: var(--primary-color);
}
.oo-ui-panelLayout-framed {
border-color: var(--secondary-color);
}
.mw-widget-dateInputWidget-handle {
background-color: var(--primary-color);
border-color: var(--secondary-color);
}
.mw-widget-dateInputWidget.oo-ui-widget-enabled .mw-widget-dateInputWidget-handle:hover {
border-color: var(--secondary-color-darker);
}
.mw-widget-calendarWidget {
border-color: var(--secondary-color-darker);
}
.mw-widget-dateInputWidget-calendar {
background-color: var(--primary-color);
}
.mw-widget-calendarWidget-day-heading {
color: var(--text-color-darker);
}
.mw-widget-calendarWidget-day {
color: var(--text-color);
}
.mw-widget-calendarWidget-day-additional {
color: var(--text-color-darker);
}
.mw-widget-calendarWidget-month {
color: var(--text-color);
}
.mw-widget-calendarWidget-year {
color: var(--text-color);
}
.mw-widgets-datetime-calendarWidget:focus {
border-color: var(--secondary-color);
box-shadow: none;
}
.mw-widgets-datetime-calendarWidget-grid {
overflow-x: initial;
}
.mw-widgets-datetime-dateTimeInputWidget-handle {
background-color: var(--primary-color);
border-color: var(--secondary-color);
color: var(--text-color);
}
.mw-widgets-datetime-dateTimeInputWidget.oo-ui-widget-enabled .mw-widgets-datetime-dateTimeInputWidget-handle:hover {
border-color: var(--secondary-color-darker);
}
.mw-widgets-datetime-dateTimeInputWidget.oo-ui-widget-enabled .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
background-color: var(--primary-color-darker);
}
.mw-widgets-datetime-calendarWidget {
background-color: var(--primary-color);
border-color: var(--secondary-color);
}
.mw-widgets-datetime-calendarWidget-grid .mw-widgets-datetime-calendarWidget-cell.mw-widgets-datetime-calendarWidget-extra .oo-ui-buttonElement-button .oo-ui-labelElement-label {
color: var(--text-color-darker);
}
/* recent changes filters area */
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
border-color: var(--secondary-color-darker);
}
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget,
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
border-color: var(--secondary-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--primary-color);
color: var(--text-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
color:var(--text-color-darker);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: var(--primary-color);
border-color: var(--secondary-color-darker);
color: var(--text-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-disabled {
background-color: var(--primary-color);
border-color: var(--secondary-color-darkest);
color: var(--text-color-darker);
text-shadow: none;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: var(--text-color-darker);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
color: var(--text-color-lighter);
}
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background-color: var(--primary-color);
border-color: var(--secondary-color-darker);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
color: var(--red-link-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: var(--primary-color);
}
.mw-rcfilters-ui-tagItemWidget.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-labelElement-label {
color: var(--text-color);
}
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c1, .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c1 tr:first-child, .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
background-color: #3366cc;
color: #ededed;
--history-change-red-color: darkred;
--purple-link-color: darkblue;
--blue-link-color: blue;
--red-link-color: red;
}
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c2, .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c2 tr:first-child, .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
background-color: #00af89;
color: black;
--history-change-green-color: greenyellow;
--history-change-grey-color: darkslategray;
--purple-link-color: darkblue;
--blue-link-color: blue;
--red-link-color: red;
}
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c3, .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c3 tr:first-child, .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
background-color: #ffcc33;
color: black;
--history-change-green-color: green;
--history-change-grey-color: darkslategray;
--purple-link-color: blueviolet;
--blue-link-color: blue;
--red-link-color: red;
}
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c4, .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c4 tr:first-child, .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
background-color: #ff6d22;
color: black;
--history-change-grey-color: darkslategray;
--blue-link-color: blue;
--purple-link-color: blueviolet;
--red-link-color: red;
}
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c5, .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c5 tr:first-child, .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
background-color: #dd3333;
-history-change-red-color: darkred;
}
.client-js .mw-changeslist ul, .client-js .mw-changeslist table.mw-enhanced-rc {
padding-left: calc((6px + 3px) * 5 + 0.35714286em);
margin-left: 0;
}
/* filter pop-out box */
.mw-rcfilters-ui-menuSelectWidget-footer,
.mw-rcfilters-ui-filterMenuHeaderWidget-header {
background-color: var(--primary-color);
border-color: var(--secondary-color);
}
.mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget {
color: var(--text-color);
}
.mw-rcfilters-ui-filterMenuSectionOptionWidget {
background-color: var(--primary-color-darkest);
}
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label {
color: var(--text-color-darker);
}
.mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk) {
border-color: var(--secondary-color-darker);
}
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-title, .mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-desc,
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
color: var(--text-color-darker);
}
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected) {
background-color: var(--primary-color);
}
/* watchlist area */
.mw-rcfilters-ui-watchlistTopSectionWidget-separator {
border-color: var(--secondary-color-darker);
}
/* templatedata editor */
.oo-ui-processDialog-content .oo-ui-window-head, .oo-ui-processDialog-content .oo-ui-window-foot {
outline-color: var(--secondary-color);
}
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
background-color: var(--primary-color-darker);
}
.oo-ui-windowManager-modal > .oo-ui-dialog {
background-color: color-mix(in srgb, var(--primary-color-darkest), transparent 50%);
}
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button {
border-right-color: var(--secondary-color-darker);
}
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button:active,
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button:hover {
background-color: var(--primary-color-darkest);
border-right-color: var(--secondary-color-darker);
}
.oo-ui-processDialog .oo-ui-actionWidget:not(.oo-ui-flaggedElement-progressive):not(.oo-ui-flaggedElement-destructive) > .oo-ui-buttonElement-button:hover, .oo-ui-processDialog .oo-ui-actionWidget:not(.oo-ui-flaggedElement-progressive):not(.oo-ui-flaggedElement-destructive) > .oo-ui-buttonElement-button:active {
border-left-color: var(--secondary-color-darker);
}
.tdg-templateDataParamWidget-param-alias:first-child {
background-color: var(--secondary-color);
color: darkslategray;
}
.tdg-templateDataParamWidget-param-alias {
border-color: var(--secondary-color-darkest);
}
/* ====================[Icon Coloring]==================== */
/* see [[MediaWiki:Common.css/Icons.css]] */
/* ====================[Recent Changes]==================== */
.mw-plusminus-pos {
color: var(--history-change-green-color);
}
.mw-plusminus-neg {
color: var(--history-change-red-color);
}
.mw-plusminus-null {
color: var(--history-change-grey-color);
}
/* ====================[Page History]==================== */
#pagehistory li.selected {
background-color: var(--primary-color-darker);
color: var(--text-color-lighter);
}
/* ====================[Edit Comparison]==================== */
.mw-diff-movedpara-left::after, .mw-diff-movedpara-right::after {
color: var(--text-color)
}
.diff-addedline {
border-color: var(--change-added-color);
}
.diff-addedline .diffchange {
background: var(--change-added-color);
color: black;
}
.diff-deletedline {
border-color: var(--change-removed-color);
}
.diff-deletedline .diffchange {
background: var(--change-removed-color);
color: black;
}
.diff-context {
background: transparent;
border-color: var(--text-color-darker);
color: var(--text-color);
}
/* inline comparison */
.mw-diff-inline-added ins, .mw-diff-inline-changed ins, .mw-diff-inline-moved ins,
.mw-diff-table-prefix .mw-diff-inline-legend .mw-diff-inline-legend-ins {
background: var(--change-added-color);
color: black;
}
.mw-diff-inline-deleted del, .mw-diff-inline-changed del, .mw-diff-inline-moved del,
.mw-diff-table-prefix .mw-diff-inline-legend .mw-diff-inline-legend-del {
background: var(--change-removed-color);
color: black;
}
.mw-diff-inline-added.mw-diff-empty-line::after, .mw-inline-diff-newline::after {
background: var(--change-added-color);
}
.mw-diff-inline-deleted.mw-diff-empty-line::after {
background: var(--change-removed-color);
}
.mw-diff-inline-added.mw-diff-empty-line::after, .mw-diff-inline-deleted.mw-diff-empty-line::after, .mw-inline-diff-newline::after {
color: #222;
}
/* ====================[Editor]==================== */
/* see [[MediaWiki:Common.css/Editor.css]] */
/* ====================[Category Page]==================== */
.CategoryTreeToggle {
color: var(--blue-link-color);
}
/* ====================[Module Page]==================== */
.mw-scribunto-console-fieldset {
background-color: var(--primary-color-darker);
color: var(--text-color);
}
.mw-scribunto-message {
background: var(--primary-color-darker);
color: #00e800;
}
.mw-scribunto-clear {
color: var(--red-link-color);
}
/* having it be styled using both id and class makes no sense to me but I'll follow the generated styling to prevent specificity conflicts */
#mw-scribunto-input {
background: var(--primary-color);
}
.mw-scribunto-input {
color: var(--secondary-color);
}
/* ====================[File Upload]==================== */
fieldset {
border-color: var(--secondary-color-darkest);
}
/* ====================[File page]==================== */
#filetoc {
background-color: var(--primary-color-darker);
border-color: var(--secondary-color);
}
/* ====================[Special:Interwiki]==================== */
table.mw-interwikitable.body td.mw-interwikitable-local-yes {
background-color: var(--primary-color);
}
/* ====================[Login Page]==================== */
#mw-createaccount-join {
background-color: var(--primary-color-darker);
color: var(--text-color);
}
#mw-createaccount-join:hover {
background-color: var(--primary-color-darkest);
border-color: var(--secondary-color-darker);
}
/* ====================[Special:DebugTemplates]==================== */
/* seems like this page has a lot of custom css but I don't know in what context it all appears so for now I'll settle with just the background of the output */
.dt-crumbs {
background-color: var(--primary-color-darker);
border: 1px solid var(--secondary-color);
}
.dt-debug-output-wrapper {
background-color: var(--primary-color-darker);
border-color: var(--secondary-color);
}
/* ====================[MultiMediaViewer]==================== */
/* see [[MediaWiki:Common.css/MultiMediaViewer.css]] */
/* ====================[Templates]==================== */
.DiscordIntegrator iframe {
border-radius: 5px;
display: block;
}
/* ====================[General Page Contents]==================== */
#firstHeadingTitle {
word-wrap: break-word;
}
.portable-infobox {
border: 1px solid var(--pi-border-color);
border-radius: 8px;
padding: 6px;
}
.pi-image-thumbnail {
min-width: 75%;
}
h1, h2 {
border-bottom-color: var(--secondary-color);
}
.mw-body, .parsoid-body,
h1, h2, h3, h4, h5, h6,
.mw-footer li {
color: var(--text-color);
}
.toc, .toccolours {
border-color: var(--secondary-color);
background-color: var(--primary-color-darker);
}
.toctogglelabel {
color: var(--blue-link-color);
}
.tocnumber {
color: var(--text-color-lighter);
}
.mw_metadata th, .mw_metadata td {
background-color: var(--primary-color);
border-color: var(--secondary-color);
}
div.thumbinner {
background-color: var(--primary-color);
border-color: var(--secondary-color-darker);
}
.wikitable, .wikitable > tr > th, .wikitable > tr > td,
.wikitable > * > tr > th, .wikitable > * > tr > td {
border-color: var(--secondary-color-darkest);
}
.wikitable {
color: var(--text-color);
background-color: var(--primary-color-darker);
}
.wikitable > tr > th, .wikitable > * > tr > th {
background-color: var(--primary-color-darkest);
}
.catlinks {
border-color: var(--secondary-color);
background-color: var(--primary-color);
}
/* anchor target animation e.g. bla in example.com/#bla */
table tr:has(:target) {
animation: highlight-blink-animation 0.3s alternate 6 ease-in-out;
}
@keyframes highlight-blink-animation {
to {
background-color: var(--secondary-color);
}
}