Skip to content

Commit

Permalink
Finalize styles for custom icons in grouped notifications
Browse files Browse the repository at this point in the history
  • Loading branch information
@ronilaukkarinen
ronilaukkarinen committed Jul 11, 2024
1 parent fc1bcf7 commit ba8033b
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 21 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -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

Expand Down
24 changes: 17 additions & 7 deletions layout-multiple-columns.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* Mastodon Bird UI by @[email protected]
2.0.0rc40 */
2.0.0rc41 */

/* CSS variables */
:root {
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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);
}
Expand Down Expand Up @@ -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,
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
}
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
}
Expand Down
30 changes: 18 additions & 12 deletions layout-single-column.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* Mastodon Bird UI by @[email protected]
2.0.0rc40 */
2.0.0rc41 */

/* CSS variables */
:root {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
Expand All @@ -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);
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
}
Expand All @@ -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);
}
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mastodon-bird-ui",
"version": "2.0.0rc40",
"version": "2.0.0rc41",
"description": "",
"main": "index.js",
"scripts": {
Expand Down

0 comments on commit ba8033b

Please sign in to comment.