layout prototype

src/lib/components/LayoutCC1.svelte

@@ -12,17 +12,46 @@
   {/each}
 </fieldset>
 
-<div class="row">
+<div class="col" style="gap: 0">
-  <RingInput {activeLayer} />
+  <div class="row" style="gap: 156px">
-  <div class="col">
+    <div class="row">
+      <RingInput {activeLayer} />
+      <div class="col">
+        <RingInput {activeLayer} />
+        <RingInput {activeLayer} />
+      </div>
+      <div class="col">
+        <RingInput {activeLayer} />
+        <RingInput {activeLayer} />
+      </div>
+      <RingInput {activeLayer} />
+    </div>
+
+    <div class="row">
+      <RingInput {activeLayer} />
+      <div class="col">
+        <RingInput {activeLayer} />
+        <RingInput {activeLayer} />
+      </div>
+      <div class="col">
+        <RingInput {activeLayer} />
+        <RingInput {activeLayer} />
+      </div>
+      <RingInput {activeLayer} />
+    </div>
+  </div>
+  <div class="row" style="gap: 48px; margin-top: -32px">
     <RingInput {activeLayer} />
     <RingInput {activeLayer} />
   </div>
-  <div class="col">
+  <div class="row" style="gap: 160px">
+    <RingInput {activeLayer} />
+    <RingInput {activeLayer} />
+  </div>
+  <div class="row" style="gap: 320px; margin-top: -12px">
     <RingInput {activeLayer} />
     <RingInput {activeLayer} />
   </div>
-  <RingInput {activeLayer} />
 </div>
 
 <style lang="scss">
@@ -40,6 +69,8 @@
   }
 
   button.icon {
+    cursor: pointer;
+
     z-index: 1;
 
     font-size: 24px;
@@ -80,18 +111,17 @@
 
   .row,
   .col {
+    display: flex;
     gap: 8px;
     align-items: center;
     justify-content: center;
   }
 
   .row {
-    display: flex;
     flex-direction: row;
   }
 
   .col {
-    display: flex;
     flex-direction: column;
   }
 </style>

src/lib/components/Navigation.svelte

@@ -1,6 +1,7 @@
 <script>
   import {serialPort, syncing} from "$lib/serial/connection.js"
   import {browser} from "$app/environment"
+  import {page} from "$app/stores"
 </script>
 
 <nav>
@@ -31,6 +32,7 @@
       href="/device-manager/"
       title="Device Manager"
       class="icon connect"
+      class:active={$page.url.pathname === "/device-manager/"}
       class:error={$serialPort === undefined}
       class:syncing={$syncing}
     >
@@ -82,7 +84,8 @@
       background: var(--md-sys-color-error);
     }
 
-    &:hover {
+    &.active,
+    &:active {
       color: var(--md-sys-color-on-primary);
       background: var(--md-sys-color-primary);
     }
@@ -103,7 +106,8 @@
       clip-path: polygon(25% 50%, 0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
       border-radius: 0;
 
-      &:hover {
+      &.active,
+      &:active {
         color: var(--md-sys-color-on-tertiary);
         background: var(--md-sys-color-tertiary);
 
@@ -145,6 +149,10 @@
     bottom: 0;
     left: 0;
 
+    display: table-cell;
+
+    padding-top: 0.5px;
+
     font-size: 16px;
     font-weight: 600;
     color: var(--md-sys-color-on-background);
@@ -153,10 +161,18 @@
     background: var(--md-sys-color-background);
     border-radius: 50%;
 
+    alignment-baseline: top;
+
     transition: opacity 250ms ease;
     animation: sync 1s linear infinite;
   }
 
+  .connect:active::after,
+  .connect.active::after {
+    color: var(--md-sys-color-on-primary);
+    background: var(--md-sys-color-primary);
+  }
+
   .connect.syncing::after {
     opacity: 1;
   }

src/lib/components/RingInput.svelte

@@ -26,7 +26,7 @@
 
 <div class="radial">
   {#each layout as keys, quadrant}
-    <button on:click={() => (activeLayer = (activeLayer + 1) % 3)} title={getKeyDescriptions(keys)}>
+    <button title={getKeyDescriptions(keys)}>
       {#each keys as value, layer}
         <span
           class:active={virtualLayerMap[activeLayer] === virtualLayerMap[layer]}
@@ -60,6 +60,8 @@
   span {
     $cr: math.div($size, 2) - 2 * $offset;
 
+    will-change: scale, offset-distance;
+
     scale: 0.9;
     offset-path: path(
       "M#{math.div($size, 2)} #{$offset}A#{$cr} #{$cr} 0 1 1 #{math.div($size, 2)} #{$size - $offset}A#{$cr} #{$cr} 0 1 1 #{math.div($size, 2)} #{$offset}Z"
@@ -111,7 +113,7 @@
     mask-image: url("$lib/assets/quater-ring.svg");
     mask-size: 100% 100%;
 
-    &:hover {
+    &:active {
       color: var(--md-sys-color-on-tertiary);
       background: var(--md-sys-color-tertiary);
     }

src/routes/+layout.svelte

@@ -59,6 +59,15 @@
     color: var(--md-sys-color-tertiary);
   }
 
+  a:hover:not(:active),
+  button:hover:not(:active) {
+    filter: brightness(70%);
+
+    &.active {
+      filter: brightness(120%);
+    }
+  }
+
   body {
     overflow: hidden;
     display: flex;

src/routes/config/layout/+page.svelte

@@ -2,4 +2,12 @@
   import LayoutCC1 from "$lib/components/LayoutCC1.svelte"
 </script>
 
-<LayoutCC1 />
+<section>
+  <LayoutCC1 />
+</section>
+
+<style lang="scss">
+  section {
+    margin: auto;
+  }
+</style>

src/routes/device-manager/+page.svelte

@@ -71,7 +71,7 @@
       background: var(--md-sys-color-secondary);
     }
 
-    &:hover:not(:disabled) {
+    &:active:not(:disabled) {
       color: var(--md-sys-color-on-surface-variant);
       background: var(--md-sys-color-surface-variant);
     }