use box-shadow instead of outline for focus everywhere

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

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) {