Icon fixes

ronilaukkarinen · Oct 29, 2023 · 6635daa · 6635daa
1 parent 1ee56fc
commit 6635daa
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 * Change default fav action icon to heart
 * Advanced web view support for 4.3.0
 * Make boost animation smoother
+* Fix icon size for private mention
 
 ### 1.8.0: 2023-10-29
 

diff --git a/layout-multiple-columns.css b/layout-multiple-columns.css
@@ -2852,6 +2852,7 @@ body.embed .button.logo-button:hover,
   /* It's inlined so we have to use !important */
   /* stylelint-disable-next-line */
   height: 24px !important;
+  position: relative;
   /* It's inlined so we have to use !important */
   /* stylelint-disable-next-line */
   width: 30px !important;
@@ -3000,7 +3001,7 @@ body.embed .button.logo-button:hover,
 
 /* General for all column icons */
 /* stylelint-disable-next-line */
-.layout-multiple-columns .status__prepend .icon path,
+.layout-multiple-columns .status__prepend .icon.icon-retweet path,
 .layout-multiple-columns .notification-favourite .notification__message > .icon,
 .layout-multiple-columns .notification-reblog .notification__message > .icon,
 .layout-multiple-columns .account__header__tabs__buttons .icon,
@@ -3028,6 +3029,13 @@ body.embed .button.logo-button:hover,
   background-size: var(--size-icon) var(--size-icon);
 }
 
+.layout-multiple-columns .status__prepend .icon.icon-at {
+  height: 18px;
+  position: relative;
+  top: 2px;
+  width: 18px;
+}
+
 /* Hide the original icon from behind */
 .layout-multiple-columns .notification-reblog .notification__message > .icon path,
 .layout-multiple-columns .notification-favourite .notification__message > .icon path,
@@ -3868,8 +3876,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 /* Detailed status offset for boost animation on mobile */
 @media (max-width: 890px) {
   /* stylelint-disable-next-line */
-  .layout-multiple-columns.no-reduce-motion .icon-button.active:focus .icon-retweet::before {
-    left: -90px;
+  .layout-multiple-columns.no-reduce-motion .icon-button.active:focus .icon-retweet {
+    /* stylelint-disable-next-line */
+    left: -89px !important;
   }
 }
 
@@ -4137,7 +4146,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 
 .layout-multiple-columns .detailed-status__action-bar button.icon-button.star-icon.deactivate:hover .icon-star,
 .layout-multiple-columns .status__action-bar button.icon-button.deactivate.star-icon:hover .icon-star,
-.layout-multiple-columns .detailed-status__action-bar .icon-butto.deactivate .icon-star,
+.layout-multiple-columns .detailed-status__action-bar .icon-button.deactivate .icon-star,
 .layout-multiple-columns .detailed-status button.icon-button.deactivate .icon-star,
 .layout-multiple-columns .status button.icon-button.deactivate .icon-star {
   background-image: var(--icon-star-detailed-status-action-bar-hover) !important;

diff --git a/layout-single-column.css b/layout-single-column.css
@@ -2927,7 +2927,10 @@ body.embed .button.logo-button:hover,
 .layout-single-column .status__action-bar .icon-button {
   /* It's inlined so we have to use !important */
   /* stylelint-disable-next-line */
-  height: unset !important;
+  height: 24px !important;
+  /* stylelint-disable-next-line */
+  min-width: 45.78px !important;
+  position: relative;
   /* It's inlined so we have to use !important */
   /* stylelint-disable-next-line */
   width: unset !important;
@@ -3107,8 +3110,15 @@ body.embed .button.logo-button:hover,
   background-size: var(--size-icon) var(--size-icon);
 }
 
+.layout-single-column .status__prepend .icon.icon-at {
+  height: 18px;
+  position: relative;
+  top: 2px;
+  width: 18px;
+}
+
 /* Hide the original icon from behind */
-.layout-single-column .status__prepend .icon path,
+.layout-single-column .status__prepend .icon.icon-retweet path,
 .layout-single-column .notification-reblog .notification__message > .icon path,
 .layout-single-column .notification-favourite .notification__message > .icon path,
 .layout-single-column .account__header__tabs__buttons .icon path,
@@ -3940,7 +3950,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 
   /* Offset in numbered item */
   .layout-single-column.no-reduce-motion .status__action-bar .icon-button.icon-button--with-counter.active:focus .icon-retweet {
-    left: -88px;
+    left: -86px;
+  }
+
+  .layout-single-column.no-reduce-motion .status__action-bar .icon-button.icon-button--with-counter.activate .icon-button__counter,
+  .layout-single-column.no-reduce-motion .status__action-bar .icon-button.icon-button--with-counter.active:focus .icon-button__counter {
+    transform: translateX(13.5px);
+  }
+
+  /* stylelint-disable-next-line */
+  .layout-single-column.no-reduce-motion .status__action-bar .icon-button.star-icon.icon-button--with-counter.activate .icon-button__counter {
+    transform: translateX(12px);
   }
 }
 
@@ -3955,8 +3975,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 /* Detailed status offset for boost animation on mobile */
 @media (max-width: 890px) {
   /* stylelint-disable-next-line */
-  .layout-single-column.no-reduce-motion .icon-button.active:focus .icon-retweet::before {
-    left: -90px;
+  .layout-single-column.no-reduce-motion .icon-button.active:focus .icon-retweet {
+    /* stylelint-disable-next-line */
+    left: -89px !important;
   }
 }
 
@@ -4071,7 +4092,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 
 /* stylelint-disable-next-line */
 .layout-single-column.no-reduce-motion .status .icon-button.icon-button--with-counter.star-icon.activate .icon-star {
-  left: -38px;
+  left: -34px;
 }
 
 /* stylelint-disable-next-line */
@@ -4224,7 +4245,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 
 .layout-single-column .detailed-status__action-bar button.icon-button.star-icon.deactivate:hover .icon-star,
 .layout-single-column .status__action-bar button.icon-button.deactivate.star-icon:hover .icon-star,
-.layout-single-column .detailed-status__action-bar .icon-butto.deactivate .icon-star,
+.layout-single-column .detailed-status__action-bar .icon-button.deactivate .icon-star,
 .layout-single-column .detailed-status button.icon-button.deactivate .icon-star,
 .layout-single-column .status button.icon-button.deactivate .icon-star {
   background-image: var(--icon-star-detailed-status-action-bar-hover) !important;