atom-material-ui custom

styles.less

@import "octicon-mixins";
@import "syntax-variables";
@import "ui-variables";

@font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@font-size: 14px;
 
@gutter-width: 6rem;

/*
* Set rounded font-size for better rendering.
*/
atom-workspace {
  font-family: @font-family;
  font-size: (11rem / @font-size);
}
 
/*
* Increase readability of the minimap.
*/
html,
atom-text-editor {
  atom-text-editor-minimap {
    canvas {
      left: 3px;
    }
  }
}

/*
* Title bar.
*/
.title-bar {
  font-size: 11px;
  font-weight: 300;
  
  .amu-panel-contrast & {
    background-color: @tool-panel-background-color;
  }
}

.list-group,
.list-tree,
.tab-bar .tab {
  .icon::before {
    font-size: 13px !important;
    height: 1em;
    margin-right: 0.6em;
    top: 0;
    vertical-align: text-top;
    width: 1em;
  }
}

.link,
.text {
  &.icon {
    &::before {
      margin-left: 0;
      margin-right: 0.5em;
    }
  }
}

/*
* Increate readability of the lists.
*/
.list-group,
.list-tree {  
  li:not(.list-nested-item),
  li.list-nested-item > .list-item {
    font-weight: 300;
  }
    
  li.expanded,
  li.selected,
  li[class*="status-"] {
    &:not(.list-nested-item),
    &.list-nested-item > .list-item {
      .icon::before {
        opacity: 1;
      }
    }
  }
  
  .icon::before {
    opacity: 0.25;
  }
  
  span.name {
    display: inline-block;
    line-height: 1em;
  }
  
  &.has-collapsable-children {
    li.list-nested-item > .list-item {
      &::before {
        margin-right: 0.25em;
        top: 1px;
      }
    }
  }
  
  /*
  * Compact tree view.
  */
  .amu-compact-tab-bar & {
    font-size: 11px;
    
    li:not(.list-nested-item),
    li.list-nested-item > .list-item {
      line-height: (28em / 11);
    }
      
    li.selected::before {
      height: (28em / 11);
    }
    
    &.has-collapsable-children {
      li.list-nested-item {
        > .list-group,
        > .list-tree {
          > li:not(.list-item) {
            padding-left: 0;
          }
        }
      }
        
      li.list-item,
      li.list-nested-item > .list-tree {
        margin-left: 0;
        padding-left: 1rem;
      }
    }
  }
}

/*
* Make project header fixed on top.
*/
.tree-view {
  @tree-view-background-color: darken(@app-background-color, 1.5%);
  
  overflow: hidden;
  
  > .list-tree {
    height: 100%;
    overflow: scroll;
    padding: 0;

    > .project-root {    
      > .list-item.project-root-header {
        background-color: fade(@tree-view-background-color, 80%);
        border-bottom: 1px solid fade(lighten(@tree-view-background-color, 5%), 80%);
        color: fade(lighten(@text-color, 15%), 90%);
        font-size: 16px;
        font-weight: 500;
        line-height: 2.6em;
        height: 2.6em;
        padding: 0 1em;
        z-index: 5;
        
        span.name {
          font-size: 11px;
        }
        
        &::before {
          display: none !important;
        }
        
        + .list-tree {
          position: relative;
        }
      }
      
      &:first-child {
        padding-top: 3.25rem;
        
        > .project-root-header {
          left: 0;
          position: absolute;
          right: 0;
          top: 0;
          width: 100%;
        }
      }
      
      &.selected::before {
        display: none;
      }
    }
  }
  
  .scrollbars-visible-always & {
    ::-webkit-scrollbar-thumb {
      border-color: @tree-view-background-color;
    }
  }
}

/*
* Reverse icons `font-size` to original ones to prevent blurring on non-retina screens.
*/
.tool-bar,
.amu-compact-tab-bar .tool-bar {  
  &.tool-bar-12px {
    .tool-bar-btn-size(12px);
  }  
  &.tool-bar-16px {
    .tool-bar-btn-size(16px);
  }  
  &.tool-bar-24px {
    .tool-bar-btn-size(24px);
  }  
  &.tool-bar-32px {
    .tool-bar-btn-size(32px);
  }

  .tool-bar-btn-size(@size) {
    font-size: @size;
    line-height: 2.5em;
    
    .tool-bar-btn {
      font-size: inherit;
      height: 2.5em;
      width: 2.5em;
      
      &:before {
        font-size: inherit;
        line-height: 2.5em;
      }
    }
    
    &.tool-bar-vertical .tool-bar-spacer {
      margin: 0 0.25em;
      width: 2em;
    }
    
    &.tool-bar-horizontal .tool-bar-spacer {
      height: 2em;
      margin: 0.25em 0;
    }
  }
  
  .amu-panel-contrast & {
    &.tool-bar-horizontal {
      &.tool-bar-top {
        background: @tool-panel-background-color;
      }
    }
  }
}

