MediaWiki:Common.css

From Undertale Yellow Wiki
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.
@import url("https://undertale.fandom.com/load.php?mode=articles&articles=MediaWiki:Determination.css&only=styles");
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');

/** Color configuration **/
:root {
    --theme-background: url("/images/9/9a/Site-background-dark.png");
    --theme-background-color: black;
    --theme-background-color-rgb: 0, 0, 0;
    --theme-secondary-background-color: #262626;
    --theme-border-color: #3A3A3A;
    --theme-link-color: #FFD000;
    --theme-accent-color: #DBB023;
    --theme-accent-color-rgb: 255, 208, 0;
    --theme-hover-color: #836914;
    --theme-text-color: #E6E6E6;
    --theme-text-color-rgb: 230, 230, 230;
    --theme-accent-label-color: #000000;
    --theme-error-background-color: #400503;
    --theme-error-border-color: #951919;
    --theme-warning-background-color: #3F2A03;
    --theme-warning-border-color: #A37A00;
    --theme-success-background-color: #044A3E;
    --theme-success-border-color: #1BB694;

    /** Diff colors **/
    --theme-diff-added-line-color: #103810;
    --theme-diff-added-word-color: #252;
    --theme-diff-deleted-line-color: #481010;
    --theme-diff-deleted-word-color: #622;
    --theme-diff-empty-color: rgba(78, 78, 78, .33);
    --theme-diff-context-color: #141414;
}

/** Icons from Terraria Wiki **/
:root {
    --icon-category: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-category-2' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M14 4h6v6h-6z'%3E%3C/path%3E%3Cpath d='M4 14h6v6h-6z'%3E%3C/path%3E%3Cpath d='M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%3E%3C/path%3E%3Cpath d='M7 7m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%3E%3C/path%3E%3C/svg%3E");
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
    --icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
    --icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-eye' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'%3E%3C/path%3E%3Cpath d='M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7'%3E%3C/path%3E%3C/svg%3E");
    --icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-dots-vertical' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'%3E%3C/path%3E%3Cpath d='M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'%3E%3C/path%3E%3Cpath d='M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'%3E%3C/path%3E%3C/svg%3E");
    --icon-talk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-messages' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10'%3E%3C/path%3E%3Cpath d='M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2'%3E%3C/path%3E%3C/svg%3E");
}

/** Basic theme fixes **/
body {
    background: var(--theme-background);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

#mw-page-base {
    background: none;
}

a, a:visited,
.mw-parser-output a.extiw,
.mw-parser-output a.external,
.mw-parser-output a.extiw:visited,
.mw-parser-output a.external:visited {
    color: var(--theme-link-color);
}

.mw-body {
    border: 0;
}

.vector-body, #mw-navigation, #mw-head {
    font-family: Rubik;
    font-size: 16px;
}

#firstHeading {
    color: var(--theme-text-color);
    font-family: Rubik;
    font-size: 36px;
}

h1 {
    border-bottom: 0;
}

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

.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
    border-color: var(--theme-border-color);
    color: var(--theme-text-color);
    font-family: Rubik;
    font-weight: bold;
}

ul {
    list-style-image: none;
}

/* Wiki.gg tries to make tables "responsive" by making cell content not wrap */
/* around. This creates more problems than it fixes, so we revert that. */
table {
    white-space: initial;
}

/* However, on smaller screens too narrow cells easily become hard to read. */
/* We enforce a minimum width on all cells on mobile, as well as allow */
/* marking individual cells as not-wrapping. */
@media screen and (max-width: 720px) {
    .wikitable td {
        min-width: 200px;
    }
    .wikitable td.mobile-nowrap, .wikitable th.mobile-nowrap {
        white-space: nowrap;
    }
}

@media screen and (min-width: 720px) {
    #firstHeading {
        width: 75%;
    }
}

ol.references li:target,
sup.reference:target,
.wikitable tr:target {
    background-color: var(--theme-hover-color);
}

/** Basic page layout **/
#content, #mw-navigation, #mw-head, .mw-footer {
    box-sizing: border-box;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

#content {
    background-color: var(--theme-background-color);
    color: var(--theme-text-color);
    margin-top: -48px;
}

/** Navigation **/
#mw-head {
    display: flex;
    justify-content: flex-end;
    order: 2;
    position: static;
    width: 90%;
}

#mw-panel,
#left-navigation,
#right-navigation,
.vector-menu-tabs-legacy,
.vector-menu-tabs-legacy ul,
.vector-menu-tabs-legacy li,
.vector-menu-tabs-legacy li a,
.vector-search-box {
    float: none;
}

#mw-panel #p-tb {
    display: none;
}

.content-wrapper {
    position: relative;
}

.vector-menu-tabs-legacy ul {
    display: flex;
}

#left-navigation, #right-navigation {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 0;
}

#left-navigation {
    order: 2;
}

#right-navigation {
    display: flex;
}

.mw-portlet-navigation {
    display: none;
}

#mw-navigation {
    display: flex;
    flex-direction: column;
    position: relative;
}

#mw-panel {
    align-items: center;
    display: flex;
    margin-bottom: 15px;
    order: 0;
    width: 100%;
}

#p-logo {
    height: 65px;
    width: 250px;
    margin-bottom: 0;
}

#p-logo a {
    height: 65px;
    width: 250px;
}

.portal:has(.vector-menu-content-list:empty) {
    display: none;
}

#mw-panel .portal {
    height: fit-content;
    position: relative;
}
#mw-panel .portal .vector-menu-heading {
    align-items: center;
    background-image: none;
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-weight: bold;
    justify-content: space-between;
    line-height: 18px;
    margin: 0;
    padding: 6px 4px;
    text-transform: uppercase;
}

#mw-panel .portal .vector-menu-heading::after {
    content: "";
    display: block;
    pointer-events: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    -webkit-mask: var(--icon-chevron-down) no-repeat;
    mask: var(--icon-chevron-down) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center center;
    mask-position: center center;
    background-color: white;
    transform: scaleY(-1);
    padding-left: 10px;
}

.client-nojs #mw-panel .portal .vector-menu-heading {
    cursor: unset;
}
.client-nojs #mw-panel .portal .vector-menu-heading::after {
    display: none;
}

#mw-panel .portal:not(:hover) .vector-menu-heading::after {
    transform: none;
}
#mw-panel .portal .body {
    padding: 0;
    margin: 0;
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: max-content;
    min-width: 8em;
    background: var(--theme-secondary-background-color);
    box-shadow: 0px 0px 15px 0px rgba(10,10,10, 0.7);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    z-index: 101;
}
#mw-panel .portal .body::before {
    content: "";
    display: none;
    pointer-events: none;
    height: 0;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}
#mw-panel .portal .body ul {
    padding: 4px;
}
#mw-panel .portal .body li {
    padding-left: 6px;
    padding-right: 6px;
    margin: 0;
    transition: background 0.3s;
}
#mw-panel .portal .body li:first-child {
    margin-top: 6px;
}

#mw-panel .portal .body li a {
    color: var(--theme-text-color);
    display: block;
    font-size: 14px;
    text-decoration: none;
    padding: 6px 9px;
    z-index: 100;
}
#mw-panel .portal .body li a:hover {
    background: rgba(var(--theme-accent-color-rgb), 0.1);
    color: var(--theme-link-color);
}

#mw-panel .portal:hover .vector-menu-heading {
    background: var(--theme-highlight-background-color);
    border-radius: 0;
}
#mw-panel .portal:hover .vector-menu-heading::after {
    transform: scaleY(-1);
}
#mw-panel .portal:hover .body {
    display: block;
}

.vector-menu-portal {
    margin: 0;
}

header#wikigg-header #p-personal.vector-user-menu-legacy #pt-anonuserpage,
header#wikigg-header #p-personal.vector-user-menu-legacy #pt-tmpuserpage {
    color: var(--theme-text-color);
}

#mw-head .vector-menu-content-list {
    position: relative;
    z-index: 100;
}

@media screen and (max-width: 920px) {
    #p-Mechanics {
        display: none;
    }
}

@media screen and (max-width: 780px) {
    #p-Locations {
        display: none;
    }
}

/** OOUI **/
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
    background-color: var(--theme-background-color);
    border-color: var(--theme-border-color);
    color: var(--theme-text-color);
}

.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus {
    border-color: var(--theme-accent-color);
    box-shadow: inset 0 0 0 1px var(--theme-accent-color);
}

.oo-ui-checkboxInputWidget [type='checkbox'] + span {
    background-color: var(--theme-secondary-background-color);
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:hover + span,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
    background-color: var(--theme-accent-color);
    border-color: var(--theme-border-color);
    color: var(--theme-accent-label-color);
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-text-color);
    color: var(--theme-text-color);
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    color: var(--theme-link-color);
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
    color: var(--theme-link-color);
}

.oo-ui-dropdownInputWidget.oo-ui-widget-enabled,
.oo-ui-menuSelectWidget {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-border-color);
}

.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
    background-color: var(--theme-secondary-background-color);
    color: var(--theme-text-color);
}

.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
    border-color: var(--theme-accent-color);
    box-shadow: inset 0 0 0 1px var(--theme-accent-color);
}

.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
    border-color: var(--theme-border-color);
}

.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select {
    color: var(--theme-text-color);
}

.oo-ui-dropdownInputWidget select {
    border-color: var(--theme-border-color);
}

.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
    background-color: var(--theme-secondary-background-color);
}

.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
    color: var(--theme-text-color);
}

.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
    background-color: rgba(var(--theme-accent-color-rgb), 0.1);
    color: var(--theme-accent-color);
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    color: var(--theme-text-color);
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive>.oo-ui-buttonElement-button:hover {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-accent-color);
}

.oo-ui-toolbar-bar {
    background-color: var(--theme-secondary-background-color);
    color: var(--theme-text-color);
}

.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
    border-color: var(--theme-border-color);
}

.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active,
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover,
.oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
    background-color: var(--theme-background-color);
    color: var(--theme-text-color);
}

