MediaWiki:ColorScheme.css: Difference between revisions

From Elwiki
No edit summary
No edit summary
Line 883: Line 883:
span.oo-ui-iconElement-icon.oo-ui-icon-reload.oo-ui-image-progressive {
span.oo-ui-iconElement-icon.oo-ui-icon-reload.oo-ui-image-progressive {
     filter: brightness(1.8) saturate(1.5) invert(0) !important;
     filter: brightness(1.8) saturate(1.5) invert(0) !important;
}
:root {
    --accent-color: #00adda;
    --accent-color-tone-0: #009dc5;
    --accent-color-tone-2: #0589aa;
    --accent-color-tone-3: #047491;
    --border-color: #d3dcdd;
    --border-color-tone-2: #bbbbbb;
    --theme-tone-1: #fff;
    --theme-tone-2: #f4f5f6;
    --theme-tone-3: #eef2f3;
    --theme-tone-4: #f1f5f5;
    --theme-tone-5: #f4f5f7;
    --theme-tone-6: #f9fafb;
    --theme-tone-7: #eaecf0;
    --theme-tone-8: #dce0e6;
    --theme-tone-9: #b2b6bd;
    --text-color: black;
    --text-color-invert: white;
    --inactive-color: #555a60;
}
::selection {
    background-color: var(--accent-color);
    color: white;
}
::-moz-selection {
    background-color: var(--accent-color);
    color: white;
}
::-webkit-scrollbar {
    background: var(--theme-tone-6);
    width: 12px;
    height: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
::-webkit-scrollbar-thumb {
    background-color: var(--theme-tone-9);
    border-radius: 8px;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}
::-webkit-scrollbar-button {
    display: none;
}
::-moz-scrollbar {
    background: var(--theme-tone-6);
    width: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
::-moz-scrollbar-thumb {
    background: var(--theme-tone-8);
    border-radius: 8px;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}
::-moz-scrollbar-button {
    display: none;
}
body {
    background-color: var(--theme-tone-4);
}
#mw-wrapper,
#wikieditor-toolbar-replace-message div,
.mw-notification-content,
.flow-component .ve-init-mw-target-surface.ve-ui-surface-source .ve-ce-documentNode {
    color: var(--text-color);
}
fieldset.ext-replacetext-searchoptions {
    background-color: var(--theme-tone-2);
    padding: 14px !important;
}
input[type="text"],
input[type="number"],
.mw-searchInput,
.mw-input input {
    border: 1px solid var(--border-color);
    background: var(--theme-tone-6);
}
input[type="button"]:hover {
    background-color: var(--theme-tone-8);
}
input[type="button"],
input[type="submit"] {
    background-color: var(--theme-tone-7);
    border: 0;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 2px;
    transition: background-color 0.3s, color 0.2s;
    font-size: 1rem;
}
input[type="submit"]:hover {
    background-color: var(--accent-color);
    color: #fff;
}
input[type="button"]:focus,
input[type="submit"]:focus {
    background-color: var(--accent-color-tone-2);
}
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
.mw-searchInput:focus-visible,
.mw-input input:focus-visible {
    outline: 1px solid var(--border-color-tone-2);
}
.disable-image-link a {
    pointer-events: none;
}
#mw-wrapper {
    background-color: var(--theme-tone-6);
}
/* header */
div.color-left,
div.color-middle,
div.color-right {
    background-color: white;
}
#p-logo {
    background-color: var(--theme-tone-6);
    border-radius: 5px 5px 0 0;
}
.mw-wiki-logo.fallback {
    height: 8em;
    background-position: bottom center;
}
#mw-site-navigation .sidebar-chunk {
    margin-top: 0;
    border-top: 0;
    background-color: var(--theme-tone-6);
}
/* border */
div.mw-body h1.firstHeading,
div#mw-page-header-links li.selected {
    border-color: var(--border-color);
}
div.mw-body h1.firstHeading {
    border-width: 1px;
    padding-bottom: 5px;
}
}

Revision as of 15:07, 24 September 2022

a,
a:link,
.mw-parser-output a.external {
    color: var(--accent-color-tone-0);
    transition: color 0.3s;
}

a:hover {
    text-decoration: none;
}

a:hover:not(.mw-selflink, .selflink) {
    color: var(--accent-color-tone-2);
}

a:visited,
a:visited:hover:not(.mw-selflink, .selflink, .textfloat a),
.mw-parser-output a.external:visited,
.mw-parser-output a.external:hover:visited {
    color: var(--accent-color-tone-3);
}

