paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 13:33:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

emoji: Scale emoji popover with em.

Browse Source
This commit is contained in:
evykassirer
2025-02-18 12:40:42 -08:00
committed by Tim Abbott
parent 67ba364d67
commit b2c5eed70d
1 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web/styles/reactions.css
View File

@@ -166,11 +166,11 @@
.emoji-picker-popover { .emoji-picker-popover {
padding: 0; padding: 0;
height: 370px; height: fit-content;
user-select: none; user-select: none;
.emoji-popover { .emoji-popover {
width: 250px; width: 16.6667em; /* 250px at 15px/em */
.emoji-popover-category-tabs { .emoji-popover-category-tabs {
/* Flex needed here to work around #7511 (90% zoom issues in firefox) */ /* Flex needed here to work around #7511 (90% zoom issues in firefox) */
@@ -181,12 +181,12 @@
overflow: hidden; overflow: hidden;
.emoji-popover-tab-item { .emoji-popover-tab-item {
font-size: 1.0667em; /* 16px at 15px/em */
display: inline-block; display: inline-block;
padding-top: 8px; padding-top: 0.5em; /* 8px at 16px/em */
width: 25px; width: 1.5625em; /* 25px at 16px/em */
height: 25px; height: 1.5625em; /* 25px at 16px/em */
text-align: center; text-align: center;
font-size: 16px;
cursor: pointer; cursor: pointer;
/* Flex needed here to work around #7511 (90% zoom issues in firefox) */ /* Flex needed here to work around #7511 (90% zoom issues in firefox) */
flex-grow: 1; flex-grow: 1;
@@ -205,27 +205,27 @@
position: relative; position: relative;
overflow: hidden auto; overflow: hidden auto;
display: block; display: block;
width: 247px; width: 16.4667em; /* 247px at 15px/em */
padding-left: 3px; padding-left: 0.2em; /* 3px at 15px/em */
} }
.emoji-popover-emoji-map { .emoji-popover-emoji-map {
height: 250px; height: 16.6667em; /* 250px at 15px/em */
.emoji-popover-subheading { .emoji-popover-subheading {
font-weight: 600; font-weight: 600;
padding: 5px 3px; padding: 0.3333em 0.2em; /* 5px 3px at 15px/em */
} }
} }
.emoji-popover-emoji { .emoji-popover-emoji {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 6px; padding: 0.4em; /* 6px at 15px/em */
cursor: pointer; cursor: pointer;
border-radius: 0.5em; border-radius: 0.5em;
height: 25px; height: 1.6667em; /* 25px at 15px/em */
width: 25px; width: 1.6667em; /* 25px at 15px/em */
&:focus { &:focus {
background-color: var( background-color: var(
@@ -256,17 +256,18 @@
} }
.emoji { .emoji {
top: 6px; height: 1.6667em; /* 25px at 15px/em */
width: 1.6667em; /* 25px at 15px/em */
} }
} }
.emoji-search-results-container { .emoji-search-results-container {
height: 283px; height: 18.8667em; /* 283px at 15px/em */
.emoji-popover-results-heading { .emoji-popover-results-heading {
font-size: 1.1333em; /* 17px at 15px/em */
font-weight: 600; font-weight: 600;
padding: 5px 3px 3px 5px; padding: 0.2941em 0.1765em 0.1765em 0.2941em; /* 5px 3px 3px 5px at 17px/em */
font-size: 17px;
} }
} }
} }
@@ -274,24 +275,24 @@
.emoji-showcase-container { .emoji-showcase-container {
position: relative; position: relative;
background-color: var(--color-background-emoji-picker-popover); background-color: var(--color-background-emoji-picker-popover);
min-height: 44px; min-height: 2.9333em; /* 44px at 15px/em */
width: 250px; width: 16.6667em; /* 250px at 15px/em */
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
.emoji-preview { .emoji-preview {
position: absolute; position: absolute;
width: 32px; width: 2.1333em; /* 32px at 15px/em */
height: 32px; height: 2.1333em; /* 32px at 15px/em */
left: 5px; left: 0.3333em; /* 5px at 15px/em */
top: 6px; top: 0.4em; /* 6px at 15px/em */
margin-top: 0; margin-top: 0;
} }
.emoji-canonical-name { .emoji-canonical-name {
font-size: 1.0667em; /* 16px at 15px/em */
position: relative; position: relative;
top: 12px; top: 0.75em; /* 12px at 16px/em */
margin-left: 50px; margin-left: 3.125em; /* 50px at 16px/em */
font-size: 16px;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;