.ve-init-target .oo-ui-indicatorElement-indicator,
.oo-ui-windowManager .oo-ui-indicatorElement-indicator {
    filter: invert(1);
}

.oo-ui-popupToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
    color: var(--theme-link-color);
}

.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active,
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-tool-link,
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-tool-link,
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover,
.oo-ui-menuToolGroup-tools .oo-ui-tool.oo-ui-tool-active {
    background-color: rgba(var(--theme-accent-color-rgb), 0.1);
}

.oo-ui-popupToolGroup-tools {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-border-color);
}

.oo-ui-menuToolGroup {
    border-color: var(--theme-border-color);
}

.oo-ui-popupWidget-popup {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-border-color);
}

.oo-ui-processDialog-actions-primary .oo-ui-actionWidget > .oo-ui-buttonElement-button {
    border-color: var(--theme-border-color);
}

.oo-ui-buttonElement-framed.oo-ui-widget-disabled>.oo-ui-buttonElement-button,
.oo-ui-listToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled {
    background-color: var(--theme-background-color);
}

.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button {
    border-color: var(--theme-border-color);
}

.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button:hover {
    background-color: var(--theme-background-color);
    border-color: var(--theme-border-color);
}

.oo-ui-processDialog-content .oo-ui-window-head,
.oo-ui-processDialog-content .oo-ui-window-foot {
    outline-color: var(--theme-border-color);
}

.oo-ui-tabOptionWidget > .oo-ui-labelElement-label {
    color: var(--theme-link-color);
}

.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
    box-shadow: inset 0 -2px 0 0 var(--theme-link-color);
    color: var(--theme-link-color);
}

.oo-ui-listToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled:hover,
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
    background-color: rgba(var(--theme-accent-color-rgb), 0.1);
    color: var(--theme-link-color);
}

.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-tabSelectWidget-framed {
    background-color: var(--theme-secondary-background-color);
}

.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
    border-color: var(--theme-border-color);
}

.oo-ui-windowManager-modal > .oo-ui-dialog {
    background-color: rgba(var(--theme-background-color-rgb), 0.5);
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
    background-color: var(--theme-background-color);
}

.oo-ui-windowManager {
    color: var(--theme-text-color);
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
    border-color: var(--theme-accent-color);
}

.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget {
    background-color: var(--theme-background-color);
}

fieldset {
    border-color: var(--theme-accent-color);
}

.ve-ui-targetWidget:not(.oo-ui-pendingElement-pending) {
    background-color: var(--theme-background-color);
    border-color: var(--theme-accent-color);
    box-shadow: inset 0 0 0 1px var(--theme-accent-color);
}

.oo-ui-messageDialog-message {
    color: var(--theme-text-color);
}

.oo-ui-iconElement-icon:not(.oo-ui-checkboxInputWidget-checkIcon) {
    filter: invert(1);
}

.mw-message-box-warning,
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
    background-color: var(--theme-warning-background-color);
    border-color: var(--theme-warning-border-color);
    color: var(--theme-text-color);
}


/** Editor **/
.wikiEditor-ui .wikiEditor-ui-view {
    border-color: var(--theme-border-color);
}

.wikiEditor-ui .wikiEditor-ui-top {
    border-color: var(--theme-border-color);
}

.mw-editform #wpTextbox1 {
    background-color: var(--theme-background-color);
    color: var(--theme-text-color);
}

.wikiEditor-ui-toolbar {
    background-color: var(--theme-secondary-background-color);
    color: var(--theme-text-color);
    padding: 10px;
}

.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .section-secondary .group {
    border-color: var(--theme-border-color);
}

.wikiEditor-ui-toolbar .group > span {
    padding: 0 5px;
}

.wikiEditor-ui-toolbar .tabs span.tab a:before {
    filter: invert(1);
}

.wikiEditor-ui-toolbar .tabs span.tab a,
.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
    color: var(--theme-link-color);
}

.tool-button:hover,
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button:hover {
    background-color: rgba(var(--theme-accent-color-rgb), 0.1);
}

.wikiEditor-ui-toolbar .group .label,
.wikiEditor-ui-toolbar .group .tool-select .label {
    color: var(--theme-text-color);
}

.wikiEditor-ui-toolbar .group .tool-select .options {
    background-color: var(--theme-secondary-background-color);
}

.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover {
    background-color: rgba(var(--theme-accent-color-rgb), 0.1);
}

.wikiEditor-ui-toolbar .group .tool-select .options .option {
    color: var(--theme-text-color);
}

#msupload-div {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-border-color);
}

#msupload-dropzone {
    border-color: var(--theme-text-color);
    color: var(--theme-text-color);
}

.editOptions {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-border-color);
    color: var(--theme-text-color);
}

.wikiEditor-ui-toolbar .page-characters div span {
    border-color: var(--theme-border-color);
    color: var(--theme-text-color);
}

.wikiEditor-ui-toolbar .page-characters div span:hover {
    background-color: rgba(var(--theme-accent-color-rgb), 0.1);
    border-color: var(--theme-border-color);
}

