5etools-mirror-2.github.io/scss/includes/ui-night.scss

/*
Shared UI components
 */
@use "sass:color";

@use "../vars/vars";
@use "../vars/vars-night";

/* region Misc/Shared */
.ve-night-mode .ui__ {
	&ipt-color {
		&::-webkit-color-swatch {
			border: 0;
		}
	}
}
/* endregion */

/* region List */
.ve-night-mode .ui-list__ {
	&wrp-preview {
		background: vars-night.$rgb-bg--night;
	}

	&btn-inline {
		color: vars-night.$rgb-font--night;

		&:hover {
			color: color.adjust(vars-night.$rgb-font--night, $lightness: 10%);
			background: #ffffff30;
		}
	}
}
/* endregion */

/* region Source overlay */
.ve-night-mode .ui-source__ {
	&divider {
		background: vars-night.$rgb-border-grey--night;
	}
}
/* endregion */

/* region Modals */
.ve-night-mode .ui-modal__ {
	&header {
		&--border {
			border-color: vars-night.$rgb-border-grey--trans-night;
		}
	}

	&footer {
		border-color: vars-night.$rgb-border-grey--trans-night;
	}

	&overlay-blind {
		background-color: vars-night.$rgb-bg--night;
	}

	&inner {
		background: vars-night.$rgb-bg--night;
		box-shadow: 0 6px 12px rgb(0 0 0 / 56%);
		border-color: vars-night.$rgb-border-grey--trans-night;

		&--mode-fullscreen {
			box-shadow: none;
		}
	}

	&row--cb:hover {
		background: vars-night.$rgb-bg--alt-night;
	}
}
/* endregion */

/* region Search */
.ve-night-mode .ui-search__ {
	&row {
		border-color: vars-night.$rgb-border-grey--night;

		&:hover {
			background: vars.$rgb-off-black;
		}
	}

	&ipt-search-sub-wrp {
		border-color: vars-night.$rgb-border-grey--night;
	}
}
/* endregion */

/* region Tabs */
.ve-night-mode .ui-tab__ {
	&btn-tab-head {
		&--active,
		&--active:focus,
		&--active:hover,
		&--active:active {
			background-color: vars-night.$rgb-btn-default-active--night;
		}
	}

	&wrp-tab-body {
		&--background {
			background: vars-night.$rgb-bg--night;
			border-color: vars-night.$rgb-border-grey--trans-night;
			border-bottom-color: color.adjust(vars-night.$rgb-border-grey--trans-night, $lightness: - 15%);
		}
	}

	&wrp-tab-heads--border {
		border-color: vars-night.$rgb-border-grey--night;
		border-width: 2px;
	}
}

.ve-night-mode .ui-tab-side__ {
	&wrp-tab {
		background: vars-night.$rgb-bg--night;
		border-color: vars-night.$rgb-border-grey--trans-night;
	}
}
/* endregion */

/* region Proficiency */
.ve-night-mode .ui-prof__ {
	&btn-cycle {
		border-color: vars-night.$rgb-border-grey--night;

		&:active {
			@include vars-night.mix-shadow-active--night;
		}

		&[data-state="0"] {
			background: vars-night.$rgb-bg--night;
		}

		&[data-state="1"] {
			background: vars-night.$rgb-border-grey--night;
			border-color: color.adjust(vars-night.$rgb-border-grey--night, $lightness: 10%);
		}

		&[data-state="2"] {
			background: vars-night.$rgb-border-grey--night;
			border-color: color.adjust(vars-night.$rgb-border-grey--night, $lightness: 10%);

			&::before {
				color: vars-night.$rgb-bg--night;
			}
		}

		&[data-state="3"] {
			background: repeating-linear-gradient(135deg, vars-night.$rgb-bg--night, vars-night.$rgb-bg--night 10px, vars-night.$rgb-border-grey--night 10px, vars-night.$rgb-border-grey--night 20px);
			border-color: color.adjust(vars-night.$rgb-border-grey--night, $lightness: 10%);
		}
	}
}
/* endregion */

