diff --git a/app/styles/boost.scss b/app/styles/boost.scss
index a26292c35..30365ea1c 100644
--- a/app/styles/boost.scss
+++ b/app/styles/boost.scss
@@ -1,11 +1,46 @@
-button.icon-button i.fa-retweet {
- background-image: url("data:image/svg+xml;utf8,");
+button.icon-button {
+ i.fa-retweet {
+ background: rgba(var(--primary-text-color-rgb), 0.4);
+ mask: url("data:image/svg+xml;utf8,");
+ }
- &:hover {
- background-image: url("data:image/svg+xml;utf8,");
+ &:hover,
+ &:active,
+ &:focus {
+ i.fa-retweet {
+ background: rgba(var(--primary-text-color-rgb), 0.6);
+ transition: background-color 200ms ease-out;
+ }
+ }
+
+ &.disabled i.fa-retweet {
+ background: rgba(var(--primary-text-color-rgb), 0.2);
+ cursor: default;
+ }
+
+ &.active i.fa-retweet {
+ background: var(--highlight-text-color);
}
}
-button.icon-button.disabled i.fa-retweet {
- background-image: url("data:image/svg+xml;utf8,");
+.no-reduce-motion button.icon-button i.fa-retweet {
+ mask-position: 0 0;
+ height: 19px;
+ transition: mask-position 0.9s steps(10);
+ transition-duration: 0s;
+ vertical-align: middle;
+ width: 22px;
+
+ &::before {
+ display: none !important;
+ }
+}
+
+.no-reduce-motion button.icon-button.active i.fa-retweet {
+ transition-duration: 0.9s;
+ mask-position: 0 100%;
+}
+
+.reduce-motion button.icon-button i.fa-retweet {
+ transition: background-color 100ms ease-in;
}
diff --git a/app/styles/components.scss b/app/styles/components.scss
index 8b6b0a1e8..8a9b28696 100644
--- a/app/styles/components.scss
+++ b/app/styles/components.scss
@@ -134,12 +134,12 @@
&:hover,
&:active,
&:focus {
- color: lighten(#0482d8, 7%);
+ color: rgba(var(--primary-text-color-rgb), 0.6);
transition: color 200ms ease-out;
}
&.disabled {
- color: darken(#0482d8, 13%);
+ color: rgba(var(--primary-text-color-rgb), 0.2);
cursor: default;
}
@@ -2079,34 +2079,6 @@ a.account__display-name {
}
}
-.no-reduce-motion button.icon-button i.fa-retweet {
- background-position: 0 0;
- height: 19px;
- transition: background-position 0.9s steps(10);
- transition-duration: 0s;
- vertical-align: middle;
- width: 22px;
-
- &::before {
- display: none !important;
- }
-
-}
-
-.no-reduce-motion button.icon-button.active i.fa-retweet {
- transition-duration: 0.9s;
- background-position: 0 100%;
-}
-
-.reduce-motion button.icon-button i.fa-retweet {
- color: #0482d8;
- transition: color 100ms ease-in;
-}
-
-.reduce-motion button.icon-button.active i.fa-retweet {
- color: var(--highlight-text-color);
-}
-
.status-card {
display: flex;
font-size: 14px;