.wikiEditor-ui-toolbar .booklet > .index > .current,
.wikiEditor-ui-toolbar .booklet > .index > :hover {
    background-color: rgba(var(--theme-accent-color-rgb), 0.1);
    color: var(--theme-text-color);
}

.wikiEditor-ui-toolbar .page-table th {
    color: var(--theme-text-color);
    font-weight: bold;
}

.wikiEditor-ui-toolbar .page-table td {
    color: var(--theme-text-color);
}

#wpTextbox1[readonly] {
    background-color: var(--theme-background-color);
    color: var(--theme-text-color);
}

.CodeMirror {
    background-color: var(--theme-background-color);
    color: var(--theme-text-color);
}

.CodeMirror-gutters {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-border-color);
}

/** Header buttons **/
#ca-edit a::before,
#ca-ve-edit a::before,
#ca-addsection a::before,
#ca-viewsource a::before {
    background-color: var(--theme-link-color);
    content: "";
    display: inline-block;
    height: 24px;
    mask-size: 100% 100%;
    margin-right: 5px;
    width: 24px;
}

#ca-ve-edit a::before {
    -webkit-mask: var(--icon-edit);
    mask: var(--icon-edit);
}

#ca-edit a::before {
    -webkit-mask: var(--icon-edit);
    mask: var(--icon-edit);
}

#ca-addsection a::before {
    -webkit-mask: var(--icon-edit);
    mask: var(--icon-edit);
}

#ca-viewsource a::before {
    -webkit-mask: var(--icon-eye);
    mask: var(--icon-eye);
}

.mw-list-item[id^="ca-nstab-"],
#ca-view,
#p-NAVIGATION,
#p-views > .body > .menu > #ca-history,
#p-views > .body > .menu > #ca-watch,
#p-views > .body > .menu > #ca-unwatch {
    display: none;
}

.vector-menu-tabs-legacy #ca-edit.selected,
.vector-menu-tabs-legacy #ca-ve-edit.selected,
.vector-menu-tabs-legacy #ca-addsection.selected,
.vector-menu-tabs-legacy #ca-viewsource.selected {
    /* Sometimes display: block'd inline. */
    display: none !important;
}

.vector-menu-tabs-legacy li {
    background-image: none;
}

.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: none
}

#ca-edit,
#ca-ve-edit,
#ca-addsection,
#ca-viewsource {
    align-items: center;
    border-right: 1px solid var(--theme-border-color);
    display: flex;
}

#ca-edit a,
#ca-ve-edit a,
#ca-addsection a,
#ca-viewsource a {
    align-items: center;
    border-radius: 15px;
    color: var(--theme-link-color);
    display: flex;
    font-size: 12px;
    font-weight: 700;
    padding-bottom: 10px;
    text-transform: uppercase;
}

#ca-edit a:hover,
#ca-ve-edit a:hover,
#ca-addsection a:hover,
#ca-viewsource a:hover {
    background-color: rgba(var(--theme-accent-color-rgb), 0.1);
    text-decoration: none;
}

#p-search {
    position: absolute;
    right: 0;
    top: 0;
}

body:not(.ns--1) #mw-indicator-mw-helplink {
    display: none;
}

#p-cactions:hover {
    background-color: rgba(var(--theme-accent-color-rgb), 0.1);
    border-radius: 15px;
}

#p-cactions-label .vector-menu-heading-label {
    width: 0;
    visibility: hidden;
}

#p-cactions-label::after {
    background: var(--theme-link-color);
    content: "";
    display: inline-block;
    -webkit-mask: var(--icon-more);
    mask: var(--icon-more);
    mask-size: 100% 100%;
    height: 16px;
    width: 16px;
    margin-right: 5px;
}

#p-cactions .vector-menu-content {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-border-color);
    left: initial;
    padding: 11px;
    right: -1px;
}

#p-cactions .mw-list-item a {
    color: var(--theme-text-color);
    font-size: 14px;
    text-decoration: none;
}

#p-cactions .mw-list-item:hover {
    background-color: rgba(var(--theme-accent-color-rgb), 0.1);
}

#p-cactions .mw-list-item a:hover {
    color: var(--theme-link-color);
}

#ca-talk a {
    margin: 0;
    padding: 0;
}

#ca-talk a span {
    display: block;
    visibility: hidden;
    width: 0;
}

#ca-talk a::after {
    background: var(--theme-link-color);
    content: "";
    display: inline-block;
    -webkit-mask: var(--icon-talk);
    mask: var(--icon-talk);
    mask-size: 100% 100%;
    height: 16px;
    width: 16px;
}

/** Interlanguage links **/
#p-lang {
    position: absolute;
    top: 30px;
    right: 20px;
}

#p-lang .vector-menu-heading {
    align-items: center;
    background-image: none;
    color: var(--theme-text-color);
    display: flex;
    font-size: 13px;
    justify-content: center;
    position: relative;
}

#p-lang .vector-menu-heading::before, .interlanguage-link::before {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    content: "";
    display: inline-block;
    height: 18px;
    line-height: 1;
    max-width: 24px;
    margin-right: 4px;
    width: 24px;
}

