Finalize styles for custom icons in grouped notifications

ronilaukkarinen · Jul 11, 2024 · ba8033b · ba8033b
1 parent fc1bcf7
commit ba8033b
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
-### 2.0.0rc40: 2024-07-11
+### 2.0.0rc41: 2024-07-11
 
 * Support for grouped notifications [#30440](https://github.com/mastodon/mastodon/pull/30440)
+* Finalize styles for custom icons in grouped notifications
 
 ### 2.0.0rc39: 2024-06-30
 

diff --git a/layout-multiple-columns.css b/layout-multiple-columns.css
@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @rolle@mementomori.social
-   2.0.0rc40 */
+   2.0.0rc41 */
 
 /* CSS variables */
 :root {
@@ -1895,6 +1895,7 @@ body.embed .detailed-status__meta .detailed-status__link .icon-retweet,
 /* Fixes: User avatars in notifications are sometimes links to my profile instead of theirs #25 */
 .layout-multiple-columns .notification.notification-reblog .status__info .status__display-name,
 .layout-multiple-columns .notification.notification-follow .status__info .status__display-name,
+.layout-multiple-columns .notification-group--favourite .status__info .status__display-name,
 .layout-multiple-columns .notification.notification-favourite .status__info .status__display-name {
   pointer-events: none;
 }
@@ -1946,8 +1947,10 @@ body.embed .detailed-status__meta .detailed-status__link .icon-retweet,
 .layout-multiple-columns .notification.notification-follow .display-name,
 .layout-multiple-columns .notification.notification-admin-sign-up .display-name + span,
 .layout-multiple-columns .notification.notification-follow .display-name + span,
+.layout-multiple-columns .notification-group--favourite .status__wrapper-direct .status__prepend,
 .layout-multiple-columns .notification.notification-favourite .status__wrapper-direct .status__prepend,
 .layout-multiple-columns .notification.notification-reblog .display-name,
+.layout-multiple-columns .notification-group--favourite .display-name,
 .layout-multiple-columns .notification.notification-favourite .display-name {
   display: none;
 }
@@ -2191,6 +2194,7 @@ body.embed .detailed-status__meta .detailed-status__link .icon-retweet,
   background-image: var(--icon-boost-status-prepend);
 }
 
+.layout-multiple-columns .notification-group .notification-group__icon .icon,
 .layout-multiple-columns .notification .notification__message .icon {
   align-self: start;
   height: 27px;
@@ -2200,12 +2204,14 @@ body.embed .detailed-status__meta .detailed-status__link .icon-retweet,
   width: 27px;
 }
 
+.layout-multiple-columns .notification-group .notification-group__icon .icon-repeat,
 .layout-multiple-columns .notification .notification__message .icon.icon-retweet {
   color: var(--color-green);
   height: 24px;
   width: 24px;
 }
 
+.layout-multiple-columns .notification-group .icon-person-add,
 .layout-multiple-columns .notification .icon.icon-user-plus:not(.icon-link) {
   color: var(--color-accent-dark);
 }
@@ -3273,6 +3279,7 @@ body.embed .button.logo-button:hover,
 
 /* General for all column icons */
 /* stylelint-disable-next-line */
+.layout-multiple-columns .notification-group--favourite .notification__message > .icon,
 .layout-multiple-columns .list-adder__lists .list__display-name svg > path,
 .layout-multiple-columns .status__prepend .icon.icon-retweet path,
 .layout-multiple-columns .notification-favourite .notification__message > .icon,
@@ -3281,7 +3288,10 @@ body.embed .button.logo-button:hover,
 .layout-multiple-columns .detailed-status__action-bar .icon,
 .layout-multiple-columns .status__action-bar .icon,
 .layout-multiple-columns .notification__filter-bar .icon,
-.layout-multiple-columns .column-link .icon {
+.layout-multiple-columns .column-link .icon,
+.layout-multiple-columns .notification-group--reblog > .notification-group__icon > .icon path,
+.layout-multiple-columns .notification-group--favourite > .notification-group__icon > .icon path,
+.layout-multiple-columns .notification-group--favourite .notification__message > .icon path {
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
@@ -3461,6 +3471,7 @@ body.embed .button.logo-button:hover,
 }
 
 /* Replace notification retweet icon */
+.layout-multiple-columns .notification-group--reblog .icon-repeat,
 .layout-multiple-columns .notification-reblog .icon-retweet {
   background-image: var(--icon-boost-notification-wrapper);
 }
@@ -3930,6 +3941,7 @@ body.embed .button.logo-button:hover,
 
 /* Hide autoplaying gifs in notifications (they get annoying if you have favs/boosts on) */
 .layout-multiple-columns .notification.notification-reblog .media-gallery:has(.media-gallery__gifv.autoplay),
+.layout-multiple-columns .notification-group--favourite .media-gallery:has(.media-gallery__gifv.autoplay),
 .layout-multiple-columns .notification.notification-favourite .media-gallery:has(.media-gallery__gifv.autoplay) {
   display: none;
 }
@@ -4277,6 +4289,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   background-image: var(--icon-heart-column-link-active);
 }
 
+.layout-multiple-columns .notification-group--favourite .icon-star,
 .layout-multiple-columns .notification-favourite .icon-star {
   background-image: var(--icon-heart-notification);
 }
@@ -4296,11 +4309,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   background-image: var(--icon-heart-active-red);
 }
 
