mediawiki-skins-Citizen/skinStyles/jquery.ui/smoothness/jquery.ui.theme.less

/*
 * Citizen - jQuery UI Smoothness Theme
 * https://starcitizen.tools
*/

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

/*!
 * jQuery UI CSS Framework 1.9.2
 */

/* Component containers
----------------------------------*/
.ui {
	&-dialog {
		box-shadow: var( --box-shadow-dialog );

		.ui-dialog-titlebar {
			padding: var( --space-md );
		}

		&.ui-widget-content {
			background: var( --color-surface-1 );
			border-radius: var(--border-radius--medium);
		}
	}

	&-widget {
		font-family: var( --font-family-base );
		font-size: 0.875rem;

		/* Align with Codex styles */
		input,
		select,
		textarea {
			border-color: var( --border-color-base--darker );
			// Show background when hovered
			background-color: transparent;
			color: var( --color-base--emphasized );
			padding: var(--space-xxs) var(--space-xs);
			/* FIXME: Replace with line-height-small when we import Codex line height */
			line-height: var( --line-height-sm );

			&:hover {
				border-color: var( --color-primary--hover );
				background-color: var( --color-surface-0 );
			}

			&:focus {
				border-color: var( --color-primary );
				background-color: var( --color-surface-0 );
				box-shadow: inset 0 0 0 1px var( --color-primary );
				outline: 0;
			}
		}

		input,
		select,
		textarea,
		button {
			font-family: var( --font-family-base );
			border-radius: var(--border-radius--small);
		}

		&-content {
			border-color: var( --border-color-base );
			background: var( --color-surface-2 );
			color: var( --color-base );
		}

		&-header {
			background: var( --color-surface-2--hover );
			color: var(--color-base--emphasized);
			font-weight: var( --font-weight-semibold );
			font-size: 1rem;
			border: 0;
		}
	}
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border-color: var( --border-color-base );
	background: var( --color-surface-2 );
	color: var( --color-base );
	font-weight: var(--font-weight-medium);
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	color: var( --color-base );
}

.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 {
	border-color: transparent;
	background: var( --color-surface-2--hover );
	color: var( --color-base--emphasized );
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
	color: var( --color-base--emphasized );
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border-color: var( --color-surface-2--active );
	background: var( --color-surface-2--active );
	color: var( --color-base--subtle );
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: var( --color-base--subtle );
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border-color: var( --border-color-base );
	background: var( --background-color-primary--hover );
	color: var( --color-primary );
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: var( --color-primary );
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border-color: var( --border-color-base );
	background: var( --background-color-destructive );
	color: var( --color-destructive );
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: var( --color-destructive );
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: var( --color-destructive );
}

/* Overlays */
.ui-widget-overlay {
	background: var( --background-color-overlay--lighter );
	opacity: 1;
}

.skin-citizen-dark {
	.ui-widget-header .ui-icon {
		filter: invert(1) hue-rotate(180deg);
	}
}