#p-lang .vector-menu-heading::after {
    content: "";
    display: block;
    pointer-events: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    -webkit-mask: var(--icon-chevron-down) no-repeat;
    mask: var(--icon-chevron-down) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center center;
    mask-position: center center;
    background-color: white;
    transform: scaleY(-1);
    padding-left: 10px;
}

#p-lang:not(:hover) .vector-menu-heading::after {
    transform: none;
}

#p-lang .body {
    padding: 0;
    margin: 0;
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: max-content;
    min-width: 8em;
    background: var(--theme-secondary-background-color);
    box-shadow: 0px 0px 15px 0px rgba(10,10,10, 0.7);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    z-index: 201;
}

#p-lang .body ul {
    padding: 4px;
}
#p-lang .body li {
    padding-left: 6px;
    padding-right: 6px;
    margin: 0;
    transition: background 0.3s;
}
#p-lang .body li:first-child {
    margin-top: 6px;
}

#p-lang .body li a {
    color: var(--theme-text-color);
    display: block;
    font-size: 14px;
    text-decoration: none;
    padding: 6px 9px;
    z-index: 200;
}
#p-lang .body li a:hover {
    background: rgba(var(--theme-accent-color-rgb), 0.1);
    color: var(--theme-link-color);
}

#p-lang:hover .vector-menu-heading {
    background: var(--theme-highlight-background-color);
    border-radius: 0;
}

#p-lang:hover .body {
    display: block;
}

.interlanguage-link {
    display: flex;
}

#p-lang .vector-menu-heading::before {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg");
}

.interwiki-pt-br::before {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/0/05/Flag_of_Brazil.svg");
}

/* Ads */
#mw-navigation:has(+ #content .games-showcase-sidebar) #mw-head {
    width: 50%;
}

.games-showcase-header, #firstHeading {
    position: relative;
}

@media screen and (max-width: 720px) {
    #content {
        margin-top: -93px;
    }
    #bodyContent {
        margin-top: 30px;
    }
    .content-wrapper {
        flex-direction: column;
    }
    #p-logo, #p-logo a {
        background-size: cover;
        height: 32px;
        width: 125px;
    }
    #mw-head {
        justify-content: center;
    }
    #mw-head-base {
        height: 3em;
    }
    #mw-panel {
        flex-direction: column;
        margin-bottom: 70px;
    }
    #mw-panel .mw-portlet {
        display: none;
    }
    #mw-panel .mw-portlet.shown {
        display: block;
    }
    #mw-panel #p-NAVIGATION {
        display: block;
        height: 20px;
        left: 20px;
        padding: 0;
        position: absolute;
        top: 0;
    }
    #mw-panel #p-NAVIGATION .body {
        display: none;
    }
    #p-NAVIGATION-label .vector-menu-heading-label {
        visibility: hidden;
        width: 0;
    }
    #mw-panel .portal #p-NAVIGATION-label {
        padding: 0;
    }
    #mw-panel .portal #p-NAVIGATION-label::after {
        height: 24px;
        -webkit-mask: var(--icon-category);
        mask: var(--icon-category);
        width: 16px;
    }
    #ca-ve-edit,
    .mw-editsection-visualeditor,
    .mw-editsection-divider {
        display: none;
    }
    #ca-edit a span {
        visibility: hidden;
        width: 0;
    }
}

/** Tables **/
.wikitable {
    background-color: var(--theme-background-color);
    border: 0;
    color: var(--theme-text-color);
    text-align: center;
}

.wikitable > tr > th, .wikitable > * > tr > th {
    background-color: var(--theme-accent-color);
    color: var(--theme-accent-label-color);
}

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
    border-color: var(--theme-border-color);
}

table[data-table="soundtrack"] ul {
    list-style-type: none;
    margin: 0;
}

table[data-table="soundtrack"] li {
    margin: 0;
}

table[data-table="items"] ul {
    list-style-type: none;
    margin: 0;
}

/** Categories **/
.catlinks {
    background-color: var(--theme-secondary-background-color);
    border: 0;
    border-radius: 5px;
    padding: 10px;
}

/** Diffs **/
#pagehistory li.selected {
    background-color: var(--theme-secondary-background-color);
    color: var(--theme-text-color);
    outline-color: var(--theme-border-color);
}

table.diff.diff-contentalign-left,
#mw-content-text table.diff {
    border-spacing: 0;
    background-color: transparent;
}

table.diff td.diff-otitle,
table.diff td.diff-ntitle {
    background-color: transparent;
}

table.diff td.diff-context,
table.diff td.diff-deletedline,
table.diff td.diff-addedline {
    border: 0;
    border-radius: 0;
}

table.diff .diff-context div,
table.diff .diff-deletedline div,
table.diff .diff-addedline div {
    font-family: "Courier New";
}

table.diff td.diff-addedline {
    background-color: var(--theme-diff-added-line-color);
}

table.diff td.diff-deletedline {
    background-color: var(--theme-diff-deleted-line-color);
}

table.diff td.diff-addedline .diffchange {
    background-color: var(--theme-diff-added-word-color);
}

table.diff td.diff-deletedline .diffchange {
    background-color: var(--theme-diff-deleted-word-color);
}

