MediaWiki:Components.css

From Tiny Rogues Wiki
Revision as of 21:31, 28 December 2022 by Ken (talk | contribs) (Created page with "→‎Wiki editor: .ui-widget { font-size: 1rem; max-width: 500px; } .ui-widget-overlay { background: #000; } .ui-dialog-titlebar.ui-widget-header { background: var(--theme-tone-7); color: var(--text-color); border-radius: 0; border: 0; border-bottom: 1px solid var(--border-color-tone-2); margin: -3px; font-weight: 500; } .ui-dialog.ui-widget.ui-widget-content, .ui-dialog .ui-dialog-buttonpane { background: var(--theme-tone-6...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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.
/* Wiki editor */
.ui-widget {
    font-size: 1rem;
    max-width: 500px;
}

.ui-widget-overlay {
    background: #000;
}

.ui-dialog-titlebar.ui-widget-header {
    background: var(--theme-tone-7);
    color: var(--text-color);
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--border-color-tone-2);
    margin: -3px;
    font-weight: 500;
}

.ui-dialog.ui-widget.ui-widget-content,
.ui-dialog .ui-dialog-buttonpane {
    background: var(--theme-tone-6);
}

.wikiEditor-toolbar-dialog .ui-dialog-buttonpane {
    border-color: var(--border-color) !important;
}

form:not(.oo-ui-layout) textarea,
form:not(.oo-ui-layout) input {
    border-color: var(--border-color);
}

.ui-dialog.ui-widget.ui-widget-content label,
.oo-ui-messageWidget > .oo-ui-labelElement-label {
    color: var(--text-color);
    font-weight: 500;
}

.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: none;
    border: none;
}

button.ui-button {
    background: var(--theme-tone-7) !important;
    color: var(--text-color) !important;
    border-radius: 2px;
    border-color: var(--border-color-tone-2) !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    transition: 0.3s;
}

button.ui-button.ui-state-focus {
    border-width: 1px;
    border-style: solid;
}

button.ui-button:hover {
    background: var(--theme-tone-8) !important;
    border: 1px solid;
}

#wikieditor-toolbar-file-dialog + .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button:last-child {
    transition: background-color 0.3s, color 0.2s;
}

#wikieditor-toolbar-file-dialog + .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button:last-child:hover {
    color: #fff !important;
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

.ui-dialog .ui-dialog-buttonpane {
    margin: 0;
    padding: 0.5rem 2rem;
}

.wikiEditor-toolbar-dialog .ui-dialog-content {
    padding: 2rem !important;
}

.ui-dialog .ui-dialog-title {
    margin: 0.25rem auto;
    float: none;
    display: block;
    text-align: center;
}

#wikieditor-toolbar-link-int-target-status-notexists,
.mw-editform #editpage-copywarn {
    color: var(--text-color);
}

.mw-editform #editpage-copywarn {
    margin-top: 1rem;
}

.mw-rcfilters-collapsed .mw-rcfilters-ui-filterTagMultiselectWidget {
    border-bottom-color: var(--border-color);
}

.oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button {
    height: 2.5em;
    display: flex;
    align-items: center;
}

.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
    padding: 0;
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
    background: var(--theme-tone-6);
}

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

.wikiEditor-ui-toolbar .booklet .index .current {
    background-color: var(--theme-tone-8);
    color: var(--text-color);
}

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

.wikiEditor-ui-toolbar .booklet .pages,
.oo-ui-processDialog-content .oo-ui-window-head {
    background-color: var(--theme-tone-5);
}

.wikiEditor-ui-toolbar .page-characters div span,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .group-search {
    border-color: var(--border-color-tone-2);
    color: var(--text-color);
}

.wikiEditor-ui-toolbar .page-characters div span:hover {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

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

.wikiEditor-ui-toolbar .group .tool-select,
.wikiEditor-ui-toolbar .group .tool-select .options .option,
.wikiEditor-ui-toolbar .group .tool-select .options,
.oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
    background-color: var(--theme-tone-6);
    border-color: var(--border-color-tone-2);
    color: var(--text-color);
}

