css: move general a:hover underline to interaction layer preview

1 files changed, 18 insertions, 5 deletions

diff --git a/src/static/css/miscellany.css b/src/static/css/miscellany.css
index 70c7b571..a9c24732 100644
--- a/src/static/css/miscellany.css
+++ b/src/static/css/miscellany.css
@@ -143,11 +143,6 @@
     text-decoration: none;
   }
 
-  a:hover {
-    text-decoration: underline;
-    text-decoration-style: solid !important;
-  }
-
   a.current {
     font-weight: 800;
   }
@@ -165,6 +160,24 @@
   }
 }
 
+@Layer interaction {
+  /* This is an !important rule because it's really applicable
+   * pretty much anywhere, but the selector specificity is lower
+   * than most selectors which, say, add a dotted underline to
+   * begin with - those would take cascading priority.
+   *
+   * Similarly, this rule has to live in the interaction layer,
+   * because that's where other underline hover cues are set.
+   * If we set set it any higher (e.g. in print) the !important
+   * takes universal priority over !important's set in deeper
+   * layers - like interaction.
+   */
+  a:hover {
+    text-decoration: underline;
+    text-decoration-style: solid !important;
+  }
+}
+
 /* Links with symbols */
 
 @layer print {