Slider Inconsistencies

[pojntfx]

Just noticed that the sliders in the GNOME Shell theme and the GTK theme look quite different:

One uses a squircle while the other one is a circle. Is this intentional? IMHO we should use the GTK version everywhere for more consistency.

[Feichtmeier]

@madsrh what's your opinion on that? Should both, shell and gtk, sliders use the same asset? :D

[madsrh]

IMO Let's go with consistency

[godlyranchdressing]

I'm worried that this might not be possible, but maybe someone else will know better. There's a custom Shell property called -slider-handle-radius: 6px, but all it seems to do is affect the actual size of the slider, not the shape.

Example with 2px instead of 6px:

And any other "normal" CSS property under the .slider class (which -slider-handle-radius falls under) affects the trough, not the slider. I tried digging through GNOME Shell's code and nothing stood out to me (in the past I found an unused CSS property so I was hoping I could get lucky).

[madsrh]

@nana-4 ?

[Feichtmeier]

In the end, if we accept that the shell is and can be different, many problems disappear. For example the shadow of pop ups and the popovers, these sliders here, the dialogs (which was more my problem tbh). :) But let's see maybe @godlyranchdressing is lucky. (I always wondered how that dressing tastes. Or is it actually from 👗? )

[Luxamman]

Would also like to see only one version, if the shell can not be changed, then you can at least adapt the others to it. The squircles are currently a little too big and clumsy anyway.

[Feichtmeier]

@Luxamman @madsrh @godlyranchdressing @clobrano @nusinusi how about this for the GtkTheme sliders:

And this for the shell theme sliders:

Together:

slider {
    $c: $neutral_color;
    @include button(normal, white);

    border: 1px solid _border_color($dark_fill);
    border-radius: 10px; 
... }

.slider {
  $_bg: $indication_bg_color; // $selected_bg_color;
  height: 1em;
  -slider-height: 0.1em;
  -slider-background-color: $dark_fill; // $osd_borders_color; //background of the trough
  -slider-border-color: $dark_fill; // $osd_borders_color; //trough border color
  -slider-active-background-color: $_bg; //active trough fill
  -slider-active-border-color: $_bg; //active trough border
  -slider-border-width: 1px;
  -slider-handle-radius: 8px;
}

[ghost]

Maybe a tiny bit more contrast (darker border) for the slider in the gtk? For better visibility. But apart from that perfect.

[Luxamman]

Looking good in general, I would prefer the circles a little smaller - at least it looks a bit big on the screenshots. Thx ;)

[Feichtmeier]

Decreased the shell slider again. Sadly 100% consistency can't be achieved (maybe someone else can) without increasing the shells radius until it matches the gtk slider because when I decrease the border radius in gtk it gets squircly again :disappointed: When I increase the shells border radius to match the gtk radius it looks like in the picture above... quiet big in the shell =) This is what I can do:

[madsrh]

IMO let's merge them both and see what people think - LGTM

[Feichtmeier]

@madsrh @Luxamman alright merged both gtk and shell PRs. Try and if it works out for you close this issue and tag fixed