Share your stylesheet!


#21

Update for my previous styles.less.

Requires:

  • Atom 1.13.0
  • atom-material-ui
  • one-dark-syntax

Supports:

  • autocomplete-plus
  • file-icons
  • git-plus
  • linter
  • minimap
  • project-manager
  • tool-bar

Configuration:

"*":
  "atom-material-ui":
    colors:
      genAccent: true
      paintCursor: true
    fonts:
      fontSize: 14
    tabs:
      compactTabs: true
      noTabMinWidth: true
    treeView:
      compactList: true
    ui:
      panelContrast: true
  editor:
    fontFamily: "Hack"
    fontSize: 12
    invisibles: {}
    softWrapAtPreferredLineLength: true
  "file-icons":
    coloured: false
    onChanges: true
  "tool-bar":
    fullWidth: false
    iconSize: "16px"

Stylesheet:

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

@editor-background: darken(@syntax-background-color, 1%);
@gutter-width: 4.75rem;

@text-color-subtle: fade(@text-color, 40%);

@tool-panel-background-color: lighten(@syntax-background-color, 6%);

@tab-bar-background-color: lighten(@syntax-background-color, 2%);

@scrollbar-background-color: darken(@text-color, 40%);
@scrollbar-color: @base-color;

/*
 * Custom icons
 */
@import "packages/file-icons/styles/icons";
 
.css3-icon { 
  .devicons; 
  content: "\e601"; 
}

.html5-icon { 
  .devicons; 
  content: "\e696"; 
  font-size: 18px !important;
}

.js-icon { 
  .devicons; 
  content: "\e64e"; 
  font-size: 16px !important;
}

@import "packages/file-icons/styles/file-icons";

.theme-atom-material-ui {
  .entry[is="tree-view-file"] > .icon-file-text {
    &[data-name$=".js"]::before {
      font-size: 16px !important;
    }
  }
}

/*
 * Normalize.
 */
kbd {
  letter-spacing: normal;

  + kbd {
    margin-left: 0.1rem;
  }
}

/*
 * Use system fonts.
 */
atom-workspace {
  font-family: @font-family;
}

atom-panel,
.tab-bar {
  -webkit-font-smoothing: subpixel-antialiased;
}

/*
 * Make gutter column semi-transparent.
 */
atom-text-editor:not(.mini).editor {
  margin-left: @gutter-width;
  
  .editor--private {
    margin-left: -@gutter-width;
  }

  .scroll-view {
    padding-left: @gutter-width;
  }
  
  .gutter-container {
    background-color: transparent;
    display: block;
    left: 0;
    position: absolute;
    z-index: 10;
  }

  .gutter,
  .gutter > div {
    background-color: transparent !important;

    .custom-decorations,
    .line-numbers > div {
      background-color: fade(@syntax-background-color, 96%) !important;
    }
  }
}

/*
 * Increase contrast and readability of the minimap.
 */
html,
atom-text-editor,
atom-text-editor.editor {
  atom-text-editor-minimap {
    background-color: @editor-background;

    canvas {
      left: 3px;
    }

    .minimap-scroll-indicator {
      background: fade(@base-color, 50%);
    }
  }

  // We don't need scrollbar, when we have minimap :)
  .vertical-scrollbar {
    opacity: 0;
    width: 0 !important;
  }
}

/*
 * Increase tree-view readability in large projects and fix problems with ugly
 * rendering of file icons.
 */
