Recent Changes dialog CSS

[dmausner (Dave Mausner)]

Please suggest a way to modify the CSS of the Recent Changes dialog, so that the dialog has “resize:both” and “overflow:auto”. This is intended to allow resizing the box when filenames wrap around. Might this have something to do with custom themes? Thanks in advance.

[acolomb (André Colomb)]

That’s pretty easy, if you already know what CSS classes to adjust.

1. Check syncthing --paths output. It should contain some info like:

   GUI override directory:
           /home/YOURUSERNAME/.local/state/syncthing/gui
   

2. Create your custom theme directory: /home/YOURUSERNAME/.local/state/syncthing/gui/mytheme

3. Place your CSS code in a theme file: /home/YOURUSERNAME/.local/state/syncthing/gui/mytheme/theme.css:

   /*
    * Recent Changes tweaks
    */
   
   #globalChanges .modal-content {
       color: red !important;
       overflow: auto;
       resize: both;
   }
   

4. Restart Syncthing to pick up the new theme “Mytheme”.

5. Select it from the GUI and save settings.

6. Check your Recent Changes modal, it should have red text and the desired resizing behavior.

7. Start tweaking CSS to make it work better.

Please do report what you’ve come up with. Could be interesting to integrate it in the default theme. So far my simple attempt here doesn’t keep the box centered for example, there’s room for improvement.