plane/web/styles/emoji.css
Aaryan Khandelwal e4f48d6878
[WEB-393] feat: new emoji picker using emoji-picker-react (#3868)
* chore: emoji-picker-react package added

* chore: emoji and emoji picker component added

* chore: emoji picker custom style added

* chore: migration of the emoji's

* chore: migration changes

* chore: project logo prop

* chore: added logo props in the serializer

* chore: removed unused keys

* chore: implement emoji picker throughout the web app

* style: emoji icon picker

* chore: update project logo renderer in the space app

* chore: migrations fixes

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
2024-03-06 19:15:48 +05:30

53 lines
1.4 KiB
CSS

.EmojiPickerReact {
--epr-category-navigation-button-size: 1.25rem !important;
--epr-category-label-height: 1.5rem !important;
--epr-emoji-size: 1.25rem !important;
--epr-picker-border-radius: 0.25rem !important;
--epr-horizontal-padding: 0.5rem !important;
--epr-emoji-padding: 0.5rem !important;
background-color: rgba(var(--color-background-100)) !important;
}
.epr-main {
border: none !important;
border-radius: 0 !important;
}
.epr-emoji-category-label {
font-size: 0.7875rem !important;
color: rgba(var(--color-text-300)) !important;
background-color: rgba(var(--color-background-100), 0.8) !important;
}
.epr-category-nav,
.epr-header-overlay {
padding: 0.5rem !important;
}
button.epr-emoji:hover > *,
button.epr-emoji:focus > * {
background-color: rgba(var(--color-background-80)) !important;
}
input.epr-search {
font-size: 0.7875rem !important;
height: 2rem !important;
background: transparent !important;
border-color: rgba(var(--color-border-200)) !important;
border-radius: 0.25rem !important;
}
input.epr-search::placeholder {
color: rgba(var(--color-text-400)) !important;
}
button.epr-btn-clear-search:hover {
background-color: rgba(var(--color-background-80)) !important;
color: rgba(var(--color-text-300)) !important;
}
.epr-emoji-variation-picker {
background-color: rgba(var(--color-background-100)) !important;
border-color: rgba(var(--color-border-200)) !important;
}