CSS to select text editor area only?


#1

What CSS selector(s) should I use to target the main text editor area only? I just want to add some padding to bring the text away from the edges a little. Unfortunately…

atom-text-editor {
    padding: 20px;
}

targets every field element throughout the app, including those on settings pages. I can’t find any element or CSS selector that would target the main text window area only.


#2

The editors in search, command palette and elsewhere have the .mini class. So you should be able to work with a :not(.mini) selector. Watch out with the padding though, it tends to screw up scrolling/overflow.


#3

I think the class is deprecated, editors now have a mini attribute that you can match with atom-text-editor::not([mini])


#4

I think you’re right, but am using the class in my themes. I’m not getting anything from deprecation cop on this, so not sure actually.