diff --git a/app/styles/components.scss b/app/styles/components.scss
index ec417f727d..b2134add65 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 d5b081ad3f..8778945f9a 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 f97dadc504..35e5b3bb21 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 5a84ec2cb3..2f875f2095 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;