[beast: 39/70] EBEAST: generate panel-background as non-banding linear gradient image

[Tim Janik <timj src gnome org>]

commit 072cf0bdc96c4872ac9d997510c74675814afd95
Author: Tim Janik <timj gnu org>
Date:   Mon Mar 6 00:36:12 2017 +0100

    EBEAST: generate panel-background as non-banding linear gradient image
    
    Signed-off-by: Tim Janik <timj gnu org>

 ebeast/Makefile.am |   14 +++++++++++++-
 ebeast/app.less    |   14 +++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)
---
diff --git a/ebeast/Makefile.am b/ebeast/Makefile.am
index d690632..033d780 100644
--- a/ebeast/Makefile.am
+++ b/ebeast/Makefile.am
@@ -22,7 +22,7 @@ clean-local: clean-node_modules
 clean-node_modules: ; rm -rf node_modules/ package.json
 
 # == app ==
-app:   package.json xlint-html xlint-js objects/app.css
+app:   package.json xlint-html xlint-js objects/app.css objects/gradient-01.png
        $(Q) $(MAKE) $(AM_MAKEFLAGS) -C v8bse v8bse.node
 
 # == run ==
@@ -47,6 +47,18 @@ objects/app.css: app.less
 clean-local: clean-objects
 clean-objects: ; rm -rf objects/
 
+# == objects/gradient-01.png ==
+# generate non-banding gradient from gradient-01 { -im-convert: "..."; }
+# http://www.imagemagick.org/script/command-line-options.php#noise
+# http://www.imagemagick.org/Usage/canvas/
+objects/gradient-01.png: objects/app.css Makefile
+       $(AM_V_GEN)
+       $(Q) tr '\n' ' ' <objects/app.css \
+       | sed -nr 's/.*\bgradient-01\s*\{[^}]*-im-convert:\s*"([^"]*)"\s*[;}].*/\1/; T; p' >$@.tmp && test -s 
$@.tmp
+       $(Q) convert $$(cat $@.tmp) $@
+       $(Q) rm -f $@.tmp
+MOSTLYCLEANFILES += objects/gradient-01.png objects/gradient-01.*tmp
+
 # == HTML linting ==
 HTML_LINT_FILES = index.html
 xlint-html: $(HTML_LINT_FILES)
diff --git a/ebeast/app.less b/ebeast/app.less
index 40141a7..0ee8199 100644
--- a/ebeast/app.less
+++ b/ebeast/app.less
@@ -3,7 +3,9 @@
 @theme-foreground:             #ffffff;
 @theme-background:             #505050;
 @theme-border-radius:          3px;
-@panel-background-lg:          linear-gradient(to bottom, lighten(@theme-background, 4%) 0%, 
darken(@theme-background, 4%) 100%);
+@panel-background-lg0:         lighten(@theme-background, 1%);
+@panel-background-lg1:         darken(@theme-background, 1%);
+@panel-background-lg:          linear-gradient(to bottom, @panel-background-lg0 0%, @panel-background-lg1 
100%);
 @panel-background-border:      darken(@theme-background, 25%);
 @panel-background-light:       lighten(@theme-background, 9%);
 @panel-background-dark:                darken(@theme-background, 9%);
@@ -24,11 +26,17 @@ BrowserWindowDefaults               { ; /* used by main.js */
                                  backgroundColor:          @theme-background; /* #rrggbb needed */
                                  defaultFontSize:          14;              /* int needed */
                                  defaultMonospaceFontSize: 13;              /* int needed */ }
-html                           { width: 100vw; height: 100vh; font-family: sans; }
+gradient-01                    { -im-convert: "-size 67x1080 -attenuate 0.2 +noise Uniform
+                                               gradient:@{panel-background-lg0}-@{panel-background-lg1}"; }
+.gradient-01-bg                        { background: url(gradient-01.png) center repeat-x; background-size: 
auto 100%; }
+html                           { width: 100vw; height: 100vh; font-family: sans; }
 body                           { width: 100%; height: 100%; overflow: hidden; font: inherit;
                                  padding: 0; margin: 0; color: @theme-foreground;
                                  background-color: @theme-background;
-                                 background-image: @panel-background-lg; }
+                                 /* gradient with banding */
+                                 background-image: @panel-background-lg;
+                                 /* gradient image with reduced banding */
+                                 .gradient-01-bg; }
 body.window-inactive           { color: fade(@theme-foreground, 80%); }
 *                              { box-sizing: border-box; text-overflow: ellipsis; }