Reduce focus ring to 3px width, 1px offset

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
3 weeks ago · 0828065b80
parent 1548584c2d
commit 0828065b80
2 changed files with 8 additions and 8 deletions
--- a/app/javascript/application.scss
+++ b/app/javascript/application.scss
@ -17,16 +17,16 @@
 .menu li > button:focus-visible {
  outline-color: rgb(14, 99, 200);
  outline-style: solid;
-  outline-width: 8px;
-  outline-offset: 4px;
+  outline-width: 3px;
+  outline-offset: 1px;
 }

 /* Transfer focus ring from toggle to its full menu row label */
 .menu label:has(.toggle:focus-visible) {
  outline-color: rgb(14, 99, 200);
  outline-style: solid;
-  outline-width: 8px;
-  outline-offset: 4px;
+  outline-width: 3px;
+  outline-offset: 1px;
 }

 .menu label .toggle:focus-visible {
--- a/app/javascript/form.scss
+++ b/app/javascript/form.scss
@ -17,16 +17,16 @@
 .menu li > button:focus-visible {
  outline-color: rgb(14, 99, 200);
  outline-style: solid;
-  outline-width: 8px;
-  outline-offset: 4px;
+  outline-width: 3px;
+  outline-offset: 1px;
 }

 /* Transfer focus ring from toggle to its full menu row label */
 .menu label:has(.toggle:focus-visible) {
  outline-color: rgb(14, 99, 200);
  outline-style: solid;
-  outline-width: 8px;
-  outline-offset: 4px;
+  outline-width: 3px;
+  outline-offset: 1px;
 }

 .menu label .toggle:focus-visible {