table.diff td.diff-empty {
    background-color: var(--theme-diff-empty-color);
}

table.diff td.diff-context {
    background-color: var(--theme-diff-context-color);
    color: var(--theme-text-color);
}

/** Galleries **/
li.gallerybox div.thumb {
    background-color: inherit;
    border: 0;
}

li.gallerybox div.thumb img {
    border: 1px solid var(--theme-border-color);
}

div.thumbinner {
    background-color: var(--theme-secondary-background-color);
    border: var(--theme-border-color);
}

.thumbimage {
    background-color: transparent;
    border: none;
}

.magnify {
    display: none;
}

/* Fix for https://undertale.fandom.com/f/p/4400000000000068084 */
.tright, .tright .thumbinner, .tleft, .tleft .thumbinner {
    min-width: 100px;
}

/** Footer **/
.mw-footer li {
    color: var(--theme-text-color);
    font-family: Rubik;
}

/** Site notice **/
#siteNotice ol, #siteNotice ol {
    margin: 0 auto;
    text-align: left;
}

.sitenotice {
    display: flex;
    flex-direction: column;
}

/** Search **/
.vector-search-box-input {
    background-color: var(--theme-background-color);
    color: var(--theme-text-color);
}

#searchform {
    display: flex;
    justify-content: center;
}

.vector-search-box-input:focus,
.vector-search-box-inner:hover .vector-search-box-input:focus {
    border-color: var(--theme-accent-color);
    box-shadow: inset 0 0 0 1px var(--theme-accent-color);
}

.suggestions-results,
.suggestions-special {
    background-color: var(--theme-background-color);
}

.suggestions a.mw-searchSuggest-link,
.suggestions a.mw-searchSuggest-link:hover,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus,
.suggestions-result,
.suggestions-result-current .special-label,
.suggestions-result-current .special-query,
.suggestions-special .special-query {
    color: var(--theme-text-color);
}

.suggestions-result-current {
    background-color: var(--theme-secondary-background-color);
}

.searchButton[name=go] {
    filter: invert(1);
}

.mw-search-profile-tabs, #mw-searchoptions {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-border-color);
}

.search-types .current a {
    color: var(--theme-text-color);
}

#mw-searchoptions .divider {
    border-color: var(--theme-border-color);
}

@media screen and (max-width: 720px) {
    #p-search:has(.vector-search-box-input:focus) {
        width: 100%;
    }
    .vector-search-box-inner:has(.vector-search-box-input:focus) {
        width: 100%;
    }
    #searchform {
        margin: 0;
    }
}

/** Syntax highlight **/
pre, code, .mw-code {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-border-color);
    color: var(--theme-text-color);
}

div.mw-highlight, div.mw-highlight pre {
    background-color: var(--theme-background-color);
    border-color: var(--theme-border-color);
}

.mw-highlight .linenos {
    background-color: var(--theme-secondary-background-color);
}

.mw-highlight a:hover .linenos,
.mw-highlight .hll a .linenos {
    color: var(--theme-text-color);
}

.mw-content-ltr.mw-highlight-lines pre,
.mw-content-ltr.content .mw-highlight-lines pre {
    box-shadow: inset 2.75em 0 0 var(--theme-secondary-background-color);
}

/** Recent changes **/
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-border-color);
}

.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
    color: var(--theme-text-color);
}

.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
    border-color: var(--theme-border-color);
}

.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
    background-color: var(--theme-secondary-background-color);
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    color: var(--theme-text-color);
}

/** Files **/
#filetoc {
    display: none;
}

.mw_metadata {
    width: initial;
}

.mw_metadata td {
    background-color: var(--theme-background-color);
    border-color: var(--theme-border-color);
    color: var(--theme-text-color);
}

.mw_metadata th {
    background-color: var(--theme-accent-color);
    border-color: var(--theme-border-color);
    color: var(--theme-accent-label-color);
}

.mw-ui-button {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-border-color);
    color: var(--theme-text-color);
}

.mw-ui-button:not(:disabled):hover {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-accent-color);
    color: var(--theme-text-color);
}

.mw-ui-button.mw-ui-progressive:not(:disabled),
.mw-ui-button.mw-ui-progressive:not(:disabled):hover {
    background-color: var(--theme-accent-color);
    border-color: var(--theme-accent-color);
    color: var(--theme-accent-label-color);
}

.mw-ui-icon, .mw-ui-icon span, .mw-mmv-stripe-button:before {
    filter: invert(1);
}
.mw-mmv-post-image, .mw-mmv-image-metadata {
    background-color: var(--theme-secondary-background-color);
    border-color: var(--theme-border-color);
    color: var(--theme-text-color);
}

.mw-mmv-image-desc,
.mw-mmv-credit,
.mw-mmv-permission-box h3,
.mw-mmv-permission-box .mw-mmv-permission-text {
    color: var(--theme-text-color);
}

.mw-mmv-info-box {
    /* Overriden by inline style */
    background-color: var(--theme-background-color) !important;
    border-color: var(--theme-border-color);
}

