diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index 3495306d24..69418d084b 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -730,6 +730,9 @@ --color-text-settings-field-hint: hsl(0deg 0% 57%); --color-text-clear-search-button: hsl(0deg 0% 80%); --color-text-clear-search-button-hover: hsl(0deg 0% 0%); + /* These colors are from Bootstrap. */ + --color-text-generic-link: #08c; + --color-text-generic-link-interactive: #005580; /* Demo Organization colors */ --color-text-settings-demo-organization-warning: hsl(4deg 58% 33%); @@ -1237,6 +1240,8 @@ --color-text-settings-field-hint: hsl(0deg 0% 52%); --color-text-clear-search-button: hsl(236deg 33% 80%); --color-text-clear-search-button-hover: hsl(0deg 0% 100%); + --color-text-generic-link: #08c; + --color-text-generic-link-interactive: hsl(200deg 79% 66%); /* Demo Organization colors */ --color-text-settings-demo-organization-warning: hsl(3deg 73% 80%); @@ -1292,6 +1297,10 @@ --color-markdown-pre-background: hsl(0deg 0% 100% / 4%); --color-markdown-pre-background-mentions: hsl(0deg 0% 100% / 5%); --color-markdown-pre-border-mentions: var(--color-markdown-pre-border); + --color-markdown-link: var(--color-text-generic-link); + --color-markdown-code-link: var(--color-markdown-link); + --color-markdown-link-hover: var(--color-text-generic-link-interactive); + --color-markdown-code-link-hover: var(--color-markdown-link-hover); /* Icon colors */ --color-icon-bot: hsl(180deg 5% 50% / 100%); diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index cd306dbbc5..29b5b4158c 100644 --- a/web/styles/dark_theme.css +++ b/web/styles/dark_theme.css @@ -13,22 +13,6 @@ @extend .placeholder; } - & - a:not( - .button, - .compose_control_button, - .conversation-partners, - .user-presence-link, - .typeahead-item-link - ):hover { - color: hsl(200deg 79% 66%); - text-decoration: none; - - & code { - color: hsl(200deg 79% 66%); - } - } - & ul.dm-list, & ul.filters { .has-unmuted-mentions .unread_mention_info { diff --git a/web/styles/message_header.css b/web/styles/message_header.css index 581aee3029..0c9686a108 100644 --- a/web/styles/message_header.css +++ b/web/styles/message_header.css @@ -34,7 +34,7 @@ color: var(--color-text-message-header); &:hover { - color: var(--color-text-message-header) !important; + color: var(--color-text-message-header); text-decoration: none; } } diff --git a/web/styles/zulip.css b/web/styles/zulip.css index 9b9099b9af..f0809a58bb 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -68,12 +68,23 @@ blockquote p { font-weight: normal; } +/* These colors are typically overridden, + but referencing them as variables prevents + specificity wars and ugly :not() selectors, + especially in dark theme. */ a { cursor: pointer; + color: var(--color-text-generic-link); + text-decoration: none; +} - &.message_label_clickable:hover { - cursor: pointer; - color: hsl(200deg 100% 40%); +a:hover, +a:focus { + color: var(--color-text-generic-link-interactive); + text-decoration: underline; + + & code { + color: var(--color-text-generic-link-interactive); } } diff --git a/web/third/bootstrap/css/bootstrap.app.css b/web/third/bootstrap/css/bootstrap.app.css index c24abc49da..0f558dfa49 100644 --- a/web/third/bootstrap/css/bootstrap.app.css +++ b/web/third/bootstrap/css/bootstrap.app.css @@ -57,15 +57,6 @@ label, button { cursor: pointer; } -a { - color: #0088cc; - text-decoration: none; -} -a:hover, -a:focus { - color: #005580; - text-decoration: underline; -} p { margin: 0 0 10px; }