Make focus and hover styles more similar

ref #751
xenharmonic-devs · Jun 15, 2024 · 2485d43 · 2485d43
1 parent 6f00414
commit 2485d43
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);