.mw-mmv-permission-box .mw-mmv-permission-text .mw-mmv-permission-text-fader a {
    background-color: var(--theme-background-secondary-color);
}

.mw-mmv-permission-close {
    filter: invert(1);
}

.mw-mmv-permission-box.full-size .mw-mmv-permission-html {
    border-color: var(--theme-border-color);
}

.mw-mmv-label, .mw-mmv-label:hover {
    background-color: var(--theme-background-color);
    color: var(--theme-text-color);
}

/** Popups **/
.mwe-popups,
.mwe-popups .mwe-popups-container {
    background-color: var(--theme-secondary-background-color);
}

.mwe-popups .mwe-popups-extract {
    color: var(--theme-text-color);
}

.mwe-popups .mwe-popups-extract[dir='ltr']::after {
    background-image: linear-gradient(to right, rgba(var(--theme-background-color-rgb), 0), var(--theme-secondary-background-color) 50%);
}

.ui-widget-content {
    background: var(--theme-secondary-background-color);
    border-color: var(--theme-border-color);
    color: var(--theme-text-color);
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background: rgba(var(--theme-accent-color-rgb), 0.1);
    border: 0;
    color: var(--theme-accent-color);
}

.ui-widget-content a {
    color: var(--theme-text-color);
}

/** Infoboxes **/
.portable-infobox {
    background-color: var(--theme-page-background-color);
    border: 1px solid var(--theme-border-color);
    border-radius: 8px;
    font-weight: normal;
    padding: 0.5em;
    text-align: center;
    width: 40%;
}

@media screen and (max-width: 720px) {
    .portable-infobox {
        box-sizing: border-box;
        width: 100%;
    }
}

.portable-infobox img {
    height: auto;
    max-width: 100%;
}

.portable-infobox .pi-media {
    margin-top: 10px;
}

.portable-infobox .pi-title {
    background: var(--theme-accent-color);
    border-radius: 5px;
    color: var(--theme-accent-label-color);
    font-family: "Determination Mono", sans-serif;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: -1px;
    line-height: 1.2em;
    margin: 0 0 0.5em;
    padding: 9px 12px;
    text-align: center;
}

.portable-infobox .pi-secondary-background {
    background-color: var(--theme-accent-color);
    color: var(--theme-accent-label-color);
    font-size: 14px;
    font-weight: 700;
    padding: 9px;
}

.portable-infobox .pi-navigation {
    background-color: var(--theme-page-background-color);
}

.portable-infobox .pi-section-navigation,
.portable-infobox .pi-media-collection-tabs {
    flex-wrap: nowrap;
    font-size: 16px;
    gap: 10px;
    justify-content: initial;
    overflow-x: auto;
    margin-bottom: 5px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.pi-section-navigation::-webkit-scrollbar,
.pi-media-collection-tabs::-webkit-scrollbar {
    display: none;
}


.pi-section-navigation .pi-section-tab,
.pi-media-collection .pi-tab-link {
    border: 0;
    border-bottom: 3px solid var(--theme-text-color);
    overflow: visible;
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
    background: none;
    border-bottom: 3px solid var(--theme-accent-color);
}

.pi-media-collection {
    position: relative;
}

.pi-media-collection-icon-left.show,
.pi-media-collection-icon-right.show {
    display: block;
    height: 40px;
    position: absolute;
    background: linear-gradient(0deg, rgba(var(--theme-text-color-rgb), 1), rgba(var(--theme-text-color-rgb), 0.1)), var(--icon-chevron-down);
    background-size: cover;
    background-repeat: no-repeat;
    filter: invert(1);
    top: 0;
    width: 40px;
    z-index: 102;
}

.pi-media-collection-icon-left.show::before {
    display: block;
}

.pi-media-collection-icon-left.show {
    left: 0;
    transform: rotate(90deg);
}
.pi-media-collection-icon-right.show {
    right: 0;
    transform: rotate(270deg);
    z-index: 102;
}

.portable-infobox .pi-data-label {
    font-size: 12px;
    line-height: 1.5;
}

.pi-image {
    margin: 0.5em auto;
    text-align: center;
}

.portable-infobox .pi-border-color {
    border: none;
}

.pi-data-value {
    margin: auto;
}

.pi-caption {
    text-align: center;
}

.portable-infobox ul {
    list-style-type: none;
    margin: 0;
    text-align: center;
}

.pi-data[data-source="caption"] .pi-data-value {
    font-style: italic;
}

.pi-data[data-source="caption"] .pi-data-value:before,
.pi-data[data-source="caption"] .pi-data-value:after {
    content: '"';
}

/** {{navbox}} **/
.portable-infobox.pi-theme-navbox {
    border-radius: 5px;
    float: none;
    margin: 0;
    /* fallback width */
    width: 100%;
    /* (1px border + 0.5em padding) * 2 = 16px */
    width: calc(100% - 1em - 2px);
}

.pi-theme-navbox .pi-header a {
    color: var(--theme-accent-label-color);
    font-family: "Determination Mono", sans-serif;
}

.pi-theme-navbox .pi-data-value {
    flex-basis: 600px;
    width: 100%;
}

.pi-theme-navbox .pi-data-label {
    flex-basis: 200px;
}

/** {{quote}} **/
.vector-body blockquote {
    border-left: 0;
    padding: 0;
}

blockquote[data-template="quote"] {
    font-size: inherit;
    line-height: inherit;
    margin: 0.1em 0.2em 0.6em 2em;
    width: 300px;
}

blockquote[data-template="quote"] > p:first-of-type {
    background-color: var(--theme-accent-color);
    border-radius: 8px;
    color: var(--theme-accent-label-color);
    font-style: italic;
    padding: 0.5em 1em;
}

blockquote[data-template="quote"] > p > cite:before {
    content: "— ";
}

/** Table of Contents **/
.toc, .toccolours {
    background-color: inherit;
    border-color: var(--theme-border-color);
}

.toc {
    border-radius: 5px;
    padding: 0;
}

.toctitle {
    border-bottom: 1px solid var(--theme-border-color);
    display: flex;
    justify-content: space-between;
    padding: 14px;
}

#mw-toc-heading {
    margin-top: 0;
}

