CRT Styling and Feel for the Atom Text Editor

atom.stylesheet.less

atom-text-editor {
  // CRT Styling taken from https://codepen.io/lbebber/pen/XJRdrV
  // Begin CRT Styling
  background: #121010;
  position: relative;
  overflow: hidden;

  // flicker
  &::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
  }

  // scanlines
  &::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:
      linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
      linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.06),
        rgba(0, 255, 0, 0.02),
        rgba(0, 0, 255, 0.06)
      );
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
  }
  // End CRT Styling

  // Add font ligature support
  text-rendering: optimizeLegibility;

  // Add a little 1337 hacker glow
  text-shadow: 0px 0px 2.5px;
}

Scanlines as a PNG