a.new:hover,
.new a:hover,
a.new:visited,
.new a:visited {
    color: #b32424;
}

a.new,
.new a,
.skill-nav a.new,
.skill-nav .new a {
    color: #dd3333 !important;
}

.dark-mode a.new,
.dark-mode .new a {
    color: #f16e6e !important;
}

table tr[style]:not(.textfloat),
.dark-mode table tr[style]:not(.textfloat) td,
table[class*="colortable-"] tr:not(.textfloat) {
    color: black;
}

.mw-editform .editOptions,
.suggestions .suggestions-results {
    background-color: var(--theme-tone-6);
    border-color: var(--border-color);
}

#pagehistory li.selected {
    background-color: var(--theme-tone-2);
    color: var(--text-color);
    outline: 1px dashed #a2a9b1;
    outline-color: var(--border-color-tone-2);
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement:hover {
    background-color: var(--theme-tone-3);
    outline-color: var(--border-color-tone-2);
}

.mw-body li.gallerybox div.thumb,
.oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-labelElement > .oo-ui-buttonElement-button {
    background: var(--theme-tone-4);
    border-color: var(--border-color);
}

.oo-ui-popupWidget-head {
    display: flex;
    place-items: center;
    gap: 0.3rem;
    margin-bottom: 0;
    background: var(--theme-tone-2);
    border-color: var(--border-color) !important;
    padding: 5px 15px !important;
}

.oo-ui-popupWidget-head a.oo-ui-buttonElement-button {
    margin-right: 5px;
}

.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:after {
    border-bottom-color: var(--theme-tone-4);
}

.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected {
    background-color: var(--theme-tone-4);
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled:not(.oo-ui-tagItemWidget-fixed),
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined
    .oo-ui-tagItemWidget.oo-ui-widget-enabled,
.oo-ui-popupWidget-popup,
.mw-rcfilters-ui-menuSelectWidget,
.oo-ui-widget.oo-ui-labelElement.mw-rcfilters-ui-filterMenuHeaderWidget,
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected),
.mw-rcfilters-ui-filterMenuHeaderWidget-header,
.thumbinner,
.mw-body .mw-search-profile-tabs,
ul#filetoc,
.toc,
.mw-warning {
    background-color: var(--theme-tone-5);
    border-color: var(--border-color);
    color: var(--text-color);
}

textarea.oo-ui-inputWidget-input,
.flow-ui-editorWidget-editor > .oo-ui-textInputWidget textarea,
.flow-ui-newTopicWidget-expanded .flow-ui-newTopicWidget-title.oo-ui-textInputWidget input,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
input.mw-ui-input.mw-ui-input-large,
a.flow-ui-input-replacement-anchor.mw-ui-input,
input.mw-ui-input {
    background-color: var(--theme-tone-5);
    color: var(--text-color);
}

.oo-ui-menuSectionOptionWidget,
.mw-rcfilters-ui-menuSelectWidget-footer,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined
    .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled,
.mw-notification.mw-notification-autohide.mw-notification-tag-watch-self,
.suggestions .suggestions-special,
.mw-notification.mw-notification-replaced {
    background: var(--theme-tone-5);
    border-color: var(--border-color);
}

.oo-ui-tagMultiselectWidget-handle,
.mw-datatable.listfiles th {
    background-color: var(--theme-tone-5) !important;
    border-color: var(--border-color) !important;
}

.mw-datatable.listfiles th {
    background-image: none !important;
}

.mw-echo-ui-crossWikiNotificationItemWidget-group,
.mw-echo-ui-bundleNotificationItemWidget-group,
.oo-ui-tabSelectWidget-framed,
.mw-echo-ui-placeholderItemWidget,
.flow-topic-titlebar,
.flow-topic-moderatestate-lock .flow-topic-titlebar,
.flow-component .flow-list li:hover {
    background-color: var(--theme-tone-5);
}

.mw-changeslist-legend {
    background: var(--theme-tone-5) !important;
    border: none !important;
    color: var(--text-color) !important;
}

span.oo-ui-dropdownWidget-handle {
    background-color: var(--theme-tone-5) !important;
    border-color: var(--border-color-tone-2);
}

.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before {
    border-bottom-color: var(--border-color);
}

.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget,
.oo-ui-menuSelectWidget {
    background-color: var(--theme-tone-6);
    border-color: var(--border-color-tone-2) !important;
}

