Replace style image with Linear-gradient

Signed-off-by: Saksham Gupta <shucon01@gmail.com>

setup/styles.css

@@ -6,7 +6,11 @@ body {
   padding-bottom: 1em;
   color: #444;
   font: 0.8em sans-serif;
-  background: url(../themes/pmahomme/img/left_nav_bg.png) repeat-y 80px 0 #f3f3f3;
+  background: linear-gradient(to right, #f3f3f3, #dadcde);
+  background-position: 180px 0px;
+  background-repeat: repeat-y;
+  background-color: #f3f3f3;
+  background-size: 25px auto;
 }
 
 input,

themes/bootstrap/scss/_designer.scss

@@ -1,8 +1,5 @@
-$header-img: '../img/designer/Header.png';
-$header-linked-img: '../img/designer/Header_Linked.png';
 $minus-img: '../img/designer/minus.png';
 $plus-img: '../img/designer/plus.png';
-$left-panel-button-img: '../img/designer/left_panel_butt.png';
 $top-panel-img: '../img/designer/top_panel.png';
 $small-tab-img: '../img/designer/small_tab.png';
 $frams1-img: '../img/designer/1.png';
@@ -56,8 +53,7 @@ canvas.designer {
   user-select: none;
 
   .header {
-    background-image: url($header-img);
-    background-repeat: repeat-x;
+    background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
   }
 }
 
@@ -69,8 +65,7 @@ canvas.designer {
 }
 
 .tab_zag_2 {
-  background-image: url($header-linked-img);
-  background-repeat: repeat-x;
+  background: linear-gradient(#fffa96 0%, #fffa96 39%, #ffe796 40%, #ffe796 100%);
   text-align: center;
   cursor: move;
   padding: 1px;
@@ -132,8 +127,7 @@ canvas.designer {
   font-weight: bold;
   margin-left: 2px;
   text-align: left;
-  background-color: #fff;
-  background-image: url($left-panel-button-img);
+  background: linear-gradient(#fff, #dfe5e7 70%, #fff 70%, #fff 100%);
   border: #ccc solid 1px;
 
   &:hover {
@@ -167,8 +161,7 @@ canvas.designer {
   cursor: default;
   width: 1px;
   color: #000;
-  background-image: url($header-img);
-  background-repeat: repeat-x;
+  background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
 }
 
 .small_tab {
@@ -199,8 +192,7 @@ canvas.designer {
 }
 
 .small_tab_pref {
-  background-image: url($header-img);
-  background-repeat: repeat-x;
+  background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
   text-align: center;
   width: 1px;
 

themes/bootstrap/scss/_navigation.scss

@@ -106,7 +106,8 @@
   margin-left: 0.75em;
 
   select {
-    background: url('../img/select_bg.png') repeat scroll 0 0;
+    background: linear-gradient(#fff, #f1f1f1, #fff);
+    -webkit-border-radius: 2px;
     border-radius: 2px;
     border: 1px solid #bbb;
     border-top: 1px solid #bbb;

themes/original/scss/_navigation.scss

@@ -119,7 +119,8 @@
   margin-left: 0.75em;
 
   select {
-    background: url("../../pmahomme/img/select_bg.png") repeat scroll 0 0;
+    background: linear-gradient(#fff, #f1f1f1, #fff);
+    -webkit-border-radius: 2px;
     border-radius: 2px;
     border: 1px solid #bbb;
     border-top: 1px solid #bbb;

themes/pmahomme/scss/_designer.scss

@@ -1,8 +1,5 @@
-$header-img: '../img/designer/Header.png';
-$header-linked-img: '../img/designer/Header_Linked.png';
 $minus-img: '../img/designer/minus.png';
 $plus-img: '../img/designer/plus.png';
-$left-panel-button-img: '../img/designer/left_panel_butt.png';
 $top-panel-img: '../img/designer/top_panel.png';
 $small-tab-img: '../img/designer/small_tab.png';
 $frams1-img: '../img/designer/1.png';
@@ -56,8 +53,7 @@ canvas.designer {
   user-select: none;
 
   .header {
-    background-image: url($header-img);
-    background-repeat: repeat-x;
+    background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
   }
 }
 
@@ -69,7 +65,7 @@ canvas.designer {
 }
 
 .tab_zag_2 {
-  background-image: url($header-linked-img);
+  background: linear-gradient(#fffa96 0%, #fffa96 39%, #ffe796 40%, #ffe796 100%);
   background-repeat: repeat-x;
   text-align: center;
   cursor: move;
@@ -132,8 +128,7 @@ canvas.designer {
   font-weight: bold;
   margin-left: 2px;
   text-align: left;
-  background-color: #fff;
-  background-image: url($left-panel-button-img);
+  background: linear-gradient(#fff, #dfe5e7 70%, #fff 70%, #fff 100%);
   border: #ccc solid 1px;
 
   &:hover {
@@ -167,8 +162,7 @@ canvas.designer {
   cursor: default;
   width: 1px;
   color: #000;
-  background-image: url($header-img);
-  background-repeat: repeat-x;
+  background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
 }
 
 .small_tab {
@@ -199,8 +193,7 @@ canvas.designer {
 }
 
 .small_tab_pref {
-  background-image: url($header-img);
-  background-repeat: repeat-x;
+  background: linear-gradient(#b8e6fa, #b8e6fa 6%, #cdf5fd 10%, #dbffff 10%, #9bd2f6 50%, #9bd2f6 100%);
   text-align: center;
   width: 1px;
 

themes/pmahomme/scss/_navigation.scss

@@ -5,7 +5,7 @@
   top: 0;
   left: 0;
   height: 100vh;
-  background: url('../img/left_nav_bg.png') repeat-y right 0 $navi-background;
+  background: linear-gradient(to right, $navi-background, $navi-right-gradient);
   color: $navi-color;
   z-index: 800;
 
@@ -92,7 +92,8 @@
   margin-left: 0.75em;
 
   select {
-    background: url('../img/select_bg.png') repeat scroll 0 0;
+    background: linear-gradient(#fff, #f1f1f1, #fff);
+    -webkit-border-radius: 2px;
     border-radius: 2px;
     border: 1px solid #bbb;
     border-top: 1px solid #bbb;

themes/pmahomme/scss/_variables.scss

@@ -10,6 +10,7 @@ $navi-color: #000;
 
 // background for the navi frame
 $navi-background: #f3f3f3;
+$navi-right-gradient: #dadcde;
 
 // foreground (text) color of the pointer in navi frame
 $navi-pointer-color: #000;