/*
* Make gutter column semi-transparent.
*/
atom-text-editor:not(.mini) {
  overflow: hidden;
  
  .scroll-view {
    padding-left: @gutter-width;
    
    ~ atom-overlay {
      margin-left: 25px;
    }
  }
  
  .scrollbar-corner,
  .horizontal-scrollbar,
  .vertical-scrollbar {
    display: none;
  }
  
  .gutter-container {
    background-color: fade(@syntax-background-color, 94%);
    display: block;
    left: 0;
    position: absolute;
    z-index: 1;
  }
  
  .line-numbers,
  .line-numbers > div,
  .custom-decorations {
    background-color: transparent !important;
  }
  
  .line-number[data-buffer-row="-1"] {
    visibility: hidden;
  }
  
  .indent-guide-improved {
    margin-left: @gutter-width;
  }
}

/*
* Change the color of guides (requires `indent-guide-improved` plugin).
*/
.indent-guide-improved {
  background-color: fade(@text-color, 10%);
  
  &.indent-guide-stack {
    background-color: fade(@text-color, 15%);
    
    &.indent-guide-active {
      background-color: fade(@text-color, 40%);
    }
  }
}

/*
* Change the size and color scrollbars.
*/
.scrollbars-visible-always {
  ::-webkit-scrollbar {
    width: 0.9rem;
    height: 0;
    
    &-corner,
    &-track {
      background: transparent;
    }
    
    &-thumb {
      background-color: @scrollbar-color;
      border: 4px solid @app-background-color;
      border-radius: 3px;
      
      &:hover {
        background-color: @scrollbar-color;    
      }
    }
  }
  
  .atom-dock-toggle-button {
    &.left {
      margin-left: -4px;
    }
  }
}

/*
* Increase readability of tab bars.
*/
.tab-bar,
.amu-compact-tab-bar .tab-bar {
  background-color: @tab-bar-background-color; 
  font-size: 16px;
  height: 2.5em;
  line-height: 2.5em; 
  max-height: none;
  
  .tab {
    border-radius: 4px 4px 0 0;
    color: @text-color;
    font-weight: 300;
    height: inherit;
    line-height: inherit;
    min-width: 6rem;
    padding: 0 8px;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    
    &::after {
      border-radius: 4px 4px 0 0;
      bottom: auto;
      top: 0;
    }
    
    .title {
      color: inherit;
      font-size: 10px;
      margin: 0;
      padding: 1px 0 0;
      -webkit-mask-image: linear-gradient(to right, #ffffff 70%, rgba(255, 255, 255, 0) 100%);
      
      &[data-path]::before {
        font-size: 12px !important;
        margin-right: 0.5em !important;
        opacity: 0.4;
      }
      
      &.status-added,
      &.status-ignored,
      &.status-modified,
      &.status-removed,
      &.status-renamed {
        color: inherit;
        
        &[data-path]::before {
          opacity: 1; 
        }
      }
      
      &.status-added::before {
        color: @text-color-added !important;
      }
      
      &.status-ignored::before {
        color: @text-color-ignored !important;
      }
      
      &.status-modified::before {
        color: @text-color-modified !important;
      }
      
      &.status-removed::before {
        color: @text-color-removed !important;
      }
      
      &.status-renamed::before {
        color: @text-color-renamed !important;
      }
    }
    
    .close-icon {
      line-height: inherit;
      top: 0;
    }
    
    &.modified,
    &.pinned,
    &:hover {
      .title {
        padding-right: 18px;
      }
    }
    
    &.modified,
    &.pinned {
      &:not(:hover) {
        .close-icon {
          border: 0;
          height: auto;
          right: 16px;
          top: 0;
          transform: scale(1);
          width: auto;
        }
      }
    }
    
    &.modified:not(:hover) .close-icon {
      .octicon(primitive-dot, 12px);
    }
    
    &.pinned:not(:hover) .close-icon {
      .octicon(lock, 10px);
    }
    
    &.active {
      background-color: @syntax-background-color;
      color: rgba(255, 255, 255, 0.8);
    }
  }
  
  .amu-panel-contrast & {
    background-color: @tab-bar-background-color;
  }
  
  .horizontal > .vertical > .panes > .pane > & {
    background-color: darken(@app-background-color, 1.5%);   
    box-sizing: content-box; 
    height: 2.3em;
    line-height: 2.3em; 
    padding-top: 0.3em;
  }
}

.tab-bar {
  .tab {
    &[data-type="TreeView"] {
      &.active {
        &::after {
          display: block;
        }
      }
    }
  }
}

/*
* Modals
*/
atom-overlay,
atom-panel.modal,
.overlay {
  background-color: @app-background-color;
  border: 0;
  border-radius: @component-border-radius;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.35), 0 1px 5px 0px rgba(0, 0, 0, 0.15) !important;
  padding: 0;
  
  &.from-top {
    top: 20vh;
    
    .from-top {
      position: relative;
      top: 0;
    }
  }
  
  atom-text-editor[mini] {
    background: transparent;
    box-shadow: none;
    font-size: 1.5em;
    line-height: 1.5em;
    margin: 0;
    padding: 1em;
  }
  
  &.select-list,
  & .select-list {
    ol,
    ul {
      &.list-group,
      &.list-tree {
        border-top: 1px solid darken(@text-color, 40%);
        margin: 0;
        
        li {
          transition: 400ms color ease;
          
          .character-match {
            font-weight: 600;
          }
          
          &:hover {
            background: transparent;
            color: @text-color-highlight;
          }
          
          &.selected {
            background: @background-color-selected;
            color: @accent-text-color;
          }
        }
      }
    }
  }
        
  .no-icon {
    padding-left: 0;
  }
  
  .key-binding {
    color: inherit;
    margin-left: 0.5em;
  }
  
  .secondary-line {
    font-size: 0.909090909em;
    line-height: 1.75em;
    opacity: 0.75;
  }
  
  .text-smaller {
    padding: 1em 0.5em;
  }
  
  .scrollbars-visible-always & {
    ::-webkit-scrollbar {
      height: 0;
      width: 0;
      
      &-corner,
      &-track {
        background: transparent;
      }
      
      &-thumb {
        background-color: @scrollbar-background-color;
        border-width: 0;
        border-radius: 3px;
        
        &:hover {
          background-color: @scrollbar-color;    
        }
      }
    }
  }
} 

