Fx reboot, WIP

bin/hidekit.css

@@ -43,8 +43,216 @@ kit-root {
 		max-height: 500px;
 		overflow: auto;
 	}
-}
 
+	kit-div.kit-param-comp > kit-text {
+		flex: 0 0 auto;
+		min-width: 10px;
+		margin-left: 3px;
+	}
+
+	kit-curve-editor {
+		flex: 1 1;
+		display: flex;
+		min-width: 0;
+		height: 22px;
+		cursor: pointer;
+
+		> svg {
+			flex: 1 1;
+			min-width: 0;
+			width: 0;
+			padding: 2px;
+			overflow: visible;
+		}
+		> svg path.main {
+			stroke-width: 1.5px;
+		}
+		&:hover > svg {
+			border-color: var(--color-tool-bg-hover);
+		}
+	}
+	kit-curve-editor, kit-curve-editor-window {
+		svg {
+			box-sizing: border-box;
+			background-color: #161616;
+			border: 1px solid var(--color-border);
+			border-radius: 3px;
+		}
+		path {
+			fill: none;
+			stroke: #f05a5a;
+		}
+		path, line {
+			vector-effect: non-scaling-stroke;
+		}
+		path.main {
+			stroke-width: 2px;
+		}
+		path.extreme {
+			stroke-width: 1px;
+			stroke-dasharray: 4 3;
+		}
+		.band {
+			fill: rgba(240, 90, 90, 0.15);
+			stroke: none;
+		}
+		line.grid {
+			stroke: var(--color-border);
+		}
+		line.zero {
+			stroke: #555;
+		}
+		rect.outside {
+			fill: rgba(0, 0, 0, 0.35);
+		}
+		rect.keys-box {
+			fill: rgba(240, 181, 90, 0.12);
+			stroke: #f0b55a;
+			stroke-dasharray: 3 2;
+			pointer-events: none;
+		}
+		rect.selection-box {
+			fill: rgba(240, 181, 90, 0.06);
+			stroke: #f0b55a;
+		}
+		text {
+			fill: var(--color-highlight-gray);
+			font-size: 9px;
+			pointer-events: none;
+			user-select: none;
+		}
+		rect.key {
+			fill: #eee;
+			cursor: move;
+		}
+		rect.key.selected {
+			fill: #f0b55a;
+		}
+		path.other {
+			opacity: 0.5;
+		}
+		rect.key.other {
+			fill: var(--color-highlight-gray);
+			cursor: pointer;
+		}
+		line.tangent {
+			stroke: #999;
+		}
+		circle.handle {
+			fill: #999;
+			cursor: move;
+		}
+	}
+
+	kit-curve-editor-window {
+		flex: 1 1;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		min-height: 0;
+		font-size: 11px;
+		color: var(--color-text);
+
+		kit-curve-body {
+			flex: 1 1;
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+			min-height: 0;
+			padding: 8px;
+		}
+
+		kit-root.kit-curve-fields-root {
+			display: grid;
+			grid-template-columns: auto 1fr;
+			align-items: center;
+		}
+		kit-line.kit-curve-fields {
+			grid-column: 2;
+			flex-wrap: wrap;
+			max-width: none;
+			margin-block: 0;
+			padding: 2px 4px;
+			border-radius: 3px;
+
+			&.kit-curve-selectable {
+				cursor: pointer;
+				&:hover:not(.active) {
+					background-color: hsl(from var(--color-menu-bg-highlight) h s l / 0.5);
+				}
+			}
+			&.active {
+				background-color: var(--color-menu-bg-highlight);
+			}
+			kit-text {
+				flex: 0 0 auto;
+				min-width: 28px;
+			}
+			> kit-div {
+				flex: 0 0 auto;
+			}
+			kit-select {
+				min-width: 120px;
+			}
+			kit-slider {
+				width: 64px;
+			}
+			kit-button {
+				flex: 0 0 auto;
+				width: 24px;
+			}
+			> kit-spacer {
+				flex: 1 1;
+			}
+		}
+		kit-curve-view {
+			flex: 1 1;
+			display: flex;
+			min-height: 0;
+			outline: none;
+
+			> svg {
+				flex: 1 1;
+				min-width: 0;
+			}
+		}
+		kit-presets {
+			flex: 0 0 auto;
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			gap: 6px;
+			padding: 6px 8px;
+			background-color: var(--color-menu-bg);
+			border-top: 1px solid var(--color-border);
+
+			svg {
+				width: 44px;
+				height: 28px;
+				padding: 3px;
+				overflow: visible;
+				background-color: var(--color-menu-bg);
+				cursor: pointer;
+			}
+			svg:hover {
+				border-color: var(--color-tool-bg-hover);
+				background-color: var(--color-menu-bg-highlight);
+			}
+		}
+		kit-curve-hint {
+			margin-left: auto;
+			color: var(--color-highlight-gray);
+		}
+	}
+
+	.kit-unset:not(kit-div), kit-div.kit-unset > * {
+		opacity: 0.45;
+		filter: grayscale(1);
+	}
+	.kit-unset:not(kit-div):hover, kit-div.kit-unset > :hover, kit-div.kit-unset > :focus-within {
+		opacity: 0.8;
+	}
+}
 /**
 	We use scope to avoid messing with the inner styles of complex widgets
 **/
