Skip to content

Commit

Permalink
Fix notification icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@ronilaukkarinen
ronilaukkarinen committed Oct 29, 2023
1 parent 1c5eb76 commit 81ddcfe
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 50 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
* Prepare for [changing the heart as default](https://github.com/mastodon/mastodon/pull/27385#issuecomment-1773117170)
* Add icons for more ellipsis and close x
* Add --size-icon variable for easier icon sizing
* Change default fav action icon to heart

### 1.8.0: 2023-10-29

Expand Down
98 changes: 48 additions & 50 deletions layout-single-column.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@
/* Element sizes */
--size-avatar: 48px;
--size-avatar-small: 32px;
--size-icon-notification: 30px;
--width-main-panel: 600px;
--width-side-panel: 260px;
--border-radius: 16px;
Expand Down Expand Up @@ -528,7 +527,7 @@ body.layout-single-column {
box-shadow: 2px 4px 15px rgba(0, 0, 0, .2);
}

.layout-single-column .list-editor__search .search__icon .fa {
.layout-single-column .list-editor__search .search__icon .icon {
margin: 15px;
}

Expand Down Expand Up @@ -673,7 +672,7 @@ body.layout-single-column {
}

/* Announcements */
.layout-single-column .announcements__pagination .fa,
.layout-single-column .announcements__pagination .icon,
.layout-single-column .announcements__pagination {
color: var(--color-dim);
}
Expand Down Expand Up @@ -1090,7 +1089,7 @@ body.embed .status__content a,
.layout-single-column .account__section-headline button,
.layout-single-column .notification__filter-bar a,
.layout-single-column .notification__filter-bar button,
.layout-single-column .attachment-list.compact .fa,
.layout-single-column .attachment-list.compact .icon,
.layout-single-column .attachment-list__list a,
.layout-single-column .notification__message .icon-user-plus,
.layout-single-column .notification__message .icon-home,
Expand Down Expand Up @@ -1697,10 +1696,6 @@ body.embed .detailed-status__meta .detailed-status__link .icon-retweet,
height: calc(var(--gap-default) * 2);
}

.layout-single-column .notification__message i {
font-size: var(--size-icon-notification);
}

/* Make sure notification user is clickable */
.layout-single-column .notification__display-name {
position: relative;
Expand Down Expand Up @@ -2081,35 +2076,39 @@ body.embed .detailed-status__meta .detailed-status__link .icon-retweet,
background-image: var(--icon-boost-status-prepend);
}

.layout-single-column .notification .notification__message .fa {
font-size: 27px;
.layout-single-column .notification .notification__message .icon {
align-self: start;
height: 27px;
justify-self: end;
margin-right: 4px;
max-width: 30px;
width: 27px;
}

.layout-single-column .notification .fa:not(.icon-link)::before {
font-size: 22px;
height: 27px;
.layout-single-column .notification .notification__message .icon.icon-retweet {
color: var(--color-green);
height: 24px;
width: 24px;
}

.layout-single-column .notification .fa.icon-user-plus:not(.icon-link)::before {
.layout-single-column .notification .icon.icon-user-plus:not(.icon-link) {
color: var(--color-accent-dark);
font-size: 20px;
}

.layout-single-column .account__relationship .fa.icon-user-plus:not(.icon-link)::before,
.layout-single-column .notification .account__relationship .fa.icon-user-plus:not(.icon-link)::before {
.layout-single-column .account__relationship .icon.icon-user-plus:not(.icon-link),
.layout-single-column .notification .account__relationship .icon.icon-user-plus:not(.icon-link) {
color: var(--color-dim);
}

.layout-single-column .notification .fa.icon-flag::before,
.layout-single-column .notification .fa.icon-tasks:not(.icon-link)::before {
.layout-single-column .notification .icon.icon-flag,
.layout-single-column .notification .icon.icon-tasks:not(.icon-link) {
color: var(--color-accent-dark);
}

.layout-single-column .notification .fa.icon-home:not(.icon-link)::before {
.layout-single-column .notification .icon.icon-home:not(.icon-link) {
color: var(--color-accent-dark);
font-size: 24px;
height: 24px;
width: 24px;
}

/* Follow/unfollow button */
Expand All @@ -2118,35 +2117,35 @@ body.embed .detailed-status__meta .detailed-status__link .icon-retweet,
background-color: transparent;
}

.layout-single-column .notification .account__relationship .fa::before {
.layout-single-column .notification .account__relationship .icon {
/* stylelint-disable-next-line */
color: var(--color-dim);
font-size: 20px;
}

.layout-single-column .list-adder__lists .icon-times::before,
.layout-single-column .account__wrapper .account__relationship .icon-button.active .fa::before,
.layout-single-column .explore__search-results .account__relationship .icon-button.active .fa::before,
.layout-single-column .notification .account__relationship .icon-button.active .fa::before {
.layout-single-column .account__wrapper .account__relationship .icon-button.active .icon,
.layout-single-column .explore__search-results .account__relationship .icon-button.active .icon,
.layout-single-column .notification .account__relationship .icon-button.active .icon {
/* stylelint-disable-next-line */
color: var(--color-green);
opacity: .75;
}

.layout-single-column .list-adder__lists .icon-times:hover::before,
.layout-single-column .explore__search-results .icon-button.active:hover .fa::before,
.layout-single-column .notification .account__relationship .icon-button.active:hover .fa::before {
.layout-single-column .explore__search-results .icon-button.active:hover .icon,
.layout-single-column .notification .account__relationship .icon-button.active:hover .icon {
/* stylelint-disable-next-line */
color: var(--color-red);
opacity: 1;
}

.layout-single-column .explore__search-results .icon-button:focus .fa::before,
.layout-single-column .notification .account__relationship .icon-button:focus .fa::before,
.layout-single-column .explore__search-results .icon-button.active:focus .fa::before,
.layout-single-column .notification .account__relationship .icon-button.active:focus .fa::before,
.layout-single-column .explore__search-results .icon-button:hover .fa::before,
.layout-single-column .notification .account__relationship .icon-button:hover .fa::before {
.layout-single-column .explore__search-results .icon-button:focus .icon,
.layout-single-column .notification .account__relationship .icon-button:focus .icon,
.layout-single-column .explore__search-results .icon-button.active:focus .icon,
.layout-single-column .notification .account__relationship .icon-button.active:focus .icon,
.layout-single-column .explore__search-results .icon-button:hover .icon,
.layout-single-column .notification .account__relationship .icon-button:hover .icon {
/* stylelint-disable-next-line */
color: var(--color-green);
opacity: 1;
Expand Down Expand Up @@ -2588,19 +2587,14 @@ body.embed .button.logo-button,
justify-content: center;
}

/* Exception for close icon that seem to align wrongly when active */
.layout-single-column .account__header__tabs__buttons .icon-button .fa.icon-close {
align-self: start;
}

body.embed .button.logo-button:hover,
.layout-single-column .column-inline-form button:hover,
.layout-single-column .explore__suggestions .account-card__actions__button button:hover,
.layout-single-column .account__header__tabs__buttons .icon-button.active {
color: var(--color-light-text);
}

.layout-single-column .account__header__tabs__buttons .icon-button .fa::before {
.layout-single-column .account__header__tabs__buttons .icon-button .icon {
font-size: 17px;
}

Expand Down Expand Up @@ -2675,7 +2669,7 @@ body.embed .button.logo-button:hover,
}

/* Misc UI fixes */
.layout-single-column .search__icon .fa.active {
.layout-single-column .search__icon .icon.active {
opacity: 1;
}

Expand Down Expand Up @@ -2909,17 +2903,17 @@ body.embed .button.logo-button:hover,
font-size: var(--font-size-smaller);
}

.layout-single-column .notification__favourite-icon-wrapper .fa.icon-retweet {
.layout-single-column .notification-favourite .icon.icon-retweet {
color: var(--color-green);
}

/* Smaller icons for status action bar */
.layout-single-column .status__action-bar .fa {
.layout-single-column .status__action-bar .icon {
font-size: 14.6px;
min-width: 18px;
}

.layout-single-column .status__action-bar .fa.icon-retweet {
.layout-single-column .status__action-bar .icon.icon-retweet {
min-width: 21px;
}

Expand Down Expand Up @@ -3085,6 +3079,8 @@ body.embed .button.logo-button:hover,

/* General for all column icons */
/* stylelint-disable-next-line */
.layout-single-column .notification-favourite .notification__message > .icon,
.layout-single-column .notification-reblog .notification__message > .icon,
.layout-single-column .account__header__tabs__buttons .icon,
.layout-single-column .detailed-status__action-bar .icon,
.layout-single-column .status__action-bar .icon,
Expand All @@ -3111,6 +3107,8 @@ body.embed .button.logo-button:hover,
}

/* Hide the original icon from behind */
.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,
.layout-single-column .detailed-status__action-bar .icon path,
.layout-single-column .notification__filter-bar .icon path,
Expand All @@ -3124,7 +3122,7 @@ body.embed .button.logo-button:hover,
.layout-single-column .notification__filter-bar .icon.icon-user-plus path,
.layout-single-column .account__header__tabs__buttons .icon.icon-tasks path,
.layout-single-column .notification__filter-bar .icon.icon-tasks path {
display: inline-flex;
display: block;
}

/* Home icon */
Expand Down Expand Up @@ -3219,7 +3217,7 @@ body.embed .button.logo-button:hover,
}

/* Replace notification retweet icon */
.layout-single-column .notification__favourite-icon-wrapper .icon-retweet {
.layout-single-column .notification-reblog .icon-retweet {
background-image: var(--icon-boost-notification-wrapper);
}

Expand Down Expand Up @@ -3933,7 +3931,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
* ---------------------------------------
*/

@keyframes boost-animate {
@keyframes boost-animate {
100% {
background-position: -7770px;
}
Expand Down Expand Up @@ -4017,7 +4015,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-image: var(--icon-heart-column-link-active);
}

.layout-single-column .notification__favourite-icon-wrapper .icon-star {
.layout-single-column .notification-favourite .icon-star {
background-image: var(--icon-heart-notification);
}

Expand All @@ -4037,7 +4035,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}

.icon-button.star-icon.active,
.notification__favourite-icon-wrapper .star-icon {
.notification-favourite .star-icon {
color: var(--color-red);
}

Expand Down Expand Up @@ -4149,7 +4147,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-image: var(--icon-star-column-link-active);
}
.layout-single-column .notification__favourite-icon-wrapper .icon-star {
.layout-single-column .notification-favourite .icon-star {
background-image: var(--icon-star-notification);
}
Expand Down Expand Up @@ -4250,7 +4248,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
.layout-single-column .icon-button.star-icon.active,
.layout-single-column .notification__favourite-icon-wrapper .star-icon {
.layout-single-column .notification-favourite .star-icon {
color: var(--color-yellow);
}
Expand Down

0 comments on commit 81ddcfe

Please sign in to comment.