CSS for the "working..." indicator that appears in the darkroom on the bottom part of the photo?

emoryy · May 21, 2023, 6:34pm

I would like to make this indicator much bigger and more noticeable, but I can’t seem to find the corresponding CSS classes. I’ve found .dt_messages but that’s not it. It affects some other status indicators, but not the “working…” text.
I begin to suspect that this label may be directly rendered onto the preview image sadly, and not with gtk because the global font size setting doesn’t seem to affect it either, I was also unable to select it with the interactive debugger.

paperdigits · May 21, 2023, 6:46pm

How about

/* Set messages shown on bottom middle of the UI. For example "loading image..." or "working on..." */
#log-msg,
#toast-msg
{
  color: @log_fg_color;
  font-size: 1em;
  font-weight: bold;
  background-color: rgba(75,75,75,0.6);
  padding: 0.56em 1.4em;
  border-radius: 0.56em;
}

 /* then set infos shown on top of the image on darkroom, like for example opacity in drawn masks */
#toast-msg
{
  padding: 0.14em 1em 0.28em 1em;
  border-radius: 0 0 0.56em 0.56em;
}

From line 1715 of darktable/darktable.css at e8cb2cb1d9a2b34a4bbe27278247dae0ff09c3c8 · darktable-org/darktable · GitHub

emoryy · May 21, 2023, 8:37pm

I tried but it doesn’t work. Also that state of the darktable.css is from 2 years ago.

This is how the same part looks for the current version:

github.com

darktable-org/darktable/blob/release-4.3.0/data/themes/darktable.css#L1535


      
            min-width: 5.6em;
            padding-left: 0.14em;
          }
          
          
/* Set color bar min height in colorzones module */
          #iop-bottom-bar
          {
              min-height: 1.2em;
          }
          
          
/* Set messages: first those on bottom middle of the UI, for example "loading image..." or "working on..." ; then deprecated and warning messages */
          .dt_messages
          {
            color: @log_fg_color;
            font-weight: bold;
            background-color: alpha(@plugin_bg_color,0.5);
            padding: 0.35em 0.7em;
            border-radius: 0.35em;
          }
          
          
.dt_warning

(I have 4.2.1 currently, but this part is the same.)

paperdigits · May 21, 2023, 9:54pm

Are you restarting DT each time you want to test a change?

emoryy · May 21, 2023, 10:16pm

The CSS rules apply immediately when you press the “save CSS and apply” button in the preferences window. I also can see the overridden values in the debugger. But otherwise I have restarted Darktable multiple times since then for other reasons.

The overrides indeed work for some messages, but not for the “working…” label. That .dt_messages class (or any other mentioned so far) simply doesn’t apply to it.

Here you can see that for example it works for the message that appears when you click too soon when adjusting the tone equalizer mask parameters. I have changed the font size to 50px. At the same time the “working…” label remains unchanged. It’s actually visible on this image as well in the middle under the big text.

elstoc · May 21, 2023, 10:22pm

Looking at the code I don’t think the “working…” message can be controlled with CSS. Its font size is hard-coded – see darktable/control.c at fe574c4996e70cefa9091be1395c49bf9186d48c · darktable-org/darktable · GitHub

emoryy · May 21, 2023, 10:38pm

Thanks for finding the actual code! Then as it looks it’s not just that the size is hardcoded but it’s really rendered with a lower level method, not with gtk.