Last active
February 21, 2017 02:41
-
-
Save mcnees/fb4f1412ef5453cc43bd to your computer and use it in GitHub Desktop.
Favmoji.css for Tweetdeck in the Browser
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Install the Stylish extension for your browser, then add this code as a new Style. */ | |
/* Make sure it applies to the domain 'http://tweetdeck.twitter.com ' */ | |
/* Thank you to @ukuleledan. His code at http://pastebin.com/45cFJ5PR */ | |
/* showed me how to fix the corner badges of faved tweets. */ | |
/* For whatever reason, you occasionally have to reload the page */ | |
/* for Tweetdeck to notice these changes. */ | |
/* Tweet bugs or neat additions to @mcnees */ | |
/* Hide the heart button at the bottom of a tweet. */ | |
.icon-favorite-toggle { | |
visibility: hidden; | |
} | |
/* Replace that heart with a grayed-out emoji. */ | |
.item-box:hover .icon-favorite-toggle:before { | |
content:'🍺'; | |
-webkit-filter: grayscale(100%); | |
visibility: visible; | |
font-style: normal; | |
display: inline-block; | |
vertical-align: text-top; | |
background-repeat: no-repeat; | |
} | |
/* Do the same when looking at a tweet's detailed view. */ | |
.tweet-detail-action .icon-favorite-toggle:before { | |
content:'🍺'; | |
-webkit-filter: grayscale(100%); | |
visibility: visible; | |
font-style: normal; | |
display: inline-block; | |
vertical-align: text-top; | |
background-repeat: no-repeat; | |
} | |
/* Show the emoji as full-color when hovering over it. */ | |
.item-box:hover .icon-favorite-toggle:hover:before { | |
content:'🍺'; | |
-webkit-filter: grayscale(0%); | |
visibility: visible; | |
font-style: normal; | |
display: inline-block; | |
vertical-align: text-top; | |
} | |
/* Hide the heart that shows up in the corner of favorited tweets. */ | |
/* It's a background image, so set it to 'none'. */ | |
.hearty .sprite { | |
background-image: none; | |
} | |
/* Now put an emoji there. Set it to 80% size so it fits better, and */ | |
/* add a little margin on the left so it doesn't overlap other stuff. */ | |
.hearty .is-favorite .sprite:after { | |
display: inline-block; | |
vertical-align: text-top; | |
content: '🍺'; | |
font-size: 80%; | |
margin-left: 5px; | |
font-style: normal; | |
} | |
/* If someone favorited your tweet, hide the heart that shows up */ | |
/* next to their avi. */ | |
.icon-favorite { | |
visibility: hidden; | |
} | |
/* Now replace it with an emoji, again at 80% size so it fits. */ | |
.activity-indicator.icon-favorite:before { | |
content: '🍺'; | |
visibility: visible; | |
font-size: 80%; | |
display: inline-block; | |
vertical-align: text-bottom; | |
font-style: normal; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment