<ATOM> Powerlineみたいなやつ

ATOMで、Powerlineみたいな、
ステータスバー status barを出すやつないかな？
と探した結果、これがあったので、やってみた。

vim keybindを使う時に少し楽になった。

[medium.com

16/05/24 追記 vim-mode-plusで使う時は、vim-modeをvim-mode-plusにしないといかんかった。
下記、書き換え後のコード。

Menubar -> File --> Stylesheet　に追加する。

/******************  VIM MODE STATUS BAR ****************************************/

// green
@normal-bg: rgb(105, 238, 103);
// blue
@insert-bg: rgb(7, 193, 242);
// yellowish
@visual-bg: rgb(255, 206, 98);


// change the current cursor-line background color
// based on vim mode
atom-text-editor.is-focused {
  &::shadow {
    .cursor-line {
      background: fadeout(@normal-bg, 80%);
    }
  }
  &.insert-mode::shadow {
    .cursor-line {
      background: fadeout(@insert-bg, 92%);
    }
  }
}


// vim mode in the status bar at the bottom
// make it nice and big so you can see it out of the corner of your eye
// without thinking about it.
.status-bar-vim-mode-plus-normal,
.status-bar-vim-mode-plus-insert,
.status-bar-vim-mode-plus-visual {
  font-weight: bold;
  text-align: center;
  font-size: 1.5em;
  width: 18rem;
  text-transform: uppercase;
}


.status-bar-vim-mode-plus-normal {
  background: @normal-bg;
  color: rgb(4, 111, 11);
}

.status-bar-vim-mode-plus-insert {
  background: @insert-bg;
  color: white;
}

.status-bar-vim-mode-plus-visual {
  background: @visual-bg;
  color: rgb(168, 117, 5);
}

// change cursor color in normal mode
atom-text-editor.vim-mode-puls.normal-mode.is-focused {
  &::shadow // shadow-DOM enabled
  {
    .cursor {
      background-color: @normal-bg;
    }
  }
}

// visual mode and selected text
atom-text-editor::shadow .selection .region {
  background-color: fadeout(@visual-bg, 75%);
}
/******************  VIM MODE STATUS BAR ****************************************/