CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-07-12 21:04:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

info_density: Size and align emoji precisely with line-fitted values.

Browse Source
This commit is contained in:
Karl Stolley 2024-05-10 13:32:14 -05:00 committed by Tim Abbott
parent 1270e4b74b
commit cc3202a1be
2 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/styles/app_variables.css
View File

@ -75,11 +75,16 @@
--base-font-size-px: 14px;
--base-line-height-unitless: 1.214;
--base-maximum-block-height-em: 1.425em;
--base-inline-block-vertical-alignment-em: 0;
--line-fitted-vertical-align-offset-em: 0;
--markdown-interelement-space-px: 5px;
--markdown-interelement-doubled-space-px: calc(
var(--markdown-interelement-space-px) * 2
);
/* Certain elements need to be fitted perfectly to
the line height; the length here can be used to set
precise heights, and in the case of square elements,
a matching precise width as well. */
--length-line-fitted-block: calc(var(--base-line-height-unitless) * 1em);
/* Legacy values */
--legacy-body-line-height-unitless: calc(20 / 14);

27
web/styles/rendered_markdown.css
View File

@ -138,16 +138,23 @@
/* Emoji; sized to be easily understood while not overwhelming text. */
.emoji {
height: calc(20em / 14);
width: calc(20em / 14);
/* "Eyeballed" styles to compensate for inline-block emoji
positioning in messages.
By coordinating the emoji height and width above with the
`line-height` on messages in the future, these properties
should no longer be necessary: */
position: relative;
margin-top: -7px;
top: 3px;
/* The box for emoji is kept below a certain maximum, regardless
of more open line-heights. This prevents emoji from sizing
excessively larger than the surrounding text's content area. */
height: calc(
min(
var(--base-maximum-block-height-em),
var(--length-line-fitted-block)
)
);
width: calc(
min(
var(--base-maximum-block-height-em),
var(--length-line-fitted-block)
)
);
/* We set the alignment programmatically, as an em value. */
vertical-align: var(--line-fitted-vertical-align-offset-em);
}
/* Mentions and alert words */