.toc > ul {
    padding: 7px;
}

.toctogglelabel {
    color: var(--theme-link-color);
}

.tocnumber {
    color: var(--theme-text-color);
}

/** {{tocright}} **/
div[data-template="tocright"] {
    background: transparent;
    clear: right;
    float: right;
    margin-bottom: 0.5em;
    max-width: 20em;
    padding: 0.5em 0 0.8em 1.4em;
}

/** {{staff}} **/
.staff {
    clear: right;
    float: right;
}

.staff img {
    height: 50px;
    width: 50px;
}

.staff.noicon {
    font-size: 50px;
    line-height: 50px;
}

/** {{documentation}} **/
.template-documentation {
    width: 100%;
    background-color: var(--theme-page-background-color);
    border-radius: 5px;
}

.template-documentation__header {
    background-color: var(--theme-accent-color);
    padding: 10px;
    position: relative;
    text-align: center;
    border-radius: 5px;
}

.template-documentation__header a {
    color: var(--theme-accent-label-color);
}

.template-documentation__title {
    font-size: 26px;
}

.template-documentation__buttons {
    font-size: 10px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.template-documentation__contents {
    padding: 32px;
}

.template-documentation__error {
    font-size: 20px;
    padding: 20px;
}

.template-documentation__example {
    clear: both;
}

/** {{file}} **/
.wikitable[data-template="file"] ul {
    list-style-type: none;
}

/** Main page sections **/
.mainpage-section {
    background-color: var(--theme-secondary-background-color);
    background-position: 1% 25%;
    background-repeat: no-repeat;
    border: 0.2em solid var(--theme-accent-color);
    border-radius: 1em;
    margin: 0.5em 0;
    text-align: center;
}

.mainpage-section h2 {
    background-color: var(--theme-accent-color);
    border: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: var(--theme-accent-label-color);
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
    margin: 0;
    padding: 0;
}

.mainpage-section ul {
    list-style-type: none;
    margin: 0;
}

@media screen and (min-width: 900px) {
    .mainpage-subsections {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .mainpage-subsections .mainpage-section {
        margin: 0;
    }
}

/** Easy formatting pt. 2 **/
/* Colors */
span[data-color="red"], td[data-color="red"], .red {
    color: #F4001C;
}

span[data-color="orange"], td[data-color="orange"], .orange {
    color: #F4A521;
}

span[data-color="yellow"], td[data-color="yellow"], .yellow {
    color: #FBFF29;
}

span[data-color="green"], td[data-color="green"], .green {
    color: #34C217;
}

span[data-color="cyan"], .cyan,
span[data-color="aqua"], td[data-color="aqua"], .aqua {
    color: #67FDFE;
}

span[data-color="blue"], td[data-color="blue"], .blue {
    color: #3627FC;
}

span[data-color="purple"], td[data-color="purple"], .purple {
    color: #CE1BD6;
}

/* Fonts */
span[data-font="dt"], div[data-font="dt"], blockquote[data-font="dt"] > p:first-of-type, .dt {
    font-family: "Determination Mono", monospace;
}

/* <poem> styling */
.poem {
    font-style: italic;
}

/** OAuth verification **/
#mw-mwoauth-authorize-form {
    color: var(--theme-text-color);
}

/** MediaWiki notifications **/
.mw-notification {
    background-color: var(--theme-background-color);
    border-color: var(--theme-border-color);
    color: var(--theme-text-color);
}

.mw-notification.mw-notification-type-error {
    background-color: var(--theme-error-background-color);
    border-color: var(--theme-error-border-color);
}

.mw-notification.mw-notification-type-warn {
    background-color: var(--theme-warning-background-color);
    border-color: var(--theme-warning-border-color);
}

.mw-notification.mw-notification-type-success {
    background-color: var(--theme-success-background-color);
    border-color: var(--theme-success-border-color);
}

/** <math> tags **/
.mwe-math-fallback-image-inline {
    filter: invert(1);
}
Retrieved from "https://undertaleyellow.wiki.gg/index.php?title=MediaWiki:Common.css&oldid=10605"