Atom Styles

styles.less

// https://github.com/tonsky/FiraCode/wiki/Atom-instructions
atom-text-editor {
  text-rendering: optimizeLegibility; // Ligatures
  -webkit-font-feature-settings: "liga" off, "calt" off;
}

// Cursor
atom-text-editor .cursor {
  position: absolute;
  border-left: 2px solid;
  border-color: rgba(245, 114, 190, 0.8);
}

atom-text-editor.is-focused .cursor.blink-off {
  visibility: hidden;
}

// Special Highlights
atom-text-editor.editor .markup.underline.link.hyperlink {
  color: #F9EE98;
  text-decoration: underline;
}

atom-text-editor.editor .git-commit.line-too-long.deprecated {
  color: orange;
  text-decoration: none;
}

atom-text-editor.editor .git-commit.line-too-long.illegal {
  color: #ffffff;
  background: #DA2C43;
  opacity: 0.9;
}

// Bracket Matching
atom-text-editor.editor .highlights .highlight .region.bracket-matcher {
  border-width: 2px;
  border-style: solid;
  border-color: rgba(245, 114, 190, 0.8);
  animation: highlight 2s infinite;
}

// Sidebar Tree
.tree-view .entry.directory.status-modified > .header,
.tree-view .entry.file.status-modified {
  font-weight: bold;
}

// New Files
.tab-bar .tab .status-added,
.tree-view .list-tree li:not(.list-nested-item).status-added {
  animation: popcycle 1.5s infinite;
}

atom-text-editor,
atom-text-editor.editor {
  .scroll-view {
    padding-left: 0em;
    box-sizing: border-box;
  }
  .gutter + .scroll-view {
    padding-left: 0;
  }
  .selection {
    // mix-blend-mode: screen;
    .region {
      // background-color: rgba(24, 4, 12, 0.8);
      // mix-blend-mode: overlay;
      background-image: linear-gradient(90deg , rgba(245, 114, 190, 0.6), rgba(79, 130, 180, 1)); // #4ac1ff
    }
  }
}

// Invisible Characters
atom-text-editor.editor .invisible-character {
  opacity: 0.3;
}

@keyframes rainbow {
    0% { color: #ff0000; }
   10% { color: #ff8000; }
   20% { color: #ffff00; }
   30% { color: #80ff00; }
   40% { color: #00ff00; }
   50% { color: #00ff80; }
   60% { color: #00ffff; }
   70% { color: #0080ff; }
   80% { color: #0000ff; }
   90% { color: #8000ff; }
  100% { color: #ff0080; }
}

@keyframes popcycle {
    0% {color: #DB698F;}
   25% {color: #64BCAF;}
   50% {color: #A3D7B2;}
   75% {color: #EDFBC4;}
  100% {color: #F68BAF;}
}