Skip to content
This repository has been archived by the owner on Sep 6, 2018. It is now read-only.

There is no visual separation between the gutter and the editing pane #63

Closed
eterevsky opened this issue Feb 20, 2016 · 6 comments
Closed
Labels

Comments

@eterevsky
Copy link

Because the gutter is not visually separated from the editing pane, it is very hard to tell, where the first column is, and whether the cursor is currently at the start of the line, or not.

screenshot from 2016-02-20 10-59-46

@mikemcbride
Copy link

Personally I like the look, and I have to believe they intend for it to look that way. It's easy enough to just add something like the following to your own stylesheet.less for a visual cue:

.gutter {
  border-right: 1px solid rgba(255,255,255,0.1);
}

Just my $0.02

@lee-dohm
Copy link
Contributor

I'm pretty certain this is intentional also. If it is intentional and since a workaround is relatively simple, I'm inclined to mark this wontfix. I'll wait until @simurai lets us know his thoughts though.

@simurai
Copy link
Contributor

simurai commented Feb 23, 2016

Yes, this is intentional. Personally, I have the

  • Show Indent Guide

enabled in the settings. But if not, then yeah, it's kinda hard to tell if a line is indented or not.

In your styles.less file, you could:

Border

Add a border (like @mmcbride1007 suggested):

@import "syntax-variables";
atom-text-editor::shadow .gutter {
  border-right: 1px solid @syntax-indent-guide-color;
}

screen shot 2016-02-23 at 1 09 16 pm

Background

Add a background color. Maybe

@import "syntax-variables";
atom-text-editor::shadow .gutter {
  background-color: lighten(@syntax-background-color, 5%);
}

screen shot 2016-02-23 at 1 08 40 pm

@zwpaper
Copy link

zwpaper commented Jul 13, 2016

@simurai I tried the solution, but I got two lines after the line number like the pic, could you help me please?
image

@simurai
Copy link
Contributor

simurai commented Jul 13, 2016

@zwpaper You probably have a package installed that adds a second gutter, like linter? Using the .gutter-container instead should only show one line:

atom-text-editor::shadow .gutter-container {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

@zwpaper
Copy link

zwpaper commented Jul 13, 2016

@simurai Exactly! Thanks so much.
I use .gutter-container and it works.
then I try to disable the linter, .gutter also works!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

5 participants