From 5944be94dfd221f41cfb5e60e007c159b617f5dc Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 19 Jun 2022 17:07:36 +0200 Subject: Improve current beat highlight --- public/main.css | 39 +++++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 16 deletions(-) (limited to 'public') 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%);} } -- cgit v1.2.3