Fix: #824 文字サイズを調整しても絵文字のサイズが大きくならない

kmycode · Aug 28, 2024 · d9ffbb9 · d9ffbb9
1 parent 5ffd759
commit d9ffbb9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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;
 }