[Announce] Gutter Shadow


#1

I hacked something together to get something I missed from Sublime Text. It adds a shadow under you gutter when you are scrolled to the right. There is some work to do on it, but I wanted to share for people also missing this feature.


#2

I like it.
In fact, any chance this shadow could optionally be enabled even if we’re not scrolled to the right at all?
It’s kinda stylish.


#3

Thanks. I can add that option.


#4

Here is my quick patch.

Firstly, you need to open your customizable stylesheet file of Atom. In [Settings > Theme], click the link “editing your stylesheet”.

Then, copy and insert the following codes to that “styles.less” file.

// Adds shadow to the right of Gutter
.tab-bar, atom-panel-container.bottom{
  z-index: 2;
}
atom-text-editor::shadow{
  .gutter{
    z-index: 1;
    box-shadow: 0.5rem 0 2rem hsl(0, 0%, 5%);
  }
  .scroll-view{
    padding-left: 0.5rem;
  }
}

Save the file, and immediately, you can see the change.

Modified values in those codes as you like.

Enjoy hacking!

Note:

It is just a pure css solution. The shadow is always there in spite of your horizontal scroll.

If you want to hide shadow when scrollbar is at its left end, I guess you will need to create a much more complex patch or even a package, involving JavaScript/CoffeeScript. Don’t ask me for help because I’m already happy with my solution.


#5

Thanks, I will incorporate your styles into the package.


#6

An option to keep the shadow always on has been added.