Atom Custom Stylesheet #atom #markdown #less #css

styles.less

/*
 * 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
 */

.tree-view {

}

// style the background and foreground colors on the atom-text-editor-element
// itself
atom-text-editor {

}

// To style other content in the text editor's shadow DOM, use the ::shadow
// expression
atom-text-editor::shadow .cursor {

}


// Styles for the markdown preview.
@font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
.markdown-preview{
  font-family: @font-family;
  letter-spacing: 0.08em;

  h1, h2, h3, h4, h5, h6{
    font-family: @font-family;
  }

  h1{
    margin: 50px 0 25px 0;
  }

  h2{
    border-bottom: 2px solid #ddd;
    margin: 50px 0 25px 0;
    padding-bottom: 10px;
  }

  h3,h4,h5,h6{
    margin: 40px 0 25px 0;
  }

  p{
    margin: 25px 0;
  }

  blockquote{
    margin: 25px 0;
    padding-left: 20px;
    border-left: 4px solid #ccc;
    font-style: italic;
    font-size: inherit;
    line-height: 1.5;
    p{font-size:inherit}
  }
}

// Changing the color of the tab (when the hover).
.tab:hover{
  background-color: #f5f5f5;
}

// Change the transparency of the non-active pane.
.vertical{
  .pane{
    opacity: 0.70;
    &.active{
      opacity: 1.0;
    }
  }
}

// Optimize the font for Japanese
// Default font << Hiragino + Meiryo
div.title,
div.tree-view-scroller,
div.status-bar-left{
  font-family:'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
}