pre,
textarea,
input,
.mw-editform,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input,
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.mw-changeslist-legend,
.mw-body .mw-search-profile-tabs,
.mw-body fieldset#mw-searchoptions,
.wikitable,
.mw-datatable,
.oo-ui-decoratedOptionWidget.oo-ui-iconElement,
.mw-widget-dateInputWidget-calendar,
.diff-context,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select,
.mw-datatable > tr > td,
.wikitable > tr > td,
.mw-datatable > * > tr > td,
.wikitable > * > tr > td,
div > .flow-menu ul {
    background-color: var(--theme-tone-6);
    border-color: var(--border-color);
    color: var(--text-color);
}

#wpSummary {
    background-color: var(--theme-tone-6);
    border-color: var(--border-color-tone-2);
    color: var(--text-color);
}

#wpSummary:not(.dark-mode *) {
    background-color: var(--theme-tone-1);
}

#mw-related-navigation .sidebar-chunk,
#mw-content,
#personal .dropdown ul {
    border-color: var(--theme-tone-6);
}

#mw-header-container,
#mw-header-hack div,
#mw-related-navigation .sidebar-chunk,
#p-personal ul,
#personal #personal-inner,
.oo-ui-checkboxInputWidget [type="checkbox"] + span,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active:focus,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
.mw-prefs-buttons,
#mw-footer-container,
.flow-ui-modal-layout {
    background-color: var(--theme-tone-6);
    color: var(--text-color);
}

.flow-component.flow-board-page .flow-board-header,
.oo-ui-messageDialog-text.oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-padded,
.mw_metadata td,
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td,
.mw-special-CreateAccount div#mw-content-wrapper,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
    background-color: var(--theme-tone-6);
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.flow-ui-tooltip {
    background-color: var(--theme-tone-7);
    color: var(--text-color);
    border-color: var(--border-color) !important;
}

.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected,
.mw-rcfilters-ui-itemMenuOptionWidget:hover,
.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget.mw-echo-ui-notificationItemWidget-unread
    .oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget.mw-echo-ui-notificationItemWidget-unread
    .mw-echo-ui-notificationsListWidget
    a,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget.mw-echo-ui-notificationItemWidget-unread,
.flow-ui-tooltip .flow-ui-tooltip-triangle:after,
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td,
.mw-specialCiteThisPage-bibliographic {
    background: var(--theme-tone-7);
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
    > .oo-ui-popupWidget-popup
    > .oo-ui-popupWidget-footer
    .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons
    .oo-ui-buttonElement
    > .oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-labelElement > .oo-ui-buttonElement-button:hover,
.mw_metadata th {
    background-color: var(--theme-tone-7) !important;
}

.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
    background-color: var(--theme-tone-7);
    border-color: var(--border-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-tone-2);
}

pre br:last-child {
    display: none;
}

option,
select {
    background: var(--theme-tone-7);
    color: var(--text-color);
}

div.collapsible-header {
    background-color: var(--theme-tone-4);
    border: 1px solid var(--border-color);
}

.mw-ui-button.mw-ui-progressive:disabled,
.mw-ui-button.mw-ui-progressive:disabled:hover,
.mw-notification,
.wikiEditor-ui-toolbar .sections .section,
.mw-notification.mw-notification-autohide.mw-notification-tag-watch-self {
    background-color: var(--theme-tone-6);
    border-color: var(--border-color-tone-2);
}

.dark-mode .mw-ui-button.mw-ui-progressive:disabled,
.dark-mode .mw-ui-button.mw-ui-progressive:disabled:hover,
.dark-mode .mw-notification,
.dark-mode .wikiEditor-ui-toolbar .sections .section,
.dark-mode .mw-notification.mw-notification-autohide.mw-notification-tag-watch-self {
    background-color: var(--theme-tone-7);
    border-color: var(--border-color);
}

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

.mw-echo-ui-notificationItemWidget-unseen .mw-echo-ui-menuItemWidget {
    background-color: var(--theme-tone-8);
}

.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget.mw-echo-ui-notificationItemWidget-initiallyUnseen.mw-echo-ui-notificationItemWidget-unread,
.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget.mw-echo-ui-notificationItemWidget-initiallyUnseen.mw-echo-ui-notificationItemWidget-unread
    .mw-echo-ui-notificationsListWidget
    a {
    background-color: var(--theme-tone-8) !important;
}

