play/src/scss/blender-controls.scss

@import "functions/reverse-gradient.scss";

// consider that many darker gradient bottoms might actually be too dark, and are mis-measured due to a bevel effect (and should therefore really be lighter in reality)

$blenderBackground: #373737;
$blenderSplashBackground: #161616;
$blenderPanel: #737373;
$blenderPanelHeader: #686868;
$blenderTabBackground: #3E3E3E;
$blenderActiveTabCenter: #737373;
$blenderActiveTabTextShadow: #7D7D7D; // meh, alpha
$blenderInactiveTabCenter: #525252;
$blenderInactiveTabTextShadow: #5D5D5D; // meh, alpha
$blenderStripedLight: #797979;
$blenderStripedDark: #737373;
$blenderListBoxGradientTop: #505050; // also used for tickboxes
$blenderListBoxGradientBottom: #303030;
$blenderSpinBoxGradientTop: #A5A5A5;
$blenderSpinBoxGradientBottom: #B5B5B5;
$blenderSpinBoxFillGradientTop: #7A7A7A;
$blenderSpinBoxFillGradientBottom: #6E6E6E;
$blenderInputBorder: #454545;
$blenderMenuButtonGradientTop: #A6A6A6;
$blenderMenuButtonGradientBottom: #8E8E8E;
$blenderPushButtonGradientTop: #A3A4A4;
$blenderPushButtonGradientBottom: #8D8D8D;
$blenderToggleButtonSelectedGradientTop: #4774B7;
$blenderToggleButtonSelectedGradientBottom: #628DCE;
$blenderGridCellBackground: #9A9A9A;
$blenderGridCellBorder: #282828;

$blenderListBoxBackground: linear-gradient(to bottom, $blenderListBoxGradientTop 0%, $blenderListBoxGradientBottom 100%); // also ToggleButton unselected, and TickBox background
$blenderSpinBoxBackground: linear-gradient(to bottom, $blenderSpinBoxGradientTop 0%, $blenderSpinBoxGradientBottom 100%);
$blenderSpinBoxFillBackground: linear-gradient(to bottom, $blenderSpinBoxFillGradientTop 0%, $blenderSpinBoxFillGradientBottom 100%);
$blenderPushButtonBackground: linear-gradient(to bottom, $blenderPushButtonGradientTop 0%, $blenderPushButtonGradientBottom 100%);
$blenderMenuButtonBackground: linear-gradient(to bottom, $blenderMenuButtonGradientTop 0%, $blenderMenuButtonGradientBottom 100%);
$blenderMenuButtonBackgroundInverted: linear-gradient(to bottom, $blenderMenuButtonGradientTop 100%, $blenderMenuButtonGradientBottom 0%);
$blenderToggleButtonSelectedBackground: linear-gradient(to bottom, $blenderToggleButtonSelectedGradientTop 0%, $blenderToggleButtonSelectedGradientBottom 100%);

$elementRoundness: 7px;

@mixin disable-selection() {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

@mixin edge-raise() {
	box-shadow: inset -1px -1px rgba(94, 94, 94, 0.74),
	            inset  1px  1px rgba(189, 189, 189, 0.27);
}

@mixin edge-lower() {
	box-shadow: inset  1px  1px rgba(94, 94, 94, 0.74),
	            inset -1px -1px rgba(189, 189, 189, 0.27);
}

@mixin input() {
	padding: 2px 6px;
	border-radius: $elementRoundness;
	color: black;
	font-size: 12px;
	border: 1px solid $blenderInputBorder;
}

.editor-input-horizontal {
	.editor-input {
		margin-right: 6px;
		display: inline-block;
	}

	.editor-input:last-child {
		margin-right: 0px;
	}
}

.editor-input-vertical {
	.editor-input {
		margin-bottom: 4px;
	}

	.editor-input:last-child {
		margin-bottom: 0px;
	}
}

.editor-input-label {
	font-size: 12px;
}

.editor-input-label-inline {
	display: inline-block;
	margin-right: 6px; // FIXME
}

.editor-input-text {
	@include input;
	@include edge-lower;
	font-family: "Noto Sans", sans-serif; // FIXME: Is this correct?
	background: $blenderSpinBoxBackground;
	// font-size: 13px;
}

.editor-input-button {
	@include input;
	@include edge-raise;
	@include disable-selection;
	background: $blenderMenuButtonBackground;
	cursor: default;

	&:active {
		@include edge-lower;
		background: $blenderMenuButtonBackgroundInverted;
	}
}

.editor-input-buttonset-horizontal {
	.editor-input-button {
		display: inline-block;
		margin-right: 0px;

		&:first-child {
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
		}

		&:last-child {
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
			border-left-width: 0px;
		}

		&:not(:first-child):not(:last-child) {
			border-radius: 0px;
			border-left-width: 0px;
		}
	}
}

.editor-input-buttonset-vertical {
	.editor-input-button {
		width: 180px; // FIXME

		&:first-child {
			border-bottom-left-radius: 0px;
			border-bottom-right-radius: 0px;
		}

		&:last-child {
			border-top-left-radius: 0px;
			border-top-right-radius: 0px;
			border-top-width: 0px;
		}

		&:not(:first-child):not(:last-child) {
			border-radius: 0px;
			border-top-width: 0px;
		}
	}
}

.editor-panel-header, .editor-control-bar {
	@include edge-raise();
	@include disable-selection;
	background: $blenderPanelHeader;
	cursor: default;
}

.editor-panel-header {
	font-weight: bold;
	padding: 3px 5px;
}

.editor-control-bar {
	// FIXME: It should not be necessary to repeat the edge-raise styles here!
	box-shadow: inset -1px -1px rgba(94, 94, 94, 0.74),
				inset  1px  1px rgba(189, 189, 189, 0.27),
				0px 1px 1px 0px rgba(54, 54, 54, 0.79);
	z-index: 999;
	padding: 4px 6px;
}

@mixin list {
	@include edge-lower;
	overflow-y: auto;
}

@mixin list-item {
	font-size: 14px;
	padding: 4px 6px;
}

@mixin list-item-odd {
	@include list-item;
	background-color: $blenderStripedDark;
}

@mixin list-item-even {
	@include list-item;
	background-color: $blenderStripedLight;
}