/*
* Autocomplete suggestion list.
*/
autocomplete-suggestion-list {
  &.select-list.popover-list {
    margin-left: 0 !important;
    
    .suggestion-description {
      background: tint(@tool-panel-background-color, 2%);
      border-top: 1px solid tint(@tool-panel-background-color, 10%);
      padding: 7px;
      
      > * {
        font-size: 10px;
        font-family: @font-family;
      }
    }
    
    .list-group li {    
      .left-label {
        font-weight: 600; 
      }
      
      .right-label {
        padding-left: 0.75em;
      }
      
      .icon {
        .icon-letter {
          font-size: inherit;
          line-height: inherit;
          top: 0;
        }
      }
      
      &.selected {
        .icon {
          color: #fff;
        }
      }
    }
  }
}

atom-overlay.autocomplete-plus {
  margin-left: 8px;
}

/*
* git-control
*/
.git-control {
  .menu {
    .item {
      div {
        min-width: 40px;
      }
    }
    
    .icon {
      &.large::before {
        font-size: 16px;
        line-height: 24px;
        height: 24px;
      }
    }
  }
  
  .domain {
    width: 60%;
  }
  
  .sidebar {
    width: 40%;
  }
  
  .logger {
    background-color: @app-background-color;
    height: 29%;
    padding: 20px;
    
    pre {
      color: @text-color;
    }
  }
}

/*
* linter
*/
.linter-status-count {
  display: inline-block;
  line-height: 1rem;
  vertical-align: text-top;
  
  > a {
    background-color: tint(@app-background-color, 1%);
    display: inline-block;
    min-width: 1.5em;
    text-align: center;
    
    .icon {
      display: none;
    }
    
    &.text-error,
    &.text-info,
    &.text-warning {
      font-weight: 500;
    }
    
    &.text-error {
      background-color: @text-color-error;
      color: contrast(@text-color-error); 
    }
    
    &.text-info {
      background-color: @text-color-info;
      color: contrast(@text-color-info); 
    }
    
    &.text-warning {
      background-color: @text-color-warning;
      color: contrast(@text-color-warning); 
    }
  }
}

#linter-tooltip {
  position: relative;

  linter-message {
    padding: 2px 8px 2px 0;
    
    &.error {
      background-color: @text-color-error;
      color: fade(contrast(@text-color-error), 85%);
      
      a {
        color: contrast(@text-color-error);
      }
    }
    
    &.info {
      background-color: @text-color-info;
      color: fade(contrast(@text-color-info), 85%);
      
      a {
        color: contrast(@text-color-info);
      }
    }
    
    &.warning {
      background-color: @text-color-warning;
      color: fade(contrast(@text-color-warning), 85%);
      
      a {
        color: contrast(@text-color-warning);
      }
    }
    
    &:last-child {
      &::before {
        top: -6px;
      }
    }
  }
}

z-analytics.md