JabRef's UI should adapt to the font size

[koppor]

We need to update the CSS definitions to use em instead of px, because em adapts with the font size.

An em is a unit of measurement, relative to the size of the font; therefore, in a typeface set at a font-size of 16px, one em is 16px.

Update all pixel definitions (px) to em. This is not an easy task, because the em value depends on the font size, but the px size is a hard coded one.

1. Find the next px entry in Base.css
2. Check the code where the CSS definition is used
3. Open JabRef and start that functionality
4. Change the value to some em value
5. Restart JabRef
6. Change the font size to 12pt.
7. Check if it looks nice
8. Change the font size to 18pt.
9. Check if it looks nice
10. If not: Try other em value.

This takes a long time, because there are over 20 such values.

Please take screenshots before and after to ease reviewing.

Background material: https://openjfx.io/javadoc/22/javafx.graphics/javafx/scene/doc-files/cssref.html (linked from https://devdocs.jabref.org/code-howtos/javafx.html#resources, too)

Preparation

All .css definitions are spread around in the code base. We need to have them all in one Base.css to be able to work on some CSS issues.

Migrate all CSS files to the Base.css. For instance: https://github.com/JabRef/jabref/blob/main/src/main/java/org/jabref/gui/texparser/ParseLatexResult.css

Notes

Do not touch Dark.css. It needs to be kept for dark mode support. It does not contain any px values, because it does color only.

[harry924]

I’m an undergraduate computer science student, and I’m interested in working on this issue. Please let me know if I can take this on!

[github-actions]

Welcome to the vibrant world of open-source development with JabRef!

Newcomers, we're excited to have you on board. Start by exploring our Contributing guidelines, and don't forget to check out our workspace setup guidelines to get started smoothly.

In case you encounter failing tests during development, please check our developer FAQs!

Having any questions or issues? Feel free to ask here on GitHub. Need help setting up your local workspace? Join the conversation on JabRef's Gitter chat. And don't hesitate to open a (draft) pull request early on to show the direction it is heading towards. This way, you will receive valuable feedback.

Happy coding! 🚀