Instantly share code, notes, and snippets.

@cking cking/style.css
Last active May 6, 2018

Embed
What would you like to do?
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

This comment has been minimized.

Copy link
Owner Author

cking commented Apr 25, 2018

Preview

@Nogooduser

This comment has been minimized.

Copy link

Nogooduser commented Apr 25, 2018

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

@treyssatvincent

This comment has been minimized.

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

This comment has been minimized.

Copy link
Owner Author

cking commented Apr 25, 2018

New Version looks like

@cking

This comment has been minimized.

Copy link
Owner 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