Skip to content

Instantly share code, notes, and snippets.

@SeinopSys
Last active April 2, 2017 13:31
Show Gist options
  • Save SeinopSys/01a7485f79692cc89d70eb063e817afc to your computer and use it in GitHub Desktop.
Save SeinopSys/01a7485f79692cc89d70eb063e817afc to your computer and use it in GitHub Desktop.
Derpibooru voting ponies userstyle
@-moz-document url-prefix("https://derpibooru.org"), url-prefix("https://trixiebooru.org") {
.interaction--fave .fa,
.interaction--upvote .fa,
.interaction--downvote .fa,
.interaction--comments .fa {
color: transparent;
background-image: url("https://derpicdn.net/img/view/2017/4/1/1401039.svg");
display: inline-block;
background-size: 64px 64px;
width: 32px;
height: 32px;
filter: brightness(0.8);
vertical-align: bottom;
}
.interaction--fave .fa {
background-position: -1px -32px;
transform: scalex(-1);
}
.interaction--upvote .fa {
background-position: 0 0;
transform: scalex(-1);
}
.interaction--downvote .fa {
background-position: -33px 0;
}
.interaction--comments .fa {
background-position: -33px -32px;
}
.interaction--fave:not(.disabled):hover .fa,
.interaction--upvote:not(.disabled):hover .fa,
.interaction--downvote:not(.disabled):hover .fa,
.interaction--fave.active .fa,
.interaction--upvote.active .fa,
.interaction--downvote.active .fa { filter: grayscale(1); }
.interaction--comments:not(.disabled):hover .fa { filter: brightness(0.3); }
.interaction--fave.disabled .fa,
.interaction--upvote.disabled .fa,
.interaction--downvote.disabled .fa,
.interaction--comments.disabled .fa {
opacity: .5;
}
.media-box__header .fa {
background-size: 48px 48px;
width: 24px;
height: 24px;
}
.media-box__header .interaction--fave .fa {
background-position: -0.75px -24px;
}
.media-box__header .interaction--upvote .fa {
background-position: 0 0;
}
.media-box__header .interaction--downvote .fa {
background-position: -24.75px 0;
}
.media-box__header .interaction--comments .fa {
background-position: -24.75px -24px;
}
.media-box__header.media-box__header--small .fa {
background-size: 32px 32px;
width: 16px;
height: 16px;
vertical-align: middle;
}
.media-box__header.media-box__header--small .interaction--fave .fa {
background-position: -0.5px -16px;
}
.media-box__header.media-box__header--small .interaction--upvote .fa {
background-position: 0 0;
}
.media-box__header.media-box__header--small .interaction--downvote .fa {
background-position: -16.5px 0;
}
.media-box__header.media-box__header--small .interaction--comments .fa {
background-position: -16.5px -16px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment