From cfc9fa359dbdb767373e2115badf4a0239f7b91b Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 25 May 2021 13:29:55 +0200
Subject: [PATCH 1/3] Base width/height off on --toolbar-size for legacy
 buttons

---
 ts/editor/legacy.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss
index 57627914d..d604a94b7 100644
--- a/ts/editor/legacy.scss
+++ b/ts/editor/legacy.scss
@@ -10,10 +10,11 @@
     border-bottom-left-radius: var(--border-left-radius) !important;
     border-top-right-radius: var(--border-right-radius) !important;
     border-bottom-right-radius: var(--border-right-radius) !important;
-    
-    min-width: 28px;
+
+    min-width: calc(var(--toolbar-size) - 2px);
+    min-height: calc(var(--toolbar-size) - 2px);
     margin-left: -1px;
-    padding: 3.5px !important;
+    padding: 0 !important;
 }
 
 .linkb:hover,
@@ -45,7 +46,7 @@
     .linkb {
         margin-left: 1px;
     }
-    
+
     .linkb:hover {
         background-color: #7a7a7a;
         border-color: #7a7a7a;
@@ -59,7 +60,7 @@
             rgba(0, 0, 0, 0.35);
         border-color: #525252;
     }
-    
+
     img.topbut,
     .linkb:active:hover img.topbut {
         filter: invert(1);

From 52db2a25853122a5af4dc1cd501d16004a23b124 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 25 May 2021 13:52:27 +0200
Subject: [PATCH 2/3] Restructure legacy scss / remove button_mixin import

---
 ts/editor/legacy.scss | 73 ++++++++++++++++++-------------------------
 ts/sass/base.scss     |  2 +-
 2 files changed, 31 insertions(+), 44 deletions(-)

diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss
index d604a94b7..9cdd286b7 100644
--- a/ts/editor/legacy.scss
+++ b/ts/editor/legacy.scss
@@ -1,9 +1,11 @@
-@use "ts/sass/button_mixins" as button;
-
 .linkb {
     display: inline-block;
+    width: calc(var(--toolbar-size) - 2px);
+    height: calc(var(--toolbar-size) - 2px);
+
     background-color: white;
     border: 1px solid var(--medium-border);
+    padding: 0 !important;
 
     /* !important cannot be used with @include */
     border-top-left-radius: var(--border-left-radius) !important;
@@ -11,28 +13,34 @@
     border-top-right-radius: var(--border-right-radius) !important;
     border-bottom-right-radius: var(--border-right-radius) !important;
 
-    min-width: calc(var(--toolbar-size) - 2px);
-    min-height: calc(var(--toolbar-size) - 2px);
     margin-left: -1px;
-    padding: 0 !important;
-}
 
-.linkb:hover,
-.linkb:active:hover {
-    background-color: #ebebeb;
-}
+    &:hover {
+        background-color: #ebebeb;
+    }
 
-.linkb:active,
-.linkb:active:hover {
-    background-color: white;
-    box-shadow: inset 0
-        calc(var(--toolbar-size) / 15)
-        calc(var(--toolbar-size) / 5)
-        rgba(0, 0, 0, 0.25);
-}
+    &:active,
+    &:active:hover {
+        background-color: white;
+        box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5)
+            rgba(0, 0, 0, 0.25);
+    }
 
-.linkb:active:hover .topbut {
-    filter: invert(1) grayscale(1) brightness(100);
+    .nightMode & {
+        margin-left: 1px;
+
+        &:hover {
+            background-color: #7a7a7a;
+            border-color: #7a7a7a;
+        }
+
+        &:active,
+        &:active:hover {
+            box-shadow: inset 0 calc(var(--toolbar-size) / 15)
+                calc(var(--toolbar-size) / 5) rgba(0, 0, 0, 0.35);
+            border-color: #525252;
+        }
+    }
 }
 
 .topbut {
@@ -42,27 +50,6 @@
     height: calc(var(--toolbar-size) - 12px);
 }
 
-.nightMode {
-    .linkb {
-        margin-left: 1px;
-    }
-
-    .linkb:hover {
-        background-color: #7a7a7a;
-        border-color: #7a7a7a;
-    }
-
-    .linkb:active,
-    .linkb:active:hover {
-        box-shadow: inset 0
-            calc(var(--toolbar-size) / 15)
-            calc(var(--toolbar-size) / 5)
-            rgba(0, 0, 0, 0.35);
-        border-color: #525252;
-    }
-
-    img.topbut,
-    .linkb:active:hover img.topbut {
-        filter: invert(1);
-    }
+.nightMode img.topbut {
+    filter: invert(1);
 }
diff --git a/ts/sass/base.scss b/ts/sass/base.scss
index fc9d09bea..f3db5884e 100644
--- a/ts/sass/base.scss
+++ b/ts/sass/base.scss
@@ -25,5 +25,5 @@ html {
 
 button {
     /* override transition for instant hover response */
-    transition: color .15s ease-in-out, box-shadow .15s ease-in-out !important;
+    transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
 }

From 5f6bc19389edacfdfc8ddba4a6e42b5ee5962b63 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 25 May 2021 20:29:42 +0200
Subject: [PATCH 3/3] Use min-{width,height} for legacy buttons

---
 ts/editor/legacy.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss
index 9cdd286b7..d7bbca787 100644
--- a/ts/editor/legacy.scss
+++ b/ts/editor/legacy.scss
@@ -1,7 +1,7 @@
 .linkb {
     display: inline-block;
-    width: calc(var(--toolbar-size) - 2px);
-    height: calc(var(--toolbar-size) - 2px);
+    min-width: calc(var(--toolbar-size) - 2px);
+    min-height: calc(var(--toolbar-size) - 2px);
 
     background-color: white;
     border: 1px solid var(--medium-border);