data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: tweak emoji picker style on mobile (#1969)

Browse source 
* fix: tweak emoji picker style on mobile

* fix: remove unnecessary global styles
This commit is contained in:
Nolan Lawson 2021-02-22 20:37:08 -08:00 committed by GitHub
parent b0c694b1bd
commit ef3f107d82
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/routes/_components/dialog/components/EmojiDialog.html
View file

@ -17,30 +17,29 @@
</div> </div>
</ModalDialog> </ModalDialog>
<style> <style>
:global(emoji-picker) { emoji-picker {
--indicator-color: var(--main-theme-color); --indicator-color: var(--main-theme-color);
--outline-color: var(--focus-outline); --outline-color: var(--focus-outline);
} }
@media (max-width: 479px) { @media (max-width: 479px) {
:global(emoji-picker) { .emoji-container, emoji-picker {
--emoji-padding: 0.25rem;
--input-padding: 0.125rem;
}
.emoji-container, :global(emoji-picker) {
width: 100%; width: 100%;
} }
} }
@media (max-width: 320px) { @media (max-width: 320px) {
:global(emoji-picker) { emoji-picker {
--emoji-padding: 0.25rem;
--input-padding: 0.125rem;
}
emoji-picker {
--num-columns: 6; --num-columns: 6;
} }
} }
@media (max-width: 240px) { @media (max-width: 240px) {
:global(emoji-picker) { emoji-picker {
--num-columns: 6; --num-columns: 6;
--emoji-size: 1.125rem; --emoji-size: 1.125rem;
--emoji-padding: 0.125rem; --emoji-padding: 0.125rem;
@ -49,7 +48,7 @@
} }
@media (max-height: 450px) { @media (max-height: 450px) {
:global(emoji-picker) { emoji-picker {
height: calc(100vh - 75px); /* leave room for the dialog bar */ height: calc(100vh - 75px); /* leave room for the dialog bar */
} }
} }