.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover {
    background-color: var(--theme-tone-7) !important;
}

.dark-mode .wikiEditor-ui [id^="wpTextbox"] + textarea {
    color: #f0f0f0 !important;
    border: 0 !important;
}

span.oo-ui-selectFileWidget-dropLabel,
.ve-ui-targetWidget .ve-ui-surface .ve-ce-attachedRootNode,
.oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-scrollable.oo-ui-panelLayout-padded.oo-ui-panelLayout-expanded,
.oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-padded {
    color: var(--text-color);
}

.oo-ui-processDialog .oo-ui-actionWidget > .oo-ui-buttonElement-button:hover,
.oo-ui-processDialog .oo-ui-actionWidget > .oo-ui-buttonElement-button:active {
    border-color: var(--border-color) !important;
    cursor: pointer;
    background-color: var(--accent-color) !important;
    color: #fff;
}

.oo-ui-labelElement-label {
    transition: color 0.15s;
}

.oo-ui-processDialog
    .oo-ui-actionWidget
    > .oo-ui-buttonElement-button.oo-ui-flaggedElement-primary:hover
    .oo-ui-labelElement-label,
.oo-ui-processDialog
    .oo-ui-actionWidget
    > .oo-ui-buttonElement-button.oo-ui-flaggedElement-primary:active
    .oo-ui-labelElement-label {
    color: #fff !important;
}

.oo-ui-processDialog .oo-ui-actionWidget > .oo-ui-buttonElement-button:focus {
    border-color: var(--accent-color) !important;
}

span.oo-ui-iconElement-icon.oo-ui-icon-unLink.oo-ui-image-destructive {
    filter: invert(0) !important;
}

.ve-ui-context-menu.ve-ui-desktopContext-menu
    .oo-ui-buttonElement-framed.oo-ui-labelElement
    > .oo-ui-buttonElement-button {
    padding-top: 6px;
}

.oo-ui-tabSelectWidget-frameless {
    box-shadow: inset 0 -1px 0 0 var(--border-color-tone-2);
}

.ve-active .mw-parser-output h2 {
    padding-left: 2rem;
    font-weight: 500;
    font-size: 21px;
}

.oo-ui-window-content {
    background-color: var(--theme-tone-5);
}

.mw-widget-mediaResultWidget-overlay {
    box-shadow: inset 0 0 0 1px var(--border-color-tone-2);
}

.mw-widget-mediaResultWidget.oo-ui-optionWidget-highlighted,
.mw-widget-mediaResultWidget.oo-ui-optionWidget-selected {
    box-shadow: inset 0 0 0 1px var(--accent-color);
}

/* Visual Editor */

.ve-ui-mwTemplatePage-description {
    color: var(--inactive-color);
}

.ve-ui-targetWidget:not(.oo-ui-pendingElement-pending) {
    background: var(--theme-tone-6);
}

.ve-ui-targetWidget-focused {
    border-color: var(--accent-color);
    box-shadow: inset 0 0 0 1px var(--accent-color);
}

.dark-mode .ve-ui-diffElement-attributeChange del,
.dark-mode .ve-ui-diffElement-attributeChange del:hover {
    background-color: #f2c2bf59;
    box-shadow: 0 0 0 1px #f2c2bf59;
}

.dark-mode .ve-ui-changeDescriptionsSelectWidget > .oo-ui-optionWidget-highlighted {
    background: #b6d4fb29;
}

.ve-init-mw-desktopArticleTarget #bodyContent {
    display: flex;
    flex-direction: column;
}

.ve-init-target-visual div#mw-content-text {
    height: 0;
    pointer-events: none;
    overflow: hidden;
}

.tdg-templateDataParamWidget-param-alias:first-child,
.tdg-templateDataParamWidget-param-alias {
    background-color: var(--theme-tone-7);
    border-color: var(--border-color-tone-2);
    padding: 1px;
}

.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
    background-color: #f7e5c145;
    border-color: #e2cf945c;
}

.dark-mode .oo-ui-messageWidget.oo-ui-messageWidget-block > .oo-ui-iconElement-icon {
    filter: invert(0);
}

.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:before {
    left: -1px;
}

.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor:after {
    left: 0;
}

.ve-init-mw-desktopArticleTarget-toolbarPlaceholder-bar,
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar,
.oo-ui-menuToolGroup,
.oo-ui-popupToolGroup-tools,
.ve-ui-desktopContext .ve-ui-linkContextItem .ve-ui-linkContextItem-label,
.oo-ui-toolbar-position-top .ve-ui-toolbarDialog-position-above,
.oo-ui-bookletLayout > .oo-ui-menuLayout-menu,
.ve-ui-specialCharacterPage-character,
.mw-rcfilters-ui-datePopupWidget,
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget,
.ve-ui-mwGalleryDialog-imageListMenuLayout-desktop > .oo-ui-menuLayout-menu {
    border-color: var(--border-color);
}

.ve-init-mw-progressBarWidget-bar {
    background-color: var(--accent-color);
}

.mw-notification-title,
.oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-scrollable.oo-ui-panelLayout-padded {
    color: var(--text-color);
}

.ve-init-mw-progressBarWidget {
    border-color: var(--accent-color);
}

.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link,
.mw-pulsating-dot:after,
.mw-pulsating-dot:before {
    background-color: var(--accent-color);
}

.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive
    > .oo-ui-tool-link:hover {
    background-color: var(--accent-color-tone-3);
}

.dark-mode .ve-init-mw-progressBarWidget {
    background-color: var(--theme-tone-5);
}

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

.oo-ui-tool.oo-ui-tool-with-label .oo-ui-tool-link {
    padding: 12px;
}

.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover,
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover,
.oo-ui-menuToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled:hover {
    background-color: var(--theme-tone-7);
}

.oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
    background-color: var(--theme-tone-7);
    color: var(--text-color);
}

.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:focus,
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:focus {
    outline-color: var(--accent-color);
    box-shadow: inset 0 0 0 1px var(--accent-color);
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus,
.flow-ui-editorWidget-focused .flow-ui-editorWidget-editor {
    border-color: var(--accent-color);
    box-shadow: inset 0 0 0 1px var(--accent-color);
}

.oo-ui-popupWidget-popup {
    background: var(--theme-tone-1) !important;
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus-visible {
    outline: 0;
}

.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement.oo-ui-floatableElement-floatable.oo-ui-popupWidget-anchored.oo-ui-popupWidget.ve-init-mw-switchPopupWidget.oo-ui-popupWidget-anchored-top
    span.oo-ui-labelElement-label {
    margin: 0;
    padding: 5px 0px;
}

.oo-ui-popupWidget-body-padded {
    margin: 12px;
}

.oo-ui-image-progressive.oo-ui-icon-edit,
.mw-ui-icon-edit-progressive:before,
.oo-ui-image-progressive.oo-ui-icon-wikiText,
.mw-ui-icon-wikiText-progressive:before,
.oo-ui-image-progressive.oo-ui-icon-eye,
.mw-ui-icon-eye-progressive:before,
.oo-ui-image-progressive.oo-ui-icon-help,
.mw-ui-icon-help-progressive:before,
.oo-ui-image-progressive.oo-ui-icon-menu,
.mw-ui-icon-menu-progressive:before,
.oo-ui-image-progressive:not(.oo-ui-indicatorElement-indicator) {
    filter: brightness(2) invert(0) !important;
}

.dark-mode span.oo-ui-indicatorElement-indicator.oo-ui-indicator-down.oo-ui-image-progressive {
    filter: invert(1) !important;
}

.oo-ui-toolbar-actions .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle {
    border-right: none;
}

.dark-mode .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover,
.dark-mode .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover,
.oo-ui-processDialog-actions-safe
    .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement)
    > .oo-ui-buttonElement-button:hover,
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active {
    background-color: var(--theme-tone-4);
}

.dark-mode .ve-ce-branchNode-blockSlug,
.dark-mode .ve-ce-branchNode-newSlug {
    background-color: #39393957;
}

.ve-ce-linkAnnotation.ve-ce-annotation-active {
    background-color: var(--theme-tone-4);
    box-shadow: 0 0 0 1px var(--theme-tone-4);
}

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

.oo-ui-listToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled,
.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 {
    background-color: #00adda0f;
    color: var(--accent-color);
}

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

.oo-ui-listToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled:hover {
    background: var(--theme-tone-4);
    color: var(--text-color);
}

.ve-ui-context-menu.ve-ui-desktopContext-menu
    .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
    > .oo-ui-buttonElement-button {
    background-color: var(--theme-tone-5) !important;
}

.ve-ui-desktopContext
    .ve-ui-linkContextItem
    .ve-ui-linkContextItem-label
    .oo-ui-buttonElement-button
    .oo-ui-labelElement-label {
    color: white;
}

div.oo-ui-popupWidget-popup
    .oo-ui-flaggedElement-progressive
    > a.oo-ui-buttonElement-button:hover
    .oo-ui-labelElement-label {
    color: white;
}

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

span.oo-ui-widget.oo-ui-buttonElement.oo-ui-buttonElement-framed.oo-ui-labelElement.oo-ui-flaggedElement-progressive.oo-ui-flaggedElement-primary.oo-ui-buttonWidget.oo-ui-actionWidget.oo-ui-widget-enabled
    a:hover {
    border-color: transparent !important;
    background-color: var(--accent-color-tone-3) !important;
}

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

.oo-ui-menuToolGroup-tools .oo-ui-tool.oo-ui-tool-active {
    background-color: var(--theme-tone-5);
}

.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
    background: var(--theme-tone-7);
}

.oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectWidget.oo-ui-selectWidget-unpressed.oo-ui-outlineSelectWidget {
    background: var(--theme-tone-1);
}

.oo-ui-outlineControlsWidget {
    background-color: transparent;
}

.mw-widget-mediaResultWidget.oo-ui-optionWidget-highlighted .mw-widget-mediaResultWidget-overlay,
.mw-widget-mediaResultWidget.oo-ui-optionWidget-selected .mw-widget-mediaResultWidget-overlay {
    box-shadow: inset 0 0 0 1px var(--accent-color);
}

.oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectWidget.oo-ui-outlineSelectWidget.oo-ui-selectWidget-pressed,
.ve-ui-mwGalleryDialog-highlighted-image {
    background: var(--theme-tone-1);
}

.oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-inputWidget-input {
    background-color: var(--theme-tone-7);
    border-color: var(--border-color-tone-2);
    text-shadow: none;
}

.ve-ui-mwLanguagesPage-languages-table th,
.ve-ui-mwLanguagesPage-languages-table td {
    border-color: var(--border-color-tone-2);
}

.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
    border-right: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement.oo-ui-floatableElement-floatable.oo-ui-popupWidget-anchored.oo-ui-popupWidget.oo-ui-popupTool-popup.oo-ui-popupWidget-anchored-top
    .oo-ui-popupWidget-head
    .oo-ui-labelElement-label {
    margin: 5px 0;
    font-size: 17px;
    font-weight: 500;
}

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

