Improve current beat highlight

1 files changed, 23 insertions, 16 deletions

diff --git a/public/main.css b/public/main.css
index 9540a7f..26c5950 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,8 +1,9 @@
 /* Constants */
 
 :root {
-  --color-block: lightgray;
-  --color-block-checked: lightgreen;
+  --color-block: #e3e3e3;
+  --color-block-checked: #90ee90;
+  --color-block-unchecked-beat: #fff7bf;
 
   --spacing-mouse: 0.25rem;
   --spacing-cat: 0.5rem;
@@ -56,7 +57,13 @@ body {
 .g-Sequencer__Blocks {
   display: flex;
   align-items: center;
-  gap: var(--spacing-cat);
+  gap: var(--spacing-mouse);
+}
+
+.g-Sequencer__Column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-mouse);
 }
 
 .g-Sequencer__Column > li {
@@ -64,35 +71,35 @@ body {
   align-items: center;
   height: var(--spacing-horse);
   cursor: pointer;
-}
-
-.g-Sequencer__Column {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-cat);
+  padding: var(--spacing-mouse);
 }
 
 .g-Sequencer__Block {
   width: var(--spacing-horse);
   height: var(--spacing-horse);
-  background-color: lightgray;
+  background-color: var(--color-block);
   cursor: pointer;
 }
 
 .g-Sequencer__Block:hover {
-  filter: brightness(110%);
+  filter: brightness(105%);
 }
 
 .g-Sequencer__Block--Checked {
-  background-color: lightgreen;
+  background-color: var(--color-block-checked);
+}
+
+.g-Sequencer__Column--Beat {
+  background-color: var(--color-block-unchecked-beat);
+  box-shadow: 0px 0px 5px 1px var(--color-block-unchecked-beat);
 }
 
-.g-Sequencer__Block--Beat {
-  animation: beat 0.2s linear;
+.g-Sequencer__Column--Beat .g-Sequencer__Block--Checked {
+  animation: checked-beat 0.2s linear;
 }
 
-@keyframes beat {
+@keyframes checked-beat {
   0%   {transform: scale(100%);}
-  30%  {transform: scale(105%);}
+  30%  {transform: scale(115%);}
   100% {transform: scale(100%);}
 }