.tree-view {
  color: darken(@text-color, 15%);
  font-size: 10px;
  
  .project-root {
    padding-top: 2.5rem;
    
    > .header {
      background-color: rgba(58, 64, 75, 0.8);
      color: rgba(255, 255, 255, 0.9) !important;
      left: 0;
      line-height: 2.5rem !important;
      height: 2.5rem;
      position: fixed !important;
      right: 0;
      top: 23px;
      width: 100%;
      
      &::before {
        display: none !important;
      }

      span {
        color: inherit;
        line-height: inherit;
        padding-left: 0.25rem;
      }
    }
    
    &.selected {
      > .list-item {
        &::after {
          display: none;
        }
      }
    }
  }
  
  .name.icon {
    &::before {
      display: inline-block !important;
      font-size: 1rem;
      height: 1rem;
      line-height: 1rem;
      opacity: 0.3;
      top: 0;
      vertical-align: middle;
      width: 1rem;
    }
    
    &.icon-file-directory {
      font-weight: 500;
    }
  }
  
  .directory.expanded > .header,
  .selected,
  .status-added,
  .status-modified,
  .status-removed,
  .status-renamed {
    > .name.icon {
      &::before {
        opacity: 0.9;
      }
    }
  }
  
  li.status-ignored {
    color: @text-color-subtle;
  }
  
  &:focus {
    li:not(.list-nested-item),
    li.list-nested-item > .list-item {
      &.selected {
        &::before {
          background-color: lighten(@syntax-background-color, 10%);
        }
      }
    }
  }
  
  &.has-collapsable-children .list-nested-item {
    > .list-item::before {
      opacity: 0.2;
      top: 1px;
    }
    
    &:hover {
      > .list-item::before {
        opacity: 0.9;
      }
    }
    
    .list-group,
    .list-tree {
      > li {
        padding-left: 0.65rem;
      }
    }
  }
  
  .compact-tree-view & {
    li:not(.list-nested-item), li.list-nested-item > .list-item {
      line-height: 28px;
    }
  }
}  

/*  
 * Fix problem with set position: fixed for project-root header
 */
.tree-view-scroller,
.tree-view .project-root {
  transform: none;
}

.status-added,
.status-modified,
.status-removed,
.status-renamed {
  color: inherit;
}

/*
 * Toolbar tweaks.
 */
.tool-bar {
  &.tool-bar-vertical {
    background-color: @editor-background;
    padding-top: 0.5rem;

    .tool-bar-btn {
      height: 2.25rem;
      width: 2.25rem;

      &::before {
        line-height: 2.25rem;
      }
    }

    &[class*='tool-bar-'] {
      .tool-bar-spacer {
        margin: 0.25rem 0.5rem;
      }

      &.gutter-bottom {
        &::after {
          box-shadow: none;
        }
      }
    }
  }

  &.tool-bar-horizontal {
    &.tool-bar-top,
    &.tool-bar-bottom {
      background: @tool-panel-background-color;
    }

    .tool-bar-spacer {
      margin: 0.5rem 0.25rem;
    }
  }

  &.tool-bar-16px {
    .tool-bar-btn {
      &::before {
        font-size: 1rem;
      }
    }
  }
}

/*
 * Title Bar
 */
.title-bar {
  background-color: @tool-panel-background-color;
  font-size: 11px;
}

/*
 * Increase readability of tab bars.
 */