.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted {
    background-color: var(--theme-tone-8) !important;
    color: white !important;
}

.mw-rcfilters-ui-watchlistTopSectionWidget-separator {
    border-color: var(--theme-tone-8);
}

optgroup {
    background: var(--theme-tone-8);
    color: var(--text-color);
}

.wikitable,
.wikitable td,
.wikitable th,
#mw-site-navigation .sidebar-chunk h3,
#mw-related-navigation .sidebar-chunk h3,
.oo-ui-checkboxInputWidget [type="checkbox"] + span,
.wikiEditor-ui .wikiEditor-ui-view,
#personal-inner,
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget,
.mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk),
.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed,
.mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup
    > .oo-ui-popupWidget-popup
    > .oo-ui-popupWidget-footer
    .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons
    .oo-ui-buttonElement:last-child,
.oo-ui-panelLayout-framed,
.wikiEditor-ui .wikiEditor-ui-top {
    border-color: var(--border-color) !important;
}

.mw-body h2,
.mw_metadata td,
.mw_metadata th,
.mw-echo-ui-crossWikiUnreadFilterWidget,
fieldset,
.thumbinner .thumbimage,
.thumbborder {
    border-color: var(--border-color);
}

textarea:focus-within {
    outline-color: var(--border-color-tone-2);
}

textarea:focus-visible,
select:focus-visible {
    outline: 1px solid var(--border-color-tone-2);
    border-radius: 3px;
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer,
div > .flow-menu ul > section:not(:first-of-type) > li:first-of-type,
div > .flow-menu ul li.flow-menu-section:not(:first-of-type),
.flow-ui-editorWidget-editor,
.flow-ui-editorWidget-editor > .oo-ui-textInputWidget textarea,
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
input.mw-ui-input.mw-ui-input-large,
a.flow-ui-input-replacement-anchor.mw-ui-input,
input.mw-ui-input,
.mw-body .toctitle,
.mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator {
    border-color: var(--border-color-tone-2);
}

div#mw-page-header-links li.selected a,
.wikitable,
#searchInput,
.mw-rcfilters-ui-savedLinksListWidget-placeholder-title,
.mw-rcfilters-ui-savedLinksListWidget-placeholder-description,
.mw-echo-ui-notificationItemWidget-content-message-header,
.mw-content-ltr .flow-topic-meta,
.flow-post .flow-post-content,
.flow-moderated-topic-title,
.mw-widget-calendarWidget-day,
.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited,
#wikieditor-toolbar-link-int-target-status-external {
    color: var(--text-color);
}

.wikitable,
.mw-ui-button.mw-ui-quiet,
.toctogglelabel,
.search-types .current a {
    color: var(--text-color) !important;
}

span.oo-ui-labelElement-label,
.oo-ui-labelElement .oo-ui-labelElement-label,
.oo-ui-labelElement.oo-ui-labelElement-label,
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc,
.mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget,
.suggestions .suggestions-result,
.suggestions a.mw-searchSuggest-link .special-query,
span.flow-timestamp-user-formatted,
.wikiEditor-ui-toolbar .tabs span.tab a,
.wikiEditor-ui-toolbar .tabs span.tab a:visited,
.mw-summary-preview,
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all :is(p, ol) {
    color: var(--text-color);
}

.ve-ui-surface section {
    margin-left: 20px;
}

/*----*/

.mw-widget-calendarWidget-day-today {
    box-shadow: inset 0 0 0 1px var(--accent-color);
}

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

.mw-echo-ui-notificationItemWidget-content-message-body,
.flow-post-meta,
.flow-moderated-post-content .plainlinks,
.mw-ui-anchor.mw-ui-progressive.mw-ui-quiet,
.tocnumber,
.mw-echo-ui-notificationItemWidget-bundled
    .mw-echo-ui-notificationItemWidget-content
    .mw-echo-ui-notificationItemWidget-content-message-header
    em,
.mw-body-content .mw-number-text h3,
.mw-body-content .mw-number-text p,
.mw-echo-ui-notificationItemWidget-notify-description,
.wikiEditor-ui-toolbar .group .label {
    color: var(--inactive-color);
}

.oo-ui-buttonElement-active span {
    color: white !important;
}

.mw_metadata th,
.mw-userrights-groups th {
    background-image: none !important;
}

.mw-editform,
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
    background: none;
}

.dark-mode .diff-addedline .diffchange {
    background: #3e4d5b;
}

