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.