Remove gray filter in emoji picker

rushiiMachine commented 3 years ago

If you do not have nitro all the emojis from other servers are grayed out in the emoji picker. Not sure where to edit the plugin to submit a pr so I'll post here.

.emojiItemDisabled-1FvFuF {
    filter: grayscale(0%);
}

Adding this to custom css removes the gray filter.

An00nymushun commented 3 years ago

It's intentionally left like that (and it wasn't easy figuring it out), so you can know which emojis are sent normally.

rushiiMachine commented 3 years ago

Can a setting be added to disable the grayscale?

dav1312 commented 3 years ago

It's intentionally left like that (and it wasn't easy figuring it out), so you can know which emojis are sent normally.

How about removing the gray filter when hovering over the emoji?

An00nymushun commented 3 years ago

How about removing the gray filter when hovering over the emoji?

You can see the colored versions at the bottom of the emoji picker when hovering over them.

KraXen72 commented 3 years ago

you can use custom css to ungrayscale them.

marcussacana commented 3 years ago

I did this CSS because will remove the grayscale and I still know what is locked emoji

button[class*='emojiItemDisabled'] { 
  filter: none !important; 
  outline: dotted 1px rgba(255, 0, 0, 0.3); 
  outline-offset: -2px; 
  cursor: pointer !important;
}

Alternative version compatible with basicbackground theme

button[class*='emojiItemDisabled'] { 
  filter: none !important; 
  outline: dotted 1px rgba(255, 0, 0, 0.3); 
  outline-offset: -2px; 
  cursor: pointer !important;
}
button[class*='emojiItemDisabled'] > img {
  filter: none !important;
}

ghost commented 3 years ago

I'm did this CSS because will remove the grayscale and I still know what is locked emoji
li[class*='emojiItemDisabled'] { 
  filter: none !important; 
  outline: dotted 1px rgba(255, 0, 0, 0.3); 
  outline-offset: -2px; 
}

cheers xd

CharlesAttend commented 2 years ago

Replacing li with button work for me

button[class*='emojiItemDisabled'] { 
  filter: none !important; 
  outline: dotted 1px rgba(255, 0, 0, 0.3); 
  outline-offset: -2px; 
}

marcussacana commented 2 years ago

yep, they updated the element

ghost commented 2 years ago

i'd like to second this as a feature request for toggling it on and off in plugin settings for people who dont know this thread exists. That said, i'll still use the workaround marcussacana provided.

marcussacana commented 2 years ago

To who are using my CSS, I updated it

ghost commented 1 year ago

To who are using my CSS, I updated it

where to find this?

marcussacana commented 1 year ago

here, this one https://github.com/An00nymushun/DiscordFreeEmojis/issues/8#issuecomment-821928481

ghost commented 1 year ago

here, this one #8 (comment)

How do i apply it? I tried applying by editing the plugin inside better discord but it says error compiling

adae22 commented 1 year ago

here, this one #8 (comment)

How do i apply it? I tried applying by editing the plugin inside better discord but it says error compiling

You're attempting to copy/paste it into the .js file - that's not what you're supposed to do with it. Take the css in https://github.com/An00nymushun/DiscordFreeEmojis/issues/8#issuecomment-821928481 and paste it into the "Custom CSS" tab of the BETTERDISCORD section within your Discord's settings menu.

An00nymushun / DiscordFreeEmojis

Remove gray filter in emoji picker #8