Fix highlight colors for navigation links

material/assets/stylesheets/application.css

@@ -522,7 +522,9 @@ hr {
         display: none; }
     .md-nav__link[data-md-state="blur"] {
       color: rgba(0, 0, 0, 0.54); }
-    .md-nav__link:hover, .md-nav__link:active, .md-nav__link--active {
+    .md-nav__link:active, .md-nav__link--active {
+      color: #3f51b5; }
+    .md-nav__link:hover {
       color: #536dfe; }
   .md-nav__source {
     display: none; }
@@ -1300,7 +1302,7 @@ hr {
   html .md-nav__link[for="toc"]::after {
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
-    color: #536dfe;
+    color: inherit;
     content: "toc"; }
 
   html .md-nav__link[for="toc"] + .md-nav__link {
@@ -1464,8 +1466,6 @@ hr {
     right: 1.2rem;
     -webkit-transform: translateY(-50%) rotate(-90deg);
     transform: translateY(-50%) rotate(-90deg);
-    -webkit-transition: inherit;
-    transition: inherit;
     color: rgba(0, 0, 0, 0.54);
     font-size: 2.4rem; }
 

material/assets/stylesheets/application.palette.css

@@ -22,6 +22,10 @@ button[data-md-color-primary="red"] {
 [data-md-color-primary="red"] .md-header {
   background-color: #ef5350; }
 
+[data-md-color-primary="red"] .md-nav__link:active,
+[data-md-color-primary="red"] .md-nav__link--active {
+  color: #ef5350; }
+
 button[data-md-color-primary="pink"] {
   background-color: #e91e63; }
 
@@ -31,6 +35,10 @@ button[data-md-color-primary="pink"] {
 [data-md-color-primary="pink"] .md-header {
   background-color: #e91e63; }
 
+[data-md-color-primary="pink"] .md-nav__link:active,
+[data-md-color-primary="pink"] .md-nav__link--active {
+  color: #e91e63; }
+
 button[data-md-color-primary="purple"] {
   background-color: #ab47bc; }
 
@@ -40,6 +48,10 @@ button[data-md-color-primary="purple"] {
 [data-md-color-primary="purple"] .md-header {
   background-color: #ab47bc; }
 
+[data-md-color-primary="purple"] .md-nav__link:active,
+[data-md-color-primary="purple"] .md-nav__link--active {
+  color: #ab47bc; }
+
 button[data-md-color-primary="deep-purple"] {
   background-color: #7e57c2; }
 
@@ -49,6 +61,10 @@ button[data-md-color-primary="deep-purple"] {
 [data-md-color-primary="deep-purple"] .md-header {
   background-color: #7e57c2; }
 
+[data-md-color-primary="deep-purple"] .md-nav__link:active,
+[data-md-color-primary="deep-purple"] .md-nav__link--active {
+  color: #7e57c2; }
+
 button[data-md-color-primary="indigo"] {
   background-color: #3f51b5; }
 
@@ -58,6 +74,10 @@ button[data-md-color-primary="indigo"] {
 [data-md-color-primary="indigo"] .md-header {
   background-color: #3f51b5; }
 
+[data-md-color-primary="indigo"] .md-nav__link:active,
+[data-md-color-primary="indigo"] .md-nav__link--active {
+  color: #3f51b5; }
+
 button[data-md-color-primary="blue"] {
   background-color: #2196f3; }
 
@@ -67,6 +87,10 @@ button[data-md-color-primary="blue"] {
 [data-md-color-primary="blue"] .md-header {
   background-color: #2196f3; }
 
+[data-md-color-primary="blue"] .md-nav__link:active,
+[data-md-color-primary="blue"] .md-nav__link--active {
+  color: #2196f3; }
+
 button[data-md-color-primary="light-blue"] {
   background-color: #03a9f4; }
 
@@ -76,6 +100,10 @@ button[data-md-color-primary="light-blue"] {
 [data-md-color-primary="light-blue"] .md-header {
   background-color: #03a9f4; }
 
+[data-md-color-primary="light-blue"] .md-nav__link:active,
+[data-md-color-primary="light-blue"] .md-nav__link--active {
+  color: #03a9f4; }
+
 button[data-md-color-primary="cyan"] {
   background-color: #00bcd4; }
 
@@ -85,6 +113,10 @@ button[data-md-color-primary="cyan"] {
 [data-md-color-primary="cyan"] .md-header {
   background-color: #00bcd4; }
 
+[data-md-color-primary="cyan"] .md-nav__link:active,
+[data-md-color-primary="cyan"] .md-nav__link--active {
+  color: #00bcd4; }
+
 button[data-md-color-primary="teal"] {
   background-color: #009688; }
 
@@ -94,6 +126,10 @@ button[data-md-color-primary="teal"] {
 [data-md-color-primary="teal"] .md-header {
   background-color: #009688; }
 
+[data-md-color-primary="teal"] .md-nav__link:active,
+[data-md-color-primary="teal"] .md-nav__link--active {
+  color: #009688; }
+
 button[data-md-color-primary="green"] {
   background-color: #4caf50; }
 
@@ -103,6 +139,10 @@ button[data-md-color-primary="green"] {
 [data-md-color-primary="green"] .md-header {
   background-color: #4caf50; }
 
+[data-md-color-primary="green"] .md-nav__link:active,
+[data-md-color-primary="green"] .md-nav__link--active {
+  color: #4caf50; }
+
 button[data-md-color-primary="light-green"] {
   background-color: #7cb342; }
 
@@ -112,6 +152,10 @@ button[data-md-color-primary="light-green"] {
 [data-md-color-primary="light-green"] .md-header {
   background-color: #7cb342; }
 
+[data-md-color-primary="light-green"] .md-nav__link:active,
+[data-md-color-primary="light-green"] .md-nav__link--active {
+  color: #7cb342; }
+
 button[data-md-color-primary="lime"] {
   background-color: #c0ca33; }
 
@@ -121,6 +165,10 @@ button[data-md-color-primary="lime"] {
 [data-md-color-primary="lime"] .md-header {
   background-color: #c0ca33; }
 
+[data-md-color-primary="lime"] .md-nav__link:active,
+[data-md-color-primary="lime"] .md-nav__link--active {
+  color: #c0ca33; }
+
 button[data-md-color-primary="yellow"] {
   background-color: #f9a825; }
 
@@ -130,6 +178,10 @@ button[data-md-color-primary="yellow"] {
 [data-md-color-primary="yellow"] .md-header {
   background-color: #f9a825; }
 
+[data-md-color-primary="yellow"] .md-nav__link:active,
+[data-md-color-primary="yellow"] .md-nav__link--active {
+  color: #f9a825; }
+
 button[data-md-color-primary="amber"] {
   background-color: #ffb300; }
 
@@ -139,6 +191,10 @@ button[data-md-color-primary="amber"] {
 [data-md-color-primary="amber"] .md-header {
   background-color: #ffb300; }
 
+[data-md-color-primary="amber"] .md-nav__link:active,
+[data-md-color-primary="amber"] .md-nav__link--active {
+  color: #ffb300; }
+
 button[data-md-color-primary="orange"] {
   background-color: #fb8c00; }
 
@@ -148,6 +204,10 @@ button[data-md-color-primary="orange"] {
 [data-md-color-primary="orange"] .md-header {
   background-color: #fb8c00; }
 
+[data-md-color-primary="orange"] .md-nav__link:active,
+[data-md-color-primary="orange"] .md-nav__link--active {
+  color: #fb8c00; }
+
 button[data-md-color-primary="deep-orange"] {
   background-color: #ff7043; }
 
@@ -157,6 +217,10 @@ button[data-md-color-primary="deep-orange"] {
 [data-md-color-primary="deep-orange"] .md-header {
   background-color: #ff7043; }
 
+[data-md-color-primary="deep-orange"] .md-nav__link:active,
+[data-md-color-primary="deep-orange"] .md-nav__link--active {
+  color: #ff7043; }
+
 button[data-md-color-primary="brown"] {
   background-color: #795548; }
 
@@ -166,6 +230,10 @@ button[data-md-color-primary="brown"] {
 [data-md-color-primary="brown"] .md-header {
   background-color: #795548; }
 
+[data-md-color-primary="brown"] .md-nav__link:active,
+[data-md-color-primary="brown"] .md-nav__link--active {
+  color: #795548; }
+
 button[data-md-color-primary="grey"] {
   background-color: #757575; }
 
@@ -175,6 +243,10 @@ button[data-md-color-primary="grey"] {
 [data-md-color-primary="grey"] .md-header {
   background-color: #757575; }
 
+[data-md-color-primary="grey"] .md-nav__link:active,
+[data-md-color-primary="grey"] .md-nav__link--active {
+  color: #757575; }
+
 button[data-md-color-primary="blue-grey"] {
   background-color: #546e7a; }
 
@@ -184,6 +256,10 @@ button[data-md-color-primary="blue-grey"] {
 [data-md-color-primary="blue-grey"] .md-header {
   background-color: #546e7a; }
 
+[data-md-color-primary="blue-grey"] .md-nav__link:active,
+[data-md-color-primary="blue-grey"] .md-nav__link--active {
+  color: #546e7a; }
+
 button[data-md-color-accent="red"] {
   background-color: #ff1744; }
 
@@ -204,9 +280,7 @@ button[data-md-color-accent="red"] {
 [data-md-color-accent="red"] .md-typeset [id] .headerlink:focus {
   color: #ff1744; }
 
-[data-md-color-accent="red"] .md-nav__link:hover,
+[data-md-color-accent="red"] .md-nav__link:hover {
-[data-md-color-accent="red"] .md-nav__link:active,
-[data-md-color-accent="red"] .md-nav__link--active {
   color: #ff1744; }
 
 [data-md-color-accent="red"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -238,9 +312,7 @@ button[data-md-color-accent="pink"] {
 [data-md-color-accent="pink"] .md-typeset [id] .headerlink:focus {
   color: #f50057; }
 
-[data-md-color-accent="pink"] .md-nav__link:hover,
+[data-md-color-accent="pink"] .md-nav__link:hover {
-[data-md-color-accent="pink"] .md-nav__link:active,
-[data-md-color-accent="pink"] .md-nav__link--active {
   color: #f50057; }
 
 [data-md-color-accent="pink"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -272,9 +344,7 @@ button[data-md-color-accent="purple"] {
 [data-md-color-accent="purple"] .md-typeset [id] .headerlink:focus {
   color: #e040fb; }
 
-[data-md-color-accent="purple"] .md-nav__link:hover,
+[data-md-color-accent="purple"] .md-nav__link:hover {
-[data-md-color-accent="purple"] .md-nav__link:active,
-[data-md-color-accent="purple"] .md-nav__link--active {
   color: #e040fb; }
 
 [data-md-color-accent="purple"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -306,9 +376,7 @@ button[data-md-color-accent="deep-purple"] {
 [data-md-color-accent="deep-purple"] .md-typeset [id] .headerlink:focus {
   color: #7c4dff; }
 
-[data-md-color-accent="deep-purple"] .md-nav__link:hover,
+[data-md-color-accent="deep-purple"] .md-nav__link:hover {
-[data-md-color-accent="deep-purple"] .md-nav__link:active,
-[data-md-color-accent="deep-purple"] .md-nav__link--active {
   color: #7c4dff; }
 
 [data-md-color-accent="deep-purple"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -340,9 +408,7 @@ button[data-md-color-accent="indigo"] {
 [data-md-color-accent="indigo"] .md-typeset [id] .headerlink:focus {
   color: #536dfe; }
 
-[data-md-color-accent="indigo"] .md-nav__link:hover,
+[data-md-color-accent="indigo"] .md-nav__link:hover {
-[data-md-color-accent="indigo"] .md-nav__link:active,
-[data-md-color-accent="indigo"] .md-nav__link--active {
   color: #536dfe; }
 
 [data-md-color-accent="indigo"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -374,9 +440,7 @@ button[data-md-color-accent="blue"] {
 [data-md-color-accent="blue"] .md-typeset [id] .headerlink:focus {
   color: #448aff; }
 
-[data-md-color-accent="blue"] .md-nav__link:hover,
+[data-md-color-accent="blue"] .md-nav__link:hover {
-[data-md-color-accent="blue"] .md-nav__link:active,
-[data-md-color-accent="blue"] .md-nav__link--active {
   color: #448aff; }
 
 [data-md-color-accent="blue"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -408,9 +472,7 @@ button[data-md-color-accent="light-blue"] {
 [data-md-color-accent="light-blue"] .md-typeset [id] .headerlink:focus {
   color: #0091ea; }
 
-[data-md-color-accent="light-blue"] .md-nav__link:hover,
+[data-md-color-accent="light-blue"] .md-nav__link:hover {
-[data-md-color-accent="light-blue"] .md-nav__link:active,
-[data-md-color-accent="light-blue"] .md-nav__link--active {
   color: #0091ea; }
 
 [data-md-color-accent="light-blue"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -442,9 +504,7 @@ button[data-md-color-accent="cyan"] {
 [data-md-color-accent="cyan"] .md-typeset [id] .headerlink:focus {
   color: #00b8d4; }
 
-[data-md-color-accent="cyan"] .md-nav__link:hover,
+[data-md-color-accent="cyan"] .md-nav__link:hover {
-[data-md-color-accent="cyan"] .md-nav__link:active,
-[data-md-color-accent="cyan"] .md-nav__link--active {
   color: #00b8d4; }
 
 [data-md-color-accent="cyan"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -476,9 +536,7 @@ button[data-md-color-accent="teal"] {
 [data-md-color-accent="teal"] .md-typeset [id] .headerlink:focus {
   color: #00bfa5; }
 
-[data-md-color-accent="teal"] .md-nav__link:hover,
+[data-md-color-accent="teal"] .md-nav__link:hover {
-[data-md-color-accent="teal"] .md-nav__link:active,
-[data-md-color-accent="teal"] .md-nav__link--active {
   color: #00bfa5; }
 
 [data-md-color-accent="teal"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -510,9 +568,7 @@ button[data-md-color-accent="green"] {
 [data-md-color-accent="green"] .md-typeset [id] .headerlink:focus {
   color: #00c853; }
 
-[data-md-color-accent="green"] .md-nav__link:hover,
+[data-md-color-accent="green"] .md-nav__link:hover {
-[data-md-color-accent="green"] .md-nav__link:active,
-[data-md-color-accent="green"] .md-nav__link--active {
   color: #00c853; }
 
 [data-md-color-accent="green"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -544,9 +600,7 @@ button[data-md-color-accent="light-green"] {
 [data-md-color-accent="light-green"] .md-typeset [id] .headerlink:focus {
   color: #64dd17; }
 
-[data-md-color-accent="light-green"] .md-nav__link:hover,
+[data-md-color-accent="light-green"] .md-nav__link:hover {
-[data-md-color-accent="light-green"] .md-nav__link:active,
-[data-md-color-accent="light-green"] .md-nav__link--active {
   color: #64dd17; }
 
 [data-md-color-accent="light-green"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -578,9 +632,7 @@ button[data-md-color-accent="lime"] {
 [data-md-color-accent="lime"] .md-typeset [id] .headerlink:focus {
   color: #aeea00; }
 
-[data-md-color-accent="lime"] .md-nav__link:hover,
+[data-md-color-accent="lime"] .md-nav__link:hover {
-[data-md-color-accent="lime"] .md-nav__link:active,
-[data-md-color-accent="lime"] .md-nav__link--active {
   color: #aeea00; }
 
 [data-md-color-accent="lime"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -612,9 +664,7 @@ button[data-md-color-accent="yellow"] {
 [data-md-color-accent="yellow"] .md-typeset [id] .headerlink:focus {
   color: #ffd600; }
 
-[data-md-color-accent="yellow"] .md-nav__link:hover,
+[data-md-color-accent="yellow"] .md-nav__link:hover {
-[data-md-color-accent="yellow"] .md-nav__link:active,
-[data-md-color-accent="yellow"] .md-nav__link--active {
   color: #ffd600; }
 
 [data-md-color-accent="yellow"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -646,9 +696,7 @@ button[data-md-color-accent="amber"] {
 [data-md-color-accent="amber"] .md-typeset [id] .headerlink:focus {
   color: #ffab00; }
 
-[data-md-color-accent="amber"] .md-nav__link:hover,
+[data-md-color-accent="amber"] .md-nav__link:hover {
-[data-md-color-accent="amber"] .md-nav__link:active,
-[data-md-color-accent="amber"] .md-nav__link--active {
   color: #ffab00; }
 
 [data-md-color-accent="amber"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -680,9 +728,7 @@ button[data-md-color-accent="orange"] {
 [data-md-color-accent="orange"] .md-typeset [id] .headerlink:focus {
   color: #ff9100; }
 
-[data-md-color-accent="orange"] .md-nav__link:hover,
+[data-md-color-accent="orange"] .md-nav__link:hover {
-[data-md-color-accent="orange"] .md-nav__link:active,
-[data-md-color-accent="orange"] .md-nav__link--active {
   color: #ff9100; }
 
 [data-md-color-accent="orange"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -714,9 +760,7 @@ button[data-md-color-accent="deep-orange"] {
 [data-md-color-accent="deep-orange"] .md-typeset [id] .headerlink:focus {
   color: #ff6e40; }
 
-[data-md-color-accent="deep-orange"] .md-nav__link:hover,
+[data-md-color-accent="deep-orange"] .md-nav__link:hover {
-[data-md-color-accent="deep-orange"] .md-nav__link:active,
-[data-md-color-accent="deep-orange"] .md-nav__link--active {
   color: #ff6e40; }
 
 [data-md-color-accent="deep-orange"] .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
@@ -767,37 +811,3 @@ button[data-md-color-accent="deep-orange"] {
     border-left: 0.4rem solid #757575; }
   [data-md-color-primary="blue-grey"] .md-nav--secondary {
     border-left: 0.4rem solid #546e7a; } }
-
-@media only screen and (max-width: 59.9375em) {
-  html [data-md-color-accent="red"] .md-nav__link[for="toc"]::after {
-    color: #ff1744; }
-  html [data-md-color-accent="pink"] .md-nav__link[for="toc"]::after {
-    color: #f50057; }
-  html [data-md-color-accent="purple"] .md-nav__link[for="toc"]::after {
-    color: #e040fb; }
-  html [data-md-color-accent="deep-purple"] .md-nav__link[for="toc"]::after {
-    color: #7c4dff; }
-  html [data-md-color-accent="indigo"] .md-nav__link[for="toc"]::after {
-    color: #536dfe; }
-  html [data-md-color-accent="blue"] .md-nav__link[for="toc"]::after {
-    color: #448aff; }
-  html [data-md-color-accent="light-blue"] .md-nav__link[for="toc"]::after {
-    color: #0091ea; }
-  html [data-md-color-accent="cyan"] .md-nav__link[for="toc"]::after {
-    color: #00b8d4; }
-  html [data-md-color-accent="teal"] .md-nav__link[for="toc"]::after {
-    color: #00bfa5; }
-  html [data-md-color-accent="green"] .md-nav__link[for="toc"]::after {
-    color: #00c853; }
-  html [data-md-color-accent="light-green"] .md-nav__link[for="toc"]::after {
-    color: #64dd17; }
-  html [data-md-color-accent="lime"] .md-nav__link[for="toc"]::after {
-    color: #aeea00; }
-  html [data-md-color-accent="yellow"] .md-nav__link[for="toc"]::after {
-    color: #ffd600; }
-  html [data-md-color-accent="amber"] .md-nav__link[for="toc"]::after {
-    color: #ffab00; }
-  html [data-md-color-accent="orange"] .md-nav__link[for="toc"]::after {
-    color: #ff9100; }
-  html [data-md-color-accent="deep-orange"] .md-nav__link[for="toc"]::after {
-    color: #ff6e40; } }

src/assets/stylesheets/application.palette.scss

@@ -110,6 +110,12 @@ button[data-md-color-accent] {
         border-left: 0.4rem solid $color;
       }
     }
+
+    // Current or hovered link
+    .md-nav__link:active,
+    .md-nav__link--active {
+      color: $color;
+    }
   }
 }
 
@@ -171,22 +177,10 @@ button[data-md-color-accent] {
     }
 
     // Current or hovered link
-    .md-nav__link:hover,
+    .md-nav__link:hover {
-    .md-nav__link:active,
-    .md-nav__link--active {
       color: $color;
     }
 
-    // [tablet portrait -]: Show table of contents in drawer
-    @include break-to-device(tablet portrait) {
-
-      // Show link to table of contents - higher specificity is necessary to
-      // display the table of contents inside the drawer
-      html & .md-nav__link[for="toc"]::after {
-        color: $color;
-      }
-    }
-
     // Search container scrollbar thumb
     .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
       background-color: $color;

src/assets/stylesheets/layout/_nav.scss

@@ -118,10 +118,14 @@
       color: $md-color-black--light;
     }
 
-    // Current or hovered item
+    // Active item
-    &:hover,
     &:active,
     &--active {
+      color: $md-color-primary;
+    }
+
+    // Hovered item
+    &:hover {
       color: $md-color-accent;
     }
   }
@@ -216,7 +220,6 @@
           top: 50%;
           right: 1.2rem;
           transform: translateY(-50%) rotate(-90deg);
-          transition: inherit;
           color: $md-color-black--light;
           font-size: 2.4rem;
         }
@@ -306,7 +309,7 @@
       // Unrotate icon for table of contents
       &::after {
         transform: translateY(-50%);
-        color: $md-color-accent;
+        color: inherit;
         content: "toc";
       }