Scrollbars in current with GTK theme

I'm running current, ktown and multilib. Updated 2020-03-16.

I'm running with the Oxygen Theme in System Settings.

I'm running with the Tango Theme in LibreOffice.

I'm trying to see the up and down arrows on the Vertical Scrollbars

In Gnucash I initially see arrows at the top and bottom of the vertical scrollbar, Unfortunately the arrow at the top of the scrollbar is < and the arrow at the bottom of the scrollbar is >. They are only visible for as long as Gnucash's "Tip of the day" dialog is present. When the "Tip of the day" is closed the arrows disappear, leaving a block that blends in with the background.I can mouse click on this empty space and scrolling behaves as I would expect.

In Libreoffice I never see the arrows. All I get is the block where the arrow show be blending in with the background. I can mouse click on this empty space and scrolling behaves as I would expect.

I've got as far as creating a file .config/gtk-3.0/gtk.css

@import 'colors.css';

scrollbar {
  -GtkScrollbar-has-backward-stepper: true;
  -GtkScrollbar-has-forward-stepper: true;
}

scrollbar, scrollbar button, scrollbar slider {
   min-width: 24px;
   min-height: 24px;

Altering the min-width and min-height alters the width of the scrollbar and the width/height of the block where the arrows should go. This is most helpful as I can see that changing the contents of .config/gtk-3.0/gtk.css does change how the scrollbars are being presented.

I can change .config/gtk-3.0/gtk.css to remove the empty block where the arrows should go by toggling -GtkScrollbar-has-backward-stepper and -GtkScrollbar-has-forward-stepper to false. See below.

@import 'colors.css';

scrollbar {
  -GtkScrollbar-has-backward-stepper: false;
  -GtkScrollbar-has-forward-stepper: false;
}

scrollbar, scrollbar button, scrollbar slider {
   min-width: 24px;
   min-height: 24px;

The next step is where I'm stuck. How do I get the downward and upward pointers to appear at the top and bottom of the scrollbars and in the correct orientation?


Thanks

Alex

The GTK 3 theme should map the scrollbar buttons to icons as follows:

scrollbar.vertical button.up {
        -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
}

scrollbar.vertical button.down {
        -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
}

scrollbar.horizontal button.up {
        -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
}

scrollbar.horizontal button.down {
        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

If your theme is not doing this, it is broken. GTK 3 themes are too complex for casual editing. The easiest solution would be to try another theme.
Ed

Originally Posted by EdGr The GTK 3 theme should map the scrollbar buttons to icons as follows: scrollbar.vertical button.up { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } scrollbar.vertical button.down { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } scrollbar.horizontal button.down { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } If your theme is not doing this, it is broken. GTK 3 themes are too complex for casual editing. The easiest solution would be to try another theme. Ed

That was most helpful.

I decided to concentrate on the file /usr/share/themes/Breeze/gtk-3.0/gtk.css

Adding your suggested code got me the right up/down characters in the scrollbar buttons.

I eventually then noticed something odd in my /usr/share/themes/Breeze/gtk-3.0/gtk.css about the configuration of scrollbar button

  scrollbar button {
    min-width: 24px;
    min-height: 24px;
    margin: 0px;
    padding: 0px 0px;
    border: none;
    border-radius: 0px;
    background-image: none;
    background-color: transparent;
    color: transparent;
    box-shadow: none; }

in that the background-color and the color were both transparent.So I hashed out the color config setting as follows

  scrollbar button {
    min-width: 24px;
    min-height: 24px;
    margin: 0px;
    padding: 0px 0px;
    border: none;
    border-radius: 0px;
    background-image: none;
    background-color: transparent;
#    color: transparent;
    box-shadow: none; }

In gnucash I then had the correct up/down image in the scrollbar buttons and they were always visible if appropriate.

So a success.

Now need to translate that into how I configure this locally in .config/gtk-3.0/gtk.css otherwise I may have problems when breeze-gtk is next upgraded.

I don't know if GTK's own CSS differs from standard CSS, but this is how to comment in standard CSS:

scrollbar button {...
    background-color: transparent;
    /*color: transparent;*/
    box-shadow: none;}

It may be that your # simply makes that line an invalid rule, so is ignored.

I would probably have tried changing transparent to inherit for both color and background-color before commenting the color rule.

Thanks to EdGr!

That's cool.

It sounds like you are debugging Breeze. I suggest creating a standalone theme rather than a delta so that you won't have to deal with upgrade breakage.
Ed

What I've settled for is

1. The /usr/share/themes/Breeze/gtk-3.0/gtk.css as supplied in package breeze-gtk-5.18.3-x86_64-1alien
2. A bespoke .config/gtk-3.0/gtk.css in the home directory. See below.

@import 'colors.css';

scrollbar {
        -GtkScrollbar-has-backward-stepper: true;
        -GtkScrollbar-has-forward-stepper: true;
        min-width: 24px;
        min-height: 24px;
}

scrollbar button {
        min-width: 24px;
        min-height: 24px;
        color: black;
}

scrollbar slider {
        min-width: 24px;
        min-height: 24px;
}

scrollbar.vertical button.up {
        -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
}

scrollbar.vertical button.down {
        -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
}

scrollbar.horizontal button.up {
        -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
}

scrollbar.horizontal button.down {
        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

This seems to have fixed the scrollbar problems with gnucash and libreoffice.

Still have to see If I can repeat successfully on one of my other test virtual machines.