Split up link colours and use fewer wildcard patterns to re-style them.

This was causing problems with message colouring, as these rules had specificity similar to constructs like `.message.deleted`.

This approach removes their browser default styles, then adds styling specific to the channel sidebar, the app bar, and the message view.

5 files changed, 24 insertions, 18 deletions

diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css
index 0d0a311..ce52712 100644
--- a/ui/styles/app-bar.css
+++ b/ui/styles/app-bar.css
@@ -6,6 +6,7 @@
   justify-content: space-between;
   align-items: stretch;
   background-color: var(--colour-header-bg);
+  color: var(--light-text);
 }
 
 .app-bar > * {
@@ -32,10 +33,6 @@
   letter-spacing: 0.25rem;
 }
 
-.app-bar a {
-  text-decoration: none;
-}
-
 .app-bar button,
 .app-bar button img {
   height: var(--app-bar-height);
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index 4890f2c..eafe44d 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -9,25 +9,19 @@
 }
 
 .own-message {
+  color: var(--colour-message-run-self-text);
   background-color: var(--colour-message-run-self-bg);
   border: 1px solid var(--colour-message-run-self-border);
   margin-left: 1rem;
 }
 
-.own-message * {
-  color: var(--colour-message-run-self-text);
-}
-
 .other-message {
+  color: var(--colour-message-run-other-text);
   background-color: var(--colour-message-run-other-bg);
   border: 1px solid var(--colour-message-run-other-border);
   margin-right: 1rem;
 }
 
-.other-message * {
-  color: var(--colour-message-run-other-text);
-}
-
 .message-run > .username {
   background-color: var(--colour-message-run-username-bg);
   color: var(--colour-message-run-username-text);
@@ -43,6 +37,16 @@
   position: relative;
 }
 
+.message a,
+.message a:visited {
+  color: var(--colour-message-run-link-text);
+}
+
+.message a:hover,
+.message a:active {
+  text-decoration: underline;
+}
+
 .message.delete-armed,
 .message.delete-armed:hover {
   background-color: var(--colour-warn);
@@ -50,9 +54,6 @@
 
 .message:hover {
   background-color: var(--colour-message-hover-bg);
-}
-
-.message:hover * {
   color: var(--colour-message-hover-text);
 }
 
@@ -104,9 +105,6 @@
   padding-left: 0.5rem;
   border-left: 2px solid grey;
   border-radius: 0.125rem;
-}
-
-.message-body blockquote * {
   color: grey;
 }
 
diff --git a/ui/styles/reset.css b/ui/styles/reset.css
index 5a17f02..c92a790 100644
--- a/ui/styles/reset.css
+++ b/ui/styles/reset.css
@@ -94,6 +94,14 @@ video {
   vertical-align: baseline;
 }
 
+a,
+a:hover,
+a:visited,
+a:active {
+  text-decoration: none;
+  color: inherit;
+}
+
 /* HTML5 display-role reset for older browsers */
 article,
 aside,
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index 9a499f2..b825545 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -17,6 +17,7 @@
   border-radius: 0.5rem;
   border: 1px solid var(--colour-navbar-border);
   margin: 0.25rem;
+  color: var(--colour-navbar-text);
 }
 
 .list-nav li.active {
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index c43832c..211b236 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -18,6 +18,7 @@
   /* Light text is a bit hard to read; I may need to adjust it. */
   --light-text: color-mix(in srgb, var(--colour-base) 40%, white);
   --dark-text: color-mix(in srgb, var(--colour-base) 40%, black);
+  --link-text: color-mix(in srgb, var(--colour-base) 40%, blue);
 
   /* Header */
   --colour-header-bg: color-mix(in srgb, var(--colour-base) 30%, black);
@@ -56,6 +57,7 @@
   );
   --colour-message-run-self-text: var(--dark-text);
   --colour-message-run-other-text: var(--dark-text);
+  --colour-message-run-link-text: var(--link-text);
 
   --colour-message-run-username-bg: color-mix(in srgb, var(--colour-base) 70%, white);
   --colour-message-run-username-border: color-mix(in srgb, var(--colour-base) 50%, black);