-.icon-button.star-icon.active,
-.notification-favourite .star-icon {
-  color: var(--color-red);
-}
-
 .layout-multiple-columns .detailed-status__action-bar .icon-button:hover .icon-star,
 .layout-multiple-columns .detailed-status button.icon-button:hover .icon-star,
 .layout-multiple-columns .status button.icon-button:hover .icon-star {
@@ -4416,6 +4424,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   background-image: var(--icon-star-column-link-active);
 }
 
+.layout-multiple-columns .notification-group--favourite .icon-star,
 .layout-multiple-columns .notification-favourite .icon-star {
   background-image: var(--icon-star-notification);
 }
@@ -4517,6 +4526,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 
 .layout-multiple-columns .icon-button.star-icon.active,
+.layout-multiple-columns .notification-group--favourite .star-icon,
 .layout-multiple-columns .notification-favourite .star-icon {
   color: var(--color-yellow);
 }

diff --git a/layout-single-column.css b/layout-single-column.css
@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @rolle@mementomori.social
-   2.0.0rc40 */
+   2.0.0rc41 */
 
 /* CSS variables */
 :root {
@@ -1872,13 +1872,6 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
   height: calc(var(--gap-default) * 2);
 }
 
-/* Notification groups, pr30440 2024-07-11 */
-.layout-single-column .notification-group {
-  display: grid;
-  gap: var(--gap-default);
-  grid-template-columns: minmax(0, var(--size-avatar)) minmax(0, 1fr);
-}
-
 /* Make sure notification user is clickable */
 .layout-single-column .notification__display-name {
   position: relative;
@@ -1946,6 +1939,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
 /* Fixes: User avatars in notifications are sometimes links to my profile instead of theirs #25 */
 .layout-single-column .notification.notification-reblog .status__info .status__display-name,
 .layout-single-column .notification.notification-follow .status__info .status__display-name,
+.layout-single-column .notification-group--favourite .status__info .status__display-name,
 .layout-single-column .notification.notification-favourite .status__info .status__display-name {
   pointer-events: none;
 }
@@ -1997,8 +1991,10 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
 .layout-single-column .notification.notification-follow .display-name,
 .layout-single-column .notification.notification-admin-sign-up .display-name + span,
 .layout-single-column .notification.notification-follow .display-name + span,
+.layout-single-column .notification-group--favourite .status__wrapper-direct .status__prepend,
 .layout-single-column .notification.notification-favourite .status__wrapper-direct .status__prepend,
 .layout-single-column .notification.notification-reblog .display-name,
+.layout-single-column .notification-group--favourite .display-name,
 .layout-single-column .notification.notification-favourite .display-name {
   display: none;
 }
@@ -2258,6 +2254,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
 }
 
 .layout-single-column .notification.notification-reblog .status__action-bar,
+.layout-single-column .notification-group--favourite .status__action-bar,
 .layout-single-column .notification.notification-favourite .status__action-bar {
   display: none;
 }
@@ -2266,6 +2263,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
   background-image: var(--icon-boost-status-prepend);
 }
 