/* region Direction picker */
.ve-night-mode .ui-dir__ {
	&face {
		background: vars-night.$rgb-bg--night;
		border-color: vars-night.$rgb-border-grey--night;
	}

	&arm {
		background: vars-night.$rgb-font--night;
		box-shadow: none;
	}
}
/* endregion */

/* region Hover tips */
.ve-night-mode .ui-tip__ {
	&child {
		border-color: vars-night.$rgb-border-grey--night;
		background: vars-night.$rgb-bg--night;
	}
}
/* endregion */

/* region Context menu */
.ve-night-mode .ui-ctx {
	&__wrp {
		background: vars-night.$rgb-bg--night;
		border: 1px solid vars-night.$rgb-border-grey--trans-night;
		border-top-color: vars-night.$rgb-border-grey--night;
	}

	&__divider {
		background: vars-night.$rgb-border-grey--night;
	}

	&__btn {
		color: vars-night.$rgb-font--night;

		&:hover {
			background: vars-night.$rgb-bg--alt-night;
			color: #fff;
		}

		&.disabled,
		&.disabled:hover {
			background: vars-night.$rgb-bg--night;
			color: vars-night.$rgb-font--night;
		}
	}
}
/* endregion */

/* region Picker */
.ve-night-mode .ui-pick {
	&__ {
		&disp-text {
			border-color: vars-night.$rgb-border-grey--night;
		}
	}
}
/* endregion */

/* region "Copied" tooltip */
.ve-night-mode .clp__ {
	&disp-copied {
		background: radial-gradient(ellipse at center, vars-night.$rgb-bg--night 0%, vars-night.$rgb-bg--night 35%, transparent 75%, transparent 100%);
	}
}
/* endregion */

/* region Decorated inputs */
.ve-night-mode .ui-ideco__ {
	&btn-ticker {
		background: vars-night.$rgb-border-grey--night;
		color: #fff;

		&:hover,
		&:active,
		&:focus,
		&:active:focus {
			box-shadow: none;
			outline: none;
		}

		&:hover {
			background: color.adjust(vars-night.$rgb-border-grey--night, $lightness: - vars.$pct-darken-hover);
			color: #fff;
		}

		&:active,
		&:focus,
		&:active:focus {
			background: color.adjust(vars-night.$rgb-border-grey--night, $lightness: - vars.$pct-darken-active);
			color: #fff;
		}
	}
}
/* endregion */

/* region Select2 */
.ve-night-mode .ui-sel2__ {
	&ipt-search {
		background: vars-night.$rgb-bg--night;
	}

	&wrp-options {
		background-color: vars-night.$rgb-bg--night;
		border-color: vars-night.$rgb-border-grey--night;
	}

	&disp-option {
		&.active,
		&:focus,
		&:hover {
			background: vars-night.$rgb-bg--alt-night;
		}

		&:focus.active,
		&:hover.active {
			background: color.adjust(vars-night.$rgb-bg--alt-night, $lightness: vars.$pct-darken-active);
		}
	}
}
/* endregion */

/* region Range Slider */
.ve-night-mode .ui-slidr {
	&__ {
		&thumb {
			background: vars.$rgb-border-grey--trans;
			border-color: vars-night.$rgb-font--night;

			&--hover,
			&:hover {
				background: color.adjust(vars.$rgb-border-grey--trans, $lightness: 10%);
				border-color: vars-night.$rgb-font--night;
			}
		}

		&track-outer {
			border-color: vars-night.$rgb-border-grey--night;
		}

		&track-inner {
			background: vars-night.$rgb-border-grey--trans-night;
		}

		&disp-value {
			&--visible {
				border-color: vars-night.$rgb-border-grey--night;
				background: vars-night.$rgb-bg--night;
			}
		}

		&pip {
			background: vars-night.$rgb-font--night;
		}
	}
}
/* endregion */