From 2a61b28920848c4247cab3f099b2fbf3ec2aa229 Mon Sep 17 00:00:00 2001
From: cryptogopher <cryptogopher@noreply.me>
Date: Mon, 10 Apr 2023 21:44:13 +0200
Subject: [PATCH] Refine link hover/focus styles

---
 app/assets/stylesheets/application.css | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 7f8a38a..ecffa00 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -18,9 +18,12 @@
   font-family: system-ui;
 }
 ::selection {
-  background-color: #006c9b;
+  background-color: #009ade;
   color: white;
 }
+:focus-visible {
+  outline: none;
+}
 
 // TODO: convert em to rem
 body {
@@ -28,7 +31,7 @@ body {
 }
 
 input {
-  background-color: #ffffff;
+  background-color: white;
   border: 1px solid;
   border-radius: 0.2rem;
   border-color: #cccccc;
@@ -46,9 +49,8 @@ input[type=checkbox] {
   width: 1.1rem;
   -webkit-appearance: none;
 }
-input:focus, input:hover {
+input:focus-visible, input:hover {
   accent-color: #006c9b;
-  outline: none;
   background-color: #f3f3f3;
 }
 input[type=checkbox]:checked {
@@ -60,10 +62,11 @@ input[type=checkbox]:checked {
   height: 2.1em;
   margin: 0.5em 0;
 }
-.application-menu a, input[type=submit] {
+.application-menu a,
+input[type=submit] {
   align-items: center;
   border: 1px solid;
-  background-color: #ffffff;
+  background-color: white;
   border-color: #a0a0a0;
   border-radius: 0.2em;
   color: #a0a0a0;
@@ -83,6 +86,7 @@ input[type=checkbox]:checked {
 }
 .application-menu a.active,
 .application-menu a:hover,
+.application-menu a:hover:focus-visible,
 input[type=submit]:hover {
   background-color: #009ade;
   border-color: #009ade;
@@ -90,13 +94,12 @@ input[type=submit]:hover {
   cursor: pointer;
   fill: white;
 }
-.application-menu a:focus-visible,
-input[type=submit]:focus-visible {
+.application-menu a:focus-visible {
+  background-color: #f3f3f3;
+}
+.application-menu a.active:focus-visible {
   background-color: #006c9b;
   border-color: #006c9b;
-  color: white;
-  fill: white;
-  outline: none;
 }
 
 .flashes {