shadow

writer · Dec 9, 2024 · d1a07ac · d1a07ac
1 parent 8c2db47
commit d1a07ac
Showing 1 changed file with 51 additions and 34 deletions.
diff --git a/src/ui/src/builder/settings/BuilderFieldsShadow.vue b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
@@ -5,36 +5,38 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStack">
-			<button
-				class="chip"
-				tabindex="0"
-				:class="{ active: mode == 'default' }"
-				@click="
-					() => {
-						setMode('default');
-						setContentValue(component.id, fieldKey, undefined);
-					}
-				"
-			>
-				Default
-			</button>
-			<button
-				class="chip"
-				tabindex="0"
-				:class="{ active: mode == 'css' }"
-				@click="setMode('css')"
-			>
-				CSS
-			</button>
-			<button
-				class="chip"
-				:class="{ active: mode == 'pick' }"
-				tabindex="0"
-				@click="setMode('pick')"
-			>
-				Pick
-			</button>
+		<div class="chipStackContainer">
+			<div class="chipStack">
+				<button
+					class="chip"
+					tabindex="0"
+					:class="{ active: mode == 'default' }"
+					@click="
+						() => {
+							setMode('default');
+							setContentValue(component.id, fieldKey, undefined);
+						}
+					"
+				>
+					Default
+				</button>
+				<button
+					class="chip"
+					tabindex="0"
+					:class="{ active: mode == 'css' }"
+					@click="setMode('css')"
+				>
+					CSS
+				</button>
+				<button
+					class="chip"
+					:class="{ active: mode == 'pick' }"
+					tabindex="0"
+					@click="setMode('pick')"
+				>
+					Pick
+				</button>
+			</div>
 		</div>
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
@@ -234,20 +236,22 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "../sharedStyles.css";
 
+.chipStackContainer {
+	margin-top: 4px;
+}
 .main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+	margin-top: 4px;
 }
 
 .pickerContainer {
 	display: flex;
-	gap: 8px;
+	gap: 4px;
 	flex-direction: column;
 }
 
 .param > .header {
 	display: flex;
-	margin-bottom: 8px;
+	margin-bottom: 4px;
 }
 
 .param > .header > .name {
@@ -257,4 +261,17 @@ onBeforeUnmount(() => {
 .param > .header > .value {
 	margin-left: auto;
 }
+.param input[type="range"] {
+	width: 100%;
+}
+
+input[type="color"] {
+	width: 100%;
+	height: 34px;
+	border-radius: 8px;
+	border: 1px solid var(--separatorColor);
+
+	display: block;
+	height: 40px;
+}
 </style>