Toggle Global and User CSS Pane

[Drowbe]

Would it be possible to toggle between the global CSS and the user CSS pane? The split screen is really difficult to work in. While I usually use an external CSS editor and paste the code it, often the little real-time tweaks happen in that little pane. I never use the user pane and would love to be able to have a dedicated global pane.

FYI, I have a ton of CSS overrides using this module, so THANK YOU for the update for v11.

(not sure how to tag this as a feature request... new to github)

[zeel01]

This isn't a bad idea, but I'm currently not really doing further development on this module - just keeping it up to date as much as I can. If I do ever come back to add features, I'll consider this one.

A temporary suggestion would be to use the module to modify its own CSS to hide the other editor if you aren't using it.

(FYI, you can't tag it yourself. Don't worry about that.)

[Drowbe]

I appreciate it. To be fair, my first stop was to override the CSS of the CSS tool... very meta. I will look again, but I didn't see any unique ID or class that would allow me to set the height of the global pane to 100% and the user pane to zero... or a way to "display: none;" one of them. I can do it in real-time in developer tools editing the HTML, but can't see a way to override with pure css.

[zeel01]

Try nth-child or similar selectors. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

[Drowbe]

Ooooh... I learned a thing! Thanks!

[Drowbe]

Okay... also did a thing. For anyone else wishing to hide the "User Styles" pane, the CSS is below. Be sure to do this in the "global" section... doing it in the other section would, well, hide it with the code in it right after you save.

/* Hides the User Styles editor pane */
.customCssSettings h2:nth-child(2n + 2) {
display: none;
}
.customCssSettings p {
display: none;
}
.customCssSettings section.stylesheet-editor:nth-child(2n + 2) {
display: none;
}