focus tweaks

edit/codemirror-default.css

@@ -7,6 +7,7 @@
 }
 .CodeMirror {
   border: solid #CCC 1px;
+  transition: box-shadow .1s;
 }
 #stylus#stylus .CodeMirror {
   /* Using a specificity hack to override userstyles */

edit/edit.css

@@ -611,6 +611,9 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
   right: 4px;
   top: .5em;
 }
+#help-popup input[type="search"] {
+  margin: 3px;
+}
 
 .keymap-list {
   font-size: 12px;
@@ -788,6 +791,10 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
   justify-items: normal;
 }
 
+.usercss .CodeMirror-focused {
+  box-shadow: none;
+}
+
 html:not(.usercss) .usercss-only,
 .usercss #mozilla-format-container,
 .usercss #sections > h2 {

global.css

@@ -54,8 +54,10 @@ button:active {
   border-color: hsl(0, 0%, 50%);
 }
 
-input  {
+input {
   font: inherit;
+  border: 1px solid hsl(0, 0%, 66%);
+  transition: border-color .1s, box-shadow .1s;
 }
 
 input:not([type]),
@@ -66,7 +68,6 @@ input[type=search] {
   min-height: 22px!important;
   line-height: 22px;
   padding: 0 3px;
-  font: inherit;
   border: 1px solid hsl(0, 0%, 66%);
 }
 
@@ -210,11 +211,14 @@ select[disabled] + .select-arrow {
 }
 
 :focus,
-.CodeMirror-focused {
+.CodeMirror-focused,
+[data-focused-via-click] input[type="text"]:focus,
+[data-focused-via-click] input[type="number"]:focus {
   /* 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;

js/dom.js

@@ -357,7 +357,8 @@ function focusAccessibility() {
   const isOutlineAllowed = ({localName, type}) =>
     !focusAccessibility.ELEMENTS.includes(localName) ||
     // allow outline on text/search inputs in addition to textareas
-    localName === 'input' && (type === 'text' || type === 'search');
+    localName === 'input' &&
+    !/^(button|checkbox|color|file|image|radio|submit|range)$/.test(type);
 
   addEventListener('mousedown', suppressOutlineOnClick, {passive: true});
   addEventListener('keydown', keepOutlineOnTab, {passive: true});

options/onoffswitch.css

@@ -16,6 +16,7 @@
   bottom: -10px;
   left: -10px;
   width: calc(100% + 12px);
+  border: 0;
 }
 
 #message-box .onoffswitch input {