Adwaita: transparent background for progressbar.osd

Hopefully fixes https://bugzilla.gnome.org/show_bug.cgi?id=760331
Added the .osd style class to the progressbar docs.

4 files changed, 10 insertions, 4 deletions

diff --git a/gtk/gtkprogressbar.c b/gtk/gtkprogressbar.c
index 405e003d8d..13731c3a43 100644
--- a/gtk/gtkprogressbar.c
+++ b/gtk/gtkprogressbar.c
@@ -72,7 +72,7 @@
  * # CSS nodes
  *
  * |[<!-- language="plain" -->
- * progressbar
+ * progressbar[.osd]
  * ╰── trough
  *     ├── [text]
  *     ╰── progress[.pulse]
@@ -83,6 +83,8 @@
  * is shown. The progress subnode has the style class .pulse when in activity
  * mode. It gets the style classes .left, .right, .top or .bottom added when
  * the progress 'touches' the corresponding end of the GtkProgressBar.
+ * The .osd class on the progressbar node is for use in overlays like the one
+ * epiphany has for page loading progress.
  */
 
 #define MIN_HORIZONTAL_BAR_WIDTH   150
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index d644d41b57..7372a07b97 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2653,9 +2653,11 @@ progressbar {
 
   &:backdrop progress { @extend %scale_highlight:backdrop; } // states not passed here as well
 
-  &.osd {
+  &.osd { // progressbar.osd used for epiphany page loading progress
     min-width: 3px;
     min-height: 3px;
+    background-color: transparent;
+
     trough {
       border-style: none;
       border-radius: 0;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index c4e61aaadf..c692179be8 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -3512,7 +3512,8 @@ progressbar {
       border-bottom-left-radius: 2px; }
   progressbar.osd {
     min-width: 3px;
-    min-height: 3px; }
+    min-height: 3px;
+    background-color: transparent; }
     progressbar.osd trough {
       border-style: none;
       border-radius: 0;
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 11f65dba34..61ea108262 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -3678,7 +3678,8 @@ progressbar {
       border-bottom-left-radius: 2px; }
   progressbar.osd {
     min-width: 3px;
-    min-height: 3px; }
+    min-height: 3px;
+    background-color: transparent; }
     progressbar.osd trough {
       border-style: none;
       border-radius: 0;