Use box-shadow instead of border in progressbar's progress (LP #1617705)

gtk-3.0/_common.scss

@@ -3071,17 +3071,17 @@ scale {
 progressbar {
   // sizing
   &.horizontal {
-    trough,
-    progress { min-height: 6px; }
+    trough { min-height: 6px; }
+    progress { min-height: 8px; }
   }
 
   &.vertical {
-    trough,
-    progress { min-width: 6px; }
+    trough { min-width: 6px; }
+    progress { min-width: 8px; }
   }
 
-  &.horizontal progress { margin: 0 -1px; } // the progress node is positioned after the trough border
-  &.vertical progress { margin: -1px 0; }   // this moves it over it.
+  &.horizontal progress,
+  &.vertical progress { margin: 0; }
 
 
   // FIXME: insensitive state missing and some other state should be set probably
@@ -3099,6 +3099,9 @@ progressbar {
 
   progress {
     @extend %scale_highlight;
+    border-width: 0; // use box-shadow instead of border in order to not draw anything if the progressbar's fraction is 0 (borders are always drawn!)
+    box-shadow: inset 1px 1px shade($selected_bg_color, 0.7),
+                inset -1px -1px shade($selected_bg_color, 0.7);
 
     border-radius: 3px;
 
@@ -3123,7 +3126,10 @@ progressbar {
     }
   }
 
-  &:backdrop progress { @extend %scale_highlight:backdrop; } // states not passed here as well
+  &:backdrop progress { // states not passed here as well
+    @extend %scale_highlight:backdrop;
+    box-shadow: none;
+  }
 
   &.osd { // progressbar.osd used for epiphany page loading progress
     min-width: 3px;

gtk-3.0/gtk-contained-dark.css

@@ -3154,20 +3154,22 @@ scale {
 progressbar {
   font-size: smaller;
   color: rgba(238, 238, 236, 0.4); }
-  progressbar.horizontal trough,
-  progressbar.horizontal progress {
+  progressbar.horizontal trough {
     min-height: 6px; }
-  progressbar.vertical trough,
-  progressbar.vertical progress {
-    min-width: 6px; }
   progressbar.horizontal progress {
-    margin: 0 -1px; }
+    min-height: 8px; }
+  progressbar.vertical trough {
+    min-width: 6px; }
   progressbar.vertical progress {
-    margin: -1px 0; }
+    min-width: 8px; }
+  progressbar.horizontal progress, progressbar.vertical progress {
+    margin: 0; }
   progressbar:backdrop {
     box-shadow: none;
     transition: 200ms ease-out; }
   progressbar progress {
+    border-width: 0;
+    box-shadow: inset 1px 1px shade(#145ba6, 0.7), inset -1px -1px shade(#145ba6, 0.7);
     border-radius: 3px; }
     progressbar progress.left {
       border-top-left-radius: 3px;
@@ -3181,6 +3183,8 @@ progressbar {
     progressbar progress.bottom {
       border-bottom-right-radius: 3px;
       border-bottom-left-radius: 3px; }
+  progressbar:backdrop progress {
+    box-shadow: none; }
   progressbar.osd {
     min-width: 3px;
     min-height: 3px;

gtk-3.0/gtk-contained.css

@@ -3183,20 +3183,22 @@ scale {
 progressbar {
   font-size: smaller;
   color: rgba(60, 60, 60, 0.4); }
-  progressbar.horizontal trough,
-  progressbar.horizontal progress {
+  progressbar.horizontal trough {
     min-height: 6px; }
-  progressbar.vertical trough,
-  progressbar.vertical progress {
-    min-width: 6px; }
   progressbar.horizontal progress {
-    margin: 0 -1px; }
+    min-height: 8px; }
+  progressbar.vertical trough {
+    min-width: 6px; }
   progressbar.vertical progress {
-    margin: -1px 0; }
+    min-width: 8px; }
+  progressbar.horizontal progress, progressbar.vertical progress {
+    margin: 0; }
   progressbar:backdrop {
     box-shadow: none;
     transition: 200ms ease-out; }
   progressbar progress {
+    border-width: 0;
+    box-shadow: inset 1px 1px shade(#398ee7, 0.7), inset -1px -1px shade(#398ee7, 0.7);
     border-radius: 3px; }
     progressbar progress.left {
       border-top-left-radius: 3px;
@@ -3210,6 +3212,8 @@ progressbar {
     progressbar progress.bottom {
       border-bottom-right-radius: 3px;
       border-bottom-left-radius: 3px; }
+  progressbar:backdrop progress {
+    box-shadow: none; }
   progressbar.osd {
     min-width: 3px;
     min-height: 3px;