search

abe33 / atom-pigments

An Atom package to display colors in project and files.
MIT License
521 stars 68 forks source link

Space between color marker and code #427

Open matteioo opened 5 years ago

matteioo commented 5 years ago

Hi guys, is there a way to change the space between the color marker and the code. Thanks a lot 👍

DallasO commented 5 years ago

I think I understand what you're asking.

You can add custom CSS to your Atom stylesheet (Edit -> Stylesheet...):

// This grabs the # for HEX
atom-text-editor .syntax--punctuation .pigments-native-background {
  padding: 2px 0 2px 2px;
}
// This grabs the HEX
atom-text-editor .pigments-native-background {
  padding: 2px 2px 2px 0;
}

This snippet is for Hex colors, since that's what I use most often (eg, #e3e3e3).

But you can use the Inspect Tool to craft some CSS for rgb, etc. Ctrl+Shift+i to open, use the Select tool on the top left of this new window, click a pigment marker, customize the CSS above to the specific class names. (First, make sure the cursor is on a different line in the editor, or the marker disappears)

Edit: Just opened the Pigments settings and realized there are different Marker Types :man_facepalming:. So you'll have to change the selector .pigments-native-background to which ever marker type you're using.