Remove duplicate theme from sample file, prioritize active over hover highlighting to avoid flickering

client/src/components/Masthead/Masthead.vue

@@ -74,8 +74,8 @@ onMounted(() => {
     <b-navbar id="masthead" type="dark" role="navigation" aria-label="Main" class="justify-content-between">
         <b-navbar-nav>
             <b-navbar-brand
-                class="ml-2 mr-1"
                 v-b-tooltip.hover
+                class="ml-2 mr-1"
                 title="Home"
                 aria-label="homepage"
                 :href="safePath(logoUrl)">
@@ -116,10 +116,8 @@ onMounted(() => {
     margin-bottom: 0;
     background: var(--masthead-color);
     height: $masthead-height;
-
     &:deep(.navbar-nav) {
         height: $masthead-height;
-
         & > li {
             // This allows the background color to fill the full height of the
             // masthead, while still keeping the contents centered (using flex)
@@ -127,37 +125,26 @@ onMounted(() => {
             display: flex;
             align-items: center;
             background: var(--masthead-link-color);
-
             &:hover {
-                background: var(--masthead-link-hover) !important;
+                background: var(--masthead-link-hover);
             }
-
             &.show,
             &.active {
                 background: var(--masthead-link-active);
-
                 .nav-link {
                     color: var(--masthead-text-active);
                 }
             }
-
             .nav-link {
                 position: relative;
                 cursor: pointer;
                 text-decoration: none;
                 color: var(--masthead-text-color);
-
-                &:focus-visible {
-                    outline: 2px solid var(--masthead-text-hover);
-                }
-
                 &:hover {
                     color: var(--masthead-text-hover);
                 }
-
                 &.nav-icon {
                     font-size: 1.3em;
-
                     .nav-note {
                         position: absolute;
                         left: 1.9rem;
@@ -166,7 +153,6 @@ onMounted(() => {
                         font-weight: bold;
                     }
                 }
-
                 &.toggle {
                     color: var(--masthead-text-hover);
                 }

client/src/style/scss/custom_theme_variables.scss

@@ -7,5 +7,5 @@ html {
     --masthead-text-active: #{$masthead-text-active};
     --masthead-link-color: #{$masthead-link-color};
     --masthead-link-hover: #{$masthead-link-hover};
-    --masthead-link-active: #{$masthead-link-background};
+    --masthead-link-active: #{$masthead-link-active};
 }

client/src/style/scss/theme/blue.scss

@@ -16,7 +16,7 @@ $masthead-text-active: lighten($brand-light, 15%);
 $masthead-text-hover: $brand-toggle;
 $masthead-link-color: transparent;
 $masthead-link-hover: transparent;
-$masthead-link-background: darken($masthead-color, 10%);
+$masthead-link-active: darken($masthead-color, 10%);
 
 // Text colors
 $text-color: $brand-dark;

lib/galaxy/config/sample/themes_conf.yml.sample

@@ -13,21 +13,6 @@ blue:
       img: "/static/favicon.svg"
       img-secondary: null
 
-blue:
-  masthead:
-    color: "#2c3143"
-    text:
-      color: "#f8f9fa"
-      hover: gold
-      active: white
-    link:
-      color: transparent
-      hover: transparent
-      active: "#181a24"
-    logo:
-      img: "/static/favicon.svg"
-      img-secondary: null
-
 pride:
   masthead:
       color: >