smooth out jump and clean up CSS a little bit

.dist/infiniteScroller.js

@@ -142,12 +142,19 @@ class InfiniteScroller {
         }
         console.log(element, id, ":3");
         if (element) {
-            element.scrollIntoView();
             if (flash) {
+                element.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center"
+                });
+                await new Promise(resolve => setTimeout(resolve, 1000));
                 element.classList.remove("jumped");
                 await new Promise(resolve => setTimeout(resolve, 100));
                 element.classList.add("jumped");
             }
+            else {
+                element.scrollIntoView();
+            }
         }
         else {
             for (const thing of this.HTMLElements) {

webpage/infiniteScroller.ts

@@ -141,11 +141,18 @@ class InfiniteScroller{
         }
         console.log(element,id,":3");
         if(element){
-            element.scrollIntoView();
+
             if(flash){
+                element.scrollIntoView({
+                    behavior:"smooth",
+                    block:"center"
+                });
+                await new Promise(resolve => setTimeout(resolve, 1000));
                 element.classList.remove("jumped");
                 await new Promise(resolve => setTimeout(resolve, 100));
                 element.classList.add("jumped");
+            }else{
+                element.scrollIntoView();
             }
         }else{
             for(const thing of this.HTMLElements){

webpage/style.css

@@ -76,19 +76,16 @@ th {
 }
 
 .jumped{
-	animation-duration: .5s;
+	animation-duration: 1.3s;
 	animation-name: jumped;
 }
 @keyframes jumped{
-	0% {
+	0%,100% {
 		background-color: transparent;
 	}
 	50% {
 		background-color: var(--message-jump);
 	}
-	100% {
-		background-color: transparent;
-	}
 }
 .messagediv{
 	overflow: hidden;
@@ -1483,18 +1480,12 @@ span {
 	box-sizing: border-box;
 }
 @keyframes goout {
-	0%{
+	0%,100%{
 		opacity:0;
 	}
-	5%{
+	5%,90%{
 		opacity:1;
 	}
-	90%{
-		opacity:1;
-	}
-	100%{
-		opacity:0;
-	}
 }
 
 #register{
@@ -1511,4 +1502,4 @@ span {
 }
 form div{
 	width:100%;
-}
+}

webpage/themes.css

@@ -103,7 +103,7 @@
 	--embed: #f2f3f5;
 	--link: #3333ee;
 	--discovery-bg: #c6c6d8;
-	--message-jump:#52558a;
+	--message-jump:#ccceff;
 }
 .Light-theme {
 	color-scheme: light;
@@ -162,5 +162,5 @@
 	--embed: #cdccd1;
 	--link: #5566cc;
 	--discovery-bg: #c6c6d8;
-	--message-jump:#52558a;
+	--message-jump:#ccceff;
 }