How to create a vertical linear gradient for a GTK separator

Question

I'm using Gtk 3.10 and I am experimenting for the first time some of the CSS theming aspects of Gtk programming.

Taking from the gtk3-demo I noted this excellent example

From the associated CSS file I can see that this "handle bar" is actually a gradient fill centered:

.pane-separator {
  background-color: alpha(white, 0.80);
  background-image: linear-gradient(transparent, transparent 1px, #999 1px, #999 4px, transparent 4px);
  background-size: 40px auto;
  background-repeat: no-repeat;
  background-position: center;
}

.pane-separator:prelight {
  background-image: linear-gradient(transparent, transparent 1px, #555 1px, #555 4px, transparent 4px);
}

So in my naivety I thought I would apply this to my Gtk application - I wanted the vertical pane-separators to have this centered "handle" as well as the horizontal pane-separators

Well as you can see, the horizontal pane-separators worked (1) but the vertical pane-separators (2) & (3) placed the "handle" at the top.

I thought I would use the transform: rotate(90deg); from this CSS example but this didnt work in Gtk

gi._glib.GError: gtkthemeoverride.css:18:11'transform' is not a valid property name

I'm using this as my reference answer to use Python & the Gtk.CssProvider() to load my equivalent of "style.css"

How do I centre the vertical handle in Gtk - what changes to the CSS file do I need?

---

I tried to use "90deg" in the CSS element - background-image: linear-gradient(90deg, transparent, transparent 1px, #999 1px, #999 4px, transparent 4px);

This was the result - no handle in the vertical pane - but a 90deg rotation in the horizontal (just testing - I'll be using separate CSS elements later to differentiate between vertical and horizontal)

Answer 1

.pane-separator#vertical_paned {

  background-image: linear-gradient(to left, transparent, transparent 1px, #999 1px, #999 4px, transparent 4px);
  background-size: 100% 15%;
  background-repeat: no-repeat;
  background-position: center;
}

.pane-separator:prelight#vertical_paned {
  background-image: linear-gradient(to left, transparent, transparent 1px, #555 1px, #555 4px, transparent 4px);
}

In the end the key parts I found was to use the direction element of a gradient to left or to right, together with the background-size expressed in terms of percentage width vs height - in this case, 100% width, 15% height.

In addition I added the named CSS element #vertical_paned. Every python widget can be defined with a name using the method widget.set_name(name), thus I defined both vertical panes as shown in the picture with the same name vertical_paned and the CSS element specific to these panes was applied.

Answer 2

The background-position property takes two values, one for horizontal and one for vertical. They both default to 0%, which is why your original attempt appeared at the top: it was centered horizontally but not vertically.

Try this:

background-position: center center;