add basic pattern highlighting

1 files changed, 28 insertions, 20 deletions

diff --git a/style.css b/style.css
index 26b820e..84425d5 100644
--- a/style.css
+++ b/style.css
@@ -22,23 +22,29 @@ canvas {
   transform: translate(-50%, -50%) rotate(var(--global-rot));
 }
 
-aside.controls {
+aside {
   position: fixed;
-  bottom: 0;
   right: 0;
-
   display: flex;
-  height: 12rem;
-
   filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
 }
 
-aside.controls > svg {
+aside.pattern {
+  top: 0;
+}
+
+aside.layout {
+  bottom: 0;
+
+  height: 12rem;
+}
+
+aside.layout > svg {
   width: auto;
   height: 100%;
 }
 
-aside.controls > div {
+.controls {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -48,8 +54,7 @@ aside.controls > div {
 }
 
 /* controls */
-.axis-control,
-.preset-control {
+.control {
   display: flex;
   align-items: center;
   transition: background 0.3s;
@@ -57,36 +62,39 @@ aside.controls > div {
   gap: 0.5rem;
 }
 
-.preset-control {
+.control label:first-child {
+  width: 6rem;
+}
+
+
+.control--preset {
   padding-bottom: 0.5rem;
   border-bottom: 1px solid #b9bdc1;
   margin-bottom: 0.25rem;
 }
-.preset-control select {
+
+.control--preset select {
   flex: 1;
 }
 
-.preset-control label,
-.axis-control label:first-child {
-  width: 6rem;
-}
-.axis-control label:first-child {
+
+.control--axis label:first-child {
   flex: 1;
 }
 
-.axis-control > input {
+.control--axis > input {
   width: 5em;
 }
 
-.axis-control.dir-disabled label.dir {
+.control--axis.dir-disabled label.dir {
   color: #b9bdc1;
 }
 
-.axis-control.driven {
+.control--axis.driven {
   opacity: 0.5;
 }
 
-.axis-control.selected {
+.control--axis.selected {
   background: #eeeeee;
 }