Adjust cursor animation

openprotest · May 16, 2024 · 79479fb · 79479fb
1 parent 5180368
commit 79479fb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 28 deletions.
diff --git a/Protest/Front/terminal.css b/Protest/Front/terminal.css
@@ -40,40 +40,27 @@
 	z-index: 1;
 	width: 3px;
 	height: 20px;
-	transition: .25s;
-}
-
-.terminal-cursor > div {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	opacity: 0;
 	border-radius: 1px;
 	background-color: var(--clr-accent);
 	box-shadow: var(--clr-accent) 0 0 2px;
-}
+	display: none;
 
-.terminal-content:focus > .terminal-cursor > div {
-	animation: terminal-cursor 1.2s infinite;
+	transition: .25s;
 }
 
-@keyframes terminal-cursor {
-	0%  {opacity:.1}
-	30% {opacity:1}
-	70% {opacity:1}
-	100%{opacity:.1}
+.terminal-content:focus > .terminal-cursor {
+	display: initial;
 }
 
 @keyframes terminal-blinking {
-	0%  {opacity:.1}
-	30% {opacity:1}
-	70% {opacity:1}
-	100%{opacity:.1}
+	20%{opacity:1}
+	50%{opacity:.1}
+	80%{opacity:1}
 }
 
 @keyframes terminal-shake {
-	10%, 90%      {transform:translateX(-1px)}
-	20%, 80%      {transform:translateX(2px)}
-	30%, 50%, 70% {transform:translateX(-4px)}
-	40%, 60%      {transform:translateX(4px)}
+	15%, 85% {opacity:1; transform:Rotate(-5deg)}
+	30%, 70% {opacity:1; transform:Rotate(10deg)}
+	40%, 60% {opacity:1; transform:Rotate(-18deg)}
+	50% {opacity:1; transform:Rotate(18deg)}
 }
diff --git a/Protest/Front/terminal.js b/Protest/Front/terminal.js
@@ -45,8 +45,6 @@ class Terminal extends Window {
 		this.cursorElement = document.createElement("div");
 		this.cursorElement.className = "terminal-cursor";
 
-		this.cursorElement.appendChild(document.createElement("div"));
-
 		this.statusBox = document.createElement("div");
 		this.statusBox.className = "terminal-status-box";
 		this.statusBox.textContent = "Connecting...";
@@ -327,8 +325,8 @@ class Terminal extends Window {
 
 			case "\x07":
 				if (this.params.bell) this.Bell();
-				this.cursorElement.style.animation = "terminal-shake .3s 1";
-				setTimeout(()=>{ this.cursorElement.style.animation = ""; }, 300);
+				this.cursorElement.style.animation = "terminal-shake .4s 1";
+				setTimeout(()=>{ this.cursorElement.style.animation = "terminal-blinking 1.2s infinite"; }, 400);
 				break;
 
 			//TODO: