diff --git a/app/styles/components.scss b/app/styles/components.scss index ec417f727..b2134add6 100644 --- a/app/styles/components.scss +++ b/app/styles/components.scss @@ -423,10 +423,11 @@ } .status__content__spoiler-link { - background: $action-button-color; + background: var(--brand-color-med); + transition: 0.2s; &:hover { - background: lighten($action-button-color, 7%); + background: var(--brand-color-faint); text-decoration: none; } @@ -1565,7 +1566,7 @@ a.account__display-name { &:hover, &:focus, &:active { - background-color: darken($nav-ui-highlight-color, 10%) !important; + background-color: var(--brand-color-hicontrast); } i.fa { @@ -2602,7 +2603,7 @@ a.status-card.compact:hover { } .loading-indicator { - color: $dark-text-color; + color: var(--primary-text-color-faint); font-size: 12px; font-weight: 400; text-transform: uppercase; @@ -4880,9 +4881,10 @@ noscript { } &__close { - position: absolute; - right: 10px; - top: 10px; + position: absolute; + right: 10px; + top: 10px; + color: #999; } &__content { @@ -5190,7 +5192,6 @@ noscript { width: 100%; max-height: 46px; position: relative; - background-color: var(--brand-color-faint); border-bottom: 1px solid; border-top: 1px solid; border-color: var(--brand-color-faint); diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss index d5b081ad3..8778945f9 100644 --- a/app/styles/components/account-header.scss +++ b/app/styles/components/account-header.scss @@ -49,7 +49,7 @@ border-radius: 50%; height: 200px; width: 200px; - background-color: darken($ui-base-color, 8%); + background-color: var(--foreground-color); // NOTE - patch fix for avatar size. Wrapper may not be needed when I do polish up on the page .account__avatar { @@ -57,6 +57,7 @@ height: 200px; background-size: 200px 200px; } + @media screen and (max-width: 895px) { top: -45px; left: 10px; diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss index f97dadc50..35e5b3bb2 100644 --- a/app/styles/components/compose-form.scss +++ b/app/styles/components/compose-form.scss @@ -98,7 +98,7 @@ width: 100%; margin: 0; color: $inverted-text-color; - background: $gab-background-base-light; + background: #f2f2f2; padding: 10px; font-family: inherit; font-size: 14px; diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 5a84ec2cb..2f875f209 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -318,10 +318,11 @@ code { outline: 0; font-family: inherit; resize: vertical; - background: darken($ui-base-color, 10%); - border: 1px solid darken($ui-base-color, 14%); + background: var(--foreground-color); + border: 1px solid var(--brand-color-faint); border-radius: 4px; padding: 10px; + transition: 0.2s; &:invalid { box-shadow: none; @@ -335,14 +336,9 @@ code { border-color: $valid-value-color; } - &:hover { - border-color: darken($ui-base-color, 20%); - } - &:active, &:focus { border-color: var(--highlight-text-color); - background: darken($ui-base-color, 8%); } } @@ -439,8 +435,8 @@ code { outline: 0; font-family: inherit; resize: vertical; - background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; - border: 1px solid darken($ui-base-color, 14%); + background: var(--foreground-color) url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; + border: 1px solid var(--brand-color-faint); border-radius: 4px; padding-left: 10px; padding-right: 30px;