Initial restyle (#111)

![image](https://github.com/storytold/storyteller-bevy/assets/10376144/b8078ef3-8d36-433d-b75b-5c410eec7b85)

studio-web/src/lib/inspector/entity-inspector.element.scss

@@ -3,10 +3,11 @@
 
 	display: flex;
 	flex-direction: column;
-	gap: 1.5rem;
-	padding: 1rem;
+	gap: var(--padding);
 	overflow: auto;
 
+	--background-color: var(--color-panel-background);
+
 	color: #FFFC;
 
 	&::-webkit-scrollbar {
@@ -31,3 +32,13 @@
 *, *::before, *::after {
 	box-sizing: border-box;
 }
+
+.container {
+	background-color: var(--background-color);
+	border-radius: var(--corner-radius);
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	padding: var(--padding);
+	gap: var(--padding);
+}

studio-web/src/lib/inspector/entity-inspector.element.ts

@@ -34,63 +34,71 @@ export class EntityInspectorElement extends LitElement {
 			this.requestUpdate();
 	}
 
-	protected override render = () => html`
-		${this._sceneData
-			?.selectionComponents
-			.slice()
-			.sort((a, b) => {
-				const ordA = COMPONENT_SORT_ORDER.indexOf(a.name);
-				const ordB = COMPONENT_SORT_ORDER.indexOf(b.name);
+	protected override render () {
+		let components = this._sceneData
+		?.selectionComponents
+		.slice()
+		.sort((a, b) => {
+			const ordA = COMPONENT_SORT_ORDER.indexOf(a.name);
+			const ordB = COMPONENT_SORT_ORDER.indexOf(b.name);
 
-				if (ordA === -1) return Infinity;
-				if (ordB === -1) return -Infinity;
+			if (ordA === -1) return Infinity;
+			if (ordB === -1) return -Infinity;
 
-				return ordA - ordB;
-			})
-			.map(({ name, value }) => {
-				switch (name) {
-					case "bevy_core::name::Name": {
-						return html`
-							<sts-name-inspector
-								.value=${value.name}
-							></sts-name-inspector>
-						`;
-					}
-					case "bevy_transform::components::transform::Transform": {
-						return html`
-							<sts-transform-inspector
-								.translation=${value.translation}
-								.rotation=${value.rotation}
-								.scale=${value.scale}
-							></sts-transform-inspector>
-						`;
-					}
-					case "bevy_pbr::pbr_material::StandardMaterial": {
-						const { colorSpace, baseColor } = isLinear(value.base_color)
-							? { colorSpace: "linear", baseColor: value.base_color.RgbaLinear }
-							: { colorSpace: "srgb", baseColor: value.base_color.Rgba };
-
-						return html`
-							<sts-material-inspector
-								.baseColor=${baseColor}
-								.colorSpace=${colorSpace}
-								.roughness=${value.perceptual_roughness}
-								.metallic=${value.metallic}
-								.reflectance=${value.reflectance}
-							></sts-material-inspector>
-						`;
-					}
-					default: {
-						return nothing;
-						// return html`
-						// 	<h3>Unknown Component: ${name}</h3>
-						// 	<pre>${JSON.stringify({ name, value }, null, "   ")}</pre>
-						// `;
-					}
+			return ordA - ordB;
+		})
+		.map(({ name, value }) => {
+			switch (name) {
+				case "bevy_core::name::Name": {
+					return html`
+						<sts-name-inspector
+							.value=${value.name}
+						></sts-name-inspector>
+					`;
 				}
-			})
+				case "bevy_transform::components::transform::Transform": {
+					return html`
+						<sts-transform-inspector
+							.translation=${value.translation}
+							.rotation=${value.rotation}
+							.scale=${value.scale}
+						></sts-transform-inspector>
+					`;
+				}
+				case "bevy_pbr::pbr_material::StandardMaterial": {
+					const { colorSpace, baseColor } = isLinear(value.base_color)
+						? { colorSpace: "linear", baseColor: value.base_color.RgbaLinear }
+						: { colorSpace: "srgb", baseColor: value.base_color.Rgba };
+
+					return html`
+						<sts-material-inspector
+							.baseColor=${baseColor}
+							.colorSpace=${colorSpace}
+							.roughness=${value.perceptual_roughness}
+							.metallic=${value.metallic}
+							.reflectance=${value.reflectance}
+						></sts-material-inspector>
+					`;
+				}
+				default: {
+					return nothing;
+					// return html`
+					// 	<h3>Unknown Component: ${name}</h3>
+					// 	<pre>${JSON.stringify({ name, value }, null, "   ")}</pre>
+					// `;
+				}
+			}
+		}).filter((value) => value !== nothing) || [];
+		if (components?.length === 0) {
+			return nothing;
 		}
+		return html`
+		<div class="container">
+		${components
+		}
+		</div>
 	`;
+	}
 }
 
 const COMPONENT_SORT_ORDER: Array<InspectorComponent["name"]> = [

studio-web/src/lib/transform-toolbar.element.scss

@@ -8,7 +8,7 @@
 	pointer-events: auto;
 
 	// TODO: Copypasta
-	background: #0006;
+	background: var(--color-toolbar-background);
 	color: #FFFC;
 	backdrop-filter: blur(16px);
 	transition: {
@@ -16,6 +16,7 @@
 		duration: 0.1s;
 		timing-function: linear;
 	}
+	border-radius: var(--corner-radius);
 
 	&:hover {
 		background: #0008;
@@ -28,7 +29,9 @@
 	}
 
 	&:has(:checked) {
-		background: #7A2C34E3;
+		border-color: var(--color-accent);
+		border-width: 2px;
+		border-style: solid;
 		color: #FFF;
 
 		&:hover {