From f61126a40cc0bad876c6305435d198bfd7c7397e Mon Sep 17 00:00:00 2001
From: RumovZ <gp5glkw78@relay.firefox.com>
Date: Mon, 7 Feb 2022 10:41:19 +0100
Subject: [PATCH] Fix button focus highlight on Windows (#1627)

* Fix button focus highlight on Windows

* Use none instead of none for outline and box-shadow

* Unnest selectors in reviewer-bottom

Co-authored-by: Henrik Giesel <hengiesel@gmail.com>
---
 qt/aqt/data/web/css/reviewer-bottom.scss | 24 +++++++++++++++++-------
 qt/aqt/webview.py                        |  5 +++--
 sass/buttons.scss                        | 13 +++++++++++++
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/qt/aqt/data/web/css/reviewer-bottom.scss b/qt/aqt/data/web/css/reviewer-bottom.scss
index 5cdaddaea..8271fad83 100644
--- a/qt/aqt/data/web/css/reviewer-bottom.scss
+++ b/qt/aqt/data/web/css/reviewer-bottom.scss
@@ -49,15 +49,25 @@ button {
     margin-bottom: 1em;
 }
 
-.focus {
-    outline: 5px auto var(--focus-color);
 
-    #innertable:focus-within & {
-        outline: unset;
+/**
+ * We use .focus to recreate the highlight on the good button
+ * while the actual focus is actually in the main webview
+ */
+:focus, .focus {
+    outline: 1px auto var(--focus-color);
 
-        &:focus {
-            outline: 5px auto var(--focus-color);
-        }
+    .nightMode & {
+        outline: none;
+        box-shadow: 0 0 0 2px var(--focus-color);
+    }
+}
+
+#innertable:focus-within .focus:not(:focus) {
+    outline: none;
+
+    .nightMode & {
+        box-shadow: none;
     }
 }
 
diff --git a/qt/aqt/webview.py b/qt/aqt/webview.py
index 6351267e7..e47512a56 100644
--- a/qt/aqt/webview.py
+++ b/qt/aqt/webview.py
@@ -413,8 +413,9 @@ class AnkiWebView(QWebEngineView):
         if is_win:
             # T: include a font for your language on Windows, eg: "Segoe UI", "MS Mincho"
             family = tr.qt_misc_segoe_ui()
-            button_style = "button { font-family:%s; }" % family
-            button_style += "\n:focus { outline: 1px solid %s; }" % color_hl
+            button_style = f"""
+button {{ font-family: {family}; }}
+button:focus {{ outline: 5px auto {color_hl}; }}"""
             font = f"font-size:12px;font-family:{family};"
         elif is_mac:
             family = "Helvetica"
diff --git a/sass/buttons.scss b/sass/buttons.scss
index 2561efe23..413bdc7e4 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -1,5 +1,13 @@
 @use "fusion-vars";
 
+:root {
+    --focus-color: #0078d7;
+
+    .isMac {
+        --focus-color: rgba(0 103 244 / 0.247);
+    }
+}
+
 .isWin {
     button {
         font-size: 12px;
@@ -39,6 +47,11 @@
 
         border-radius: 5px;
         padding: 3px 10px 3px;
+
+        &:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px var(--focus-color);
+        }
     }
 
     button:hover {