From bf9472b249fd9b012bb48cbe77e0d0dc9374bedd Mon Sep 17 00:00:00 2001 From: Saksham Gupta Date: Thu, 3 Dec 2020 23:39:36 +0530 Subject: [PATCH] Replace style image with Linear-gradient Signed-off-by: Saksham Gupta --- setup/styles.css | 6 +++++- themes/bootstrap/img/designer/Header.png | Bin 119 -> 0 bytes .../bootstrap/img/designer/Header_Linked.png | Bin 95 -> 0 bytes .../img/designer/left_panel_butt.png | Bin 101 -> 0 bytes themes/bootstrap/img/select_bg.png | Bin 142 -> 0 bytes themes/bootstrap/scss/_designer.scss | 18 +++++------------- themes/bootstrap/scss/_navigation.scss | 3 ++- themes/original/scss/_navigation.scss | 3 ++- themes/pmahomme/img/designer/Header.png | Bin 119 -> 0 bytes .../pmahomme/img/designer/Header_Linked.png | Bin 95 -> 0 bytes themes/pmahomme/img/designer/bord.png | Bin 75 -> 0 bytes .../pmahomme/img/designer/left_panel_butt.png | Bin 101 -> 0 bytes themes/pmahomme/img/left_nav_bg.png | Bin 146 -> 0 bytes themes/pmahomme/img/select_bg.png | Bin 142 -> 0 bytes themes/pmahomme/scss/_designer.scss | 17 +++++------------ themes/pmahomme/scss/_navigation.scss | 5 +++-- themes/pmahomme/scss/_variables.scss | 1 + 17 files changed, 23 insertions(+), 30 deletions(-) delete mode 100644 themes/bootstrap/img/designer/Header.png delete mode 100644 themes/bootstrap/img/designer/Header_Linked.png delete mode 100644 themes/bootstrap/img/designer/left_panel_butt.png delete mode 100644 themes/bootstrap/img/select_bg.png delete mode 100644 themes/pmahomme/img/designer/Header.png delete mode 100644 themes/pmahomme/img/designer/Header_Linked.png delete mode 100644 themes/pmahomme/img/designer/bord.png delete mode 100644 themes/pmahomme/img/designer/left_panel_butt.png delete mode 100644 themes/pmahomme/img/left_nav_bg.png delete mode 100644 themes/pmahomme/img/select_bg.png diff --git a/setup/styles.css b/setup/styles.css index 9183ed887a..bfc247e899 100644 --- a/setup/styles.css +++ b/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, diff --git a/themes/bootstrap/img/designer/Header.png b/themes/bootstrap/img/designer/Header.png deleted file mode 100644 index 2d2090e95edb642a5363d76bc600203ee3fd18ba..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 119 zcmeAS@N?(olHy`uVBq!ia0vp^Vn8gx!2~1=@63_`Qg)s$jv*C{$u~c~5ob}W|G)f7hyQ)HX6-s2u6}_D@}@~wIs%n7*ckW>#g0_} S$m#-`#Ng@b=d#Wzp$P!Y2qmll diff --git a/themes/bootstrap/img/designer/Header_Linked.png b/themes/bootstrap/img/designer/Header_Linked.png deleted file mode 100644 index afd3f045f80f6dcafe0ce4d47ecd4a61f1cfbfcf..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 95 zcmeAS@N?(olHy`uVBq!ia0vp^Vn8gx!2~1=@63_`Qfi(qjv*C{$$$Q5OEIS=L`WHC s9Wg)E`@>_W;Cc4Ff{WdHfFdjm)0J$p%ws1M19dQXy85}Sb4q9e02}ogr~m)} diff --git a/themes/bootstrap/img/designer/left_panel_butt.png b/themes/bootstrap/img/designer/left_panel_butt.png deleted file mode 100644 index 03317301b043faf4e60bcb60c93f261c2c2797a4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 101 zcmeAS@N?(olHy`uVBq!ia0vp^Oh7Ea0U|e_vV07rbUa-gLn;_Uy;~U>3^SOS9^>bP0l+XkKLZBcR diff --git a/themes/bootstrap/img/select_bg.png b/themes/bootstrap/img/select_bg.png deleted file mode 100644 index 22c3ea6c2a3694c797524101a60e467a3589ad34..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 142 zcmeAS@N?(olHy`uVBq!ia0vp^OhBB%0VEhY3-;{?QlXwMjv*C{x&4lO42nEVjsNYh zZ(et_qk4tp$s-yYqr4q9K5bCGFh}h9mrA|Ku3;iSwwrEc%{%YcwL&B`kAY@ qdxdos^Gx>S-!Q&a{Dt|_>|YF@@3|iKUVU8|WRa( diff --git a/themes/bootstrap/scss/_designer.scss b/themes/bootstrap/scss/_designer.scss index f9ac2e1f18..45aa3ba777 100644 --- a/themes/bootstrap/scss/_designer.scss +++ b/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; diff --git a/themes/bootstrap/scss/_navigation.scss b/themes/bootstrap/scss/_navigation.scss index b8a0b53e1e..8877d0fe8b 100644 --- a/themes/bootstrap/scss/_navigation.scss +++ b/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; diff --git a/themes/original/scss/_navigation.scss b/themes/original/scss/_navigation.scss index 4cfdd7ee5c..65e94a7ed8 100644 --- a/themes/original/scss/_navigation.scss +++ b/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; diff --git a/themes/pmahomme/img/designer/Header.png b/themes/pmahomme/img/designer/Header.png deleted file mode 100644 index 2d2090e95edb642a5363d76bc600203ee3fd18ba..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 119 zcmeAS@N?(olHy`uVBq!ia0vp^Vn8gx!2~1=@63_`Qg)s$jv*C{$u~c~5ob}W|G)f7hyQ)HX6-s2u6}_D@}@~wIs%n7*ckW>#g0_} S$m#-`#Ng@b=d#Wzp$P!Y2qmll diff --git a/themes/pmahomme/img/designer/Header_Linked.png b/themes/pmahomme/img/designer/Header_Linked.png deleted file mode 100644 index afd3f045f80f6dcafe0ce4d47ecd4a61f1cfbfcf..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 95 zcmeAS@N?(olHy`uVBq!ia0vp^Vn8gx!2~1=@63_`Qfi(qjv*C{$$$Q5OEIS=L`WHC s9Wg)E`@>_W;Cc4Ff{WdHfFdjm)0J$p%ws1M19dQXy85}Sb4q9e02}ogr~m)} diff --git a/themes/pmahomme/img/designer/bord.png b/themes/pmahomme/img/designer/bord.png deleted file mode 100644 index 0b3191de9bc9c773e48562e29347e9e4730f65cb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 75 zcmeAS@N?(olHy`uVBq!ia0vp^Oh7Ea0U|e_vV07rggjjwLn;`PcN9E6_y7O@mu`#< Y7GEO-uU@FVdQ&MBb@0G_lKod5s; diff --git a/themes/pmahomme/img/designer/left_panel_butt.png b/themes/pmahomme/img/designer/left_panel_butt.png deleted file mode 100644 index 03317301b043faf4e60bcb60c93f261c2c2797a4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 101 zcmeAS@N?(olHy`uVBq!ia0vp^Oh7Ea0U|e_vV07rbUa-gLn;_Uy;~U>3^SOS9^>bP0l+XkKLZBcR diff --git a/themes/pmahomme/img/left_nav_bg.png b/themes/pmahomme/img/left_nav_bg.png deleted file mode 100644 index 42b6f3823cdcb203e91fa238cbb90977e3824ac9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 146 zcmeAS@N?(olHy`uVBq!ia0vp^wIDVJ6OiOS@NF}Yiu81G45?szJH?T!!GVYQ_5b;| ztCd&`E5sdV9GJG{_GN*pH}7m(bCw_LUu-6OFE?lY=7QSNF#Usnv)?6izbkltZjbto v$>lo^-z`vo|K#s+rS}Ex*5z#PR$4L6iLE=#^21XbXbFR-tDnm{r-UW|X*xPD diff --git a/themes/pmahomme/img/select_bg.png b/themes/pmahomme/img/select_bg.png deleted file mode 100644 index 22c3ea6c2a3694c797524101a60e467a3589ad34..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 142 zcmeAS@N?(olHy`uVBq!ia0vp^OhBB%0VEhY3-;{?QlXwMjv*C{x&4lO42nEVjsNYh zZ(et_qk4tp$s-yYqr4q9K5bCGFh}h9mrA|Ku3;iSwwrEc%{%YcwL&B`kAY@ qdxdos^Gx>S-!Q&a{Dt|_>|YF@@3|iKUVU8|WRa( diff --git a/themes/pmahomme/scss/_designer.scss b/themes/pmahomme/scss/_designer.scss index 6fe75376a1..e4f883effa 100644 --- a/themes/pmahomme/scss/_designer.scss +++ b/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; diff --git a/themes/pmahomme/scss/_navigation.scss b/themes/pmahomme/scss/_navigation.scss index a2d957fc8f..18e529f23e 100644 --- a/themes/pmahomme/scss/_navigation.scss +++ b/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; diff --git a/themes/pmahomme/scss/_variables.scss b/themes/pmahomme/scss/_variables.scss index 15d8ce9b28..0a163fdc1e 100644 --- a/themes/pmahomme/scss/_variables.scss +++ b/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;