From aee1a836d13735fcc7d14799409f074dbf462dca Mon Sep 17 00:00:00 2001
From: Matthias M <62722460+kleinerpirat@users.noreply.github.com>
Date: Sun, 23 May 2021 00:50:02 +0200
Subject: [PATCH] Make legacy buttons look like Svelte buttons

with extra night mode handling.
---
 ts/editor/legacy.scss | 49 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 44 insertions(+), 5 deletions(-)

diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss
index ef8c137cb..07f9af6da 100644
--- a/ts/editor/legacy.scss
+++ b/ts/editor/legacy.scss
@@ -2,13 +2,30 @@
 
 .linkb {
     display: inline-block;
-    @include button.btn-border-radius;
     background-color: white;
     border: 1px solid var(--medium-border);
+    @include button.btn-border-radius;
+    min-width: 28px;
+    margin-left: -1px;
+    padding: 3.5px;
+    transition: all 0.2s;
 }
 
-.night-mode .linkb {
-    background-color: #666;
+.linkb:hover {
+    background-color: #ebebeb;
+}
+
+.linkb:active,
+.linkb:active:hover {
+    background-color: #ebebeb;
+    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);
 }
 
 .topbut {
@@ -17,6 +34,28 @@
     width: calc(var(--toolbar-size) - 12px);
     height: calc(var(--toolbar-size) - 12px);
 }
-.night-mode .topbut {
-    filter: invert(1);
+
+.nightMode {
+    .linkb {
+        background-color: #666;
+        margin-left: 1px;
+    }
+    
+    .linkb:hover {
+        background-color: #7a7a7a;
+        border-color: #7a7a7a;
+    }
+
+    .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;
+    }
+    
+    .topbut,
+    .linkb:active:hover .topbut {
+        filter: invert(1);
+    }
 }