[HTML] Add smooth highlight transition when navigating to message via link

DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css

@@ -1,4 +1,4 @@
-/* === GENERAL === */
+/* === GENERAL === */
 
 body {
     background-color: #36393e;
@@ -54,6 +54,10 @@ a {
     color: rgba(255, 255, 255, 0.2);
 }
 
+.chatlog__message--highlighted {
+    background-color: rgba(114, 137, 218, 0.2);
+}
+
 .chatlog__message--pinned {
     background-color: rgba(249, 168, 37, 0.05);
 }

DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css

@@ -1,4 +1,4 @@
-/* === GENERAL === */
+/* === GENERAL === */
 
 body {
     background-color: #ffffff;
@@ -57,6 +57,10 @@ a {
     color: #747f8d;
 }
 
+.chatlog__message--highlighted {
+    background-color: rgba(114, 137, 218, 0.2);
+}
+
 .chatlog__message--pinned {
     background-color: rgba(249, 168, 37, 0.05);
 }

DiscordChatExporter.Core.Rendering/Resources/HtmlShared.css

@@ -183,6 +183,8 @@ img {
     padding: 2px 5px;
     margin-right: -5px;
     margin-left: -5px;
+    background-color: transparent;
+    transition: background-color 1s ease;
 }
 
 .chatlog__content {

DiscordChatExporter.Core.Rendering/Resources/HtmlShared.html

@@ -22,9 +22,17 @@
 
             if (element !== null && element !== undefined) {
                 event.preventDefault();
-                element.scrollIntoView({
+
+                element.classList.add('chatlog__message--highlighted');
+
+                window.scrollTo({
+                    top: element.getBoundingClientRect().top - document.body.getBoundingClientRect().top - (window.innerHeight / 2),
                     behavior: 'smooth'
                 });
+
+                window.setTimeout(function() {
+                    element.classList.remove('chatlog__message--highlighted');
+                }, 2000);
             }
         }
     </script>