From af7f2c06df7602ff82462d408407b0847908ae74 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 31 Aug 2021 22:25:50 +0200
Subject: [PATCH] Make focus highlight artificial and based on :focus-within

---
 ts/editor/editable.scss      |  4 ++++
 ts/editor/editor-field.ts    |  2 ++
 ts/editor/fields.scss        | 28 ++++++++++++++++++++++++----
 ts/editor/label-container.ts |  2 +-
 ts/sass/_vars.scss           |  4 ++++
 5 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/ts/editor/editable.scss b/ts/editor/editable.scss
index a13e719e6..360c9d83c 100644
--- a/ts/editor/editable.scss
+++ b/ts/editor/editable.scss
@@ -6,6 +6,10 @@ anki-editable {
     overflow: auto;
     padding: 6px;
 
+    &:focus {
+        outline: none;
+    }
+
     * {
         max-width: 100%;
     }
diff --git a/ts/editor/editor-field.ts b/ts/editor/editor-field.ts
index 0c1cca362..a8a991388 100644
--- a/ts/editor/editor-field.ts
+++ b/ts/editor/editor-field.ts
@@ -10,6 +10,8 @@ export class EditorField extends HTMLDivElement {
 
     constructor() {
         super();
+        this.classList.add("editor-field");
+
         this.labelContainer = document.createElement("div", {
             is: "anki-label-container",
         }) as LabelContainer;
diff --git a/ts/editor/fields.scss b/ts/editor/fields.scss
index f220b915e..4a3ac63b6 100644
--- a/ts/editor/fields.scss
+++ b/ts/editor/fields.scss
@@ -12,13 +12,32 @@
     display: flex;
     overflow-x: hidden;
     flex-direction: column;
-    margin: 5px;
+    margin: 3px 0;
+}
+
+.editor-field {
+    margin: 3px;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+
+    &:focus-within {
+        box-shadow: 0 0 0 3px var(--focus-shadow);
+        border-color: var(--focus-border);
+    }
 }
 
 .field {
     position: relative;
-    border: 1px solid var(--border);
+
     background: var(--frame-bg);
+    border-width: 1px 0 0;
+    border-style: dashed;
+    border-color: var(--border);
+    border-radius: 0 0 6px 6px;
+
+    &:focus-within {
+        border-color: var(--focus-border);
+    }
 
     &.dupe {
         // this works around the background colour persisting in copy+paste
@@ -28,8 +47,8 @@
 }
 
 .fname {
-    vertical-align: middle;
-    padding: 0;
+    border-radius: 6px 6px 0 0;
+    padding: 0px 6px;
 }
 
 #dupes,
@@ -71,5 +90,6 @@
 
 .CodeMirror {
     height: auto;
+    border-radius: 0 0 6px 6px;
     padding: 6px 0;
 }
diff --git a/ts/editor/label-container.ts b/ts/editor/label-container.ts
index bc6816e54..26d98bb28 100644
--- a/ts/editor/label-container.ts
+++ b/ts/editor/label-container.ts
@@ -37,7 +37,7 @@ export class LabelContainer extends HTMLDivElement {
 
     constructor() {
         super();
-        this.className = "d-flex justify-content-between";
+        this.className = "fname d-flex justify-content-between";
 
         i18n.then(() => {
             this.title = appendInParentheses(tr.editingToggleSticky(), "F9");
diff --git a/ts/sass/_vars.scss b/ts/sass/_vars.scss
index ec8b2d1bb..bac3d4816 100644
--- a/ts/sass/_vars.scss
+++ b/ts/sass/_vars.scss
@@ -36,6 +36,8 @@
     --suspended-bg: #ffffb2;
     --marked-bg: #cce;
     --tooltip-bg: #fcfcfc;
+    --focus-border: #0969da;
+    --focus-shadow: rgba(9 105 218 / 0.3);
 }
 
 :root[class*="night-mode"] {
@@ -73,4 +75,6 @@
     --suspended-bg: #aaaa33;
     --marked-bg: #77c;
     --tooltip-bg: #272727;
+    --focus-border: #316dca;
+    --focus-shadow: #143d79;
 }