diff --git a/README.md b/README.md index 40de04cf..5083a9e3 100644 --- a/README.md +++ b/README.md @@ -155,6 +155,7 @@ Xterm.js is used in several world-class applications to provide great terminal e - [**info-beamer hosted**](https://info-beamer.com): Uses xterm.js to manage digital signage devices from the web dashboard. - [**Jumpserver**](https://github.com/jumpserver/luna): Jumpserver Luna project, Jumpserver is a bastion server project, Luna use xterm.js for web terminal emulation. - [**LxdMosaic**](https://github.com/turtle0x1/LxdMosaic): Uses xterm.js to give terminal access to containers through LXD +- [**CodeInterview.io**](https://codeinterview.io): A coding interview platform in 25+ languages and many web frameworks. Uses xterm.js to provide shell access. [And much more...](https://github.com/xtermjs/xterm.js/network/dependents) diff --git a/src/renderer/dom/DomRendererRowFactory.ts b/src/renderer/dom/DomRendererRowFactory.ts index 47232981..4d2143ee 100644 --- a/src/renderer/dom/DomRendererRowFactory.ts +++ b/src/renderer/dom/DomRendererRowFactory.ts @@ -10,6 +10,7 @@ import { DEFAULT_COLOR, INVERTED_DEFAULT_COLOR } from '../atlas/Types'; import { CellData } from '../../BufferLine'; export const BOLD_CLASS = 'xterm-bold'; +export const DIM_CLASS = 'xterm-dim'; export const ITALIC_CLASS = 'xterm-italic'; export const CURSOR_CLASS = 'xterm-cursor'; export const CURSOR_BLINK_CLASS = 'xterm-cursor-blink'; @@ -107,6 +108,10 @@ export class DomRendererRowFactory { charElement.classList.add(ITALIC_CLASS); } + if (flags & FLAGS.DIM) { + charElement.classList.add(DIM_CLASS); + } + charElement.textContent = this._workCell.getChars() || WHITESPACE_CELL_CHAR; if (fg !== DEFAULT_COLOR) { charElement.classList.add(`xterm-fg-${fg}`); diff --git a/src/xterm.css b/src/xterm.css index 2e47b1a1..e80c2524 100644 --- a/src/xterm.css +++ b/src/xterm.css @@ -161,3 +161,7 @@ height: 1px; overflow: hidden; } + +.xterm-dim { + opacity: 0.5; +}