add synth panelHEADmain

1 files changed, 25 insertions, 6 deletions

diff --git a/style.css b/style.css
index 3d00049..1fe469d 100644
--- a/style.css
+++ b/style.css
@@ -54,15 +54,35 @@ aside.layout > svg {
   height: 100%;
 }
 
-.controls {
+.panel {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  gap: 0.75rem;
   padding: 1rem 1.5rem;
-  gap: 0.25rem;
   background: #eeeeee;
 }
 
+.panel section + section {
+  padding-top: 0.3rem;
+  border-top: 1px solid #b9bdc1;
+}
+
+.controls {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: hidden;
+  gap: 0.25rem;
+}
+
+.controls--minimized {
+  max-height: 1.25em;
+}
+
+#layout.controls {
+  justify-content: center;
+}
+
 /* controls */
 .control {
   display: flex;
@@ -77,8 +97,6 @@ aside.layout > svg {
 }
 
 .control--preset {
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid #b9bdc1;
   margin-bottom: 0.25rem;
 }
 
@@ -86,10 +104,11 @@ aside.layout > svg {
   flex: 1;
 }
 
-.control--preset label:first-child {
+.controls .control:first-child label:first-child {
   font-weight: bold;
 }
 
+.control--toggle label:first-child,
 .control--axis label:first-child {
   flex: 1;
 }