diff --git a/app/javascript/styles/contrast.scss b/app/javascript/styles/contrast.scss index 93bbfed0805..cc23627a15a 100644 --- a/app/javascript/styles/contrast.scss +++ b/app/javascript/styles/contrast.scss @@ -1,2 +1 @@ @use 'common'; -@use 'mastodon/high-contrast'; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 95460764030..6526b380df3 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -39,8 +39,8 @@ color: var(--color-text-error); } - &:hover, - &:active { + &:not(:disabled):hover, + &:not(:disabled):active { text-decoration: underline; } @@ -1081,20 +1081,36 @@ body > [data-popper-placement] { } a { + --text-decoration-default: none; + --text-decoration-hover: underline; + + [data-contrast='high'] & { + --text-decoration-default: underline; + --text-decoration-hover: none; + } + color: var(--color-text-status-links); - text-decoration: none; + text-decoration: var(--text-decoration-default); unicode-bidi: isolate; - &:hover { - text-decoration: underline; + &:hover, + &:focus, + &:active { + text-decoration: var(--text-decoration-hover); } &.mention { - &:hover { - text-decoration: none; + text-decoration: none; + span { + text-decoration: var(--text-decoration-default); + } + + &:hover, + &:focus, + &:active { span { - text-decoration: underline; + text-decoration: var(--text-decoration-hover); } } } @@ -1356,6 +1372,15 @@ body > [data-popper-placement] { text-decoration: underline; } + [data-contrast='high'] & { + text-decoration: underline; + + &:hover, + &:active { + text-decoration: none; + } + } + .icon { width: 15px; height: 15px; diff --git a/app/javascript/styles/mastodon/high-contrast.scss b/app/javascript/styles/mastodon/high-contrast.scss deleted file mode 100644 index f55e7fae3b8..00000000000 --- a/app/javascript/styles/mastodon/high-contrast.scss +++ /dev/null @@ -1,40 +0,0 @@ -.status__content a, -.reply-indicator__content a, -.edit-indicator__content a, -.link-footer a, -.status__content__read-more-button, -.status__content__translate-button { - text-decoration: underline; - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - - &.mention { - text-decoration: none; - - span { - text-decoration: underline; - } - - &:hover, - &:focus, - &:active { - span { - text-decoration: none; - } - } - } -} - -.link-button:disabled { - cursor: not-allowed; - - &:hover, - &:focus, - &:active { - text-decoration: none !important; - } -} diff --git a/spec/helpers/theme_helper_spec.rb b/spec/helpers/theme_helper_spec.rb index 9e8119a7429..35798cced6e 100644 --- a/spec/helpers/theme_helper_spec.rb +++ b/spec/helpers/theme_helper_spec.rb @@ -41,7 +41,7 @@ RSpec.describe ThemeHelper do it 'returns the theme stylesheet without color scheme information' do expect(html_links.first.attributes.symbolize_keys) .to include( - href: have_attributes(value: match(/contrast/)), + href: have_attributes(value: match(/default/)), media: have_attributes(value: 'all') ) end