@@ -71,6 +279,8 @@ kit-root {
 		--widget-bg-disabled: #222222;
 		--widget-border-color: #484848;
 		--widget-border-color-disabled: #333333;
+		--widget-bg-animated: #2c3d26;
+		--widget-border-color-animated: #4f7a3a;
 		--widget-border-color-hover: hsl(from var(--widget-border-color) h s calc(l + 20));
 
 		--widget-left-pad: 5px;
@@ -87,6 +297,10 @@ kit-root {
 
 		--section-padding: 8px;
 
+		/* the label of a line, and the most its widgets take after it (the rest of the panel stays empty) */
+		--label-width: 120px;
+		--content-max-width: 260px;
+
 		/* needed for range background */
 		--range-fill: var(--button-bg-highlight);
 
@@ -202,6 +416,15 @@ kit-root {
 			}
 		}
 
+		.kit-animated.disabled {
+			pointer-events: auto;
+
+			input {
+				background-color: var(--widget-bg-animated);
+				border-color: var(--widget-border-color-animated);
+			}
+		}
+
 		--basic-border: 1px solid;
 
 		kit-button, input {
@@ -312,6 +535,9 @@ kit-root {
 					font-variant-numeric: tabular-nums;
 			}
 			> kit-line {
+				/* the header of a collapsible item (list) spans the panel */
+				max-width: none;
+
 				&::before {
 					display: block;
 					content: "";
@@ -588,6 +814,8 @@ kit-root {
 			gap: 4px;
 			min-width: 0;
 			min-height: var(--widget-height);
+			/* the label, the gap after it, the widgets, the paddings */
+			max-width: calc(var(--label-width) + 4px + var(--content-max-width) + var(--section-padding) + 2px);
 
 			kit-label {
 				font-variant-numeric: tabular-nums;
@@ -621,7 +849,7 @@ kit-root {
 			}
 
 			.first {
-				flex: 0 0 85px;
+				flex: 0 0 var(--label-width);
 				text-align: right;
 				margin-left: 0;
 			}

bin/style.css

@@ -1776,33 +1776,6 @@ input[type=checkbox] {
 		/* background-color: rgba(0, 0, 0, 0.219); */
 		outline: none;
 	}
-	.keyPopup {
-		padding: 4px;
-		padding-bottom: 2px;
-		.line {
-			display: flex;
-			align-items: baseline;
-			margin-bottom: 2px;
-		}
-		label{
-			text-align: right;
-			padding-right: 0.5em;
-			width: 40px;
-			display: inline-block;
-		}
-		input, select {
-			box-sizing: border-box;
-			height: 22px !important;
-			width: 100px  !important;
-			margin: 0;
-			padding: 2px;
-		}
-		input::-webkit-outer-spin-button,
-		input::-webkit-inner-spin-button {
-		-webkit-appearance: none;
-		margin: 0;
-		}
-	}
 	svg {
 		--selectCol: rgb(255, 255, 255);
 		--previewCol: rgb(192, 111, 6);
@@ -1886,6 +1859,34 @@ input[type=checkbox] {
 	}
 }
 
+.keyPopup {
+	padding: 4px;
+	padding-bottom: 2px;
+	.line {
+		display: flex;
+		align-items: baseline;
+		margin-bottom: 2px;
+	}
+	label{
+		text-align: right;
+		padding-right: 0.5em;
+		width: 40px;
+		display: inline-block;
+	}
+	input, select {
+		box-sizing: border-box;
+		height: 22px !important;
+		width: 100px  !important;
+		margin: 0;
+		padding: 2px;
+	}
+	input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+	}
+}
+
 /* FX Editor */
 
 .fx-script {