MediaWiki:Common.css/src/system/mediawiki.widgets/DateInputWidget.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.

Ancestors: / src / system / mediawiki.widgets / DateInputWidget.scss

Siblings:CalendarWidget.scssDateInputWidget.scss

Children: (none)

/********* mediawiki.widgets.DateInputWidget *********/

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

.mw-widget-dateInputWidget {
	&-calendar {
		background-color: var(--oouihelper--text-background);
		box-shadow: none;

		&:focus {
			box-shadow: inset 0 0 0 1px var(--ooui--textarea-border-color--focus);
		}
	}

	&-empty {
		.mw-widget-dateInputWidget-handle {
			color: var(--ooui--textarea-placeholder-color);
		}
	}

	&.oo-ui-flaggedElement-invalid {
		.mw-widget-dateInputWidget-handle {
			border-color: var(--ooui--textarea-invalid-border-color);
		}
	}

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

		.oo-ui-inputWidget-input[ readonly ]:not( .oo-ui-pendingElement-pending ) ~ .mw-widget-dateInputWidget-handle {
			background-color: var(--ooui--textarea-readonly-background-color);
		}
	}

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

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

.mw-widget-dateInputWidget {
	&-handle {
		background-color: var(--ooui--textarea-background-color);
		color: var(--theme-text-color);
		border-color: var(--ooui--textarea-border-color);
	}

	&.oo-ui-widget-enabled {
		.mw-widget-dateInputWidget-handle {
			box-shadow: none;

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

			&:focus {
				outline: 0;
				border-color: var(--ooui--textarea-border-color--focus);
				box-shadow: inset 0 0 0 1px var(--ooui--textarea-border-color--focus);
			}
		}
	}
}