.oo-ui-processDialog-actions-safe
    .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement)
    > .oo-ui-buttonElement-button {
    background-color: var(--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: #d73333;
    border-color: #d73333;
}

.oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools
    .oo-ui-tool.oo-ui-widget-disabled.oo-ui-flaggedElement-primary
    > .oo-ui-tool-link,
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link {
    background-color: var(--theme-tone-8);
}

.ve-ui-mwSaveDialog-options {
    background-color: transparent;
    border: none;
}

.ve-ui-mwSaveDialog-summaryLabel {
    color: var(--text-color);
}

.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input {
    background: var(--theme-tone-6);
}

.dark-mode .ve-ui-tableLineContext > .oo-ui-iconWidget.oo-ui-iconElement.oo-ui-iconElement-icon {
    background-color: #9eadc1;
    filter: invert(0) !important;
}

.ve-ce-tableCellableNode {
    border: 1px dotted var(--border-color-tone-2);
}

.ve-ui-contextItem + .ve-ui-contextItem {
    border-top: 1px solid var(--border-color);
}

label.flow-ui-editorWidget-wikitextHelpLabel.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement.oo-ui-labelElement-label.oo-ui-labelWidget {
    padding-bottom: 12px;
}

.ve-ce-surface.notranslate.mw-editfont-monospace.ve-ce-surface-enabled,
.ve-ce-surface.notranslate.ve-ce-surface-enabled {
    background-color: var(--theme-tone-6);
}

.oo-ui-tool-title:not(.oo-ui-flaggedElement-progressive span) {
    color: var(--text-color);
}

.flow-ui-editorWidget > .flow-ui-editorWidget-editor:not(.oo-ui-pendingElement-pending) {
    background-color: var(--border-color);
}

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

.flow-ui-navigationWidget {
    border-color: var(--border-color-tone-2);
}

.flow-component .ve-ce-documentNode,
.flow-component .ve-ui-surface-placeholder {
    padding: 1rem 0.6rem;
}

.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button,
button {
    padding: 0.35em;
}

.oo-ui-messageDialog-content > .oo-ui-window-foot,
.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
    outline: 1px solid var(--border-color);
}

.flow-component .flow-list a:focus {
    background-color: var(--theme-tone-4);
}

.mw-ui-button:not(.mw-ui-icon-element) {
    padding: 8px;
}

@media (min-width: 1165px) {
    .flow-component.flow-board-page .flow-board-header {
        box-shadow: none;
    }
}

.oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
    color: var(--text-color);
    filter: invert(0);
}

.oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input,
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-labelElement.oo-ui-flaggedElement-safe.oo-ui-buttonWidget.oo-ui-actionWidget.oo-ui-buttonElement-framed:hover
    span.oo-ui-labelElement-label {
    color: var(--text-color);
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled {
    background-color: var(--theme-tone-6);
}

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

span.oo-ui-widget.oo-ui-buttonElement.oo-ui-buttonElement-framed.oo-ui-labelElement.oo-ui-flaggedElement-progressive.oo-ui-flaggedElement-primary.oo-ui-buttonWidget.oo-ui-actionWidget.oo-ui-widget-disabled:hover
    .oo-ui-labelElement-label,
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-framed.oo-ui-labelElement.oo-ui-buttonWidget.oo-ui-actionWidget
    a:hover
    .oo-ui-labelElement-label,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive
    > .oo-ui-buttonElement-button
    span.oo-ui-labelElement-label {
    color: white;
}

.oo-ui-widget.oo-ui-flaggedElement-close:hover span.oo-ui-icon-close:not(.dark-mode span) {
    filter: invert(1);
}

.oo-ui-widget.oo-ui-flaggedElement-close span.oo-ui-icon-close:not(.dark-mode span) {
    transition: filter 0.2s;
}

.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    -webkit-transition: background-color 300ms, color 300ms, border-color 300ms, box-shadow 300ms;
    transition: background-color 300ms, color 300ms, border-color 300ms, box-shadow 300ms;
}

.oo-ui-messageWidget.oo-ui-messageWidget-block p {
    color: var(--text-color-invert);
}

.ve-ui-mwSaveDialog
    .oo-ui-widget.oo-ui-widget-enabled.oo-ui-indicatorElement.oo-ui-labelElement.oo-ui-dropdownWidget:nth-of-type(3) {
    margin: 0.5rem 0;
}

.oo-ui-processDialog .oo-ui-actionWidget.oo-ui-labelElement > .oo-ui-buttonElement-button {
    transition: 0.3s;
}

.oo-ui-widget-disabled {
    opacity: 0.6;
    pointer-events: none;
}

span.oo-ui-labelElement-label.mw-widget-mediaResultWidget-nameLabel:not(.dark-mode span) {
    color: var(--text-color-invert);
}

.flow-component a.mw-ui-button.mw-ui-quiet.side-rail-toggle-button:active,
.flow-component a.mw-ui-button.mw-ui-quiet.side-rail-toggle-button:focus {
    border: none !important;
    background: transparent !important;
}