.tab-bar {
  background-color: @tab-bar-background-color;

  .tab {
    border-radius: 4px 4px 0 0;
    font-size: 10px;
    font-weight: 300;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    
    &::before {
      display: none;
    }

    .title {
      -webkit-mask-image: linear-gradient(to right, #ffffff 70%, rgba(255, 255, 255, 0) 100%);

      &.icon,
      .file-icons-tab-pane-icon atom-pane &[data-path] {
        &::before {
          font-size: 14px;
          font-weight: normal !important;
          height: 14px;
          margin-right: 0.5rem !important;
          opacity: 0.4;
          width: 14px;
        }
      }
    }
    
    &.active {
      background-color: @syntax-background-color;
      color: rgba(255, 255, 255, 0.8);
    }
  }
  
  .compact-tab-bar & {
    height: 2.8rem;
    padding-top: 0.3rem;
  }
}

/*
 * Change the size and color scrollbars.
 */
.scrollbars-visible-always {
  ::-webkit-scrollbar {
    width: 0.3rem;
    height: 0;
    
    &-corner,
    &-track {
      background: transparent;
    }
    
    &-thumb {
      background-color: @scrollbar-background-color;
      border-radius: 3px;
      
      &:hover {
        background-color: @scrollbar-color;    
      }
    }
  }
}

/*
 * Status bar alignment
 */
status-bar {
  .icon::before {
    text-align: center;
    width: 24px !important;
  }

  .status-bar-left,
  .status-bar-right {
    padding-left: 0;
    padding-right: 0;

    > * {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0.5rem;
      padding-right: 0.5rem;

      &:empty:not([class*="icon-"]) {
        display: none;
      }

      > .inline-block {
        &:first-child {
          padding-left: 0;
        }

        &:last-child {
          padding-right: 0;
        }
      }
    }
  }
}

// Hide selectors plugins
.line-ending-tile,
.encoding-status {
  display: none !important;
}

/*
 * 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%);
    }
  }
}

/*
 * Linter
 */
linter-bottom-container {
  linter-bottom-tab {
    background-color: transparent;
    border: 0;
    color: @text-color-subtle;
    line-height: inherit;
    margin-right: 0.2rem !important;
    padding: 0 0.5rem;
    
    &.active {
      background-color: transparent;
      color: @text-color;
      font-weight: 500;
    }
  }
}

/*
 * Project Manager
 */
.project-manager {
  atom-panel.modal & {
    &.select-list {
      > .text-smaller {
        padding: 0 1rem;
      }
      
      > .list-group {
        .no-icon {
          padding-left: 1.45rem;
        }
        
        .secondary-line {
          font-size: 0.91em;
        }
      }
    }
  }
}

/*
 * Tooltip
 */
.tooltip {
  font-size: 11px;
}

.overlay,
atom-panel.modal,
.select-list.popover-list {
  background-color: @tool-panel-background-color;
  border: 0;
  border-radius: @component-border-radius;
  box-shadow: 0 12px 36px 0 rgba(0, 0, 0, 0.15) !important;
  color: @text-color;
  
  ::-webkit-scrollbar {
    &-corner,
    &-track {
      background: transparent;
    }
    
    &-thumb {
      background-color: @scrollbar-background-color;
      border-radius: 3px;
      
      &:hover {
        background-color: @scrollbar-color;    
      }
    }
  }
}

.overlay,
atom-panel.modal {
  margin-left: -340px;
  overflow: hidden;
  padding: 0;
  width: 680px;
  
  @media (max-width: 768px) {
    left: 50%;
    margin-left: -44%;
    width: 88%;
  }

  &.from-top {
    top: 20%;
    border-top-right-radius: @component-border-radius;
    border-top-left-radius: @component-border-radius;

    & > * {
      padding: 0;
    }
  }

  & > * > *:not(.list-group) {
    margin: @component-padding (@component-padding * 2);
  }

  .list-group,
  .list-tree {
    border-top: 1px solid darken(@text-color, 40%);

    li.list-nested-item > .list-item,
    li:not(.list-nested-item) {
      padding: 0.5em (@component-padding * 2);

      .character-match {
        transition: 400ms color ease;
        font-weight: normal;
      }
    }

    li.selected {
      background: @background-color-selected;
      color: @text-color-highlight;
    }

    li:not(.selected) {
      .character-match {
        color: @text-color;
      }
      
      .secondary-line .character-match {
        color: @app-background-color;
      }
      
      &:hover {
        background: transparent;
        color: @text-color-highlight;
      }
    }
  }
  
  .select-list {
    ol.list-group {
      li {
        border-bottom: 0;
      }
    }
  }

  atom-text-editor[mini],
  atom-text-editor[mini].editor {
    background: @tool-panel-background-color;
    box-shadow: none;
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin: 1.25rem 0;
    padding: 0 1rem;
    
    &.is-focused {
      &::before {
        display: none;
      }
    }
  }
}

.select-list.popover-list,
.autocomplete-suggestion-list {
  .suggestion-description {
    background: @tool-panel-background-color;
  }
  
  atom-text-editor {
    margin-bottom: (@component-padding / 2);
  }

  .list-group li {
    padding-left: (@component-padding / 2);
    transition: 400ms color ease;

    .character-match {
      color: @text-color;
    }

    .left-label,
    .right-label {
      color: @app-background-color;
      font-weight: 600; 
    }

    .word .snippet-completion {
      &,
      &.character-match {
        color: @app-background-color;
      }
    }

    &.selected {
      .word .snippet-completion {
        &,
        &.character-match {
          color: @text-color;
        }
      }
    }
  }
}

styles.less @ gist

Full configuration


#22

I updated my stylesheet with support for atom 1.18.0-beta and atom-material-ui 2.0.

styles.less @ gist

Full configuration

@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;
      }
    }
  }
}

#23

Someone replicate Notepad++ Bespin theme and shortcuts!
Answer with styles.less and keymap.cson pls! :smiley:


#24

I saw thread back when it was posted (I nabbed leedohm’s 3D tree-view at the time), but only just really clocked this trick. Much more elegant than my current methodology, which is setting the invisible character for space to be… a space, it’s just so I can spot tabs without having to see the spaces all the time.


#25

Three main goals from this stylesheet:

  • Reduce gutter width (by about 2/3, which is particularly impactful with multiple panes)
  • Easier to see where the cursor is (colors the highlighted line number & its background)
  • Easier to see the active pane (dims the non-active pane)


@import 'syntax-variables';
@import 'ui-variables';

.github-HunkView,
atom-text-editor {
  // good elegant monospace font
  font-family: "m+ 1mn", "input serif";
  font-size: 15px;
}
// this is mostly dealing with a default very wide gutter - cutting out the
// fat. Particularly with multiple panes. Overall this cuts the gutter
// width by about 2/3
.pane {

  .gutter {
    min-width: 0;

    .line-number {
      padding-left: 0.3em;

      &.git-line-added,
      &.git-line-modified {
        padding-left: 0;
      }

      &.cursor-line {
        background-color: @syntax-background-color;
        // you need this because it's set at 0.6 elsewhere,
        // and so the color doesn't come through
        opacity: 1;
        color: @text-color-info;
      }

      .icon-right {
        padding: 0;
        width: 0.3em;
        // opacity: 0;
      }
    }

    .line-numbers {
      margin-right: 0.3em;
    }
    // https://github.com/atom/bracket-matcher/pull/290#issuecomment-334798251
    .bracket-matcher {
      background-color: @syntax-gutter-background-color;
      opacity: 1;
    }
  }

  .gutter[gutter-name=diagnostics-gutter] {
    // this is the size of the diagnostics icons, which really don't need to be large
    font-size: 0.6em;
  }
}

.pane:not(.active) {
  // inactive pane & gutter is dulled a bit, so you can see the active pane
  .gutter {
    opacity: 0.4;
  }

  ul.tab-bar {
    opacity: 0.5;
  }
}

.github-HunkView-line {
  font-size: #inherit;
}

Full settings here: https://gist.github.com/maxim-lian/33c3ee0565707c601065752edd8170ce

One note: because of how Atom marks the active pane, a single pane will look inactive on load. Once you’ve switched to another Pane (i.e. so there’s an inactive pane somewhere), Atom will mark active & inactive panes correctly for the remainder of the session.


#26

I use Markdown (GFM) a lot and always loved the Abricotine for it’s visual represeantation of headings. As now however, due to Git-Integration I switched to Atom, I woundered if it’s possible to tweak the syntax highlighting to adjust the fontsizes contextually. This is my first attempt and I’m new to CSS - It works, but still struggels with the line-heights. Text, Selection and Numbering may diverge. Can please someone help me further?
Best whiches

// Markdown Styles
.syntax--gfm {
  .syntax--markup.syntax--heading.syntax--heading-1 {
    font-size: 2rem;
    line-height: 2.1rem;
  }
  .syntax--markup.syntax--heading.syntax--heading-2 {
    font-size: 1.7rem;
    line-height: 1.8rem;
  }
  .syntax--markup.syntax--heading.syntax--heading-3 {
    font-size: 1.5rem;
    line-height: 1.6rem;
  }
  .syntax--markup.syntax--heading.syntax--heading-4 {
    font-size: 1.3rem;
    line-height: 1.4rem;
  }
  .syntax--markup.syntax--heading.syntax--heading-5 {
    font-size: 1.1rem;
    line-height: 1.2rem;
  }
}

Screenshot


#27

@georoen I have also been working on a stylesheet that handles markdown nicely. I can’t make lines taller than intended but I can limit their size so larger text can be used without messing up selections

My stylesheet:

@import "syntax-variables";

// Requires `language-markdown`. The default markdown parser will not work.
// More info and recommended settings on github page
// https://pfgithub.github.io/atom-markdown-editor/

// -------------
// Configuration
// -------------

// Settings for the custom indent guide.
@indent-guide: false; // Enable the custom indent guide, like the one shown in the demo screenshot.
	@indent-guide-color-hard-tab: rgba(255,255,255,0.2);
	@indent-guide-color-soft-tab: rgba(255,255,255,0.1);
	@indent-guide-hard-tab-only: true; // Only enable the indent guide for hard tabs.
	@indent-guide-soft-tab-position: 50%; // The character the indent guide is shown at on soft tabs. Find a value that works.
	@indent-guide-hard-tab-position: 250%; // The character the indent guide is shown at on hard tabs. Find a value that works.

// Settings for when invisible characters should be shown.
@invisible-characters: false; // When disabled, only shows important visible characters such as spaces after markdown lines. When enabled, all invisible characters are shown.  Set to false if you usually hide invisible characters in settings, true if you usually show them. Both options require invisible characters enabled in settings.

// Settings for editing markdown files
@markdown: true; // Enable markdown editor additions.
	@markdown-color: true; // Default colors are for the City Lights syntax theme. Disabling this does nothing.
		@markdown-color-text: @syntax-text-color;
		@markdown-color-links: #68A1F0;
		@markdown-color-line: rgba(0,0,0,0.6);
		@markdown-color-solid-line: #111; // The left line on a quote is a "solid" line
		@markdown-color-block-background: rgba(0,0,0,0.2162162162162162);
	@markdown-font-always-monospace: false; // Use a monospace font for all text. When off, monospace fonts are used when it improves readability, such as in code blocks.
	@markdown-list: true; // Enable custom list positioning
		@markdown-list-bullet: true; // Enable replacing list bullet character like `-` or `*` with preview bullet character.
			@markdown-list-bullets: "•", "◦", "▪", "‣"; // List bullet points. As many/few as wanted. Each point is for a different level. Bullet point levels work best with hard tabs and no space before the bullet point.
	@markdown-headings: true; // Enable custom styles for markdown headings. font-size-scale(n%) = font-size: n% of default
		.markdown-heading-1 {.bold; .font-size-scale(140%);}
		.markdown-heading-2 {.bold; .font-size-scale(130%);}
		.markdown-heading-3 {.bold; .italic; .font-size-scale(110%);}
		.markdown-heading-4 {.italic; opacity: 0.8;}
		.markdown-heading-5 {.italic; opacity: 0.6;}
		.markdown-heading-6 {.italic; opacity: 0.4;}
	@markdown-links: true; // Enables custom styling for markdown links.
		.markdown-link-text {.underline;}
		.markdown-link-url {.monospace;}
		.markdown-link-title {.inline-block;}
	@markdown-lines: true; // Enables lines, like those in tables and quotes and horizontal lines.
		@markdown-line-width: 3px; // The width for lines
	@markdown-horizontal-lines: true; // Enables showing horizontal lines as a horizontal line
		@markdown-horizontal-line-style: solid; // CSS Border Style for horizontal lines (`---`)
	@markdown-quote: true; // Enables block styling for quotes.
		@markdown-quote-lines: true; // Enables lines on quote styling. Adjust width with @markdown-line-width above.
		@markdown-quote-background: true; // Enables the background for quotes.
	@markdown-block-code: true; // Enables block styling for code blocks. Syntax highlighting and font is determined by the chosen language, disabling this will keep that styling like monospace font and syntax highlighting.
		@markdown-block-code-background: true; // Enables the background for quotes.
		.markdown-block-code-language-name {.monospace; .inline-block;} // Custom styling for the language name in a code block (```languagename)
	@markdown-tables: true; // Enables styling for markdown tables. Tables are always monospace, even with this off.
		@markdown-table-background: true; // Table backgrounds go past the end of the table.
		@markdown-table-lines: true; // Enables lines rendering in place of characters like | and -
			@markdown-table-lines-vertical: true; // Enables lines rendering in place of |
			@markdown-table-lines-horizontal: true; // Enables lines rendering in place of -. Table lines go past the end of the table.
	@markdown-inline-code: true; // Enables styling for `inline code`.
		.markdown-inline-code-style {.monospace; .inline-block;}
	@markdown-text-styles: true; // Enables custom styling for text things like **bold**. Some styles may still show when this is disabled, the markdown plugin automatically applies these.
		.markdown-text-style-bold {.bold;}
		.markdown-text-style-italic {.italic; opacity: 0.8;}
		.markdown-text-style-strikethrough {.strikethrough;}
	@markdown-indent-guide: true; // Enables the indent guide on markdown. When disabled, invisible characters are shown instead (if enabled in settings).

