Skip to content

Instantly share code, notes, and snippets.

@cking
Last active May 6, 2018 19:22
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cking/8db10f7fbb7bbeb08585e87d12fb7f3f to your computer and use it in GitHub Desktop.
Save cking/8db10f7fbb7bbeb08585e87d12fb7f3f to your computer and use it in GitHub Desktop.
Mastodon Headpats
.star-icon i {
display: none;
}
.favorite-button:before, .fa-star:before {
opacity: 0;
}
.favorite-button, .star-icon, .fa-star, .fa.icon-star {
background-image: url(https://cdn.niu.moe/custom_emojis/images/000/002/254/static/d9049b5f15505ddb.png);
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
filter: brightness(1.1) contrast(75%) grayscale(100%) opacity(40%);
}
.detailed-status__link .fa-star {
background-size: 13px;
}
.fa.icon-star {
background-size: 16px;
}
.favorite-button.icon-star, .detailed-status__action-bar button.active .fa-star, .star-icon.active, .fa.icon-star.lit {
filter: brightness(1.1) contrast(75%) opacity(70%);
}
i.star-icon {
width: 16px;
height: 16px;
background-size: 16px;
filter: brightness(1.1) contrast(75%) opacity(70%);
}
i.star-icon:before {
content: " ";
}
.notification-favourite > .notification__message > span,
.notification-details span .fa.icon-star + small {
font-size: 0;
}
.notification-favourite > .notification__message > span bdi {
font-size: 15px;
}
.notification-favourite > .notification__message > span:after,
.notification-details span .fa.icon-star + small:after {
font-size: 15px;
content: " patted your status";
}
.notification-details span .fa.icon-star + small:after {
font-size: 12px;
}
@cking
Copy link
Author

cking commented Apr 25, 2018

Preview

@Nogooduser
Copy link

Still has a star when you highlight a toot but otherwise it works wonderfully!

@treyssatvincent
Copy link

treyssatvincent commented Apr 25, 2018

@cking

Change the start by :

.star-icon i {
    display: none;
}
.fa-star:before {
    opacity: 0;
}
.star-icon, .fa-star {
    background-image: url(https://cdn.niu.moe/custom_emojis/images/000/002/254/static/d9049b5f15505ddb.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(1.1) contrast(75%) grayscale(100%) opacity(40%);
}

.star-icon.active, .icon-button.active .fa-star {
    filter: brightness(1.1) contrast(75%) opacity(70%);
}
/* [...] */

It's a nasty hack to fix highlighted toots !

@cking
Copy link
Author

cking commented Apr 25, 2018

New Version looks like

@cking
Copy link
Author

cking commented Apr 27, 2018

and we have plemora support

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment