From 6f41fb295ee46e91ae8530e5f7aa0510315ff88c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Mon, 31 Jul 2023 00:46:04 +0200
Subject: [PATCH] Zoom on emojis on hover

---
 TangerineUI-purple.css                          | 17 +++++++++++++++++
 TangerineUI.css                                 | 17 +++++++++++++++++
 .../layout-single-column.scss                   | 17 +++++++++++++++++
 .../tangerineui/layout-single-column.scss       | 17 +++++++++++++++++
 4 files changed, 68 insertions(+)

diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index 77861b2..a275a9a 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -735,6 +735,20 @@ body.layout-single-column  {
 
 
 
+/* Zoom on emojis on hover (in post content only */ 
+.layout-single-column .status__content { /* So the emoji doesn't clip out when zoomed on. */
+    overflow: visible;
+}
+.layout-single-column .status__content .emojione {
+    transition: transform .8s .8s;
+}
+.layout-single-column .status__content .emojione:hover {
+    transform: scale(2.5);
+}
+
+
+
+
 /* 💬 Posts
    -------- */
 .layout-single-column .reply-indicator__content,
@@ -1204,6 +1218,9 @@ body.layout-single-column  {
 .layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper {
     width: 46px;
 }
+.layout-single-column .status__prepend .muted .emojione {
+    opacity: 1;
+}
 .layout-single-column .status-card,
 .layout-single-column .status-card.compact {
     background-color: var(--color-content-secondary-bg);
diff --git a/TangerineUI.css b/TangerineUI.css
index 9263c93..e3002fb 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -735,6 +735,20 @@ body.layout-single-column  {
 
 
 
+/* Zoom on emojis on hover (in post content only */ 
+.layout-single-column .status__content { /* So the emoji doesn't clip out when zoomed on. */
+    overflow: visible;
+}
+.layout-single-column .status__content .emojione {
+    transition: transform .8s .8s;
+}
+.layout-single-column .status__content .emojione:hover {
+    transform: scale(2.5);
+}
+
+
+
+
 /* 💬 Posts
    -------- */
 .layout-single-column .reply-indicator__content,
@@ -1204,6 +1218,9 @@ body.layout-single-column  {
 .layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper {
     width: 46px;
 }
+.layout-single-column .status__prepend .muted .emojione {
+    opacity: 1;
+}
 .layout-single-column .status-card,
 .layout-single-column .status-card.compact {
     background-color: var(--color-content-secondary-bg);
diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss
index 77861b2..a275a9a 100644
--- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss
+++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss
@@ -735,6 +735,20 @@ body.layout-single-column  {
 
 
 
+/* Zoom on emojis on hover (in post content only */ 
+.layout-single-column .status__content { /* So the emoji doesn't clip out when zoomed on. */
+    overflow: visible;
+}
+.layout-single-column .status__content .emojione {
+    transition: transform .8s .8s;
+}
+.layout-single-column .status__content .emojione:hover {
+    transform: scale(2.5);
+}
+
+
+
+
 /* 💬 Posts
    -------- */
 .layout-single-column .reply-indicator__content,
@@ -1204,6 +1218,9 @@ body.layout-single-column  {
 .layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper {
     width: 46px;
 }
+.layout-single-column .status__prepend .muted .emojione {
+    opacity: 1;
+}
 .layout-single-column .status-card,
 .layout-single-column .status-card.compact {
     background-color: var(--color-content-secondary-bg);
diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss
index 9263c93..e3002fb 100644
--- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss
+++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss
@@ -735,6 +735,20 @@ body.layout-single-column  {
 
 
 
+/* Zoom on emojis on hover (in post content only */ 
+.layout-single-column .status__content { /* So the emoji doesn't clip out when zoomed on. */
+    overflow: visible;
+}
+.layout-single-column .status__content .emojione {
+    transition: transform .8s .8s;
+}
+.layout-single-column .status__content .emojione:hover {
+    transform: scale(2.5);
+}
+
+
+
+
 /* 💬 Posts
    -------- */
 .layout-single-column .reply-indicator__content,
@@ -1204,6 +1218,9 @@ body.layout-single-column  {
 .layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper {
     width: 46px;
 }
+.layout-single-column .status__prepend .muted .emojione {
+    opacity: 1;
+}
 .layout-single-column .status-card,
 .layout-single-column .status-card.compact {
     background-color: var(--color-content-secondary-bg);