Grey rounded rect fill style of gtk3 Frame and Activity toolbar active and pressed icons too large

[garycmartin]

The gtk3 grey rounded rect background fill style of the Frame and Activity toolbar active or pressed (mouse down / click) icons are too large. The grey background rounded rect should be smaller than the full hight of the frame/toolbar. See attached screen shot for before & after comparison.

[manuq]

Yes, I fighted this style difference at more than one point of the new theme development. Supposedly all widgets have settable margin, but it has no effect in toolbuttons.

.toolbar .button {
    margin: 3px;
}

doesn't work.

[humitos]

We need to use background-clip property to cut the background at some point.

• ​https://developer.mozilla.org/en-US/docs/CSS/background-clip

I'm attaching a patch that uses it and makes the "active" icons to look similar they were in gtk2. Although, this patch needs a bit more of work because it seems that F* icons have a fixed width and they do not keep with the actual value. Besides, the hight of the frame should be increased 6px as well because we need 3px for padding (at the top and at the bottom = 6px)

Is it possible to increase those values from the design point of view?

[humitos]

The result after applying the patch

[manuq]

Follow up of humitos patch.

[manuq]

Great! My follow up patch removes some padding from the button to keep the toolbar height. This needs to be well tested and proven with screenshots.

[manuq]

Candidate patch attached. I have verified this has the same margin as the GTK2 theme. Two things worth mention:

1. as we are using a transparent border to get the margin, there is one state we can't get fully correct: an active button wich is being hovered. It should be a black fill below a light grey rounded button.

2. the code that draws an outline around the button when it has a palette, should be updated to consider the margin.

[garycmartin]

Replying to manuq:

Candidate patch attached. I have verified this has the same margin as the GTK2 theme. Two things worth mention:

1. as we are using a transparent border to get the margin, there is one state we can't get fully correct: an active button wich is being hovered. It should be a black fill below a light grey rounded button.

2. the code that draws an outline around the button when it has a palette, should be updated to consider the margin.

Yes, I see both these issues as well, but otherwise I've not yet notices any other side effects in the Frame or Activities. Interestingly I could only get this to make a visible difference on an XO-1.75, it applied correctly to an XO-4 without error but has no visible difference – still investigating, must be something I'm doing (both are running 13.1.0 build 16 with fresh git make/installs of toolkit, shell, artwork, plus this artwork patch and nothing else).

[garycmartin]

Gif animation of frame before patch, after patch, and an old 0.94.1 build for reference

[garycmartin]

Just added an animated gif animation of the frame before the patch, after the patch, and an old 0.94.1 build just for reference. There is some notable horizontal padding related movement with the new patch.

[manuq]

Candidate patch.

[manuq]

Great test Gary! I have updated the patch based on your findings, just use the same horizontal padding tnan vertical one. Can you try again?

[manuq]

Toolkit patch to get the outline right. Was affecting only RadioToolButtons like the ones in the top panel of the frame, or in Paint toolbar.

[manuq]

Pushed artwork 7a0b1b51 and toolkit 2a6ad05b .

[greenfeld]

The grey highlight in toolbars does not extend to the full height of the frame (as desired) in Sugar 0.98.2 or .3.

[dnarvaez]

Milestone 0.98 deleted