Tweak parameter visuals.

web/src/LynxKiteNode.svelte

@@ -51,14 +51,14 @@
       <Handle
         id={name} type="target" position={targetPosition || 'left'}
         style="{handleOffsetDirection[targetPosition || 'left']}: {100 * (i + 1) / (inputs.length + 1)}%">
-        {#if inputs.length>1}<span class="handle-name">{name.replace("_", " ")}</span>{/if}
+        {#if inputs.length>1}<span class="handle-name">{name.replace(/_/g, " ")}</span>{/if}
       </Handle>
     {/each}
     {#each outputs as [name, output], i}
       <Handle
         id={name} type="source" position={sourcePosition || 'right'}
         style="{handleOffsetDirection[sourcePosition || 'right']}: {100 * (i + 1) / (outputs.length + 1)}%">
-        {#if outputs.length>1}<span class="handle-name">{name.replace("_", " ")}</span>{/if}
+        {#if outputs.length>1}<span class="handle-name">{name.replace(/_/g, " ")}</span>{/if}
       </Handle>
     {/each}
   </div>
@@ -71,6 +71,7 @@
     font-size: 12px;
   }
   .title-icon {
+    margin-left: 5px;
     float: right;
   }
   .node-container {

web/src/NodeParameter.svelte

@@ -5,48 +5,48 @@
   export let onChange;
 </script>
 
-<div class="param">
-  <label>
-    <span class="param-name">{name.replace('_', ' ')}</span>
-    {#if meta?.type?.collapsed}
-      <button class="collapsed-param form-control form-control-sm">
-        ⋯
-      </button>
-    {:else if meta?.type?.enum}
-      <select class="form-select form-select-sm"
-        value={value}
-        on:change={(evt) => onChange(evt.currentTarget.value)}
-      >
-        {#each meta.type.enum as option}
-          <option value={option}>{option}</option>
-        {/each}
-      </select>
-    {:else}
-      <input class="form-control form-control-sm"
+<label class="param">
+  <span class="param-name">{name.replace(/_/g, ' ')}</span>
+  {#if meta?.type?.collapsed}
+    <button class="collapsed-param form-control form-control-sm">
+      ⋯
+    </button>
+  {:else if meta?.type?.enum}
+    <select class="form-select form-select-sm"
       value={value}
-      on:input={(evt) => onChange(evt.currentTarget.value)}
-      />
-    {/if}
-  </label>
-</div>
+      on:change={(evt) => onChange(evt.currentTarget.value)}
+    >
+      {#each meta.type.enum as option}
+        <option value={option}>{option}</option>
+      {/each}
+    </select>
+  {:else}
+    <input class="form-control form-control-sm"
+    value={value}
+    on:input={(evt) => onChange(evt.currentTarget.value)}
+    />
+  {/if}
+</label>
 
 <style>
   .param {
-    padding: 0 8px 8px 8px;
-  }
-  .param label {
-    font-size: 12px;
+    padding: 4px 8px 4px 8px;
     display: block;
   }
   .param-name {
-    color: #840;
+    display: block;
+    font-size: 10px;
     letter-spacing: 0.05em;
-    margin-left: 4px;
-  }
-  .param input,
-  .param select,
-  .param button {
+    margin-left: 10px;
+    background: oklch(50% 0.13 230);
+    background: oklch(95% 0.2 55);
+    background:var(--bs-border-color);
+    width: fit-content;
+    padding: 2px 8px;
+    border-radius: 4px 4px 0 0;
   }
   .collapsed-param {
+    min-height: 20px;
+    line-height: 10px;
   }
 </style>

web/src/Workspace.svelte

@@ -30,7 +30,7 @@
   .top-bar {
     display: flex;
     justify-content: space-between;
-    background: #002a4c;
+    background: oklch(30% 0.13 230);
     color: white;
   }
   .ws-name {
@@ -52,7 +52,7 @@
     align-items: center;
   }
   .tools a {
-    color: #39bcf3;
+    color: oklch(75% 0.13 230);
     font-size: 1.5em;
     padding: 0 10px;
   }

web/src/app.scss

@@ -1,5 +1,10 @@
 // Import all of Bootstrap's CSS
+$form-select-indicator-color: oklch(90% 0.01 55);
 @import "bootstrap/scss/bootstrap";
+:root {
+  --bs-border-color: oklch(90% 0.01 55);
+}
+
 path.svelte-flow__edge-path {
   stroke-width: 2;
   stroke: black;