Ubuntu 18.04 ignores my gtk.css file

I'm answering my own question because no one has had any suggestions but after long experimentation I have something that mostly works. I have the following in ~/.config/gtk-3.0/settings.ini

[Settings]
gtk-application-prefer-dark-theme=0
gtk-primary-button-warps-slider = false

and the following in ~/.config/gtk-3.0/gtk.css

scrollbar slider {
    /* Size of the slider */
    min-width: 18px;
    min-height: 18px;
    border-radius: 15px;

    /* Padding around the slider */
    border: 1px solid #606307;
}

scrollbar trough {
    background-color: shade(@theme_bg_color, 0.5);
}

scrollbar button,
scrollbar button.vertical,
scrollbar button.horizontal,
scrollbar .button,
scrollbar .button.vertical,
scrollbar .button.horizontal {
    color: shade(@theme_bg_color, 0.10);
    background-color: shade(@theme_bg_color, 0.6);
}

scrollbar.vertical slider,
scrollbar.vertical .slider {
    background-image: radial-gradient(ellipse at center, DarkGray 0%, LightGrey 100%);
}

scrollbar.horizontal slider,
scrollbar.horizontal .slider {
    background-image: radial-gradient(ellipse at center, DarkGray 0%, LightGray 100%);
}

That gives me a wide scrollbar with a light gray slider on a dard gray background, in both firefox and emacs. I wish I knew why this worked, but I haven't found any documentation that explains the various commands. The one strange thing that this does is that, in emacs, the scrollbar is slim until the first time the mouse passes over it, at which point it gets wide and stays wide. Also, the scrollbar in emacs sometimes appears to be a slimmer one partly overlaying a wider one, in a way that's still useable but very strange.

I'm sorry I don't have a better answer, however, for what its worth, I've been trying to establish a frame of reference for this, and so far, struck out:

My objective was simply to set background colors for the workspace plugin (wnck-pager?) to the panel application under XUbuntu 16.04. Based on another answer tip I found elsewhere, I created the gtk.css from scratch (there was none there to begin with), as follows:

~/.config/gtk-3.0 cat gtk.css

wnck-pager { background-color: #0F0000; } wnck-pager:selected { background-color: #00000F; } wnck-pager:hover { background-color: #000FA0; }

This enables me to see which workspace I'm in, since the default background colors are so similar, its difficult to notice. However, while attempting to export this fix to adjacent Xubu 16.04 systems, I found a much more ornate gtk.css file, with references that looked like they might be relevant. However, I have yet to track down the relevant docs. I think this may be part of a project called 'mono'...but you see, this is a classic rathole situation, all I wanted to do was find a way to set the 'hover' and 'selected' background colors on the workspaces under the panel app.

Bottom-line: on the second system (the one with the much larger gtk.css file), I set that file aside, and installed the one listed above, just to see if a) anything was broken, and b) if I could get the workspace selected background color on the panel to change. Nothing obvious was broken (by removing the more involved gtk.css file). However, the very simple gtk.css file I put in its place did not work on the second Xubuntu 16.04 workstation. Same gtk.css file on both systems, both 16.04 Xubuntu, one works, one doesn't.

Not sure how much more time I can invest in resolving this, but whatever additional results I get, I'll post them here.

Note to moderators: I know this doesn't answer the question, however, I am sharing my research. (Thanks for StackExchange. An outstanding, invaluable resource.)

The appearance of the Firefox scrollbars can be changed by creating a new gtk.css in the Firefox profile folder. For me this is located at ~snap/firefox/323/.config/gtk-3.0 , but it may have a different location if you don't have a snap version.

The gtk.css file should contain the following code to allow you to adjust the appearance of both the vertical and horizontal sliders:

scrollbar.vertical slider {

/* Slider dimensions */

min-width: 12px;
min-height: 70px;

/* Curvature top and bottom of the slider */

border-radius: 12px;

/* Padding around the slider */

border: 4px solid transparent;

/* Colour of the slider */

background-color: #666699;

}

scrollbar.horizontal slider {

/* Slider dimensions */

min-width: 70px;    
min-height: 12px;

/* Curvature top and bottom of the slider */

border-radius: 12px;

/* Padding around the slider */

border: 4px solid transparent;

/* Colour of the slider */

background-color: #666699;

}

Just play around with the values until you find something you like. There are various colour finders online which will give you the hexadecimal values for a given colour.