From e93efc03092c4292658543695810036bc52bbc7f Mon Sep 17 00:00:00 2001 From: ThibG Date: Wed, 22 Jul 2020 22:48:51 +0200 Subject: [PATCH 1/2] Change disabled retweet icon (#14373) * Change disabled retweet icon * Hide fontawesome version of boost icon in both reduce-motion and no-reduce-motion --- app/javascript/styles/mastodon/boost.scss | 2 +- app/javascript/styles/mastodon/components.scss | 12 ++++-------- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/app/javascript/styles/mastodon/boost.scss b/app/javascript/styles/mastodon/boost.scss index 5a6d6ae406..a18e69a6a3 100644 --- a/app/javascript/styles/mastodon/boost.scss +++ b/app/javascript/styles/mastodon/boost.scss @@ -7,5 +7,5 @@ button.icon-button i.fa-retweet { } button.icon-button.disabled i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 1720697702..06533246bb 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2990,7 +2990,7 @@ a.account__display-name { } } -.no-reduce-motion button.icon-button i.fa-retweet { +button.icon-button i.fa-retweet { background-position: 0 0; height: 19px; transition: background-position 0.9s steps(10); @@ -3004,18 +3004,14 @@ a.account__display-name { } -.no-reduce-motion button.icon-button.active i.fa-retweet { +button.icon-button.active i.fa-retweet { transition-duration: 0.9s; background-position: 0 100%; } -.reduce-motion button.icon-button i.fa-retweet { - color: $action-button-color; - transition: color 100ms ease-in; -} - +.reduce-motion button.icon-button i.fa-retweet, .reduce-motion button.icon-button.active i.fa-retweet { - color: $highlight-text-color; + transition: none; } .status-card { From 59e0eb1ba0d44f7914542f203ccab48a6b62a403 Mon Sep 17 00:00:00 2001 From: ThibG Date: Wed, 22 Jul 2020 22:48:51 +0200 Subject: [PATCH 2/2] [Glitch] Change disabled retweet icon Port e93efc03092c4292658543695810036bc52bbc7f to glitch-soc Signed-off-by: Thibaut Girka --- .../flavours/glitch/styles/components/boost.scss | 9 +-------- .../flavours/glitch/styles/components/index.scss | 12 ++++-------- 2 files changed, 5 insertions(+), 16 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/components/boost.scss b/app/javascript/flavours/glitch/styles/components/boost.scss index f1ad041e90..2d307765c7 100644 --- a/app/javascript/flavours/glitch/styles/components/boost.scss +++ b/app/javascript/flavours/glitch/styles/components/boost.scss @@ -9,13 +9,6 @@ button.icon-button i.fa-retweet { // Disabled variant button.icon-button.disabled i.fa-retweet { &, &:hover { - background-image: url("data:image/svg+xml;utf8,"); - } -} - -// Disabled variant for use with DMs -.status-direct button.icon-button.disabled i.fa-retweet { - &, &:hover { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index a37cef7953..843f40ec01 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1038,7 +1038,7 @@ } } -.no-reduce-motion button.icon-button i.fa-retweet { +button.icon-button i.fa-retweet { background-position: 0 0; height: 19px; transition: background-position 0.9s steps(10); @@ -1051,18 +1051,14 @@ } } -.no-reduce-motion button.icon-button.active i.fa-retweet { +button.icon-button.active i.fa-retweet { transition-duration: 0.9s; background-position: 0 100%; } -.reduce-motion button.icon-button i.fa-retweet { - color: $action-button-color; - transition: color 100ms ease-in; -} - +.reduce-motion button.icon-button i.fa-retweet, .reduce-motion button.icon-button.active i.fa-retweet { - color: $highlight-text-color; + transition: none; } .reduce-motion button.icon-button.disabled i.fa-retweet {