Share your stylesheet!


#1

In addition to the packages and themes you can add little custom tweaks to Atom. So inspired by the Share your init.coffee thread, let’s share stylesheets!

Also, remember you can publish your awesome style customisations as a package to make it easy for others to find and use that. Example: lines above methods

Mine:

@import (reference) "syntax-variables";
atom-text-editor::shadow {
  .gfm {
    /* show markdown double-space line breaks */
    .linebreak:after {
      font-family: 'Octicons Regular';
      font-weight: normal;
      font-style: normal;
      display: inline-block;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      text-decoration: none;
      font-size: 1rem;
      width: 1rem;
      height: 1rem;
      content: "\f0a9"; //found no better icon in octicons
      color: @syntax-invisible-character-color;
    }
  }
  /* show invisibles only in selection */
  .invisible-character {
      color: @syntax-background-color;
  }
  /* show a dotted line underneath folded lines */
  .fold-marker {
    &::before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      border-bottom: 1px dashed @syntax-invisible-character-color;
    }
  }
  .line.cursor-line .fold-marker {
    &::after {
      color: @syntax-text-color;
    }
    &::before {
      border-color: @syntax-text-color;
    }
  }
}

#2

Great idea! Here’s mine:

/* variable defaults */

@syntax-cursor-line: transparent;

/* imports */

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

/* stuff in the status bar */
status-bar {
  text-transform: lowercase;

  .deprecation-cop-status {
    color: inherit;
  }
}

/* stuff in the editor */

atom-text-editor{
  &::shadow {
    /* fix the git diff gutter icon */
    .line-number.git-line-removed::after {
      border: none;
    }

    /* align the pigments color markers better */
    pigments-markers::shadow .dot {
      transform: translateX(4px);
    }

    /* minimap width */
    atom-text-editor-minimap {
      min-width: 120px;
      max-width: 120px;
      transition: opacity 100ms;
    }

    .highlights {
      transition: opacity 100ms;

      .highlight-selected .region {
        border-radius: 0;
      }
    }

    [fonts-editor-font="Ubuntu Mono"] & .line {
      letter-spacing: 1px;
    }
  }

  &:not(.is-focused)::shadow {
    .cursor-line {
      background-color: transparent!important;
    }

    atom-text-editor-minimap,
    .highlights {
      opacity: .6;
    }
  }
}

/* disable the annoying spinner in preview */
atom-preview-editor .loading-spinner-large{
  display: none!important;
}

/* change termrk colors */
.termrk .terminal {
  background-color: @inset-panel-background-color;
  color: @text-color-highlight;
}



/* functions for customizing specific parts of themes */

.cursor-line(@color) {
  atom-text-editor:not([mini])::shadow .cursor-line {
    background-color: @color;
  }
}

.highlight-selection(@color) {
  atom-text-editor:not([mini])::shadow .highlights .highlight.selection .region {
    background-color: @color;
  }
}

.indent-guide(@color) {
  atom-text-editor:not([mini])::shadow .indent-guide {
    color: @color;

    &::before {
      background-color: @color;
    }
  }
}

.scrollbar(@color, @background-color) {
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background-color: @background-color;
  }

  ::-webkit-scrollbar-thumb {
    background-color: @color;
  }
}




/* theme specific */

.theme-duotone-dark-syntax {
  @color: @syntax-cursor-line;

  .cursor-line(@color);

  atom-text-editor::shadow {
    .scrollbar(@color, transparent);

    .meta {
      color: fade(lighten(@color, 40%), 100%);
    }
  }
}

.theme-one-dark-syntax {
  @color: @syntax-cursor-line;
  @color-cursor: fade(@color, 15%);

  .cursor-line(@color);
  .highlight-selection(@color-cursor);
}

.theme-naturevulcano-dark-syntax {
  @color: @syntax-cursor-line;

  .cursor-line(@color);
}

.theme-outlander-syntax {
  @color: #393939;

  .highlight-selection(@color);
  .indent-guide(@color);
}

#3

Nice! I like that tweak to git-removed in the gutter, it’s clean.


#4

Yeah, it really annoyed me :stuck_out_tongue:

I’ve already fallen in love with your .invisible-character tweak! I tweaked it slightly:

atom-text-editor::shadow {
  /* show invisibles only in selection */
  .invisible-character {
    color: @syntax-background-color;

    /* the indent guide became invisible in some themes */
    &.indent-guide {
      box-shadow: inset 1px 0 0 0 @syntax-indent-guide-color;
    }
  }

  /* hide them in case the .cursor-line has a different background color */
  .cursor-line .invisible-character {
    color: transparent;
  }
}

#5

That’s a great tweak.

I’m so used to having this in Sublime as a quick check to see if my indentation got whacked up. Selecting a bunch of text is much easier than toggling invisibles on and off (or remembering the shortcut for toggling).


#6

Yeah, I always found the invisibles too noisy, so I always turned them off and as you say I found it too much of a hassle to turn the invisibles on and off. Never used this in Sublime either.


#7

Here’s my styles.less, commented for my own memory :laughing:

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

@import "packages/red-wavy-underline/styles/red-wavy-underline";

.theme-one-light-ui, .theme-one-dark-ui {
  .status-bar { font-size: 14px; }
  .tab-bar { font-size: 14px; }
  .tree-view { font-size: 14px; }
}


// Highlights the cursor line
atom-text-editor::shadow {
  .cursor-line {
    background-color: @background-color-highlight;
  }
}

// Un-italicizes comments
atom-text-editor::shadow {
  .comment {
    font-style: normal;
  }
}

// Makes the cursor pulse instead of blink
atom-text-editor::shadow {
  .cursor {
    transition: opacity 0.5s;
  }
}

// Un-italicizes code markup in Markdown
atom-text-editor::shadow {
  .markup.raw.gfm {
    font-style: normal;
    color: @syntax-color-keyword;
  }
}

// Brightens the gutter diff indicators to make them more visible
.diff-icon(@color) {
  background-color: fade(@color, 60%);

  &:before {
    color: contrast(fade(@color, 60%));
  }
}

.diff-border(@color) {
  border-color: lighten(@color, 15%);
  border-left-width: 4px;
}

@gutter-padding: 15px;

atom-text-editor::shadow {
  .gutter .line-number {
    padding-left: @gutter-padding;

    &.git-line-added {
      .diff-border(@text-color-success);
      padding-left: @gutter-padding - 4;
    }

    &.git-line-modified {
      .diff-border(@text-color-warning);
      padding-left: @gutter-padding - 4;
    }

    &.git-line-removed {
      .diff-border(@text-color-error);
      padding-left: @gutter-padding;
    }
  }

  .gutter.git-diff-icon .line-number {
    &.git-line-added {
      .diff-icon(@text-color-success);
    }

    &.git-line-modified {
      .diff-icon(@text-color-warning);
    }

    &.git-line-removed {
      .diff-icon(@text-color-error);
    }
  }
}

// Makes the bracket matcher highlight more noticeable
atom-text-editor::shadow {
  .bracket-matcher .region {
    border-bottom: 1px solid yellow;
  }
}

// Replaces the atom-lint error highlight with the red wavy underline
.lint .violation-border.violation-warning {
  .red-wavy-underline;
}

// Highlights trailing whitespace except on the cursor line
atom-text-editor::shadow {
  div.line:not(.cursor-line) {
    .trailing-whitespace {
      background-color: @background-color-error;
      color: contrast(@background-color-error);
    }
  }
}

// https://discuss.atom.io/t/crazy-3d-angled-tree-view/18765
#atom-perspective() {
  @viewing-distance: 12in;
  @rotation: 20deg;

  .tree-view-scroller {
    transform: translateY(-10vh) perspective(@viewing-distance) rotateY(@rotation);
    padding-top: 12vh;
    padding-bottom: 12vh;
    transform-origin: left;
    width: 120%;
    height: 120%;
  }
  body /deep/ atom-text-editor-minimap {
    transform: perspective(@viewing-distance) rotateY(-@rotation);
    transform-origin: right;
  }
}

// Comment or uncomment the next line to control whether the atom-perspective feature is enabled
// #atom-perspective;


