From 2485d43a543d413bf809300b2af1d9c51997f11d Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Sat, 15 Jun 2024 11:28:38 +0300
Subject: [PATCH] Make focus and hover styles more similar

ref #751
---
 src/App.vue                                       | 3 +++
 src/assets/base.css                               | 2 ++
 src/assets/main.css                               | 1 +
 src/components/DropdownGroup.vue                  | 1 +
 src/components/modals/modification/TakeSubset.vue | 3 +++
 src/views/AnalysisView.vue                        | 2 ++
 6 files changed, 12 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 1f43867f..80c12d84 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -582,11 +582,13 @@ nav#app-navigation ul li a {
   cursor: default;
 }
 
+nav#app-navigation ul#app-tabs li a:focus,
 nav#app-navigation ul#app-tabs li a:hover {
   background-color: var(--color-accent-deeper);
 }
 
 nav#app-navigation ul#app-tabs li a.router-link-exact-active,
+nav#app-navigation ul#app-tabs li a.router-link-exact-active:focus,
 nav#app-navigation ul#app-tabs li a.router-link-exact-active:hover {
   background-color: var(--color-background);
   color: var(--color-text);
@@ -596,6 +598,7 @@ nav a.router-link-exact-active {
   color: var(--color-text);
 }
 
+nav a.router-link-exact-active:focus,
 nav a.router-link-exact-active:hover {
   background-color: transparent;
 }
diff --git a/src/assets/base.css b/src/assets/base.css
index a24864ee..83313ff4 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -18,6 +18,7 @@
   --color-accent-text-btn: #703070;
   --color-accent-mute: #b7b;
   --color-accent-deeper: #603060;
+  --color-accent-deepest: #402040;
   --color-accent-background: #fffeff;
   --color-accent-dimmed: rgba(0, 20, 20, 0.7);
 
@@ -59,6 +60,7 @@
   --color-accent-text-btn: #a848a8;
   --color-accent-mute: #646;
   --color-accent-deeper: #602060;
+  --color-accent-deepest: #401040;
   --color-accent-background: #011;
   --color-accent-dimmed: rgba(0, 20, 20, 0.7);
 
diff --git a/src/assets/main.css b/src/assets/main.css
index 21891c04..aaaafad9 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -82,6 +82,7 @@ button,
   text-decoration: none;
   color: var(--color-accent-text-btn);
 }
+/* No button:focus styles because it looks like the button gets stuck */
 button:hover,
 .btn:hover {
   color: white;
diff --git a/src/components/DropdownGroup.vue b/src/components/DropdownGroup.vue
index 7334299c..31e6f7fb 100644
--- a/src/components/DropdownGroup.vue
+++ b/src/components/DropdownGroup.vue
@@ -59,6 +59,7 @@ defineExpose({ blur })
 .btn-dropdown-group a {
   text-decoration: none;
 }
+.btn-dropdown-group a:focus li,
 .btn-dropdown-group a:hover li {
   color: white;
   background-color: var(--color-accent);
diff --git a/src/components/modals/modification/TakeSubset.vue b/src/components/modals/modification/TakeSubset.vue
index 055e20f8..cd194d6f 100644
--- a/src/components/modals/modification/TakeSubset.vue
+++ b/src/components/modals/modification/TakeSubset.vue
@@ -88,4 +88,7 @@ function modify(expand = true) {
 .degree.selected:hover {
   background-color: var(--color-accent-deeper);
 }
+.degree:not(.selected):hover {
+  background-color: var(--color-accent-deepest);
+}
 </style>
diff --git a/src/views/AnalysisView.vue b/src/views/AnalysisView.vue
index debe4ddf..6a5430d0 100644
--- a/src/views/AnalysisView.vue
+++ b/src/views/AnalysisView.vue
@@ -605,10 +605,12 @@ nav ul li a {
   text-decoration: none;
   cursor: default;
 }
+nav ul li a:focus,
 nav ul li a:hover {
   background-color: var(--color-accent-mute);
 }
 nav ul li a.active,
+nav ul li a.active:focus,
 nav ul li a.active:hover {
   background-color: var(--color-background);
   color: var(--color-text);