// Settings for replacing the default fonts
@fonts: false; // Overrides default fonts
	@font-code: Consolas, 'SF Mono', Monaco, 'Courier New', Courier, Monospace;
		@font-code-ligatures: 'DejaVu Sans Code', @font-code; // Font for operators. Use if you want ligatures on operators but don't like the font. Otherwise, can be set to just @font-code
	@font-text: sans-serif; // Font for markdown.

// Settings for animating the cursor
@animate-cursor: false; // Animate the cursor moving, like MS Word.

// Settings for punctuation
@punctuation-style: false; // Custom styling for punctuation and brackets.
	.brackets{opacity: 0.3;}
	.punctuation{opacity: 0.5;}
	@punctuation-style-replace-semi-with-interpunct: true; // Replace `;` with `·`

// Settings for comments
@comment-style: false; // Custom styling for comments
	.comment-style-inline-comment{.inline-block; .text-font;}
	.comment-style-multiline-comment{.block; .text-font;}

// Settings for escapes in strings
@string-style: false;
	@string-escape-style: true;
		@string-escape-backslash-color: rgba(255,255,255,0.2);
		@string-escape-character-color: #33CED8;
	@string-style-custom: false;
		.string-style{.text-font;}

// -------------------
// Mixin Documentation
// -------------------

.docs{
	// Text Styles
	.bold; // Sets font-weight to bold
	.italic; // Sets font-style to italic
	.underline; // Sets text-decoration to underline
	.strikethrough; // Does a gigantic mess making pseudoelements sized to strikethrough some text

	.monospace; // Sets the font to the chosen code font or the default monospace
	.text-font; // Sets the font to the chosen text font

	.font-size-scale(100%); // Sets the font size to n% of the default font size

	.inline-block; // Puts a box arond the text, like inline code blocks
	.block // Sets the line background to the chosen background color, like normal code blocks

}


// ------------------------
// Configuration ends here.
// ------------------------



















// -----------------
// Code starts here.
// -----------------


@line-height-px: ~"calc(var(--editor-font-size) * var(--editor-line-height))";

.inline-block(){
	background-color: @markdown-color-block-background;
	padding: 4px;
	border-radius: 4px;
}
.monospace(){
	font-family: var(--editor-font-family);
}
.text-font(){
	font-family: @font-text;
}
.font-size-scale(@percentage) {
	@number-percentage: (unit(@percentage) / 100);
	font-size:~"calc(var(--editor-font-size) * @{number-percentage})"
}
.bold{
	font-weight: bold;
}
.italic{
	font-style: italic;
}
.underline{
	text-decoration: underline;
}
.strikethrough{
	& > .syntax--punctuation{
		&:first-child, &:last-child{
			visibility:hidden;
		}
	}
	position:relative;

	&::before{
		content: "";
		width: 100%;
		height: 1px;
		background: @markdown-color-text;
		position: absolute;
		top: 50%;
		//transform:translate(0,-50%);
		left: 0;
	}
}

.block{
	&::after{
		content:"";
		position:absolute;
		left:0;
		width:100%;
		height:@line-height-px;
		background-color:@markdown-color-block-background;
	}
}

