From 090a471744e0f588598cd4d3a47d7f201c26ab4e Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <towerofnix@gmail.com>
Date: Sun, 4 Apr 2021 14:31:14 -0300
Subject: info card animations

---
 static/site.css | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 2 deletions(-)

(limited to 'static/site.css')

diff --git a/static/site.css b/static/site.css
index c62b4f6..e13ec10 100644
--- a/static/site.css
+++ b/static/site.css
@@ -703,15 +703,54 @@ li > ul {
 
 #info-card-container {
     position: absolute;
-    display: none;
 
     margin-right: 10px;
+    padding-left: 3ch;
+    border-top: 1px solid white;
+
+    pointer-events: none; /* Padding area shouldn't 8e interactive. */
+    display: none;
 }
 
-#info-card-container.shown {
+#info-card-container.show,
+#info-card-container.hide {
     display: block;
 }
 
+#info-card-container.show {
+    animation: 0.2s linear forwards info-card-show;
+    transition: top 0.1s, left 0.1s;
+}
+
+#info-card-container.hide {
+    animation: 0.2s linear forwards info-card-hide;
+}
+
+@keyframes info-card-show {
+    0% {
+        opacity: 0;
+        margin-top: -5px;
+    }
+
+    100% {
+        opacity: 1;
+        margin-top: 0;
+    }
+}
+
+@keyframes info-card-hide {
+    0% {
+        opacity: 1;
+        margin-top: 0;
+    }
+
+    100% {
+        opacity: 0;
+        margin-top: 5px;
+        display: none;
+    }
+}
+
 .info-card {
     background-color: rgba(0, 0, 0, 0.8);
     border: 1px dotted var(--primary-color);
@@ -720,6 +759,18 @@ li > ul {
 
     padding: 5px;
     font-size: 0.9em;
+
+    pointer-events: none;
+}
+
+#info-card-container.show .info-card {
+    animation: 0.01s linear 0.2s forwards info-card-become-interactive;
+}
+
+@keyframes info-card-become-interactive {
+    to {
+        pointer-events: auto;
+    }
 }
 
 .info-card-name {
-- 
cgit 1.3.0-6-gf8a5