MediaWiki:Common.css/src/system/mediawiki.widgets.datetime/DateTimeInputWidget.scss

From Terraria Wiki
Jump to navigation Jump to search

This page is one of the SCSS pages which are the basis for MediaWiki:Common.css. After you edit this page, you will need to recompile them for your changes to take effect. See Terraria Wiki:CSS to learn more.

/********* mediawiki.widgets.datetime/DateTimeInputWidget *********/

/* overwriting styles from here:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/REL1_39/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less */

.mw-widgets-datetime-dateTimeInputWidget {
    &-handle {
        background-color: var(--ooui--textarea-background-color);
        color: var(--theme-text-color);
        border-color: var(--ooui--textarea-border-color);
        box-shadow: none;
    }

    &-editField {
        .mw-widgets-datetime-dateTimeInputWidget-invalid {
            border-color: var(--ooui--textarea-invalid-border-color);
            box-shadow: none;

            &:focus {
                border-color: var(--ooui--textarea-invalid-border-color);
                box-shadow: none;
            }
        }
    }

    &-empty {
        .mw-widgets-datetime-dateTimeInputWidget-handle {
            color: var(--ooui--textarea-placeholder-color);
        }
    }

    &.oo-ui-widget-enabled {
        .mw-widgets-datetime-dateTimeInputWidget-handle {
            &:hover {
                border-color: var(--ooui--textarea-border-color--hover);
            }
        }

        &:hover {
            input,
            textarea {
                border-color: var(--ooui--textarea-border-color--hover);
            }
        }

        .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
            background-color: var(--oouihelper--textinput-background-lighter);
        }

        .mw-widgets-datetime-dateTimeInputWidget-editField:focus {
            box-shadow: inset 0 0 0 1px var(--ooui--textarea-border-color--focus);
        }

        &.oo-ui-flaggedElement-invalid {
            .mw-widgets-datetime-dateTimeInputWidget-handle {
                border-color: var(--ooui--textarea-invalid-border-color);
                box-shadow: none;

                &:focus {
                    border-color: var(--ooui--textarea-invalid-border-color);
                    box-shadow: none;
                }
            }
        }
    }

    &.oo-ui-widget-disabled {
        .mw-widgets-datetime-dateTimeInputWidget-handle {
            background-color: var(--ooui--textarea-disabled-background-color);
            -webkit-text-fill-color: var(--ooui--textarea-disabled-color);
            color: var(--ooui--textarea-disabled-color);
            border-color: var(--ooui--textarea-disabled-border-color);
            text-shadow: none;
        }
    }
}