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

@@ -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 {
+    .nightMode & {
-            outline: 5px auto var(--focus-color);
+        outline: none;
+        box-shadow: 0 0 0 2px var(--focus-color);
     }
+}
+
+#innertable:focus-within .focus:not(:focus) {
+    outline: none;
+
+    .nightMode & {
+        box-shadow: none;
     }
 }
 

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 = f"""
-            button_style += "\n:focus { outline: 1px solid %s; }" % color_hl
+button {{ font-family: {family}; }}
+button:focus {{ outline: 5px auto {color_hl}; }}"""
             font = f"font-size:12px;font-family:{family};"
         elif is_mac:
             family = "Helvetica"

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 {