Clean up

src/style/_app-shell.scss

@@ -1,4 +1,5 @@
-html > body.pre-drawing .dev-stats-overlay {
+html > body.pre-drawing .dev-stats-overlay,
+html > body.is-loading .dev-stats-overlay {
   display: none;
 }
 

src/style/_loading.scss

@@ -155,4 +155,3 @@ html > body.is-loading {
     visibility: hidden;
   }
 }
-

src/style/_toolbar.scss

@@ -38,10 +38,13 @@ $toolbar-icons: (
 html > body > aside.control-dock > .toolbar-row {
   --toolbar-background-opacity: 0%;
   --toolbar-background-strength: 0;
+  --toolbar-divider-space: clamp(6px, 1.8vw, 14px);
+  --toolbar-top-max-width: 594px;
 
   display: grid;
   grid-template-areas:
     'previous controls next'
+    'previous divider next'
     'previous buttons next';
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: stretch;
@@ -51,7 +54,7 @@ html > body > aside.control-dock > .toolbar-row {
   margin: 0 auto;
   padding-inline: clamp(8px, 1.4vw, 14px);
   column-gap: 0;
-  row-gap: clamp(6px, 1.8vw, 14px);
+  row-gap: 0;
   border-radius: 12px;
   color: rgb(245 250 244 / 92%);
   background-color: rgb(5 8 13 / var(--toolbar-background-opacity));
@@ -70,6 +73,17 @@ html > body > aside.control-dock > .toolbar-row {
     background-color var(--transition-time-long),
     box-shadow var(--transition-time-long);
 
+  &::after {
+    content: '';
+    grid-area: divider;
+    align-self: center;
+    justify-self: center;
+    width: min(100%, var(--toolbar-top-max-width));
+    height: 1px;
+    margin-block: var(--toolbar-divider-space);
+    background: rgb(255 255 255 / 12%);
+  }
+
   button {
     min-width: 44px;
     min-height: 44px;
@@ -103,7 +117,7 @@ html > body > aside.control-dock > .toolbar-row {
     align-items: center;
     justify-content: center;
     justify-self: center;
-    width: min(100%, max-content);
+    width: min(100%, var(--toolbar-top-max-width));
     min-width: 0;
     padding: 8px 9px;
   }
@@ -167,12 +181,12 @@ html > body > aside.control-dock > .toolbar-row {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
+    justify-self: center;
     gap: 4px;
-    width: 100%;
+    width: fit-content;
+    max-width: 100%;
     min-width: 0;
-    padding-top: 7px;
-    border-top: 1px solid rgb(255 255 255 / 12%);
 
     > button,
     > .audio-control > button {
@@ -571,10 +585,17 @@ html > body > aside.control-dock > .toolbar-row {
   }
 
   @include on-small-screen {
+    --toolbar-divider-space: 4px;
+    --toolbar-top-max-width: 329px;
+
+    grid-template-areas:
+      'previous controls next'
+      '. divider .'
+      'buttons buttons buttons';
     width: 100%;
     padding-inline: 4px;
     column-gap: 0;
-    row-gap: 4px;
+    row-gap: 0;
 
     > .vibe-button {
       width: 36px;
@@ -591,8 +612,12 @@ html > body > aside.control-dock > .toolbar-row {
     }
 
     > nav.buttons {
+      justify-self: stretch;
+      justify-content: space-between;
       gap: clamp(1px, 0.55vw, 2px);
-      padding-top: 3px;
+      width: auto;
+      max-width: none;
+      margin-inline: -4px;
 
       > button {
         width: auto;
@@ -643,13 +668,18 @@ html > body > aside.control-dock > .toolbar-row {
           justify-content: stretch;
           width: 100%;
           min-width: 0;
-          min-height: 54px;
+          min-height: 48px;
           flex: 1 1 100%;
-          padding: 4px 6px;
-          column-gap: 7px;
-          row-gap: 8px;
+          padding: 3px 5px;
+          column-gap: 6px;
+          row-gap: 6px;
 
           > .color-swatch {
+            width: 38px;
+            height: 38px;
+            min-width: 38px;
+            min-height: 38px;
+
             grid-column: span 2;
           }
 
@@ -658,8 +688,8 @@ html > body > aside.control-dock > .toolbar-row {
             justify-self: stretch;
             width: 100%;
             min-width: 0;
-            height: 42px;
-            padding: 0 8px;
+            height: 38px;
+            padding: 0 7px;
           }
 
           > .eraser-size-control {
@@ -667,8 +697,8 @@ html > body > aside.control-dock > .toolbar-row {
           }
 
           > .mirror-segment-control {
-            --thumb-height: 38px;
-            --thumb-width: 38px;
+            --thumb-height: 34px;
+            --thumb-width: 34px;
 
             grid-column: 4 / span 3;
           }

src/style/vars.scss

@@ -1,7 +1,7 @@
 :root {
   --transition-time: 200ms;
   --transition-time-long: 350ms;
-  --accent-color: rgb(6.39851188659668, 70.28645324707031, 102.23043060302734);
+  --accent-color: rgb(255, 93, 162);
   --main-color: #aaa;
   --normal-margin: 2rem;
   --small-margin: 1rem;