From e843660f125cec4d2855fc52da8019334f208245 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Mon, 12 Oct 2020 07:29:56 +0300
Subject: [PATCH] use box-shadow instead of outline for focus everywhere

---
 edit/codemirror-default.css | 9 ++++++---
 global.css                  | 7 +++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/edit/codemirror-default.css b/edit/codemirror-default.css
index 5a79b8ae..cf949bcd 100644
--- a/edit/codemirror-default.css
+++ b/edit/codemirror-default.css
@@ -8,15 +8,18 @@
 .CodeMirror {
   border: solid #CCC 1px;
 }
+#stylus#stylus .CodeMirror {
+  /* Using a specificity hack to override userstyles */
+  /* Not using the ring-color hack as it became ugly in new Chrome */
+  outline: none !important;
+}
 .CodeMirror-lint-mark-warning {
   background: none;
 }
 .CodeMirror-dialog {
   -webkit-animation: highlight 3s cubic-bezier(.18, .02, 0, .94);
 }
-.CodeMirror-focused {
-  outline: #7dadd9 auto 1px; /* not using the ring-color hack as it became ugly in new Chrome */
-}
+/* .CodeMirror-focused is defined in global.css */
 #sections[data-section-count="1"] .CodeMirror {
   outline: none !important;
 }
diff --git a/global.css b/global.css
index c010a958..9f91c152 100644
--- a/global.css
+++ b/global.css
@@ -208,9 +208,16 @@ select[disabled] + .select-arrow {
   display: none !important;
 }
 
+:focus,
+.CodeMirror-focused {
+  /* Using box-shadow instead of the ugly outline in new Chrome */
+  outline: none;
+  box-shadow: 0 0 0 1px hsl(180, 100%, 38%), 0 0 3px hsla(180, 100%, 60%, .5);
+}
 [data-focused-via-click] :focus,
 [data-focused-via-click]:focus {
   outline: none;
+  box-shadow: none;
 }
 
 @supports (-moz-appearance: none) {