From a12e39a15f6b34b1f8c7cb8f432340e828f68c13 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 23:02:20 +0200
Subject: [PATCH] Add hover and active effects

---
 ts/editor-toolbar/ColorPicker.svelte     |  4 ++--
 ts/editor-toolbar/IconButtonInner.svelte | 15 +++++++--------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 38b78965e..ff02a15fd 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -8,8 +8,8 @@
 <style lang="scss">
     button {
         display: inline-block;
-        width: 28px;
-        height: 28px;
+        width: 30px;
+        height: 30px;
 
         vertical-align: -webkit-baseline-middle;
         padding: 0;
diff --git a/ts/editor-toolbar/IconButtonInner.svelte b/ts/editor-toolbar/IconButtonInner.svelte
index f98b0ccef..23b51c82d 100644
--- a/ts/editor-toolbar/IconButtonInner.svelte
+++ b/ts/editor-toolbar/IconButtonInner.svelte
@@ -7,8 +7,8 @@
 <style lang="scss">
     button {
         display: inline-block;
-        width: 28px;
-        height: 28px;
+        width: 30px;
+        height: 30px;
 
         vertical-align: -webkit-baseline-middle;
         padding: 2px;
@@ -19,14 +19,13 @@
             width: 100%;
             height: 100%;
         }
-    }
 
-    .active {
-        border-bottom: 3px solid black;
-        border-radius: 3px;
+        &:hover {
+            background-color: #eee;
+        }
 
-        :global(.nightMode) & {
-            border-bottom-color: white;
+        &:active, &.active {
+            box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 30%);
         }
     }
 </style>