MediaWiki:Components.css: Difference between revisions

Undo revision 914001 by Ritsu (talk)
(Replaced content with "require('Module:CommonFunctions') local getArgs = require('Module:Arguments').getArgs local p = {} function p.main(frame) local args = getArgs(frame); local CHARACTER_ID = { Elsword = 1, Aisha = 2, Rena = 3, Raven = 4, Eve = 5, Chung = 6, Ara = 7, Elesis = 8, Add = 9, LuCiel = 10, Rose = 11, Ain = 12, Laby = 13, Noah = 14, Lithia = 15...")
Tags: Replaced Reverted
(Undo revision 914001 by Ritsu (talk))
Tag: Undo
Line 1: Line 1:
require('Module:CommonFunctions')
/* Wiki editor */
local getArgs = require('Module:Arguments').getArgs
.ui-widget {
local p = {}
    font-size: 1rem;
    max-width: 500px;
}


function p.main(frame)
.ui-widget-overlay {
     local args = getArgs(frame);
     background: #000;
}


     local CHARACTER_ID = {
.ui-dialog-titlebar.ui-widget-header {
        Elsword = 1,
    background: var(--theme-tone-7);
        Aisha = 2,
    color: var(--text-color);
        Rena = 3,
    border-radius: 0;
        Raven = 4,
    border: 0;
        Eve = 5,
    border-bottom: 1px solid var(--border-color-tone-2);
        Chung = 6,
    margin: -3px;
        Ara = 7,
    font-weight: 500;
        Elesis = 8,
}
        Add = 9,
 
        LuCiel = 10,
.ui-dialog.ui-widget.ui-widget-content,
        Rose = 11,
.ui-dialog .ui-dialog-buttonpane {
        Ain = 12,
    background: var(--theme-tone-6);
        Laby = 13,
}
        Noah = 14,
 
         Lithia = 15
.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;
}


    local character = args[1]
.oo-ui-widget-disabled {
    local data = args[2]
     opacity: 0.6;
    local isBase = not data or data == base;
     pointer-events: none;
    local pathIndex = ""
}
    local jobIndex = ""
    local transString = ""
    local link = args.link and (isBase and character or args.link) or ""
     local lang = args.link and args.lang and ("/" .. args.lang) or ""
     local scale = args.scale or 1
    local charId = string.len(CHARACTER_ID[character]) == 1 and ("0" .. CHARACTER_ID[character]) or CHARACTER_ID[character]


    if isBase then
span.oo-ui-labelElement-label.mw-widget-mediaResultWidget-nameLabel:not(.dark-mode span) {
        jobIndex = "NO_OCCUPATION"
    color: var(--text-color-invert);
    elseif data ~= "base" then
}
        local arr = split(data, "x");
        if not #arr then
            arr[1] = data
        end
        pathIndex = arr[1] .. "LINE_"
        if string.find(pathIndex, "t") then
            transString = "_T"
            pathIndex = pathIndex:gsub("t", "")
            arr[2] = "2"
        end
        jobIndex = arr[2] and ("0" .. arr[2]) or ""
    end


    local image = mw.html.create('div'):addClass('image-cropped')
.flow-component a.mw-ui-button.mw-ui-quiet.side-rail-toggle-button:active,
    image:tag('div'):addClass('image-wrap image-face')
.flow-component a.mw-ui-button.mw-ui-quiet.side-rail-toggle-button:focus {
        :attr("style", "width: " .. 116 * scale .. "px; height: " .. 60 * scale .. "px;")
    border: none !important;
        :wikitext("[[File:Character Face " .. charId .. "-FACE " .. pathIndex .. jobIndex .. transString .. ".png|link=" .. link .. lang .. "]]")
    background: transparent !important;
}


    return tostring(image)
.mw-collapsible.mw-collapsed:not(.mw-made-collapsible) {
end
    display: none;
}


return p
.image-face img {
    max-width: 100%;
    height: auto;
}