HC: use radial-gradient() in place of -gtk-gradient().

4 files changed, 45 insertions, 78 deletions

diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 145d257e5d..e5507fa2cb 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -341,20 +341,8 @@ entry {
 $_dot_color: $selected_bg_color;
 
 @keyframes needs_attention {
-  from {
-    background-image: -gtk-gradient(radial,
-                                    center center, 0,
-                                    center center, 0.01,
-                                    to($_dot_color),
-                                    to(transparent));
-  }
-  to {
-    background-image: -gtk-gradient(radial,
-                                    center center, 0,
-                                    center center, 0.5,
-                                    to($selected_bg_color),
-                                    to(transparent));
-  }
+  from { background-image: radial-gradient($_dot_color 0%, transparentize($_dot_color, 1) 0%); }
+  to { background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color, 1) 70%); }
 }
 
 
@@ -685,11 +673,7 @@ button {
 
 %needs_attention {
   animation: needs_attention 150ms ease-in;
-  background-image: -gtk-gradient(radial,
-                                  center center, 0,
-                                  center center, 0.5,
-                                  to($_dot_color),
-                                  to(transparent));
+  background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color,1 ) 70%);
   background-size: 6px 6px;
   background-repeat: no-repeat;
 
diff --git a/gtk/theme/HighContrast/_drawing.scss b/gtk/theme/HighContrast/_drawing.scss
index 4113208096..86617a721a 100644
--- a/gtk/theme/HighContrast/_drawing.scss
+++ b/gtk/theme/HighContrast/_drawing.scss
@@ -291,48 +291,31 @@
   $_small_gradient_length: 5%;
   $_big_gradient_length: 100%;
 
-  $_position: center top;
   $_small_gradient_size: 100% $_small_gradient_length;
   $_big_gradient_size: 100% $_big_gradient_length;
 