#8

Wow, that sounds awesome… what does it look like?


#9

It looks like this:

I took it from this post:

I don’t use it most of the time, but I leave it in my stylesheet deactivated as an example for me to use for other things.


#10

Other than stuff I just stole from you guys, I have:

// rounds out pigments' square dot
atom-text-editor::shadow pigments-markers::shadow pigments-color-marker.dot.square,
pigments-markers::shadow pigments-color-marker.dot.square,
pigments-color-marker.dot.square {
  border-radius: .15em;
  width: .8em;
  height: .8em;
}

// hides linters' checkmark, encoding selector
atom-panel.bottom {
  encoding-selector-status,
  [is=status-bar-launch-mode],
  linter-bottom-status {
    display: none;
  }
}

#11

What do I need to show invisibles in selection? The following doesn’t seem to be enough:

 atom-text-editor::shadow {
   /* show invisibles only in selection */
   .invisible-character {
      color: @syntax-background-color;
    }
}
```

#12

You also need to turn on invisible characters in settings. Otherwise they aren’t rendered in the editor.


#13

It’s a good one!


#14

I did some tweaks for the new atom-material-ui, including tree-view improvements for large projects and better icon rendering.

@import "syntax-variables";

/*
 * Make gutter column semi-transparent.
 */
atom-text-editor:not(.mini)::shadow {
  .gutter-container {
    background-color: transparent;
    display: block;
    left: 0;
    position: absolute;
    z-index: 10;
  }

  .scroll-view {
    padding-left: 70px;
  }

  .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::shadow {
  atom-text-editor-minimap {
    background-color: darken(@syntax-background-color, 1%);

    &::shadow {
      canvas {
        left: 3px;
      }

      .minimap-visible-area {
        background-color: rgba(255,255,255,0.6);
      }

      .minimap-scroll-indicator {
        background: @syntax-cursor-color;
      }
    }
  }

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

/*
 * Increase tree-view readability in large projects and fix problems with ugly
 * rendering of file icons.
 */
.list-group,
.list-tree {
  &.entries {
    li {
      &.list-item,
      &.list-nested-item > .list-item {
        display: block;
        line-height: 36px;

        .compact-tree-view & {
          line-height: 24px;
        }
      }
    }
  }

  .icon {
    &::before {
      display: inline-block !important;
      height: 24px;
      line-height: 24px;
      opacity: 0.3;
      text-align: center;
      top: 0;
      width: 16px;
      vertical-align: top;
    }
  }

  .expanded > .header,
  .selected {
    > .icon {
      &::before {
        opacity: 0.9;
      }
    }
  }

  /* Some icons needs to be realigned. */
  .icon-file-directory,
  .icon-repo {
    &::before {
      top: 1px;
    }
  }

  .icon-file-directory {
    font-weight: 600;
  }
}

/*
 * Toolbar tweaks.
 */
.tool-bar {
  &.tool-bar-vertical {
    background-color: darken(@syntax-background-color, 1%);
    padding-top: 0.5rem;

    .tool-bar-btn {
      height: 2.75rem;

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

    &[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: lighten(@syntax-background-color, 6%);
    }
  }
}

/*
 * Increase readability of tab bars.
 */
.tab-bar {
  background-color: lighten(@syntax-background-color, 2%);

  &:not([data-reactid]) {
    &::before,
    &::after {
      display: none;
    }
  }

  .tab {
    font-weight: 600;

    .title {
      &.icon {
        &::before {
          font-size: 14px;
          height: 14px;
          margin-right: 0.75rem;
          opacity: 0.25;
          width: 14px;
        }
      }
    }
  }
}

/*
 * Change the size and color scrollbars.
 */
.scrollbars-visible-always {
  /deep/::-webkit-scrollbar {
    width: 0.1rem;
    height: 0.1rem;
  }

  /deep/::-webkit-scrollbar-thumb {
    background: @syntax-cursor-color;
  }
}


#15

Mine is really small:

// Hide package readme's.
.settings-view .package-detail .section:last-child {
    display: none;
}

#16

That highlight invisibles thing is gold! Thank you.

Here’s most of mine:

  
atom-text-editor::shadow .gutter {
    // a little more contrast for the gutters in dark themes...
    .theme-base16-tomorrow-dark-theme &,
    .theme-atom-dark-syntax & {
        background-color: darken(rgb(29, 31, 33), 1.2);
        border-right: 4px solid darken(rgb(29, 31, 33), 1.6);
    }
    // ... but smaller, more muted line numbers
    .line-numbers .line-number {
        font-size: 89%;
        line-height: 1.8rem;
        opacity: 0.3;
        padding: 0 0.1em;
    }
}

// slender tabs for certain themes
@tab-bar-height: 2.3em;
.theme-one-dark-ui,
.theme-one-light-ui {
    .tab-bar {
        // height: auto; required for infinite tabs below
        // otherwise, set it to @tab-bar-height
        height: auto;
        .tab, .tab .close-icon {
            height: @tab-bar-height;
            line-height: @tab-bar-height;
        }
    }
}

// infinite atom tabs, wrapped
.tab-bar {
    -webkit-flex-wrap: wrap;
    height: auto;
    .tab, .tab.active {
        -webkit-flex: initial;
        .title {
            // don't need the fade/mask
            -webkit-mask: none;
           
            // a little room for the Close icon
            padding-right: 9px;

            // uncomment for fixed width
            // max-width: 11ch;

        }
    }
}

#17
// Make fold arrows always visible
atom-text-editor::shadow .line-number.foldable .icon-right {
  visibility: visible;
}

// Blue cursor-line stands out from diff and lint lines in the minimap
.minimap .cursor-line {
  background: blue;
}

// Makes the cursor blue and a bit thicker
atom-text-editor::shadow .cursor {
  border-left: 2px solid blue;
}

// Makes the cursor pulse instead of blink (great idea)
atom-text-editor::shadow {
  .cursor {
    transition: opacity 0.5s;
  }
}

atom-text-editor::shadow pigments-markers::shadow pigments-color-marker {
  &.dot {
    // Makes the pigment dots slightly bigger
    width: 1.1em;
    height: 1.1em;

    // Brings the pigment dots closer to the semicolon for pigments v0.27.1
    transform: translate(-40%, -50%);
  }
}

#18

I made a stylesheet with some cool highlight color animations.

I use UI Theme One Light and Syntax Theme Base16 Tomorrow Dark.

//
/* /
/
CSS Styling by Lee Comstock - website: http://www.volcanicpenguin.st/ /
/
*/
/
/

// pick your own highlight color here
@highlight-color: orange;

atom-workspace {
font-family: Iosevka Medium;
}

.modified .close-icon {
color: @highlight-color !important;
}

.tab {
overflow: hidden;

transition: 0.25s top !important;
}

.tab-bar:hover .tab {
top: 20px;
}

.tab.active:before, .tab:before {
opacity: 1;
left: calc(50% - 5px) !important;
width: 20px !important;
height: 20px;
border-radius: 0% !important;
border-style: none;;
background-color: @highlight-color !important;
transition: 0.5s !important;
}

.tab:before {
top: 100px !important;

animation: rotation 0.5s infinite linear;
}

@keyframes rotation {
from {
transform: rotate(0deg);
} to {
transform: rotate(360deg);
}
}

.tab-bar:hover .tab.active:before {
top: 40px !important;
background-color: @highlight-color !important;
}

.tab:hover {
top: 0px !important;
}

::shadow .editor–private .gutter {
border-right-style: solid !important;
border-color: @highlight-color !important;
border-width: 0px !important;
margin-right: 0px !important;

transition: 0.25s cubic-bezier(0.5, 0.5, 0.5, 1.5);
}

::shadow .editor–private:hover .gutter {
border-width: 10px !important;
margin-right: 10px !important;
}

::shadow .editor–private .gutter .line-number:before {
display: block;
content: “”;
position: absolute;
width: 50px;
height: 50px;
background-color: @highlight-color;

top: -13.5px;
right: -75px;

transform: rotate(45deg);

transition: 0.25s cubic-bezier(0.5, 0.5, 0.5, 1.5);
}

::shadow .editor–private:hover .gutter .cursor-line:before {
right: -50px;
}

::shadow .editor–private .cursor-line {
background-color: rgba(165, 42, 42, 0.25);
}

.tab-bar {
transition: 0.25s;

border-bottom-style: solid;

width: calc(100% - 0.2px);
left: 1px;

border-color: black;
border-width: 0px;
}

.tab-bar:hover {
height: 105px;

border-color: @highlight-color;
border-width: 10px;
}

.tab-bar .tab {
height: 100%;
}

.list-item {
transition: 0.25s cubic-bezier(0.5, 0.5, 0.5, 1.5);
}

.list-item:hover {
padding: 10px 0;
}

.panel-left {
transition: 0.25s cubic-bezier(0.5, 0.5, 0.5, 1.5) !important;
border-style: solid;
border-color: #333333;
border-width: 0 0 0 10px;
}

.panel-left:hover {
border-color: transparent @highlight-color;
border-width: 0 0 0 20px;
}


#19

I style my

  • tree view
  • setting page font
  • tab title
  • cursor
  • some markup in markdown
// 1. tree view
.tree-view {
  // Initial font
  font-size: 16px;

  // animation of file entry, folder entry
  li.file, .header.list-item {
    transition: padding 1.5s, font-size 1.5s; // HOVER-OFF
    padding: 0px;

    &:hover {
      transition: padding 1s, font-size 1s;   // HOVER-ON

      font-size: 20px;
      padding: 15px 0px;
    }
  }
}

// 2. atom setting page
.settings-view {
  font-size: 16px;
}

// 3. tab title
.tab-bar .tab .title {
  font-size: 16px;
}


atom-text-editor::shadow {

// 4. Cursor style 
  .cursor {
    border-color: #FF6600;  // Light Orange
    border-width: 3px;
  }

// 5. markdown text (currently excluded in my syntax theme)
  .source.gfm {
    .markup {
      // code markup style
      -webkit-font-smoothing: auto;
      &.raw {
        color: #5FB57D; // close to atom icon green
      }
    }
    .variable.unordered.list {  // list item
      color: #ff869a;   // red
    }
  }

}



#20
// The default scrollbars are tiny and hard to see and grab hold of.
.scrollbars-visible-always {
  .tool-panel ::-webkit-scrollbar {
    width: 8px;
  }
  /deep/ ::-webkit-scrollbar {
    width: 16px;
    &-thumb {
      border: none;
      border-radius: 4px !important; /* Otherwise something overrides this when dragging */
      background-color: #888 !important;
    }
    &-thumb:active {
        background-color: #606060 !important;
    }
    &-track {
      background-color: #eee !important;
    }
  }
}

// Thicken git gutter indications
atom-text-editor,
atom-text-editor::shadow {
  .gutter .line-number {
    &.git-line-modified {
      border-left: 4px solid @syntax-color-modified;
      padding-left: ~"calc(0.5em - 4px)";
    }

    &.git-line-added {
      border-left: 4px solid @syntax-color-added;
      padding-left: ~"calc(0.5em - 4px)";
    }
  }
}

atom-text-editor::shadow {
  .selection .region {
    background-color: khaki; // Default is some sort of grey which is hard to see
  }

  .comment .todo {
      background-color: yellow;
  }
  
  // Indicators for the `refactor` package.
  // These default to borders under the text, which I find hard to read.
  // Instead, I use highlights behind the entire keyword.
  .refactor-ref .region {
      background-color: #CCFFCC;
      border-bottom: none;
  }
  .refactor-mut .region {
      background-color: #FFCCCC;
      border-bottom: none;
  }
  .refactor-decl .region {
      background-color: #FFEECC;
      border-bottom: none;
  }
}

.indent-guide-improved {
  background-color: #ddd;
  &.indent-guide-stack {
    background-color: cyan;
    &.indent-guide-active {
      background-color: blue;
    }
  }
}

Interestingly, all of my changes seem to be concerned with making things thicker or more strongly colored. I like to be able to see the state of my file even in my peripheral vision. (I also have invisibles and indent guides turned on all the time.)