From b5298c68da119b2c40e364d33fabaaac938e3466 Mon Sep 17 00:00:00 2001
From: liquidev <liquidev@tutanota.com>
Date: Thu, 8 Feb 2024 11:49:17 +0100
Subject: [PATCH] add hover animation for emojis

---
 static/css/main.css | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 48e3a58..9c816fd 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -358,17 +358,19 @@ img[is="th-emoji"] {
 /* And also style emoji tooltips. */
 
 .emoji-wrapper {
+    --transition-duration: 0.2s;
+
     position: relative;
 }
 
 .emoji-tooltip {
-    display: none;
+    display: flex;
     flex-direction: column;
     align-items: center;
 
     position: absolute;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateX(-50%) translateY(-10%) scale(0.8);
     width: max-content;
     z-index: 100;
 
@@ -376,10 +378,20 @@ img[is="th-emoji"] {
     padding: 8px;
     margin-top: 8px;
     border-radius: 6px;
+
+    transition:
+        opacity var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1),
+        filter var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1),
+        transform var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1);
+    opacity: 0%;
+    filter: blur(3px);
+    pointer-events: none;
 }
 
 .emoji-wrapper:hover .emoji-tooltip {
-    display: flex;
+    opacity: 100%;
+    filter: blur(0px);
+    transform: translateX(-50%) scale(1.0);
 }
 
 .emoji-tooltip img {