GNOME Bugzilla – Bug 770166
Can GtkButtons of arbitrary size be circular? The style class only accommodates the default size
Last modified: 2016-08-22 17:32:57 UTC
Created attachment 333733 [details] normal vs oversized GtkButton with "circular" style class I just learned about the "circular" style class in the GtkButton docs: > In special cases, buttons can be made round by adding the .circular style class. This is great! e.g. I find it looks a lot better for a Refresh button, given that its icon is already circular, and provides a neat way to visually differentiate buttons of different functions, etc. However, the effect only works properly for Buttons of the standard size, i.e. with no expand properties or other deliberate upsizing. If we make a larger button, it gets round corners but straight regions at the sides in between. Looking at the Adwaita CSS (same is true for HighContrast), the reason is clear: > button.circular { > border-radius: 20px; > -gtk-outline-radius: 20px; } > button.circular label { > padding: 0; } The radius is hard-coded, to (perfectly!) match the default button size. I get why this was done, as circular buttons probably aren't intended for wide use - hence the "special cases" qualifier there - and have only been considered for the standard size. But they're 'normal enough' to be in the documentation ;) It would be great to support larger sizes if it's possible! So I'm wondering if (A) the CSS/theming machinery supports relatively sized borders at all, and (B) in any way, the "circular" class could be made to work for other sizes? Thanks.
border-radius: 50%; works but that doesn't help you for buttons that aren't perfectly square.
(In reply to Timm Bäder from comment #1) > border-radius: 50%; works but that doesn't help you for buttons that aren't > perfectly square. Great, thanks! I'm not an expert on CSS or particularly the variant used here, so wasn't sure whether a relative unit was possible or what it would be. I would be happy only to have this for nominally square Buttons, as IIRC it should be possibly to force such dimensions on the widget, right? If so, could the CSS be updated to use relative dimensions here, rather than absolute ones tied to the default button size? Thanks again!
It's probably better to go with something like border-radius: 9999px; since this way will give you rounded edges to rectangular buttons, while you'll get an ellipsis using percentages. I'll take care of updating the css as soon as I'm in front of a computer.
Fix pushed on both master and 3.20 branches.
Thanks for the very fast response, Lapo! I'll see if I can build and test tonight.
In case anyone else reads this and is interested, in trying to understand Lapo's explanation, I found a link that elaborates on why it was better to use an arbitrarily large px size, not 50%: http://stackoverflow.com/a/18260710/2757035 I'm still trying to understand it all, and not sure the answer text is 100% clear... but because pictures speak a thousand words, here are some CSS fiddles I edited from the ones given in that answer's comments! 50% => we get elliptical buttons: http://jsfiddle.net/h0coj8pj/ arbitrarily high px => we get buttons with rounded corners only, and a straight section in between http://jsfiddle.net/hg65dh23/ The 2nd is what Lapo has applied, which as he says, avoids buttons becoming fully elliptical. The minor dimension gets used as the radius. Conceptually, it ends u being like we made a circular button with the minor size in both dimensions, then extended it with a straight bit in the major direction to make up the difference. Or at least that's the way my brain makes sense of it. :-)
I was a tiny bit brief indeed, thanks for the meaningful explaination :-)