From 003d3a39c79a120b1f3e41c0e4fc1bb482b23076 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Fri, 13 Jan 2023 00:10:19 +0100
Subject: [PATCH] Fix toolbar styles

---
 qt/aqt/data/web/css/toolbar.scss | 36 +++++++++++++++++++-------------
 qt/aqt/toolbar.py                |  9 +++++++-
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/qt/aqt/data/web/css/toolbar.scss b/qt/aqt/data/web/css/toolbar.scss
index f8f382d94..dd49ebc75 100644
--- a/qt/aqt/data/web/css/toolbar.scss
+++ b/qt/aqt/data/web/css/toolbar.scss
@@ -61,39 +61,45 @@ body {
             transform: translateY(-100vh);
         }
         transition: transform var(--transition) ease-in-out;
-    
+
         .header {
             height: 41px;
         }
         .toolbar {
             height: 31px;
-
             overflow: hidden;
             border-bottom-left-radius: prop(border-radius-medium);
             border-bottom-right-radius: prop(border-radius-medium);
             @include elevation(1, $opacity-boost: -0.1);
 
-            // elevated state (deck browser, overview)
-            body:not(.flat) & {
-                background: var(--canvas-elevated);
-                @include elevation(1);
-                &:hover {
-                    @include elevation(2);
-                }
-            }
             // glass effect
             background: var(--canvas-glass);
             backdrop-filter: blur(var(--blur));
         }
 
-        .hitem {
+        // elevated state (deck browser, overview)
+        &:not(.flat) .toolbar {
+            background: var(--canvas-elevated);
+            @include elevation(1);
             &:hover {
-                background: var(--canvas-inset);
-                text-decoration: none;
+                @include elevation(2);
+            }
+        }
+
+        &:not(.flat) .hitem {
+            @include button.base($border: false, $with-hover: false);
+            background: var(--canvas-glass);
+            border: 1px solid transparent;
+        }
+        .hitem {
+            text-decoration: none;
+            border: 1px solid transparent;
+
+            &:hover {
+                border: 1px solid var(--border-subtle);
             }
             &:active {
-                @include button.base($border: false);
-                background: var(--canvas-elevated);
+                background: var(--canvas-inset);
             }
             &:first-child {
                 padding-left: 18px;
diff --git a/qt/aqt/toolbar.py b/qt/aqt/toolbar.py
index 87e580107..847db8f55 100644
--- a/qt/aqt/toolbar.py
+++ b/qt/aqt/toolbar.py
@@ -55,6 +55,13 @@ class ToolbarWebView(AnkiWebView):
     def on_body_classes_need_update(self) -> None:
         super().on_body_classes_need_update()
         super().adjustHeightToFit()
+
+        if self.mw.state == "review":
+            if self.mw.pm.collapse_toolbar():
+                self.eval("""document.body.classList.remove("flat"); """)
+            else:
+                self.flatten()
+
         self.expand()
 
     def _onHeight(self, qvar: Optional[int]) -> None:
@@ -70,7 +77,7 @@ class ToolbarWebView(AnkiWebView):
         self.eval("""document.body.classList.remove("collapsed"); """)
 
     def flatten(self) -> None:
-        self.eval("document.body.classList.add('flat'); ")
+        self.eval("""document.body.classList.add("flat"); """)
 
     def elevate(self) -> None:
         self.eval(