Make focus highlight artificial and based on :focus-within

ts/editor/editable.scss

@@ -6,6 +6,10 @@ anki-editable {
     overflow: auto;
     padding: 6px;
 
+    &:focus {
+        outline: none;
+    }
+
     * {
         max-width: 100%;
     }

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;

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;
+    border-radius: 6px 6px 0 0;
-    padding: 0;
+    padding: 0px 6px;
 }
 
 #dupes,
@@ -71,5 +90,6 @@
 
 .CodeMirror {
     height: auto;
+    border-radius: 0 0 6px 6px;
     padding: 6px 0;
 }

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");

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;
 }