软件atom
atom
Source
Edit
History

atom风格配置

根据自己喜欢的风格配置atom.

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * If you are unfamiliar with LESS, you can read more about it here:
 * http://www.lesscss.org
 */

@custom-font-family: 'MonacoYahei', 'Roboto', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
@setting-view-font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;

@highlight: #80CBC4;

// 自定义，为了使 tree view 更加的紧凑
.tree-view {
  font-family: @custom-font-family;
  font-size: 1.00rem;

  li:not(.list-nested-item), li.list-nested-item > .list-item {
    line-height: 1.80rem; // Edit me for height
  }
  .list-group .selected::before, .list-tree .selected::before {
    height: 1.80rem; // Edit me for height
  }
  .name.icon::before {
    margin: 0 0.5rem 0 0;
  }
  .list-tree.has-collapsable-children .list-nested-item > .list-tree > li,
  .list-tree.has-collapsable-children .list-nested-item > .list-group > li {
    padding-left: 1rem;
  }
  .list-tree.has-collapsable-children li.list-item {
    margin-left: 1.3rem;
  }
  .list-tree.has-collapsable-children .list-nested-item > .list-item::before {
    margin-right: 0.3rem;
  }
  .list-tree > li.list-item:hover {
    color: #ffffff;
  }
  .list-tree > .list-nested-item {
    .icon-file-directory {
      &:hover {
        &::before {
          color: #ffffff;
        }
      }
    }
  }

  .list-tree > .list-nested-item.expanded {
    > .header {
      color: #80CBC4;
    }
  }

  .list-tree > li.list-item.selected {
    color: @highlight;
    &:hover {
      color: @highlight;
    }
  }
}

.editor {
}
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
    font-family:  "MonacoYahei","Monaco","msyh";
    font-size: 1.20rem;
}
.editor .cursor {

}

.settings-view {
  font-family: @setting-view-font-family;
}

#linter-inline a.eslint {
  color: #000000;
}

atom-workspace {
  atom-pane-container {
    atom-pane {
      .tab-bar {
        .tab {
          max-width: 160px;

          .title {
            font-family: @custom-font-family;
            font-size: 1.00rem;
          }
        }
      }
    }
  }
}