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 {