From 7a1462ddd3806c4a153697217bd7fe1a0d9a9fd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Tue, 24 Oct 2023 23:26:37 +0200 Subject: [PATCH] Fixed boost icons --- TangerineUI-purple.css | 38 +++++++++---------- TangerineUI.css | 38 +++++++++---------- .../layout-single-column.scss | 38 +++++++++---------- .../tangerineui/layout-single-column.scss | 38 +++++++++---------- 4 files changed, 76 insertions(+), 76 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 4e9ec47..a849d4e 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -330,39 +330,39 @@ body.layout-single-column { transform: scale(.9); } /* Replace retweet icon */ -.layout-single-column i.fa.fa-retweet.fa-fw, -.layout-single-column button.icon-button i.fa.fa-retweet.fa-fw, -.layout-single-column button.icon-button:hover i.fa.fa-retweet.fa-fw { - background-image: var(--icon-boost); - background-position: center; +.layout-single-column .icon-retweet path { + display: none; } -.layout-single-column .detailed-status__button i.fa.fa-retweet.fa-fw, -.layout-single-column .detailed-status__button button.icon-button i.fa.fa-retweet.fa-fw, -.layout-single-column .detailed-status__button button.icon-button:hover i.fa.fa-retweet.fa-fw { +.layout-single-column .status__action-bar__button .icon-retweet { + background-image: var(--icon-boost); +} +.layout-single-column .detailed-status__button .icon-retweet, +.layout-single-column .detailed-status__button button.icon-button .icon-retweet, +.layout-single-column .detailed-status__button button.icon-button:hover .icon-retweet { background-image: var(--icon-boost-accent); } -.layout-single-column button.icon-button.active i.fa.fa-retweet.fa-fw, -.layout-single-column .detailed-status__button button.icon-button.active:hover i.fa.fa-retweet.fa-fw { +.layout-single-column button.icon-button.active .icon-retweet, +.layout-single-column .detailed-status__button button.icon-button.active:hover .icon-retweet { background-image: var(--icon-boost-active); background-position: center; } -.layout-single-column .fa.fa-retweet.status__prepend-icon.fa-fw, -.layout-single-column .notification i.fa.fa-retweet.fa-fw { +.layout-single-column .status__prepend-icon.icon-retweet, +.layout-single-column .notification .icon-retweet { background-image: var(--icon-boost-active); - transform: scale(.9) translate(0, -1px); + transform: scale(.9) translate(0, 1px); } -.layout-single-column .detailed-status__link .fa.fa-retweet:before { +.layout-single-column .detailed-status__link .icon-retweet { background-image: var(--icon-boost); } -.layout-single-column button.icon-button.reblogPrivate i.fa-retweet, -.layout-single-column button.icon-button.reblogPrivate:hover i.fa-retweet, -.layout-single-column button.icon-button.disabled i.fa-retweet, -.layout-single-column button.icon-button.disabled:hover i.fa-retweet { +.layout-single-column button.icon-button.reblogPrivate .icon-retweet, +.layout-single-column button.icon-button.reblogPrivate:hover .icon-retweet, +.layout-single-column button.icon-button.disabled .icon-retweet, +.layout-single-column button.icon-button.disabled:hover .icon-retweet { background-image: var(--icon-boost); opacity: .2; pointer-events: none; } -.layout-single-column .boost-modal__action-bar .fa-retweet { +.layout-single-column .boost-modal__action-bar .icon-retweet { background-image: var(--icon-boost); vertical-align: middle; } diff --git a/TangerineUI.css b/TangerineUI.css index ecc6602..65aa564 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -330,39 +330,39 @@ body.layout-single-column { transform: scale(.9); } /* Replace retweet icon */ -.layout-single-column i.fa.fa-retweet.fa-fw, -.layout-single-column button.icon-button i.fa.fa-retweet.fa-fw, -.layout-single-column button.icon-button:hover i.fa.fa-retweet.fa-fw { - background-image: var(--icon-boost); - background-position: center; +.layout-single-column .icon-retweet path { + display: none; } -.layout-single-column .detailed-status__button i.fa.fa-retweet.fa-fw, -.layout-single-column .detailed-status__button button.icon-button i.fa.fa-retweet.fa-fw, -.layout-single-column .detailed-status__button button.icon-button:hover i.fa.fa-retweet.fa-fw { +.layout-single-column .status__action-bar__button .icon-retweet { + background-image: var(--icon-boost); +} +.layout-single-column .detailed-status__button .icon-retweet, +.layout-single-column .detailed-status__button button.icon-button .icon-retweet, +.layout-single-column .detailed-status__button button.icon-button:hover .icon-retweet { background-image: var(--icon-boost-accent); } -.layout-single-column button.icon-button.active i.fa.fa-retweet.fa-fw, -.layout-single-column .detailed-status__button button.icon-button.active:hover i.fa.fa-retweet.fa-fw { +.layout-single-column button.icon-button.active .icon-retweet, +.layout-single-column .detailed-status__button button.icon-button.active:hover .icon-retweet { background-image: var(--icon-boost-active); background-position: center; } -.layout-single-column .fa.fa-retweet.status__prepend-icon.fa-fw, -.layout-single-column .notification i.fa.fa-retweet.fa-fw { +.layout-single-column .status__prepend-icon.icon-retweet, +.layout-single-column .notification .icon-retweet { background-image: var(--icon-boost-active); - transform: scale(.9) translate(0, -1px); + transform: scale(.9) translate(0, 1px); } -.layout-single-column .detailed-status__link .fa.fa-retweet:before { +.layout-single-column .detailed-status__link .icon-retweet { background-image: var(--icon-boost); } -.layout-single-column button.icon-button.reblogPrivate i.fa-retweet, -.layout-single-column button.icon-button.reblogPrivate:hover i.fa-retweet, -.layout-single-column button.icon-button.disabled i.fa-retweet, -.layout-single-column button.icon-button.disabled:hover i.fa-retweet { +.layout-single-column button.icon-button.reblogPrivate .icon-retweet, +.layout-single-column button.icon-button.reblogPrivate:hover .icon-retweet, +.layout-single-column button.icon-button.disabled .icon-retweet, +.layout-single-column button.icon-button.disabled:hover .icon-retweet { background-image: var(--icon-boost); opacity: .2; pointer-events: none; } -.layout-single-column .boost-modal__action-bar .fa-retweet { +.layout-single-column .boost-modal__action-bar .icon-retweet { background-image: var(--icon-boost); vertical-align: middle; } diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 4e9ec47..a849d4e 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -330,39 +330,39 @@ body.layout-single-column { transform: scale(.9); } /* Replace retweet icon */ -.layout-single-column i.fa.fa-retweet.fa-fw, -.layout-single-column button.icon-button i.fa.fa-retweet.fa-fw, -.layout-single-column button.icon-button:hover i.fa.fa-retweet.fa-fw { - background-image: var(--icon-boost); - background-position: center; +.layout-single-column .icon-retweet path { + display: none; } -.layout-single-column .detailed-status__button i.fa.fa-retweet.fa-fw, -.layout-single-column .detailed-status__button button.icon-button i.fa.fa-retweet.fa-fw, -.layout-single-column .detailed-status__button button.icon-button:hover i.fa.fa-retweet.fa-fw { +.layout-single-column .status__action-bar__button .icon-retweet { + background-image: var(--icon-boost); +} +.layout-single-column .detailed-status__button .icon-retweet, +.layout-single-column .detailed-status__button button.icon-button .icon-retweet, +.layout-single-column .detailed-status__button button.icon-button:hover .icon-retweet { background-image: var(--icon-boost-accent); } -.layout-single-column button.icon-button.active i.fa.fa-retweet.fa-fw, -.layout-single-column .detailed-status__button button.icon-button.active:hover i.fa.fa-retweet.fa-fw { +.layout-single-column button.icon-button.active .icon-retweet, +.layout-single-column .detailed-status__button button.icon-button.active:hover .icon-retweet { background-image: var(--icon-boost-active); background-position: center; } -.layout-single-column .fa.fa-retweet.status__prepend-icon.fa-fw, -.layout-single-column .notification i.fa.fa-retweet.fa-fw { +.layout-single-column .status__prepend-icon.icon-retweet, +.layout-single-column .notification .icon-retweet { background-image: var(--icon-boost-active); - transform: scale(.9) translate(0, -1px); + transform: scale(.9) translate(0, 1px); } -.layout-single-column .detailed-status__link .fa.fa-retweet:before { +.layout-single-column .detailed-status__link .icon-retweet { background-image: var(--icon-boost); } -.layout-single-column button.icon-button.reblogPrivate i.fa-retweet, -.layout-single-column button.icon-button.reblogPrivate:hover i.fa-retweet, -.layout-single-column button.icon-button.disabled i.fa-retweet, -.layout-single-column button.icon-button.disabled:hover i.fa-retweet { +.layout-single-column button.icon-button.reblogPrivate .icon-retweet, +.layout-single-column button.icon-button.reblogPrivate:hover .icon-retweet, +.layout-single-column button.icon-button.disabled .icon-retweet, +.layout-single-column button.icon-button.disabled:hover .icon-retweet { background-image: var(--icon-boost); opacity: .2; pointer-events: none; } -.layout-single-column .boost-modal__action-bar .fa-retweet { +.layout-single-column .boost-modal__action-bar .icon-retweet { background-image: var(--icon-boost); vertical-align: middle; } diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index ecc6602..65aa564 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -330,39 +330,39 @@ body.layout-single-column { transform: scale(.9); } /* Replace retweet icon */ -.layout-single-column i.fa.fa-retweet.fa-fw, -.layout-single-column button.icon-button i.fa.fa-retweet.fa-fw, -.layout-single-column button.icon-button:hover i.fa.fa-retweet.fa-fw { - background-image: var(--icon-boost); - background-position: center; +.layout-single-column .icon-retweet path { + display: none; } -.layout-single-column .detailed-status__button i.fa.fa-retweet.fa-fw, -.layout-single-column .detailed-status__button button.icon-button i.fa.fa-retweet.fa-fw, -.layout-single-column .detailed-status__button button.icon-button:hover i.fa.fa-retweet.fa-fw { +.layout-single-column .status__action-bar__button .icon-retweet { + background-image: var(--icon-boost); +} +.layout-single-column .detailed-status__button .icon-retweet, +.layout-single-column .detailed-status__button button.icon-button .icon-retweet, +.layout-single-column .detailed-status__button button.icon-button:hover .icon-retweet { background-image: var(--icon-boost-accent); } -.layout-single-column button.icon-button.active i.fa.fa-retweet.fa-fw, -.layout-single-column .detailed-status__button button.icon-button.active:hover i.fa.fa-retweet.fa-fw { +.layout-single-column button.icon-button.active .icon-retweet, +.layout-single-column .detailed-status__button button.icon-button.active:hover .icon-retweet { background-image: var(--icon-boost-active); background-position: center; } -.layout-single-column .fa.fa-retweet.status__prepend-icon.fa-fw, -.layout-single-column .notification i.fa.fa-retweet.fa-fw { +.layout-single-column .status__prepend-icon.icon-retweet, +.layout-single-column .notification .icon-retweet { background-image: var(--icon-boost-active); - transform: scale(.9) translate(0, -1px); + transform: scale(.9) translate(0, 1px); } -.layout-single-column .detailed-status__link .fa.fa-retweet:before { +.layout-single-column .detailed-status__link .icon-retweet { background-image: var(--icon-boost); } -.layout-single-column button.icon-button.reblogPrivate i.fa-retweet, -.layout-single-column button.icon-button.reblogPrivate:hover i.fa-retweet, -.layout-single-column button.icon-button.disabled i.fa-retweet, -.layout-single-column button.icon-button.disabled:hover i.fa-retweet { +.layout-single-column button.icon-button.reblogPrivate .icon-retweet, +.layout-single-column button.icon-button.reblogPrivate:hover .icon-retweet, +.layout-single-column button.icon-button.disabled .icon-retweet, +.layout-single-column button.icon-button.disabled:hover .icon-retweet { background-image: var(--icon-boost); opacity: .2; pointer-events: none; } -.layout-single-column .boost-modal__action-bar .fa-retweet { +.layout-single-column .boost-modal__action-bar .icon-retweet { background-image: var(--icon-boost); vertical-align: middle; }