-  @if $p==bottom {
-    $_position: center bottom;
-    $_linear_gradient_direction: to top; 
-  }
-
-  @else if $p==right {
-    $_position: right center;
+  @if $p==right or $p==left {
     $_small_gradient_size: $_small_gradient_length 100%;
     $_big_gradient_size: $_big_gradient_length 100%;
   }
 
-  @else if $p==left {
-    $_position: left center;
-    $_small_gradient_size: $_small_gradient_length 100%;
-    $_big_gradient_size: $_big_gradient_length 100%;
-  }
-  
   $_small_gradient_color: $c;
-  $_big_gradient_color: $c;
+  $_big_gradient_color: transparentize($c, 0.93);
 
   @if $c==$fg_color {
     $_small_gradient_color: darken($borders_color, 50%);
-    $_big_gradient_color: $fg_color;
+    $_big_gradient_color: transparentize($fg_color, 0.93);
 
     @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
   }
 
-  $_small_gradient: -gtk-gradient(radial,
-                                  $_position, 0,
-                                  $_position, 0.5,
-                                  to($_small_gradient_color),
-                                  to(transparentize($_small_gradient_color, 1)));
+  $_small_gradient: radial-gradient(ellipse farthest-side at $p,
+                                    $_small_gradient_color 85%,
+                                    transparentize($_small_gradient_color, 1));
 
-  $_big_gradient: -gtk-gradient(radial,
-                                $_position, 0,
-                                $_position, 0.6,
-                                from(transparentize($_big_gradient_color, 0.5)),
-                                to(transparentize($_big_gradient_color, 1)));
+  $_big_gradient: radial-gradient(ellipse farthest-side at $p,
+                                  $_big_gradient_color,
+                                  transparentize($_big_gradient_color, 1));
 
   @if $t==normal {
     background-image: $_small_gradient, $_big_gradient;
@@ -345,7 +328,7 @@
   }
 
   background-repeat: no-repeat;
-  background-position: $_position;
+  background-position: $p;
 
   background-color: transparent; // reset some properties to be sure to not inherit them somehow
   border: none;                  //
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 9d821bb91f..4d67f8a51b 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -2632,73 +2632,73 @@ scrolledwindow viewport.frame {
   border-style: none; }
 placessidebar overshoot.top,
 scrolledwindow overshoot.top {
-  background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
+  background-image: radial-gradient(ellipse farthest-side at top, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
   background-size: 100% 5%, 100% 100%;
   background-repeat: no-repeat;
-  background-position: center top;
+  background-position: top;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   placessidebar overshoot.top:backdrop,
   scrolledwindow overshoot.top:backdrop {
-    background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#737373), to(rgba(115, 115, 115, 0)));
+    background-image: radial-gradient(ellipse farthest-side at top, #737373 85%, rgba(115, 115, 115, 0));
     background-size: 100% 5%;
     background-repeat: no-repeat;
-    background-position: center top;
+    background-position: top;
     background-color: transparent;
     border: none;
     box-shadow: none; }
 placessidebar overshoot.bottom,
 scrolledwindow overshoot.bottom {
-  background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
+  background-image: radial-gradient(ellipse farthest-side at bottom, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at bottom, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
   background-size: 100% 5%, 100% 100%;
   background-repeat: no-repeat;
-  background-position: center bottom;
+  background-position: bottom;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   placessidebar overshoot.bottom:backdrop,
   scrolledwindow overshoot.bottom:backdrop {
-    background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#737373), to(rgba(115, 115, 115, 0)));
+    background-image: radial-gradient(ellipse farthest-side at bottom, #737373 85%, rgba(115, 115, 115, 0));
     background-size: 100% 5%;
     background-repeat: no-repeat;
-    background-position: center bottom;
+    background-position: bottom;
     background-color: transparent;
     border: none;
     box-shadow: none; }
 placessidebar overshoot.left,
 scrolledwindow overshoot.left {
-  background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
+  background-image: radial-gradient(ellipse farthest-side at left, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at left, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
   background-size: 5% 100%, 100% 100%;
   background-repeat: no-repeat;
-  background-position: left center;
+  background-position: left;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   placessidebar overshoot.left:backdrop,
   scrolledwindow overshoot.left:backdrop {
-    background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#737373), to(rgba(115, 115, 115, 0)));
+    background-image: radial-gradient(ellipse farthest-side at left, #737373 85%, rgba(115, 115, 115, 0));
     background-size: 5% 100%;
     background-repeat: no-repeat;
-    background-position: left center;
+    background-position: left;
     background-color: transparent;
     border: none;
     box-shadow: none; }
 placessidebar overshoot.right,
 scrolledwindow overshoot.right {
-  background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
+  background-image: radial-gradient(ellipse farthest-side at right, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at right, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
   background-size: 5% 100%, 100% 100%;
   background-repeat: no-repeat;
-  background-position: right center;
+  background-position: right;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   placessidebar overshoot.right:backdrop,
   scrolledwindow overshoot.right:backdrop {
-    background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#737373), to(rgba(115, 115, 115, 0)));
+    background-image: radial-gradient(ellipse farthest-side at right, #737373 85%, rgba(115, 115, 115, 0));
     background-size: 5% 100%;
     background-repeat: no-repeat;
-    background-position: right center;
+    background-position: right;
     background-color: transparent;
     border: none;
     box-shadow: none; }
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index 6e416d8739..f1faab1493 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -2639,73 +2639,73 @@ scrolledwindow viewport.frame {
   border-style: none; }
 placessidebar overshoot.top,
 scrolledwindow overshoot.top {
-  background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent));
+  background-image: radial-gradient(ellipse farthest-side at top, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at top, rgba(0, 0, 0, 0.07), transparent);
   background-size: 100% 5%, 100% 100%;
   background-repeat: no-repeat;
-  background-position: center top;
+  background-position: top;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   placessidebar overshoot.top:backdrop,
   scrolledwindow overshoot.top:backdrop {
-    background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#8d8d8d), to(rgba(141, 141, 141, 0)));
+    background-image: radial-gradient(ellipse farthest-side at top, #8d8d8d 85%, rgba(141, 141, 141, 0));
     background-size: 100% 5%;
     background-repeat: no-repeat;
-    background-position: center top;
+    background-position: top;
     background-color: transparent;
     border: none;
     box-shadow: none; }
 placessidebar overshoot.bottom,
 scrolledwindow overshoot.bottom {
-  background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent));
+  background-image: radial-gradient(ellipse farthest-side at bottom, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at bottom, rgba(0, 0, 0, 0.07), transparent);
   background-size: 100% 5%, 100% 100%;
   background-repeat: no-repeat;
-  background-position: center bottom;
+  background-position: bottom;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   placessidebar overshoot.bottom:backdrop,
   scrolledwindow overshoot.bottom:backdrop {
-    background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#8d8d8d), to(rgba(141, 141, 141, 0)));
+    background-image: radial-gradient(ellipse farthest-side at bottom, #8d8d8d 85%, rgba(141, 141, 141, 0));
     background-size: 100% 5%;
     background-repeat: no-repeat;
-    background-position: center bottom;
+    background-position: bottom;
     background-color: transparent;
     border: none;
     box-shadow: none; }
 placessidebar overshoot.left,
 scrolledwindow overshoot.left {
-  background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent));
+  background-image: radial-gradient(ellipse farthest-side at left, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at left, rgba(0, 0, 0, 0.07), transparent);
   background-size: 5% 100%, 100% 100%;
   background-repeat: no-repeat;
-  background-position: left center;
+  background-position: left;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   placessidebar overshoot.left:backdrop,
   scrolledwindow overshoot.left:backdrop {
-    background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#8d8d8d), to(rgba(141, 141, 141, 0)));
+    background-image: radial-gradient(ellipse farthest-side at left, #8d8d8d 85%, rgba(141, 141, 141, 0));
     background-size: 5% 100%;
     background-repeat: no-repeat;
-    background-position: left center;
+    background-position: left;
     background-color: transparent;
     border: none;
     box-shadow: none; }
 placessidebar overshoot.right,
 scrolledwindow overshoot.right {
-  background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#010101), to(rgba(1, 1, 1, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(0, 0, 0, 0.5)), to(transparent));
+  background-image: radial-gradient(ellipse farthest-side at right, #010101 85%, rgba(1, 1, 1, 0)), radial-gradient(ellipse farthest-side at right, rgba(0, 0, 0, 0.07), transparent);
   background-size: 5% 100%, 100% 100%;
   background-repeat: no-repeat;
-  background-position: right center;
+  background-position: right;
   background-color: transparent;
   border: none;
   box-shadow: none; }
   placessidebar overshoot.right:backdrop,
   scrolledwindow overshoot.right:backdrop {
-    background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#8d8d8d), to(rgba(141, 141, 141, 0)));
+    background-image: radial-gradient(ellipse farthest-side at right, #8d8d8d 85%, rgba(141, 141, 141, 0));
     background-size: 5% 100%;
     background-repeat: no-repeat;
-    background-position: right center;
+    background-position: right;
     background-color: transparent;
     border: none;
     box-shadow: none; }