diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 9a642a04bf..1535a8f058 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -49,22 +49,28 @@ body { &.content-font-size { &__large { --content-font-size: 18px; + --content-emoji-size: 24px; --content-line-height: 27px; --detail-content-font-size: 25px; + --detail-content-emoji-size: 32px; --detail-content-line-height: 32px; } &__x_large { --content-font-size: 22px; + --content-emoji-size: 32px; --content-line-height: 30px; --detail-content-font-size: 30px; + --detail-content-emoji-size: 42px; --detail-content-line-height: 39px; } &__xx_large { --content-font-size: 30px; + --content-emoji-size: 42px; --content-line-height: 44px; --detail-content-font-size: 40px; + --detail-content-emoji-size: 56px; --detail-content-line-height: 52px; } } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 73de19ffdd..ad9079c34d 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1011,9 +1011,9 @@ body > [data-popper-placement] { } .emojione { - min-width: 20px; + min-width: var(--content-emoji-size); max-width: min(10em, 100%); - height: 20px; + height: var(--content-emoji-size); margin: -3px 0 0; } @@ -1742,9 +1742,9 @@ body > [data-popper-placement] { line-height: var(--detail-content-line-height); .emojione { - min-width: 24px; + min-width: var(--detail-content-emoji-size); max-width: min(10em, 100%); - height: 24px; + height: var(--detail-content-emoji-size); margin: -1px 0 0; } diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 9f16f3daa8..0ef996aaf3 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -117,7 +117,9 @@ $font-monospace: 'mastodon-font-monospace' !default; --on-surface-color: #{transparentize($ui-base-color, 0.5)}; --avatar-border-radius: 8px; --content-font-size: 15px; + --content-emoji-size: 20px; --content-line-height: 22px; --detail-content-font-size: 19px; + --detail-content-emoji-size: 24px; --detail-content-line-height: 24px; }