Overhaul styling: use .css files to set theme dynamically using CSS classes

[zjeffer]

I'm looking into replacing all setStyleSheet calls to use .css files instead, and change the widget's theme by simply changing the css classes it has. This will make it much easier to change the styling of the widgets. We should try to move all color declarations to a css file. Lots of widgets have these colors hardcoded in their constructor.

• [x] About window
• [x] Style Editor window
• [x] NodeTreeView
• [x] Search bar
• [x] Main window
• [x] Folder tree
• [x] Fix segfault on Qt5 when resizing

These two are probably not possible because they use QPainter:

• [ ] TagListView
• [ ] NoteListDelegateEditor

This will also make the mainwindow.cpp's setTheme() method much cleaner. Fixes #533 and #467

[nuttyartist]

That's great, I'll test this very soon. This should allow us to iterate on styling much faster and make things more organized.

[nuttyartist]

This is a very welcome change. During my testing I found these issues:

The lines separating actions in the styleeditor here don't go far enough (more visible in dark mode):

There's an unnecessary black rectangle in the Light theme:

But I like it during Dark theme (good separation). BUT, it needs to disappear when the buttons currently disappear - when the user types something or scrolls.

We still have this issue where some areas during Dark theme (only then) not having the proper background color.

[zjeffer]

@nuttyartist In the latest commit, I don't have those issues anymore, but I never had the problem with the lines in the style editor not going far enough. Is it possible it looks differently on macOS than on Linux?

[nuttyartist]

Just tested. Some issues I noted:

1. We should use native scrollbars on macOS (aren't we also using native ones for Windows?).
2. searchEdit color isn't right
3. This rectangle is out of place
4. There is a rectangle around these buttons. Why?

1. Here the margins need to be zero.
2. And for some reason the Next buttons go too much to the right and can't be seen.

[zjeffer]

Strange, I don't have half the issues you're having. Looks like I'm going to have to pull up my macOS VM...

Also needs to be tested on Windows.

[zjeffer]

It looks even worse on my macOS VM:

Not sure why this is happening...

edit: I made a CSS formatting mistake in my last commit, some of the issues should be fixed now.

[zjeffer]

New test on macOS:

https://user-images.githubusercontent.com/4633209/232306921-e279ec07-4f38-4c37-b0b7-ddc83bc0e1b7.mp4

@nuttyartist Can you test again? Everything looks fine for me, except for the little arrow to change fonts in the StyleEditorWindow, but that seems to be an issue in the current version of Notes anyway, not something related to this PR...

[zjeffer]

Can confirm it works on Windows as well.

[nuttyartist]

Definitely better,

1. We should use native scroll bars on macOS for the folders and notes lists.
2. Only in Sepia there's this color trailing behind selected sub folders: Window active: Window not active:
3. The lines in the style editor still look like this for some reason:

[nuttyartist]

1 & 2 are solved.

[zjeffer]

Yep, currently trying to find the cause of the third issue. It's also present on Linux & Windows.

[nuttyartist]

Let me know when to test

[zjeffer]

All issues should be fixed now (except for the arrow position in the font buttons, but that's for another PR)

[nuttyartist]

It's the same on my machine... But the arrows look good.

[zjeffer]

Even if you resize the Style editor window?

[nuttyartist]

Yeah, maybe I didn't clone properly?

I used it clone --recursive --single-branch --branch feature/zjeffer/css-changes https://github.com/nuttyartist/notes.git

[zjeffer]

Strange, the arrow bug occurs on 2.1.0 and on my own branch.

[zjeffer]

So I guess this can be merged?

[nuttyartist]

Well, I don't get why the lines still look like this. The vertical size policy is expanding but they are not expanding...

[nuttyartist]

If I simply do:

It is set correctly:

[nuttyartist]

Okay I figured it.

This

StyleEditorWindow QPushButton.btn {
    padding: 0px;
    border: none;
}

Should be:

StyleEditorWindow QPushButton {
    padding: 0px;
    border: none;
}

Now it works.

[zjeffer]

@nuttyartist Can you test the latest commit on your mac? I simplified the CSS a bit and implemented your fix.

[nuttyartist]

Looks good 👍

[zjeffer]

Alright, rebased and merging...