Skip to content

Instantly share code, notes, and snippets.

@kritishd8

kritishd8/emoji-picker.css

Last active August 11, 2023 02:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kritishd8/514d0f40843f392520ad2699b5db7362 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kritishd8/514d0f40843f392520ad2699b5db7362 to your computer and use it in GitHub Desktop.
Download ZIP
Emoji Picker
Raw
emoji-picker.css
:root {
--radius-secondary: 10px;
}
.header-1nkwgG, .header-11eigE, .header-JHwfVI {
--webkit-shadow: none;
box-shadow: none !important;
filter: none;
}
.positionLayer-1cndvf.layer-2aCOJ3 {
bottom: 135px !important;
}
.header-11eigE {
padding-top: 16px;
}
div#popout_7505 {
top: 500px !important;
right: 265px !important;
}
.contentWrapper-3vHNP2 {
grid-template-rows: auto;
min-height: 442px !important;
}
.contentWrapper-3vHNP2 .nav-1zWVQw, .contentWrapper-3vHNP2 .navList-YSb9UB {
position: fixed;
bottom: 90px;
height: 40px;
width: 392px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: var(--radius-secondary);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
background-color: var(--background-tertiary);
display: flex;
flex-direction: row;
justify-content: center;
z-index: 101;
}
.inspector-DFKXwB.inspector-2A2Chb {
height: 0;
display: none;
}
.bodyWrapper-1eSOtW {
height: 320px;
margin-top: -5px;
padding-left: 10px;
padding-right: 5px;
}
.drawerSizingWrapper-27qFHb {
height: 442px !important;
max-width: 424px;
}
.drawerSizingWrapper-27qFHb .resizeHandle-T_gFJR {
display: none;
cursor: default;
}
#emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj {
transform: rotate(-90deg);
transform: rotate(-90deg) translateX(225px) translateY(190px);
height: 400px;
padding-top: 0px !important;
border-radius: var(--radius-secondary);
}
#emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .listItems-6eZzQ1 .categoryItem-1sHzUv, #emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .unicodeShortcut-3N8oDe {
transform: rotate(90deg);
}
#emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .unicodeShortcut-3N8oDe, #emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .scroller-2MALzE, #emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .listItems-6eZzQ1 {
background: var(--background-tertiary) !important;
border-radius: var(--radius-secondary);
}
#emoji-picker-tab-panel .emojiPicker-6YCk8a {
grid-template-rows: 46px auto calc(calc(48px * 2) + 8px) !important;
grid-template-columns: 0 auto !important;
position: relative !important;
padding-top: 65px;
height: 420px;
width: 428px;
border-radius: 5px !important;
}
#emoji-picker-tab-panel .emojiPicker-6YCk8a .emoji-4YP39J {
margin-left: -5px !important;
}
#emoji-picker-tab-panel .emojiPicker-6YCk8a .searchBar-2M9mRP, #emoji-picker-tab-panel .emojiPicker-6YCk8a .inspector-2A2Chb {
background: var(--background-primary) !important;
}
#gif-picker-tab-panel .searchBar-gJe8lY {
background: var(--background-primary) !important;
}
.container-1SX9VC, .inner-1NoIT5 {
background: var(--background-primary) !important;
}
.emojiItem-277VFM .emojiItemImageLoading-1yEIxx {
/* Fix Loading Emojis */
background-image: none;
background-color: var(--background-primary) !important;
border-radius: 30%;
}
@kritishd8
Copy link
Author

kritishd8 commented Jul 3, 2022

Screenshot from 2022-07-03 13-40-59

@KraXen72
Copy link

KraXen72 commented Jul 16, 2022

could you please do a version of this where the scrollbar is on the bottom?
thankies

@kritishd8
Copy link
Author

kritishd8 commented Jul 17, 2022

@KraXen72 which scrollbar at the bottom? 🤔

@KraXen72
Copy link

KraXen72 commented Jul 17, 2022

image

@kritishd8
Copy link
Author

kritishd8 commented Jul 17, 2022

ahh ok lemme try that

@kritishd8
Copy link
Author

kritishd8 commented Jul 17, 2022 

:root {
	--radius-secondary: 10px;
}

