Skip to content

Instantly share code, notes, and snippets.

@KensonPlayz

KensonPlayz/mh_banner.less Secret

Created March 6, 2024 18:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KensonPlayz/1ed040089a90b4dc733a431fd5c47a10 to your computer and use it in GitHub Desktop.
Save KensonPlayz/1ed040089a90b4dc733a431fd5c47a10 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mh_banner.less
/* -------------------------------
- START - Group Banner/Badge CSS -
------------------------------- */
/* START Owner BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhOwner{
background-image: url('/badges/Spinosaurus.png');
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 1.5% 0%; /* adjusts image position (x% y%) */
background-repeat: no-repeat; /* keeps image from repeating */
text-indent: -7px; /* shifts text left or right */
padding-top: 45px; /* adjusts distance from image to text (group name) */
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
filter: drop-shadow(5px 5px 3px black);
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhOwner.message-userBanner {
background-position: 50% 0%; /* adjusts image position (x% y%) */
text-indent: 0px; /* shifts text left or right */
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhOwner.message-userBanner.userBanner {
/* background-image: none; /* remove the slashes to remove image in mobile view */
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 25% 0%; /* adjusts image position (x% y%) */
text-indent: -7px; /* shifts text left or right */
padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}
/* END Owner BADGE */
/* START Admin BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhAdmin{
background-image: url('/badges/Carnotaurus.png');
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 1.5% 0%; /* adjusts image position (x% y%) */
background-repeat: no-repeat; /* keeps image from repeating */
text-indent: -7px; /* shifts text left or right */
padding-top: 45px; /* adjusts distance from image to text (group name) */
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
filter: drop-shadow(5px 5px 3px black);
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhAdmin.message-userBanner {
background-position: 50% 0%; /* adjusts image position (x% y%) */
text-indent: 0px; /* shifts text left or right */
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhAdmin.message-userBanner.userBanner {
/* background-image: none; /* remove the slashes to remove image in mobile view */
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 25% 0%; /* adjusts image position (x% y%) */
text-indent: -7px; /* shifts text left or right */
padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}
/* END Admin BADGE */
/* START Moderator BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhMod{
background-image: url('/badges/Utahraptor.png');
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 1.5% 0%; /* adjusts image position (x% y%) */
background-repeat: no-repeat; /* keeps image from repeating */
text-indent: -7px; /* shifts text left or right */
padding-top: 45px; /* adjusts distance from image to text (group name) */
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
filter: drop-shadow(5px 5px 3px black);
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhMod.message-userBanner {
background-position: 50% 0%; /* adjusts image position (x% y%) */
text-indent: 0px; /* shifts text left or right */
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhMod.message-userBanner.userBanner {
/* background-image: none; /* remove the slashes to remove image in mobile view */
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 25% 0%; /* adjusts image position (x% y%) */
text-indent: -7px; /* shifts text left or right */
padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}
/* END Mod BADGE */
/* START ServerStaff BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhSStaff{
background-image: url('/badges/ServerStaff.png');
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 1.5% 0%; /* adjusts image position (x% y%) */
background-repeat: no-repeat; /* keeps image from repeating */
text-indent: -7px; /* shifts text left or right */
padding-top: 45px; /* adjusts distance from image to text (group name) */
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
filter: drop-shadow(5px 5px 3px black);
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhSStaff.message-userBanner {
background-position: 50% 0%; /* adjusts image position (x% y%) */
text-indent: 0px; /* shifts text left or right */
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhSStaff.message-userBanner.userBanner {
/* background-image: none; /* remove the slashes to remove image in mobile view */
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 25% 0%; /* adjusts image position (x% y%) */
text-indent: -7px; /* shifts text left or right */
padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}
/* END ServerStaff BADGE */
/* START ApexPredator BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhSub{
background-image: url('/badges/PaidSub.png');
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 1.5% 0%; /* adjusts image position (x% y%) */
background-repeat: no-repeat; /* keeps image from repeating */
text-indent: -7px; /* shifts text left or right */
padding-top: 45px; /* adjusts distance from image to text (group name) */
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
filter: drop-shadow(5px 5px 3px black);
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhSub.message-userBanner {
background-position: 50% 0%; /* adjusts image position (x% y%)
text-indent: 0px; /* shifts text left or right
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhSub.message-userBanner.userBanner {
/* background-image: none; /* remove the slashes to remove image in mobile view */
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 25% 0%; /* adjusts image position (x% y%) */
text-indent: -7px; /* shifts text left or right */
padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}
/* END ApexPredator BADGE */
/* START YouTuber BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhCreator{
background-image: url('/badges/Creator.png');
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 1.5% 0%; /* adjusts image position (x% y%) */
background-repeat: no-repeat; /* keeps image from repeating */
text-indent: -7px; /* shifts text left or right */
padding-top: 45px; /* adjusts distance from image to text (group name) */
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
filter: drop-shadow(5px 5px 3px black);
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhCreator.message-userBanner {
background-position: 50% 0%; /* adjusts image position (x% y%)
text-indent: 0px; /* shifts text left or right */
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhCreator.message-userBanner.userBanner {
/* background-image: none; /* remove the slashes to remove image in mobile view */
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 25% 0%; /* adjusts image position (x% y%) */
text-indent: -7px; /* shifts text left or right */
padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}
/* END YouTuber BADGE */
/* START Streamer BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhStreamer{
background-image: url('/badges/Streamer.png');
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 1.5% 0%; /* adjusts image position (x% y%) */
background-repeat: no-repeat; /* keeps image from repeating */
text-indent: -7px; /* shifts text left or right */
padding-top: 45px; /* adjusts distance from image to text (group name) */
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
filter: drop-shadow(5px 5px 3px black);
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhStreamer.message-userBanner {
background-position: 50% 0%; /* adjusts image position (x% y%) */
text-indent: 0px; /* shifts text left or right */
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhStreamer.message-userBanner.userBanner {
/* background-image: none; /* remove the slashes to remove image in mobile view */
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 25% 0%; /* adjusts image position (x% y%) */
text-indent: -7px; /* shifts text left or right */
padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}
/* END Streamer BADGE */
/* START Fossil BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhFossil{
background-image: url('/badges/Fossil.png');
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 1.5% 0%; /* adjusts image position (x% y%) */
background-repeat: no-repeat; /* keeps image from repeating */
text-indent: -7px; /* shifts text left or right */
padding-top: 45px; /* adjusts distance from image to text (group name) */
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
filter: drop-shadow(5px 5px 3px black);
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhFossil.message-userBanner {
background-position: 50% 0%; /* adjusts image position (x% y%) */
text-indent: 0px; /* shifts text left or right */
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhFossil.message-userBanner.userBanner {
/* background-image: none; /* remove the slashes to remove image in mobile view */
display: inline-block;
background-size: 35px; /* adjusts size of background image */
background-position: 0% 0%; /* adjusts image position (x% y%) */
text-indent: -7px; /* shifts text left or right */
padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}
/* END Fossil BADGE */
/* START Elder BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhElder{
background-image: url('/badges/Elder.png');
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 1.5% 0%; /* adjusts image position (x% y%) */
background-repeat: no-repeat; /* keeps image from repeating */
text-indent: -7px; /* shifts text left or right */
padding-top: 45px; /* adjusts distance from image to text (group name) */
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
filter: drop-shadow(5px 5px 3px black);
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhElder.message-userBanner {
background-position: 50% 0%; /* adjusts image position (x% y%) */
text-indent: 0px; /* shifts text left or right */
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhElder.message-userBanner.userBanner {
/* background-image: none; /* remove the slashes to remove image in mobile view */
display: inline-block;
background-size: 35px; /* adjusts size of background image */
background-position: 0% 0%; /* adjusts image position (x% y%) */
text-indent: -7px; /* shifts text left or right */
padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}
/* END Elder BADGE */
/* START Dino BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhDino{
background-image: url('/badges/Dino.png');
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 1.5% 0%; /* adjusts image position (x% y%) */
background-repeat: no-repeat; /* keeps image from repeating */
text-indent: -7px; /* shifts text left or right */
padding-top: 45px; /* adjusts distance from image to text (group name) */
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
filter: drop-shadow(5px 5px 3px black);
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhDino.message-userBanner {
background-position: 50% 0%; /* adjusts image position (x% y%) */
text-indent: 0px; /* shifts text left or right */
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhDino.message-userBanner.userBanner {
/* background-image: none; /* remove the slashes to remove image in mobile view */
display: inline-block;
background-size: 35px; /* adjusts size of background image */
background-position: 0% 0%; /* adjusts image position (x% y%) */
text-indent: -7px; /* shifts text left or right */
padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}
/* END Dino BADGE */
/* START Juvenile BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhJuvenile{
background-image: url('/badges/Juvenile.png');
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 1.5% 0%; /* adjusts image position (x% y%) */
background-repeat: no-repeat; /* keeps image from repeating */
text-indent: -7px; /* shifts text left or right */
padding-top: 45px; /* adjusts distance from image to text (group name) */
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
filter: drop-shadow(5px 5px 3px black);
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhJuvenile.message-userBanner {
background-position: 50% 0%; /* adjusts image position (x% y%) */
text-indent: 0px; /* shifts text left or right */
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhJuvenile.message-userBanner.userBanner {
/* background-image: none; /* remove the slashes to remove image in mobile view */
display: inline-block;
background-size: 35px; /* adjusts size of background image */
background-position: 0% 0%; /* adjusts image position (x% y%) */
text-indent: -7px; /* shifts text left or right */
padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}
/* END Juvenile BADGE */
/* START Hatchling BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhHatchling{
background-image: url('/badges/Hatchling.png');
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 1.5% 0%; /* adjusts image position (x% y%) */
background-repeat: no-repeat; /* keeps image from repeating */
text-indent: -7px; /* shifts text left or right */
padding-top: 45px; /* adjusts distance from image to text (group name) */
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
filter: drop-shadow(5px 5px 3px black);
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhHatchling.message-userBanner {
background-position: 50% 0%; /* adjusts image position (x% y%) */
text-indent: 0px; /* shifts text left or right */
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhHatchling.message-userBanner.userBanner {
/* background-image: none; /* remove the slashes to remove image in mobile view */
display: inline-block;
background-size: 35px; /* adjusts size of background image */
background-position: 0% 0%; /* adjusts image position (x% y%) */
text-indent: -7px; /* shifts text left or right */
padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}
/* END Hatchling BADGE */
/* START Egg BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
.userBanner.mhEgg{
background-image: url('/badges/Egg.png');
display: block;
background-size: 250px; /* adjusts size of background image */
background-position: 1.5% 0%; /* adjusts image position (x% y%) */
background-repeat: no-repeat; /* keeps image from repeating */
text-indent: -7px; /* shifts text left or right */
padding-top: 45px; /* adjusts distance from image to text (group name) */
text-align: left;
color: transparent; /* remove slashes if you want to hide the text */
filter: drop-shadow(5px 5px 3px black);
}
/* Additonal adjustments for message-userBanner Only */
.userBanner.mhEgg.message-userBanner {
background-position: 50% 0%; /* adjusts image position (x% y%) */
text-indent: 0px; /* shifts text left or right */
text-align: center;
}
/* Adjusts size, position, or removal of banner image in Mobile view */
@media (max-width: 650px){
.userBanner.mhEgg.message-userBanner.userBanner {
/* background-image: none; /* remove the slashes to remove image in mobile view */
display: inline-block;
background-size: 35px; /* adjusts size of background image */
background-position: 0% 0%; /* adjusts image position (x% y%) */
text-indent: -7px; /* shifts text left or right */
padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
text-align: left;
}
}
/* END Egg BADGE */
/* BACKUP FOR NEW BADGES
/* START Egg BADGE */
/* Adds userBanner to memberHeader-banners and memberTooltip-banners */
/* .userBanner.mhEgg{
background-image: url('/badges/Egg.png');
display: block; REMOVECOMMENT*/
/* background-size: 250px; /* adjusts size of background image */
/* background-position: 1.5% 0%; /* adjusts image position (x% y%) */
/* background-repeat: no-repeat; /* keeps image from repeating */
/* text-indent: -7px; /* shifts text left or right */
/* padding-top: 45px; /* adjusts distance from image to text (group name) */
/* text-align: left;
/* color: transparent; /* remove slashes if you want to hide the text */
/*}*/
/* Additonal adjustments for message-userBanner Only */
/*.userBanner.mhEgg.message-userBanner {
/* background-position: 50% 0%; /* adjusts image position (x% y%) */
/* text-indent: 0px; /* shifts text left or right */
/* text-align: center;
/*}*/
/* Adjusts size, position, or removal of banner image in Mobile view */
/*@media (max-width: 650px){*/
/*.userBanner.mhEgg.message-userBanner.userBanner { */
/* background-image: none; /* remove the slashes to remove image in mobile view */
/* display: inline-block;
/* background-size: 35px; /* adjusts size of background image */
/* background-position: 0% 0%; /* adjusts image position (x% y%) */
/* text-indent: -7px; /* shifts text left or right */
/* padding-top: 37px; /* adjusts distance from image to text (use with image) */
/* padding-top: 0px; /* remove the slashes and delete line above to remove image in mobile view */
/* text-align: left;
/*}
}*/
/* END Egg BADGE */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment