Improve display of emojis

2 years ago · 6f21905a8b
parent 963c7898b2
commit 6f21905a8b
5 changed files with 2 additions and 28 deletions
--- a/app/soapbox/components/markup.css
+++ b/app/soapbox/components/markup.css
@ -61,7 +61,7 @@

 /* Emojis */
 [data-markup] img.emojione {
-  @apply w-5 h-5;
+  @apply w-5 h-5 m-0;
 }

 /* Hide Markdown images (Pleroma) */
--- a/app/styles/basics.scss
+++ b/app/styles/basics.scss
@ -100,7 +100,7 @@ noscript {
 }

 .emojione {
-  @apply w-5 h-5 -mt-[3px] inline;
+  @apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain;
 }

 // Virtuoso empty placeholder fix.
--- a/app/styles/components/buttons.scss
+++ b/app/styles/components/buttons.scss
@ -113,9 +113,3 @@ a.button {
    margin-right: 0.6em;
  }
 }
-
-.button--welcome {
-  .emojione {
-    margin: -1px 6px 0 -4px;
-  }
-}
--- a/app/styles/components/display-name.scss
+++ b/app/styles/components/display-name.scss
@ -8,12 +8,6 @@
  }
 }

-.muted {
-  .emojione {
-    opacity: 0.5;
-  }
-}
-
 a.account__display-name {
  &:hover strong {
    text-decoration: underline;
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@ -155,20 +155,6 @@
  transition: height 0.4s ease, opacity 0.4s ease;
 }

-.emojione {
-  display: inline-block;
-  font-size: inherit;
-  vertical-align: middle;
-  object-fit: contain;
-  margin: -0.2ex 0.15em 0.2ex;
-  width: 16px;
-  height: 16px;
-
-  img {
-    width: auto;
-  }
-}
-
 .image-loader {
  position: relative;
  width: 100%;