diff --git a/src/Terminal.ts b/src/Terminal.ts index 2a1a4cf69..0cea032d2 100644 --- a/src/Terminal.ts +++ b/src/Terminal.ts @@ -665,9 +665,9 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp this.linkifier.attachToDom(this.element, this._mouseZoneManager); // apply mouse event classes set by escape codes before terminal was attached - this.element.classList.toggle('enable-mouse-events', this.mouseEvents); if (this.mouseEvents) { this._selectionService.disable(); + this.element.classList.add('enable-mouse-events'); } else { this._selectionService.enable(); } diff --git a/src/renderer/dom/DomRenderer.ts b/src/renderer/dom/DomRenderer.ts index 22b50349b..d2c80235f 100644 --- a/src/renderer/dom/DomRenderer.ts +++ b/src/renderer/dom/DomRenderer.ts @@ -165,7 +165,13 @@ export class DomRenderer extends Disposable implements IRenderer { `}`; // Blink animation styles += - `@keyframes blink {` + + `@keyframes blink_box_shadow {` + + ` 50% {` + + ` box-shadow: none;` + + ` }` + + `}`; + styles += + `@keyframes blink_block {` + ` 0% {` + ` background-color: ${this._colors.cursor.css};` + ` color: ${this._colors.cursorAccent.css};` + @@ -181,8 +187,11 @@ export class DomRenderer extends Disposable implements IRenderer { ` outline: 1px solid ${this._colors.cursor.css};` + ` outline-offset: -1px;` + `}` + - `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS} {` + - ` animation: blink 1s step-end infinite;` + + `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}:not(.${CURSOR_STYLE_BLOCK_CLASS}) {` + + ` animation: blink_box_shadow 1s step-end infinite;` + + `}` + + `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_BLINK_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` + + ` animation: blink_block 1s step-end infinite;` + `}` + `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` + ` background-color: ${this._colors.cursor.css};` +