.header-1nkwgG, .header-11eigE, .header-JHwfVI {
  --webkit-shadow: none;
  box-shadow: none !important;
  filter: none;
}
.positionLayer-1cndvf.layer-2aCOJ3 {
  bottom: 135px !important;
}
.header-11eigE {
  padding-top: 16px;
}
div#popout_7505 {
  top: 500px !important;
  right: 265px !important;
}
.contentWrapper-3vHNP2 {
  grid-template-rows: auto;
  min-height: 442px !important;
}
.contentWrapper-3vHNP2 .nav-1zWVQw, .contentWrapper-3vHNP2 .navList-YSb9UB {
  position: fixed;
  bottom: 90px;
  height: 40px;
  width: 392px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: var(--radius-secondary);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  background-color: var(--background-tertiary);
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 101;
}
.inspector-DFKXwB.inspector-2A2Chb {
  height: 0;
  display: none;
}
.bodyWrapper-1eSOtW {
  height: 320px;
  margin-top: -5px;
  padding-left: 10px;
  padding-right: 5px;
}
.drawerSizingWrapper-27qFHb {
  height: 442px !important;
  max-width: 424px;
}
.drawerSizingWrapper-27qFHb .resizeHandle-T_gFJR {
  display: none;
  cursor: default;
}
#emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj {
  transform: rotate(-90deg);
  transform: rotate(-90deg) translateX(-140px) translateY(190px);
  height: 400px;
  padding-top: 0px !important;
  border-radius: var(--radius-secondary);
}
#emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .listItems-6eZzQ1 .categoryItem-1sHzUv, #emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .unicodeShortcut-3N8oDe {
  transform: rotate(90deg);
}
#emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .unicodeShortcut-3N8oDe, #emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .scroller-2MALzE, #emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .listItems-6eZzQ1 {
  background: var(--background-tertiary) !important;
  border-radius: var(--radius-secondary);
}
#emoji-picker-tab-panel .emojiPicker-6YCk8a {
  grid-template-rows: 46px auto calc(calc(48px * 2) + 8px) !important;
  grid-template-columns: 0 auto !important;
  position: relative !important;
  padding-top: 5px;
  height: 420px;
  width: 428px;
  border-radius: 5px !important;
}
#emoji-picker-tab-panel .emojiPicker-6YCk8a .emoji-4YP39J {
  margin-left: -5px !important;
}
#emoji-picker-tab-panel .emojiPicker-6YCk8a .searchBar-2M9mRP, #emoji-picker-tab-panel .emojiPicker-6YCk8a .inspector-2A2Chb {
  background: var(--background-primary) !important;
}
#gif-picker-tab-panel .searchBar-gJe8lY {
  background: var(--background-primary) !important;
}
.container-1SX9VC, .inner-1NoIT5 {
  background: var(--background-primary) !important;
}
.emojiItem-277VFM .emojiItemImageLoading-1yEIxx {
  /* Fix Loading Emojis */
  background-image: none;
  background-color: var(--background-primary) !important;
  border-radius: 30%;
}

@kritishd8
Copy link
Author

kritishd8 commented Jul 17, 2022

this should do

@KraXen72
Copy link

KraXen72 commented Jul 17, 2022

very nice. thanks. (you could also maybe do the horizontal bar for stickers, but not needed, i don't almost ever use them)

@kritishd8
Copy link
Author

kritishd8 commented Jul 19, 2022

i was thinking of adding display: none; for stickers when i made this but then found some people who actually use it somehow so left it as is, will work on it later

@Scarlaid
Copy link

Scarlaid commented Dec 23, 2022

there seems to be a weird bar in the right after the new GUI update
image

@kritishd8
Copy link
Author

kritishd8 commented Aug 11, 2023

Updated (8/11/2023)

:root {
	--radius-secondary: 10px;
}

.header-1nkwgG, .header-11eigE, .header-JHwfVI {
  --webkit-shadow: none;
  box-shadow: none !important;
  filter: none;
}
.positionLayer-1cndvf.layer-2aCOJ3 {
  bottom: 135px !important;
}
.header-11eigE {
  padding-top: 16px;
}
div#popout_7505 {
  top: 500px !important;
  right: 265px !important;
}
.contentWrapper-3vHNP2 {
  grid-template-rows: auto;
  min-height: 442px !important;
}
.contentWrapper-3vHNP2 .nav-1zWVQw, .contentWrapper-3vHNP2 .navList-YSb9UB {
  position: fixed;
  bottom: 90px;
  height: 40px;
  width: 392px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: var(--radius-secondary);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  background-color: var(--background-tertiary);
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 101;
}
.inspector-DFKXwB.inspector-2A2Chb {
  height: 0;
  display: none;
}
.bodyWrapper-1eSOtW {
  height: 320px;
  margin-top: -5px;
  padding-left: 10px;
  padding-right: 5px;
}
.drawerSizingWrapper-1txdWG {
  height: 442px !important;
  max-width: 424px;
}

.drawerSizingWrapper-1txdWG .resizeHandle-T_gFJR {
  display: none;
  cursor: default;
}
#emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj {
  transform: rotate(-90deg);
  transform: rotate(-90deg) translateX(225px) translateY(190px);
  height: 400px;
  padding-top: 0px !important;
  border-radius: var(--radius-secondary);
}
#emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .listItems-6eZzQ1 .categoryItem-1sHzUv, #emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .unicodeShortcut-3N8oDe {
  transform: rotate(90deg);
}
#emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .unicodeShortcut-3N8oDe, #emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .scroller-2MALzE, #emoji-picker-tab-panel .wrapper-22rqw6.categoryList-2qRrlj .listItems-6eZzQ1 {
  background: var(--background-tertiary) !important;
  border-radius: var(--radius-secondary);
}
#emoji-picker-tab-panel .emojiPicker-6YCk8a {
  grid-template-rows: 46px auto calc(calc(48px * 2) + 8px) !important;
  grid-template-columns: 0 auto !important;
  position: relative !important;
  padding-top: 65px;
  height: 420px;
  width: 428px;
  border-radius: 5px !important;
}
#emoji-picker-tab-panel .emojiPicker-6YCk8a .emoji-4YP39J {
  margin-left: -5px !important;
}
#emoji-picker-tab-panel .emojiPicker-6YCk8a .searchBar-2M9mRP, #emoji-picker-tab-panel .emojiPicker-6YCk8a .inspector-2A2Chb {
  background: var(--background-primary) !important;
}
#gif-picker-tab-panel .searchBar-gJe8lY {
  background: var(--background-primary) !important;
}
.container-1SX9VC, .inner-1NoIT5 {
  background: var(--background-primary) !important;
}
.emojiItem-277VFM .emojiItemImageLoading-1yEIxx {
  /* Fix Loading Emojis */
  background-image: none;
  background-color: var(--background-primary) !important;
  border-radius: 30%;
}

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