Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* Reference: https://userstyles.org/styles/120402/twitter-s-fav-button-back */
/* The is the old default star, no animation */
.HeartAnimationContainer:before,.Icon--heart:before{content:"\f147";display:block;font-family:"rosettaicons";font-weight:normal;font-style:normal;text-align:center;-webkit-font-smoothing:antialiased;}
.ProfileTweet-action--favorite.withHeartIcon.is-animating .HeartAnimation,.HeartAnimation{display:none!important;}
.tweet-action[rel="favorite"]:hover,.tweet-detail-action[rel="favorite"]:hover,.tweet-action[rel="favorite"]:focus,.tweet-detail-action[rel="favorite"]:focus,.tweet-action[rel="favorite"]:active,.tweet-detail-action[rel="favorite"]:active,.tweet-action.is-selected[rel="favorite"],.Icon--favorited,.Icon--colorFavorited,.ProfileTweet-action--favorite .ProfileTweet-actionButton:hover *,.ProfileTweet-action--favorite .ProfileTweet-actionButton:focus,.ProfileTweet-action--favorite .ProfileTweet-actionCount:hover,.ProfileTweet-action--favorite .ProfileTweet-actionCount:focus,.tweet.favorited .tweet-actions .Icon--favorite,.tweet.favorited .ProfileTweet-actionList .Icon--favorite,.tweet.favorited .ProfileTweet-action--favorite .ProfileTweet-actionCount,.Icon--colorHeart,.Icon--circleActiveHeart,.Icon--heartBadge,.ProfileTweet-action--favorite.withHeartIcon .ProfileTweet-actionButton:hover,.ProfileTweet-action--favorite.withHeartIcon .ProfileTweet-actionButton:focus,.ProfileTweet-action--favorite.withHeartIcon .ProfileTweet-actionCount:hover,.ProfileTweet-action--favorite.withHeartIcon .ProfileTweet-actionCount:focus,.favorited .ProfileTweet-action--favorite .Icon--heart,.favorited .ProfileTweet-action--favorite.withHeartIcon .ProfileTweet-actionButtonUndo,.favorited .ProfileTweet-action--favorite .ProfileTweet-actionButtonUndo{color:#FFA200!important;}
.ProfileTweet-action--retweet .ProfileTweet-actionButton:hover,.ProfileTweet-action--retweet .ProfileTweet-actionButton:focus,.ProfileTweet-action--retweet .ProfileTweet-actionCount:hover,.ProfileTweet-action--retweet .ProfileTweet-actionCount:focus,.Icon--retweeted,.Icon--colorRetweeted,.ProfileTweet-action--retweet .ProfileTweet-actionButton:hover *,.ProfileTweet-action--retweet .ProfileTweet-actionButton:focus,.ProfileTweet-action--retweet .ProfileTweet-actionCount:hover,.ProfileTweet-action--retweet .ProfileTweet-actionCount:focus,.Icon--retweeted,.Icon--colorRetweeted,.tweet.retweeted .Icon--retweet,.tweet.retweeted .ProfileTweet-action--retweet .ProfileTweet-actionButtonUndo{color:#0F961A!important;}
.hearty .icon-favorite:before{content:"\f007"!important;}.Icon--heartBadge:before{content:"\f001"!important;}
.prf [data-type="favorites"]:hover *,.tweet-action[rel="favorite"]:hover,.tweet-detail-action[rel="favorite"]:hover,.tweet-action[rel="favorite"]:focus,.tweet-detail-action[rel="favorite"]:focus,.tweet-action[rel="favorite"]:active,.tweet-detail-action[rel="favorite"]:active,.tweet-action[rel="favorite"].is-selected,.is-favorite .icon-favorite-toggle,.hearty .icon-favorite-color{color:#FFA200!important;}
.tweet:before,.tweet:after,.ProfileTweet-header:before{display:inline-block;vertical-align:text-top;background-image:url(https://abs.twimg.com/a/1431997920/img/t1/twitter_web_sprite_icons.png);
background-repeat:no-repeat;position:absolute;top:0;right:0;visibility:hidden;width:24px;height:24px;}
.favorited:before,.favorited:after,.is-favorited .ProfileTweet-header:before{content:" ";background-position:-30px -450px;visibility:visible;}
.retweeted:before,.retweeted:after{content:" ";background-position:0 -450px;visibility:visible;}
.favorited.retweeted:before,.favorited.retweeted:after,.is-retweeted .ProfileTweet-header:before,.is-retweeted.is-favorited .ProfileTweet-header:before{content:" ";background-position:-60px -450px;visibility:visible;}
/* Belows are imitated star, with animation */
/*
.HeartAnimation {
background: url("https://pbs.twimg.com/media/CS9U_wmUsAAzuUz.png:large");
background-size: 2900%;
background-position: left;
}
.ProfileTweet-action--favorite .ProfileTweet-actionButton:hover .HeartAnimation, .ProfileTweet-action--favorite .ProfileTweet-actionButton:focus .HeartAnimation, .favorited .ProfileTweet-action--favorite .HeartAnimation {
background-position: right;
}
.Icon--heartBadge {
color: #ffac33;
}
.Icon--heartBadge:before {
content: "";
}
*/
@MaverickTse

This comment has been minimized.

Copy link
Owner Author

@MaverickTse MaverickTse commented Nov 4, 2015

content: ""; determines the icon shape, heart or star, on the Notification page left to the tweets.

For the Favo action button, it is determined by the PNG in the .HeartAnimation section.

The PNG (with alpha) is composed of 29 frames of 35x35px concatenated horizontally. The main icon body should be around 12x10px only or would look too large. background-size must be 2900~3000% or the icon would drift if you hover over it. The left-most frame is the default image prior being clicked. The right-most frame is the final appearance.

@MaverickTse

This comment has been minimized.

Copy link
Owner Author

@MaverickTse MaverickTse commented Nov 11, 2015

adopted a CSS found on user-style by default (the old star favour). If you like the animated one, comment out the upper section and uncomment the lower part

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