mediawiki-skins-Citizen/skinStyles/mediawiki/mediawiki.widgets.DateInputWidget.styles.less

/*
 * Citizen - Widget Datetime
 * https://starcitizen.tools
*/

@import '../../resources/variables.less';

.skin-citizen-dark {
	.mw-widget-dateInputWidget {
		&-handle {
			border-color: @dark-bg-50;
			background-color: var( --color-surface-0 );
			color: var( --color-base--emphasized );
		}

		&.oo-ui-widget-enabled {
			.mw-widget-dateInputWidget-handle {
				&:hover {
					border-color: @dark-bg-60;
				}
			}
		}

		&-calendar {
			background-color: var( --color-surface-0 ) !important;
		}

		&.oo-ui-widget-disabled {
			.mw-widget-dateInputWidget-handle {
				border-color: @dark-bg-30 !important;
				background-color: @dark-bg-20 !important;
				color: var( --color-base--subtle ) !important;
				text-shadow: 0 1px 1px var( --color-surface-0 ) !important;
			}
		}
	}

	/**
Calendar
TODO move into separate file?
 */
	.mw-widgets-datetime-calendarWidget {
		border-color: @dark-bg-50 !important;
		background-color: var( --color-surface-0 ) !important;

		&-grid {
			.mw-widgets-datetime-calendarWidget-cell {
				&.mw-widgets-datetime-calendarWidget-extra .oo-ui-buttonElement-button {
					.oo-ui-labelElement-label {
						color: var( --color-base--subtle ) !important;
					}
				}
			}
		}
	}

	/**
mw.widgets.CalendarWidget.less
  TODO move into separate file?
 */
	.mw-widget-calendarWidget {
		border: 1px solid @dark-bg-50 !important;

		&-day {
			color: var( --color-base ) !important;
		}

		&-day-heading {
			color: var( --color-base ) !important;
		}

		&-day-additional {
			color: var( --color-base--subtle ) !important;

			&:hover {
				color: var( --color-base ) !important;
			}
		}
	}
}