.for (@list, @code) {
	& {
		.loop(@i:1) when (@i =< length(@list)) {
			@value: extract(@list, @i);
			@code();
			.loop(@i + 1);
		}
		.loop();
	}
}

:root{
}

@markdown-heading-numbers: 1 2 3 4 5 6;

// Markdown
span when(@markdown){
	.syntax--markup, .syntax--md{
		& when(@markdown-font-always-monospace = false){
			.text-font
		}
		color: @markdown-color-text;
		&.syntax--raw when(@markdown-inline-code){
			.markdown-inline-code-style;
		}
		&.syntax--link when(@markdown-links){
			&.syntax--text{
				color: @markdown-color-links;
				.markdown-link-text;
			}
			&.syntax--underline{
				color: @markdown-color-links;
				.markdown-link-url;
			}
			&.syntax--title{
				color: @markdown-color-text;
				.markdown-link-title;
			}
		}
		&.syntax--punctuation{
			.monospace;
		}
		& when(@markdown-headings){
			&.syntax--heading-1{
				color: @markdown-color-text !important;
				.markdown-heading-1
			}
			&.syntax--heading-2{
				color: @markdown-color-text !important;
				.markdown-heading-2
			}
			&.syntax--heading-3{
				color: @markdown-color-text !important;
				.markdown-heading-3
			}
			&.syntax--heading-4{
				color: @markdown-color-text !important;
				.markdown-heading-4
			}
			&.syntax--heading-5{
				color: @markdown-color-text !important;
				.markdown-heading-5
			}
			&.syntax--heading-6{
				color: @markdown-color-text !important;
				.markdown-heading-6
			}
		}
		& > .trailing-whitespace{
			visibility:visible;
			.monospace;
		}
		&.syntax--quote, &.syntax--bold, &.syntax--italic, &.syntax--list{
			color: @markdown-color-text;
		}
		& when(@markdown-text-styles){
			&.syntax--bold{
				.markdown-text-style-bold;
			}
			&.syntax--italic{
				.markdown-text-style-italic;
			}
			&.syntax--strike{
				.markdown-text-style-strikethrough;
			}
		}
		& when(@markdown-list){
			&.syntax--list > .syntax--punctuation{
				&::before{
					visibility: visible;
					.monospace;
					content: "  ";
				}
			}
			&.syntax--list.syntax--unordered > .syntax--punctuation when(@markdown-list-bullet){
				visibility:hidden;
				@bullets: length(@markdown-list-bullets);
				.for(@markdown-list-bullets, {
					&:nth-child(@{bullets}n+@{i})::before{
						content: "  @{value}";
					}
				});
			}
		}
		&.syntax--fenced, &.syntax--table{
			.monospace;
		}
		&.syntax--table when(@markdown-tables){
			&.syntax--table when(@markdown-table-background){
				.block
			}
			& when(@markdown-lines) and(@markdown-table-lines){
				& > .syntax--horizontal when(@markdown-table-lines-horizontal){
					visibility:hidden;
					&::after{
							visibility:visible;
							content:"";
							border-bottom: 3px solid @markdown-color-block-background;
							box-sizing:content-box;
							position:absolute;
							left:0;
							width:100%;
							height:@line-height-px;
							transform:translate(0,-50%);
					}
				}
				& > .syntax--vertical when(@markdown-table-lines-vertical){
					visibility:hidden;
					&:before{
						visibility:visible;
						content:"";
						position:absolute;
						width:3px;
						height:@line-height-px;
						background-color:@markdown-color-line;
					}
				}
			}
		}
		& when(@markdown-block-code){
			&.syntax--fenced > .syntax--language{
				.markdown-block-code-language-name;
			}
			&.syntax--fenced when(@markdown-block-code-background){
				.block
			}
		}
		& when(@markdown-quote){
			&.syntax--quote when(@markdown-quote-background){
				.block
			}
			&.syntax--quote when(@markdown-lines) and(@markdown-quote-lines){
				&::after{
					border-left: @markdown-line-width solid @markdown-color-solid-line;
				}
				& > .syntax--punctuation:first-child{
					visibility:hidden;
					&:before{
						visibility:visible;
						content:"";
						position:absolute;
						width:@markdown-line-width;
						height:@line-height-px;
						background-color:@markdown-color-line;
					}
				}
			}
		}
		&.syntax--hr when(@markdown-lines) and(@markdown-horizontal-lines){
			visibility:hidden;
			&::after{
				visibility:visible;
				content:"";
				border-bottom: @markdown-line-width @markdown-horizontal-line-style @markdown-color-block-background;
				box-sizing:content-box;
				position:absolute;
				left:0;
				width:100%;
				height:@line-height-px;
				transform:translate(0,-50%);
			}
		}
		& > .indent-guide:before when(@markdown-indent-guide = false){
			display:none;
		}
		&:not(.syntax--list) > .indent-guide when(@markdown-indent-guide = false){
			visibility:visible !important;
			.monospace;
		}
		& > .trailing-whitespace{
			visibility: visible !important;
			.monospace;
		}
		& > .syntax--html {
			.monospace;
		}
	}

}
span when(@invisible-characters = false){
	.invisible-character{
		visibility:hidden
	}
	.invisible-character.indent-guide{
		visibility:visible;
	}
	.invisible-character.trailing-whitespace{
		visibility:hidden;
	}
}
span when (@indent-guide) {
	.invisible-character.indent-guide{
		visibility:hidden;
	}
	.indent-guide{
		box-shadow:none !important;
		visibility:hidden;
	}
	.indent-guide:not(.eol):not(.trailing-whitespace) {
		&::before{
			content:" ";
			position:absolute;
			border-left: 1px solid @indent-guide-color-soft-tab;
			visibility:visible;
			transform: translate(50%);
		}
		&.hard-tab::before{
			transform: translate( @indent-guide-hard-tab-position );
			border-left: 1px solid @indent-guide-color-hard-tab;
		}
		&:not(.hard-tab)::before when (@indent-guide-hard-tab-only){
			visibility:hidden !important;
		}
	}
}
/**/

