Help on the styles.less (background-color)


#1

Hey,

I’m trying to change the background-color of the PHP syntax using my styles.less file.
So far I’ve done that :

atom-text-editor::shadow .embedded.php {
  background-color: #535760;
}

But it’s kinda ugly:

Any ideas to take in all the php and not the lines only ? Like if I am selecting code, it’ll background color everything and don’t let some interlines like I have now.

Thanks !


#2

You should rather use this selector:

atom-text-editor[data-grammar="text html php"] {
  ...
}

Or less specific:

atom-text-editor[data-grammar*="php"] {
  ...
}

#3

I tried both and it didn’t change the colors at all. :confused:


#4

You can use the following:

atom-text-editor::shadow .line .embedded.php:last-child::after {
  content: '';
  position: absolute;
  display: block;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #535760;
}

As you can see, it doesn’t do empty lines, but it does work with the highlighted cursor line.


#5

Very good, thanks a lot! If someone manage to find something for empty lines it would be perfect!


#6

Empty lines is currently not possible at all, they don’t have any scope, so catching only empty (embedded) php lines is impossible…


#7

Alright, thanks!