+.layout-single-column .notification-group .notification-group__icon .icon,
 .layout-single-column .notification .notification__message .icon {
   align-self: start;
   height: 27px;
@@ -2275,12 +2273,14 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
   width: 27px;
 }
 
+.layout-single-column .notification-group .notification-group__icon .icon-repeat,
 .layout-single-column .notification .notification__message .icon.icon-retweet {
   color: var(--color-green);
   height: 24px;
   width: 24px;
 }
 
+.layout-single-column .notification-group .icon-person-add,
 .layout-single-column .notification .icon.icon-user-plus:not(.icon-link) {
   color: var(--color-accent-dark);
 }
@@ -3222,10 +3222,6 @@ body.embed .button.logo-button:hover,
   font-size: var(--font-size-smaller);
 }
 
-.layout-single-column .notification-favourite .icon.icon-retweet {
-  color: var(--color-green);
-}
-
 /* Smaller icons for status action bar */
 .layout-single-column .status__action-bar .icon {
   font-size: 14.6px;
@@ -3417,6 +3413,7 @@ body.embed .button.logo-button:hover,
 
 /* General for all column icons */
 /* stylelint-disable-next-line */
+.layout-single-column .notification-group--favourite .notification__message > .icon,
 .layout-single-column .notification-favourite .notification__message > .icon,
 .layout-single-column .notification-reblog .notification__message > .icon,
 .layout-single-column .account__header__tabs__buttons .icon,
@@ -3459,7 +3456,10 @@ body.embed .button.logo-button:hover,
 .layout-single-column .list-adder__lists .icon-times > path,
 .layout-single-column .list-adder__lists .list__display-name svg > path,
 .layout-single-column .status__prepend .icon.icon-retweet path,
+.layout-single-column .notification-group--reblog > .notification-group__icon > .icon path,
 .layout-single-column .notification-reblog .notification__message > .icon path,
+.layout-single-column .notification-group--favourite > .notification-group__icon > .icon path,
+.layout-single-column .notification-group--favourite .notification__message > .icon path,
 .layout-single-column .notification-favourite .notification__message > .icon path,
 .layout-single-column .account__header__tabs__buttons .icon path,
 .layout-single-column .detailed-status__action-bar .icon path,
@@ -3603,6 +3603,7 @@ body.embed .button.logo-button:hover,
 }
 
 /* Replace notification retweet icon */
+.layout-single-column .notification-group--reblog .icon-repeat,
 .layout-single-column .notification-reblog .icon-retweet {
   background-image: var(--icon-boost-notification-wrapper);
 }
@@ -4055,6 +4056,7 @@ body.embed .button.logo-button:hover,
 
 /* Hide autoplaying gifs in notifications (they get annoying if you have favs/boosts on) */
 .layout-single-column .notification.notification-reblog .media-gallery:has(.media-gallery__gifv.autoplay),
+.layout-single-column .notification-group--favourite .media-gallery:has(.media-gallery__gifv.autoplay),
 .layout-single-column .notification.notification-favourite .media-gallery:has(.media-gallery__gifv.autoplay) {
   display: none;
 }
@@ -4543,6 +4545,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   background-image: var(--icon-heart-column-link-active);
 }
 
+.layout-single-column .notification-group--favourite .icon-star,
 .layout-single-column .notification-favourite .icon-star {
   background-image: var(--icon-heart-notification);
 }
@@ -4563,6 +4566,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 
 .icon-button.star-icon.active,
+.notification-group--favourite .star-icon,
 .notification-favourite .star-icon {
   color: var(--color-red);
 }
@@ -4680,6 +4684,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
   background-image: var(--icon-star-column-link-active);
 }
 
+.layout-single-column .notification-group--favourite .icon-star,
 .layout-single-column .notification-favourite .icon-star {
   background-image: var(--icon-star-notification);
 }
@@ -4781,6 +4786,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 
 .layout-single-column .icon-button.star-icon.active,
+.layout-single-column .notification-group--favourite .star-icon,
 .layout-single-column .notification-favourite .star-icon {
   color: var(--color-yellow);
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mastodon-bird-ui",
-  "version": "2.0.0rc40",
+  "version": "2.0.0rc41",
   "description": "",
   "main": "index.js",
   "scripts": {