From f207b2f4dcf9df166c7b2302f240117050137101 Mon Sep 17 00:00:00 2001
From: Denevola <denevola@scipnet.kro.kr>
Date: Sat, 24 Sep 2022 03:10:08 +0900
Subject: [PATCH] Add click animation to Genres, Modal, Playlists

---
 src/components/Genres.vue    | 4 ++++
 src/components/Modal.vue     | 4 ++++
 src/components/Playlists.vue | 4 ++++
 3 files changed, 12 insertions(+)

diff --git a/src/components/Genres.vue b/src/components/Genres.vue
index 5f51671..5e005d2 100644
--- a/src/components/Genres.vue
+++ b/src/components/Genres.vue
@@ -126,10 +126,14 @@ onMounted(get);
   letter-spacing: 0.125rem;
   background-color: var(--color-background-mute);
   color: var(--btn-color);
+  transition: background-color 0.1s ease;
 }
 .btn:hover {
   background-color: var(--color-background-soft);
 }
+.btn:active {
+  background-color: var(--color-border);
+}
 .head {
   margin-top: 1.75rem;
   text-align: center;
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 9cafc51..4690fc6 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -91,6 +91,7 @@ watch(show, n => {
   font-size: 1rem;
   font-weight: bold;
   border-right: 1px solid var(--color-shadow);
+  transition: background-color 0.1s ease;
 }
 .modal-buttons button:first-child {
   color: indianred;
@@ -103,6 +104,9 @@ watch(show, n => {
 .modal-buttons button:hover {
   background-color: var(--color-background-mute);
 }
+.modal-buttons button:active {
+  background-color: var(--color-border);
+}
 
 @media (max-width: 530px) {
   .modal-box {
diff --git a/src/components/Playlists.vue b/src/components/Playlists.vue
index 39034c8..b802436 100644
--- a/src/components/Playlists.vue
+++ b/src/components/Playlists.vue
@@ -62,10 +62,14 @@ defineEmits(['playthis']);
   margin: 0.125rem;
   border-radius: 0.25rem;
   background: var(--color-background);
+  transition: background-color 0.1s ease;
 }
 .pl-item:hover {
   background: var(--color-background-soft);
 }
+.pl-item:active {
+  background: var(--color-border);
+}
 .pl-main {
   overflow: hidden;
   white-space: nowrap;