Add an ability to set custom css

[xPaw]

Fixes #80.

[astorije]

That guy is way too fast :-)

I'll take one of the reviews.

[astorije]

Set class="input" here and you will be able to remove some of the CSS while integrating better with the other form elements. Dumb example here.

[xPaw]

Did you mean that on the textarea?

[astorije]

Oops, yes indeed! That's why I shouldn't comment at 2am :)

[maxpoulin64]

I only have one slight concern about this PR: it is possible to break the client in a way where it's not recoverable other than from the developer console, for example by setting body to display:none;. I will give a 👍 anyway because that's a user error and solvable by clearing the local storage (and it's kinda hard to do unless you do it on purpose like I did), but it would be great if there was some kind of failsafe way to recover, either by a separate page such as /reset that serves an HTML page that clears the custom CSS or by adding a #nocss in the URL.

[astorije]

This is huge, what an amazing feature! Lets advanced users customize things at their will while being a simple textarea that will not go against the global user experience of newcomers.

I did not think of what @maxpoulin64 and that's a very smart comment. I really like the idea of appending something at the end of the URL that disables the custom CSS to lets you edit it in a safe mode. However, I think I'd rather have ?nocss=1 or simply ?nocss as it leaves us room for other parameters in the future as opposed to #nocss. Then we can document this safe mode in a FAQ entry for example.
However, this can surely go in a separate PR, this is good as it is.

I have one main concern though, which is the textarea being pre-filled at all. @xPaw, pre-filling as you did has a few issues:

• It changes the current default theme and potentially other themes
• It's impossible to find a sensible default that will work with all themes, as some custom themes might specify different fonts (for example) on purpose
• Specifying a default font family/size is personal and opinionated. Why not colors, margins, ... ?
• Since you remove the font in the default CSS, you lose your local storage, you lose all default (well, not directly but it's possible)
• It will be a very easy thing to break across the future releases
• It's an advanced setting, it's fair to assume users who fill this are advanced enough to know the basics of CSS.

For these and so many other reasons, I am all in favor of shipping an empty textarea, rely on the default CSS (so remove your deletions in style.css) by default and let users play with this from there on. We can then document possible recipes in the wiki or somewhere else if users need a push (for example, an entry "How to change the theme font" as a FAQ entry).
Once emptied by default, I'll be +1 :-)

I can think of a lot of ideas coming from this, but none of which should belong to this PR: auto-expand the field, CSS syntax highlighting, syntax checking and linting, ...

This is good stuff, can't wait to see it ready to merge :-)

[xPaw]

I've fixed all of your comments. nocss param is supported in the URL.

[astorije]

This is amazing, I am so glad I can finally use my favorite font for the Lounge even though so-called designers keep disagreeing:

:-)

My last few comments and after that I believe it can go:

• Appending ?nocss to the URL will be mostly (if not only) useful to debug a CSS mistake, such as what @maxpoulin64 described: wiping out everything. One can use that safe mode, fix the CSS, then disable the safe mode. However, currently, when appending ?nocss, the textarea is empty. Could you make it so that using that safe mode disables the custom stylesheet, but keeps it in the textarea? :-)
• I wish this would not refresh the page but that's the cost of a query string I guess. Maybe we'll make it a hash param instead, but definitely for later. At least there is a fail safe here and that was the original goal.

Excitiiiing!

[xPaw]

I am so glad I can finally use my favorite font for the Lounge even though so-called designers keep disagreeing

Cheeky.

However, currently, when appending ?nocss, the textarea is empty.

Fixed.

I wish this would not refresh the page but that's the cost of a query string I guess.

Not worth the effort, really.

[astorije]

Cheeky.

You know nothing :-)

Fixed.

Great! 👍 then!
Let's wait for @maxpoulin64 to confirm his 👍 before merging since this PR has changed quite a bit (but I don't think it will be a problem). I'll ping him tonight.

Not worth the effort, really.

Agreed, at least for the moment.