From 61badc83ee7091515f2b7a7c49c16362e3c3e984 Mon Sep 17 00:00:00 2001
From: kiritan-pop <kiritan.pop@gmail.com>
Date: Sat, 23 Sep 2023 01:07:35 +0900
Subject: [PATCH] =?UTF-8?q?=E8=A6=8B=E3=81=9F=E7=9B=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/javascript/styles/kiritan/kiritan-base.scss      | 6 ++++--
 app/javascript/styles/kiritan/kiritan-variables.scss | 1 +
 app/javascript/styles/mastodon/components.scss       | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/javascript/styles/kiritan/kiritan-base.scss b/app/javascript/styles/kiritan/kiritan-base.scss
index db196a873..1fcace2c1 100644
--- a/app/javascript/styles/kiritan/kiritan-base.scss
+++ b/app/javascript/styles/kiritan/kiritan-base.scss
@@ -22,8 +22,8 @@
   &:focus,
   &:hover {
     color: $primary-text-color;
-    background-color: $ui-highlight-color;
-    transition: all 200ms ease-out;
+    background-color: $ui-button-focus-background-color;
+    transition: all 300ms ease-out;
   }
 
   &:disabled,
@@ -184,9 +184,11 @@
   0% {
     opacity: 1;
   }
+
   50% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
diff --git a/app/javascript/styles/kiritan/kiritan-variables.scss b/app/javascript/styles/kiritan/kiritan-variables.scss
index b7835eea8..f89561d08 100644
--- a/app/javascript/styles/kiritan/kiritan-variables.scss
+++ b/app/javascript/styles/kiritan/kiritan-variables.scss
@@ -17,6 +17,7 @@ $ui-primary-color: $kiri-base-lighter-color;
 $ui-secondary-color: lighten($kiri-base-lighter-color, 50%);
 
 $ui-button-background-color: darken($ui-highlight-color, 5%);
+$ui-button-focus-background-color: darken($ui-highlight-color, 25%);
 
 // Variables for texts
 $primary-text-color: $base-border-color;
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index e52e691b8..d114ba8f9 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -72,6 +72,7 @@
   &:focus,
   &:hover {
     background-color: $ui-button-focus-background-color;
+    transition: all 300ms ease-out;
   }
 
   &:focus-visible {