The great move >.<

2026-02-05 22:26:34 +01:00
parent 175ea1b726
commit 083cb70fbe
90 changed files with 85 additions and 137 deletions
@@ -0,0 +1,141 @@
+.dev-tools {
+	--font-sans:
+		ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+		"Segoe UI Symbol", "Noto Color Emoji";
+	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+	--font-mono:
+		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+		"Courier New", monospace;
+
+	--rgb-blurple: 101, 114, 245;
+	--c-blurple: rgb(var(--rgb-blurple));
+
+	--rgb-fuchsia: 238, 69, 158;
+	--c-fuchsia: rgb(var(--rgb-fuchsia));
+
+	--rgb-green: 35, 165, 89;
+	--c-green: rgb(var(--rgb-green));
+
+	--rgb-yellow: 240, 178, 50;
+	--c-yellow: rgb(var(--rgb-yellow));
+
+	--rgb-orange: 255, 144, 0;
+	--c-orange: rgb(var(--rgb-orange));
+
+	--rgb-red: 218, 55, 60;
+	--c-red: rgb(var(--rgb-red));
+
+	--rgb-cyan: 95, 205, 228;
+	--c-cyan: rgb(var(--rgb-cyan));
+
+	--rgb-pink: 246, 42, 245;
+	--c-pink: rgb(var(--rgb-pink));
+
+	--rgb-gray: 117, 126, 138;
+	--c-gray: rgb(var(--rgb-gray));
+
+	--rgb-white: 255, 255, 255;
+	--c-white: rgb(var(--rgb-white));
+
+	--rgb-black: 30, 31, 34;
+	--c-black: rgb(var(--rgb-black));
+
+	--c-bg-0: rgb(30, 31, 34);
+	--c-bg-1: rgb(43, 45, 49);
+	--c-bg-2: rgb(49, 51, 56);
+	--c-bg-3: rgb(64, 66, 73);
+
+	--c-fg-0: rgb(255 255 225);
+	--c-fg-1: rgb(219 222 225);
+	--c-fg-2: rgb(181 186 193);
+	--c-fg-3: rgb(113 116 120);
+
+	--sp-1: 4px;
+	--sp-2: 8px;
+	--sp-3: 16px;
+	--sp-4: 24px;
+	--sp-5: 32px;
+	--sp-6: 48px;
+
+	height: 100%;
+	min-width: 1px;
+	max-width: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	order: -1;
+	font-size: medium;
+	font-family: var(--font-sans);
+
+	*,
+	*::after,
+	*::before {
+		box-sizing: border-box;
+	}
+
+	*:focus {
+		outline-width: 2px;
+		outline-style: solid;
+		outline-color: var(--c-blurple);
+	}
+}
+
+.tool-bar {
+	overflow: hidden;
+	border-right: 1px solid var(--c-fg-3);
+	background: var(--c-bg-0);
+	color: var(--c-fg-1);
+	width: 100%;
+	height: 100%;
+	padding: var(--sp-2);
+	display: flex;
+	flex-flow: column nowrap;
+	gap: var(--sp-2);
+}
+
+.tool-bar-resize {
+	position: absolute;
+	top: 0;
+	right: -3px;
+	width: 5px;
+	height: 100%;
+	cursor: ew-resize;
+	user-select: none;
+}
+
+.zoom-bar {
+	display: flex;
+	gap: var(--sp-2);
+
+	button {
+		color: inherit;
+		border-radius: var(--sp-1);
+		border: none;
+		background: transparent;
+		padding: 0;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	button:hover {
+		background: var(--c-bg-3);
+	}
+}
+
+.scene-props {
+	display: flex;
+	gap: var(--sp-2);
+	flex-flow: row wrap;
+
+	& > :not(:first-child) {
+		width: calc(50% - var(--sp-1));
+		flex-basis: calc(50% - var(--sp-1));
+	}
+}
+
+.entity-props {
+	display: grid;
+	gap: var(--sp-2);
+	grid-template-columns: 1fr 1fr;
+}