.dark-mode .diff-deletedline .diffchange {
    background: #69655a;
}

.mw-widget-calendarWidget-item:hover,
.mw-ui-button.mw-ui-progressive:not(:disabled) {
    background-color: var(--accent-color);
}

.mw-ui-button.mw-ui-progressive:not(:disabled):hover {
    background-color: var(--accent-color-tone-2);
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate + span,
.mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:checked + label:before {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: none !important;
}

.flow-ui-tooltip.flow-ui-tooltip-left .flow-ui-tooltip-triangle:after {
    box-shadow: 1.5px 0 0 1.5px var(--theme-tone-7), 0 0 1px 0 var(--theme-tone-7);
}

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:checked + span,
.mw-content-ltr .flow-post.flow-post-highlight-newer .flow-post-content {
    border-color: var(--accent-color);
}

.mw-echo-ui-bundleNotificationItemWidget-separator {
    bottom: 0;
    opacity: 0.6;
}

body > .mw-echo-ui-overlay .mw-echo-ui-actionMenuPopupWidget-menu.oo-ui-menuSelectWidget[role="listbox"] {
    right: 20px !important;
    left: unset !important;
}

a.flow-ui-input-replacement-anchor.mw-ui-input,
.flow-ui-modal-layout,
.mw-ui-input,
#mw-createaccount-join:focus,
#pt-notifications-alert .mw-echo-notifications-badge:focus,
#pt-notifications-notice .mw-echo-notifications-badge:focus {
    box-shadow: none;
}

.flow-ui-modal,
.oo-ui-windowManager-modal > .oo-ui-dialog {
    background: rgba(0, 0, 0, 0.65);
}

.flow-moderated-topic-title {
    display: flex;
    place-content: start;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0;
    padding-left: 10px;
}

.flow-moderated-topic-title .flow-undo {
    margin-left: auto;
}

