fix: tweak emoji picker style on mobile (#1969)
* fix: tweak emoji picker style on mobile * fix: remove unnecessary global styles
This commit is contained in:
parent
b0c694b1bd
commit
ef3f107d82
|
@ -17,30 +17,29 @@
|
|||
</div>
|
||||
</ModalDialog>
|
||||
<style>
|
||||
:global(emoji-picker) {
|
||||
emoji-picker {
|
||||
--indicator-color: var(--main-theme-color);
|
||||
--outline-color: var(--focus-outline);
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
:global(emoji-picker) {
|
||||
--emoji-padding: 0.25rem;
|
||||
--input-padding: 0.125rem;
|
||||
}
|
||||
|
||||
.emoji-container, :global(emoji-picker) {
|
||||
.emoji-container, emoji-picker {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
:global(emoji-picker) {
|
||||
emoji-picker {
|
||||
--emoji-padding: 0.25rem;
|
||||
--input-padding: 0.125rem;
|
||||
}
|
||||
emoji-picker {
|
||||
--num-columns: 6;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 240px) {
|
||||
:global(emoji-picker) {
|
||||
emoji-picker {
|
||||
--num-columns: 6;
|
||||
--emoji-size: 1.125rem;
|
||||
--emoji-padding: 0.125rem;
|
||||
|
@ -49,7 +48,7 @@
|
|||
}
|
||||
|
||||
@media (max-height: 450px) {
|
||||
:global(emoji-picker) {
|
||||
emoji-picker {
|
||||
height: calc(100vh - 75px); /* leave room for the dialog bar */
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue