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.

1 files changed, 12 insertions, 14 deletions

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