OK, all stylesheets in /opt/darktable/share/darktable/themes remain unchanged, tweaks are applied to a copy of darktable-elegant-grey.css in ~/.config/darktable/themes. The import chain is
~/.config/darktable/themes/darktable-elegant-grey.css
imports
/opt/darktable/share/darktable/themes/darktable-elegant-dark.css
which imports
/opt/darktable/share/darktable/themes/darktable-elegant-darker.css
which imports
/opt/darktable/share/darktable/themes/darktable.css
This works as expected, but two questions remain. The first is :
*
{ font-size: 0.9rem; }
works as expected, the components are scaled down by 10 % relative to the predefinded value of 1em from darktable.css. This is shown on the right side of the screenshot.
But using
*
{ font-size: 0.9em; }
scales down most components far more than 10%, most components become really tiny as shown on the left side of the screenshot. I’m not the super expert on CSS, but I used it several times, so I know about inheritance of properties and about scaling lengths of components (widths, heights, sizes…), overwriting properties by subsequent definitions. But the behaviour above seems curious to me.
Using 1rem or 1em generates the same result. Sizes of components appear identical. But scaling this size (whatever absolute value it represents) in both cases by a simple linear factor (0.9) behaves completely different. In the first case the result is as expected, in the latter case it is not. This scaling is simplest math. I’m wondering what happens here ?
The second question is related to the size of the label of the dropdown (see second screenshot). Scaling the font-size to 0.9rem as shown above has different impacts on the sizes of header_label, darktable_label, view_label on one side and view_dropdown on the other side.
The code snippet below shows the relevant part taken from darktable.css.
#header_label,
#darktable_label,
#view_label,
#view_dropdown
{
background-color: transparent;
font-size: 1.5em;
margin:0;
border:0;
vpadding:0;
}
I wanted to compensate the different sizes by increasing the font-size of the dropdown. But nothing changes if I set for example
#view_dropdown
{
font-size: 2.5em;
}
in the local darktable-elegant-grey.css, while the same code for the other components works as expected. I looked for further appearances of #view_dropdown in darktable.css, but none of them should have an influence on the font-size. Again I’m wondering what happens ? Bug, or am I missing something fundamental ?
edit : there seems to be an issue uploading the screenshots (png files). Its shown “uploading…” when I drag an drop the images, but they are not shown.
second edit : I just figured out the answer to the first question
- the unit
rem always refers to the root element which in the present case is the size of the font delivered by GTK+3.
- the unit
em always refers to the parent of the actual element. In the present case this means that an element embedded into another element is scaled two times by the factor used (0.9 x 0.9 in the example above). And so on. The deeper an element is embedded into others the smaller it gets when scaling with unit em.
On this point of view in my opinion it would be more comfortable for the user, if darktable.css would always refer to the root element in line 163 by using font-size= 1rem. This would make tweaking the file simpler, because it is more predictable what is happening, when an (child, grandchild…) element is to be scaled later.