// Fonts
atom-text-editor when(@fonts){
	--editor-font-family: @font-code;
}
span when(@fonts){
	.syntax--operator, .syntax--punctuation{
		font-family: @font-code-ligatures;
		font-size: ~"calc(var(--editor-font-size) * 50%)";
	}
}
.line > span::after{
	content:"|";
	font-family: @font-code-ligatures;
	visibility:hidden;
}

.line{
	max-height: @line-height-px;
}
// Punctuation Style
.syntax--punctuation.syntax--bracket when(@punctuation-style){
	.brackets;
}
.syntax--punctuation when(@punctuation-style){
	.punctuation;
}

// Character Replacements
.syntax--punctuation.syntax--terminator when(@punctuation-style)  and(@punctuation-style-replace-semi-with-interpunct){
	visibility: hidden;
	// font-size:0;
}
.syntax--punctuation.syntax--terminator:after when(@punctuation-style) and(@punctuation-style-replace-semi-with-interpunct){
	content:"·";
	visibility: visible;
	position:absolute;
	transform:translate(-100%, 10%);
	font-size:var(--editor-font-size);
}

// Cursor
.cursor when(@animate-cursor) {
	transition: 0.1s transform, 0.1s width, 0.1s height;
}

// Comment
/*Multiline
Comment*/
span when(@comment-style){
	.syntax--comment.syntax--line{
		.comment-style-inline-comment;
	}
	.syntax--comment.syntax--block{
		.comment-style-multiline-comment;
	}
	.syntax--comment.syntax--punctuation{
		.monospace;
	}
}

.syntax--string when(@string-style){
	& > .syntax--escape when(@string-escape-style){
		background: -webkit-linear-gradient(right, @string-escape-character-color 50%, @string-escape-backslash-color 50%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		content: "test\'test";
	}
	&:not(.syntax--punctuation) when(@string-style-custom){
		.string-style;
	}
	& > span when(@string-style-custom){
		.monospace;
	}
}

Demo Image
Demo
Click to expand