From 1c3192df6bf48eb4c3613f2a8744c809f6eeeec0 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 4 Nov 2022 02:28:14 +0100 Subject: Fix wrong colors in the high-contrast theme (#19708) --- app/javascript/styles/contrast/diff.scss | 74 ++++++++++++++------------- app/javascript/styles/contrast/variables.scss | 4 +- 2 files changed, 41 insertions(+), 37 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss index 27eb837df..4fa1a0361 100644 --- a/app/javascript/styles/contrast/diff.scss +++ b/app/javascript/styles/contrast/diff.scss @@ -1,4 +1,3 @@ -// components.scss .compose-form { .compose-form__modifiers { .compose-form__upload { @@ -14,61 +13,66 @@ } .status__content a, -.reply-indicator__content a { - color: lighten($ui-highlight-color, 12%); +.link-footer a, +.reply-indicator__content a, +.status__content__read-more-button { text-decoration: underline; - &.mention { + &:hover, + &:focus, + &:active { text-decoration: none; } - &.mention span { - text-decoration: underline; + &.mention { + text-decoration: none; + + span { + text-decoration: underline; + } &:hover, &:focus, &:active { - text-decoration: none; + span { + text-decoration: none; + } } } +} - &:hover, - &:focus, - &:active { - text-decoration: none; - } +.status__content a { + color: $highlight-text-color; +} - &.status__content__spoiler-link { - color: $secondary-text-color; - text-decoration: none; - } +.nothing-here { + color: $darker-text-color; } -.status__content__read-more-button { - text-decoration: underline; +.compose-form__poll-wrapper .button.button-secondary, +.compose-form .autosuggest-textarea__textarea::placeholder, +.compose-form .spoiler-input__input::placeholder, +.report-dialog-modal__textarea::placeholder, +.language-dropdown__dropdown__results__item__common-name, +.compose-form .icon-button { + color: $inverted-text-color; +} - &:hover, - &:focus, - &:active { - text-decoration: none; - } +.text-icon-button.active { + color: $ui-highlight-color; } -.getting-started__footer a { - text-decoration: underline; +.language-dropdown__dropdown__results__item.active { + background: $ui-highlight-color; + font-weight: 500; +} + +.link-button:disabled { + cursor: not-allowed; &:hover, &:focus, &:active { - text-decoration: none; + text-decoration: none !important; } } - -.nothing-here { - color: $darker-text-color; -} - -.compose-form .autosuggest-textarea__textarea::placeholder, -.compose-form .spoiler-input__input::placeholder { - color: $inverted-text-color; -} diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss index 9edfd6d8d..e38d24b27 100644 --- a/app/javascript/styles/contrast/variables.scss +++ b/app/javascript/styles/contrast/variables.scss @@ -14,8 +14,8 @@ $ui-highlight-color: $classic-highlight-color !default; $darker-text-color: lighten($ui-primary-color, 20%) !default; $dark-text-color: lighten($ui-primary-color, 12%) !default; $secondary-text-color: lighten($ui-secondary-color, 6%) !default; -$highlight-text-color: lighten($ui-highlight-color, 8%) !default; -$action-button-color: #8d9ac2; +$highlight-text-color: lighten($ui-highlight-color, 10%) !default; +$action-button-color: lighten($ui-base-color, 50%); $inverted-text-color: $black !default; $lighter-text-color: darken($ui-base-color, 6%) !default; -- cgit