atom/static/tree-view.css

.tree-view {
  position: relative;
  height: 100%;
  background: #1e1e1e;
  overflow: auto;
  cursor: default;
  -webkit-user-select: none;
  border-right: 2px solid #191919;
  min-width: 100px;
  z-index: 2;
  padding-left: 12px;
}

.tree-view .entry {
  text-shadow: 0 -1px 0 #000;
}

.tree-view .entries {
  margin-left: 12px;
}

.tree-view .entries .file .name {
  margin-left: 15px;
}

.tree-view .directory.selected .header,
.tree-view .directory.selected > .header .name,
.tree-view .selected > .name {
  color: #d2d2d2;
}

.tree-view .selected > .highlight {
  background-image: -webkit-linear-gradient(#4e4e4e, #434343);
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  margin-top:-24px;
  z-index: -1;
}

.tree-view .entry.file .name {
  display: block;
}

.tree-view .disclosure-arrow {
  display: inline-block;
}

.tree-view .directory .header {
  color: #bebebe;
}

.tree-view .file {
  color: #7d7d7d;
}

.tree-view .entry:hover,
.tree-view .directory .header:hover .name,
.tree-view .directory .header:hover .disclosure-arrow  {
  color: #ebebeb;
}

.tree-view .file .name,
.tree-view .directory .header {
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 10px;
}

.tree-view .ignored {
  color: #555;
}

.tree-view-dialog {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: white;
  border: 2px solid #222;
  -webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 0, .5);
}

.tree-view .directory .header .name,
.tree-view .file .name {
  position: relative;
  padding-left: 21px;
}

.tree-view .directory .header .name:before,
.tree-view .file .name:before {
  font-family: 'Octicons Regular';
  font-size: 16px;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  left: 0;
}

.tree-view .disclosure-arrow:before {
  font-family: 'Octicons Regular';
  font-size: 12px;
  width: 12px;
  height: 12px;
  line-height: 16px;
  margin-right: 3px;
  -webkit-font-smoothing: antialiased;
}

.tree-view .directory .header .name:before {
  content: "\f016";
  top: -5px;
}

.tree-view .file .text-name:before {
  content: "\f011";
  top: -2px;
}

.tree-view .file .image-name:before {
  content: "\f012";
  top: -2px;
}

.tree-view .file .compressed-name:before {
  content: "\f013";
  top: -2px;
}

.tree-view .file .pdf-name:before {
  content: "\f014";
  top: -2px;
}

.tree-view .directory > .header .disclosure-arrow:before {
  content: "\f05a";
}

.tree-view .directory.expanded > .header .disclosure-arrow:before {
  content: "\f05b";
}