option:checked {
    box-shadow: 0 0 10px 100px var(--accent-color) inset;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button:hover,
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:active + span,
.mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:checked:hover + label:before,
.mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:checked:focus + label:before {
    background-color: var(--accent-color-tone-2) !important;
    border-color: var(--accent-color-tone-2) !important;
}

.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-buttonElement-active > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button:hover,
.mw-ui-button.mw-ui-progressive {
    background-color: var(--accent-color);
    border-color: var(--accent-color) !important;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive
    > .oo-ui-buttonElement-button
    span {
    color: #fff;
}

.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:focus + span,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked:focus + span,
.mw-ui-input:focus {
    border-color: var(--accent-color) !important;
    box-shadow: inset 0 0 0 1px var(--accent-color) !important;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive
    > .oo-ui-buttonElement-button:hover:focus {
    border-color: var(--accent-color-tone-2) !important;
    box-shadow: inset 0 0 0 1px var(--accent-color-tone-2) !important;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive
    > .oo-ui-buttonElement-button:focus {
    border-color: #fff;
    box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #fff;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:active + span,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive
    > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive
    > .oo-ui-buttonElement-button:active:focus,
.mw-ui-button.mw-ui-progressive:active,
.mw-ui-button.mw-ui-progressive.is-on {
    background-color: var(--accent-color-tone-3) !important;
    border-color: var(--accent-color-tone-3) !important;
    box-shadow: none !important;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked:focus + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate:focus + span {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: inset 0 0 0 1px var(--accent-color-tone-2), inset 0 0 0 2px #fff;
}

a.oo-ui-buttonElement-button,
.mw-echo-ui-notificationItemWidget-unread .mw-echo-ui-menuItemWidget,
.mw-widget-dateInputWidget-handle {
    background-color: transparent;
}

.oo-ui-textInputWidget.oo-ui-widget-enabled textarea.oo-ui-inputWidget-input:focus {
    outline-color: var(--accent-color);
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive
    > .oo-ui-buttonElement-button:hover,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked:hover + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate:hover + span {
    background-color: var(--accent-color-tone-2);
    border-color: var(--accent-color-tone-2) !important;
    box-shadow: none !important;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive
    > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive
    > .oo-ui-buttonElement-button:active:focus,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed
    > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active
    > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active
    > .oo-ui-buttonElement-button,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked:active + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate:active + span,
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:checked:active + span,
.mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:active + label:before {
    background-color: var(--accent-color-tone-3);
    border-color: var(--accent-color-tone-3);
    box-shadow: none;
}

div.oo-ui-popupWidget-popup .oo-ui-flaggedElement-progressive > a.oo-ui-buttonElement-button:hover {
    background-color: var(--accent-color) !important;
}

.oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:checked:hover + span {
    border-color: var(--accent-color-tone-2);
}

.mw-ui-button.mw-ui-progressive:hover,
.mw-ui-button.mw-ui-progressive:focus {
    box-shadow: none;
    border-color: var(--accent-color-tone-2);
    background-color: var(--accent-color-tone-2);
}

.mw-ui-checkbox:not(#noop) [type="checkbox"] + label:before {
    background-color: var(--theme-tone-6);
    border-color: var(--border-color);
}

.mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:hover + label:before,
.mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:focus + label:before {
    border-color: var(--accent-color) !important;
    box-shadow: none;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
    > .oo-ui-buttonElement-button
    span.oo-ui-labelElement-label {
    transition: 0.2s;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
    background-color: #d73333 !important;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
    > .oo-ui-buttonElement-button
    span.oo-ui-labelElement-label {
    color: var(--text-color);
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
    background-color: #fff !important;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
    > .oo-ui-buttonElement-button:hover
    span.oo-ui-labelElement-label {
    color: #d73333 !important;
    border-color: #d73333;
}

/* scribunto console */

.mw-scribunto-console-fieldset {
    background: var(--theme-tone-6);
    color: var(--text-color);
}

#mw-scribunto-input {
    color: var(--text-color);
    background: var(--theme-tone-6);
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
}

.mw-scribunto-message {
    color: var(--text-color);
    background: var(--theme-tone-7);
    padding: 0.5rem;
}

.mw-scribunto-input {
    color: var(--accent-color);
}

.mw-scribunto-error {
    background: transparent;
    color: #d03939;
}

/* -- */

.image-wrap a {
    height: max-content;
    width: max-content;
    display: block;
}

.tools-inline li[id^="ca-nstab-"],
#ca-talk,
#ca-edit,
#ca-history,
#p-views li,
#p-more li,
#ca-edit,
#ca-ve-edit-clone {
    border-bottom: none;
    background: var(--theme-tone-7);
    border-radius: 4px;
    transition: background-color 0.3s;
}
.tools-inline li[id^="ca-nstab-"]:hover,
#ca-talk:hover,
#ca-edit:hover,
#ca-history:hover,
#p-views li:hover,
#p-more li:hover,
#ca-ve-edit-clone:hover {
    background-color: var(--theme-tone-8);
}
.tools-inline li[id^="ca-nstab-"] a,
#ca-talk a,
#ca-edit a,
#ca-history a,
#p-views li a,
#p-more li a,
#ca-edit a,
#ca-ve-edit-clone a {
    padding: 5px 7px 9px 27px !important;
    color: var(--text-color) !important;
    background-position: 5px 6px !important;
    text-decoration: none;
    font-weight: 500;
}
.tools-inline li[id^="ca-nstab-"]:active,
#ca-talk:active,
#ca-edit:active,
#ca-history:active,
#p-views li:active,
#p-more li:active,
#ca-edit:active,
#ca-ve-edit-clone:active {
    background-color: var(--theme-tone-7);
}
#ca-ve-edit-clone a {
    background-image: url("/wiki/skins/Timeless/resources/images/pencil-grey.svg");
}
#ca-watch:hover,
#ca-unwatch:hover {
    border: 0;
}
#ca-unwatch a,
#ca-watch a {
    margin-bottom: -5px;
    background-position: center;
    margin-left: 0.5rem;
}
#p-namespaces li {
    margin-right: 0.35rem;
}
#p-views li,
#p-more li {
    margin-left: 0.35rem;
}

.patrollink {
    color: transparent;
    display: inline-block;
    margin-top: 0.5rem;
}

.patrollink a {
    color: var(--text-color);
    padding: 0.35rem;
    background: var(--theme-tone-7);
    font-weight: 500;
    border-radius: 2px;
    transition: 0.3s;
    text-decoration: none !important;
}

.patrollink a:hover {
    background: var(--theme-tone-8);
}

form:not(.oo-ui-layout) button,
form:not(.oo-ui-layout) input[type="submit"] {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    transition: 0.3s;
}

form:not(.oo-ui-layout) button:hover,
form:not(.oo-ui-layout) input[type="submit"]:hover,
form:not(.oo-ui-layout) button:hover,
form:not(.oo-ui-layout) input[type="submit"]:hover,
form:not(.oo-ui-layout) button:active,
form:not(.oo-ui-layout) input[type="submit"]:active,
.mw-ui-button:not(:disabled):active {
    background-color: var(--accent-color-tone-3);
    color: white;
    border-color: var(--accent-color-tone-3);
}

.mw-ui-button:not(:disabled):focus {
    color: white;
    box-shadow: none;
    border-color: var(--accent-color);
}

input.historysubmit.mw-history-compareselectedversions-button {
    background-color: var(--theme-tone-7);
    border: none;
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    transition: background-color 0.3s;
}

input.historysubmit.mw-history-compareselectedversions-button:hover {
    background-color: var(--theme-tone-8);
}

span.oo-ui-iconElement-icon.oo-ui-icon-reload.oo-ui-image-progressive {
    filter: brightness(1.8) saturate(1.5) invert(0) !important;
}

:root {
    --accent-color: #00adda;
    --accent-color-tone-0: #009dc5;
    --accent-color-tone-2: #0589aa;
    --accent-color-tone-3: #047491;
    --border-color: #d3dcdd;
    --border-color-tone-2: #bbbbbb;
    --theme-tone-1: #fff;
    --theme-tone-2: #f4f5f6;
    --theme-tone-3: #eef2f3;
    --theme-tone-4: #f1f5f5;
    --theme-tone-5: #f4f5f7;
    --theme-tone-6: #f9fafb;
    --theme-tone-7: #eaecf0;
    --theme-tone-8: #dce0e6;
    --theme-tone-9: #b2b6bd;
    --text-color: black;
    --text-color-invert: white;
    --inactive-color: #555a60;
}

::selection {
    background-color: var(--accent-color);
    color: white;
}

::-moz-selection {
    background-color: var(--accent-color);
    color: white;
}

::-webkit-scrollbar {
    background: var(--theme-tone-6);
    width: 12px;
    height: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
::-webkit-scrollbar-thumb {
    background-color: var(--theme-tone-9);
    border-radius: 8px;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}
::-webkit-scrollbar-button {
    display: none;
}

::-moz-scrollbar {
    background: var(--theme-tone-6);
    width: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
::-moz-scrollbar-thumb {
    background: var(--theme-tone-8);
    border-radius: 8px;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}
::-moz-scrollbar-button {
    display: none;
}

body {
    background-color: var(--theme-tone-4);
}

#mw-wrapper,
#wikieditor-toolbar-replace-message div,
.mw-notification-content,
.flow-component .ve-init-mw-target-surface.ve-ui-surface-source .ve-ce-documentNode {
    color: var(--text-color);
}

fieldset.ext-replacetext-searchoptions {
    background-color: var(--theme-tone-2);
    padding: 14px !important;
}

input[type="text"],
input[type="number"],
.mw-searchInput,
.mw-input input {
    border: 1px solid var(--border-color);
    background: var(--theme-tone-6);
}

input[type="button"]:hover {
    background-color: var(--theme-tone-8);
}

input[type="button"],
input[type="submit"] {
    background-color: var(--theme-tone-7);
    border: 0;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 2px;
    transition: background-color 0.3s, color 0.2s;
    font-size: 1rem;
}

input[type="submit"]:hover {
    background-color: var(--accent-color);
    color: #fff;
}

input[type="button"]:focus,
input[type="submit"]:focus {
    background-color: var(--accent-color-tone-2);
}

input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
.mw-searchInput:focus-visible,
.mw-input input:focus-visible {
    outline: 1px solid var(--border-color-tone-2);
}

.disable-image-link a {
    pointer-events: none;
}

#mw-wrapper {
    background-color: var(--theme-tone-6);
}

/* header */
div.color-left,
div.color-middle,
div.color-right {
    background-color: white;
}

#p-logo {
    background-color: var(--theme-tone-6);
    border-radius: 5px 5px 0 0;
}

.mw-wiki-logo.fallback {
    height: 8em;
    background-position: bottom center;
}

#mw-site-navigation .sidebar-chunk {
    margin-top: 0;
    border-top: 0;
    background-color: var(--theme-tone-6);
}

/* border */
div.mw-body h1.firstHeading,
div#mw-page-header-links li.selected {
    border-color: var(--border-color);
}

div.mw-body h1.firstHeading {
    border-width: 1px;
    padding-bottom: 5px;
}