How do I control CSS layers?

Development
1

With the Themes addon, what is the CSS Layering order?

I would expect it to be the Gtk theme (Gnome gsettings get org.gnome.desktop.interface gtk-theme) with the gramps.css and Themes addon selected theme on top of that.

Perhaps with the Themes addon by @prculley, a User customizable CSS file could be layered on top? The hint @Nick-Hall provided about expanding the height of the progress bar is nearly perfect. But he warns not to add it to the gramps.css where it will be overwritten with updates.

I am given to understand (from an unreliable source) that Python does not have a method to have a system report the CSS layer order. But it can be done from JavaScript

function getLayerOrder() {
  const layers = [];
  for (const sheet of document.styleSheets) {
    for (const rule of sheet.cssRules) {
      if (rule.type === CSSRule.LAYER_RULE) {
        layers.push(rule.name || 'anonymous');
      }
    }
  }
  return layers;
}

console.log(getLayerOrder());
2

Either CSS is not as fault-tolerant as it was a decade ago… or the Python CSS parser is overly sensitive. If anything is wrong (perhaps the ccs folder or the file is missing or malformed), Gramps launches with just the menu bar and a black window – with no content.

I decided to put the new styleheet in a gramps_user.css file in the css folder created by the Themes addon.


progress, trough {
  min-height: 15px;
}

Then link it from the gramps.css

@import url('../../../.gramps/css/gramps_user.css');

.lozenge {
  font-size: small;
  color: #ffffff;
  background-color: #0d6efd;
  padding: 3px;
  border-radius: 6px;
  box-shadow: 0px 0px 6px black;
}

.addon-row {
  border-width: 1px;
  border-style: solid;
  border-color: alpha(currentColor, .2);
  border-radius: 10px;
  margin: 1px;
}

paned>separator {
  margin: 0px;
  padding: 1px;
}
3

The problem is that you are still modifying gramps.css which would still need to be hacked with each new version release.

I am on Win10 so not sure of other platform settings, but in %localappdata%\gtk-3.0 either edit or create gtk.css and add the progress, trough setting here.

progress, trough {
  min-height: 12px;
}

This setting gets added to your set theme using the Themes addon or to the default Adwaita.

4

I agree that is a very big concern. However, if lost, there is only 1 line at risk and is easy to restore. Plus that line will not change as I experiment with styling.

I suspect that the right way might be to create a Layers css that establishes my gramps_user.css on top of whatever else is chosen in Themes, the gramps.css and the base Gtk css. (And maybe the OS css.) It would have to reside in wherever Themes scans to offer its theme selections. (Ideally, Themes will someday have separate selections for those comprehensive themes and User overlays. )

I do NOT want to mess with the general Gtk css. That often has unexpected consequences with Gimp. And there is too much clutter to find what I’ve changed and I suspect that there is a lot of legacy style that isn’t even used anymore.

5

At least on Win10, I actually created the gtk.css file and the progress trough is its only setting. I realize that is probably not true on a Linux box. The only other file in the gtk-3.0 folder is the bookmarks file that holds the information for bookmarked folders in the Gramps file chooser.

1 Like