diff --git a/Protest/Front/terminal.css b/Protest/Front/terminal.css index ed6ab550..34022ed7 100644 --- 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)} } \ No newline at end of file diff --git a/Protest/Front/terminal.js b/Protest/Front/terminal.js index d5a0fc3d..c72c27bc 100644 --- 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: