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); +} 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);