[beast: 37/70] EBEAST: build objects/app.css from app.less and use it in index.html

[Tim Janik <timj src gnome org>]

commit d6d292e61f493b12ba8f4102b426e8e1a62b1abc
Author: Tim Janik <timj gnu org>
Date:   Sun Mar 5 23:37:34 2017 +0100

    EBEAST: build objects/app.css from app.less and use it in index.html
    
    Signed-off-by: Tim Janik <timj gnu org>

 ebeast/.gitignore      |    3 +-
 ebeast/Makefile.am     |   12 +++++++++-
 ebeast/app.less        |   54 ++++++++++++++++++++++++++++++++++++++++++++++++
 ebeast/index.html      |    8 +++---
 ebeast/package.json.in |    2 +-
 5 files changed, 72 insertions(+), 7 deletions(-)
---
diff --git a/ebeast/.gitignore b/ebeast/.gitignore
index 5d7538e..f170282 100644
--- a/ebeast/.gitignore
+++ b/ebeast/.gitignore
@@ -1,5 +1,6 @@
-/package.json
 /config.log
+/package.json
 /node_modules/
+/objects/
 /xlint-html
 /xlint-js
diff --git a/ebeast/Makefile.am b/ebeast/Makefile.am
index a2999a6..d690632 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
+app:   package.json xlint-html xlint-js objects/app.css
        $(Q) $(MAKE) $(AM_MAKEFLAGS) -C v8bse v8bse.node
 
 # == run ==
@@ -37,6 +37,16 @@ run: app
 # theme if it's present.
 GTK2_DARK = $(shell test -f /usr/share/themes/Ambiance/gtk-2.0/gtkrc && echo 
'GTK2_RC_FILES=/usr/share/themes/Ambiance/gtk-2.0/gtkrc')
 
+# == CSS generation ==
+objects/app.css: app.less
+       $(AM_V_GEN)
+       $(Q) mkdir -p objects/.deps/
+       $(Q) ./node_modules/.bin/lessc $< $@ --source-map=$@.map
+       $(Q) ./node_modules/.bin/lessc $< $@ -M >objects/.deps/app.P
+-include objects/.deps/app.P
+clean-local: clean-objects
+clean-objects: ; rm -rf objects/
+
 # == HTML linting ==
 HTML_LINT_FILES = index.html
 xlint-html: $(HTML_LINT_FILES)
diff --git a/ebeast/app.less b/ebeast/app.less
new file mode 100644
index 0000000..bfd24ce
--- /dev/null
+++ b/ebeast/app.less
@@ -0,0 +1,54 @@
+
+/* == Settings == */
+@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-border:      darken(@theme-background, 25%);
+@panel-background-light:       lighten(@theme-background, 9%);
+@panel-background-dark:                darken(@theme-background, 9%);
+@button-foreground:            #dddddd;
+@button-light:                 #999999;
+@button-lg:                    linear-gradient(to bottom, #777777 0%, #707070 45%, #606060 55%, #555555 
100%);
+@button-dark:                  #444444;
+@button-border:                #555555;
+@button-hover:                 fade(#ffffff, 10%);
+@button-active:                        fade(#000000, 20%);
+@button-active-fg:             #bbbbbb;
+@button-active-border:         #333333;
+@glow-control:                 #0080ff;
+@focus-outline:                        1px solid @glow-control;
+
+/* == Body Styles == */
+BrowserWindowDefaults          { ; /* used by main.js */
+                                 backgroundColor:          @theme-background; /* #rrggbb needed */
+                                 defaultFontSize:          14;              /* int needed */
+                                 defaultMonospaceFontSize: 13;              /* int needed */ }
+html                           { font-family: sans; height: 100%; width: 100%; }
+body                           { font: inherit; padding: 0; margin: 0; color: @theme-foreground;
+                                 overflow: hidden; width: 100vw; height: 100vh;
+                                 background-color: @theme-background;
+                                 background-image: @panel-background-lg; }
+body.window-inactive           { color: fade(@theme-foreground, 80%); }
+*                              { box-sizing: border-box; text-overflow: ellipsis; }
+
+/* == Resets == */
+input, textarea, keygen, select,
+button                         { font: inherit; }
+button                         { -webkit-appearance: normal; }
+
+/* == Button == */
+.theme-buttonframe             { border: 1px solid @button-border; }
+.theme-buttonshade             { background-image: @button-lg;
+                                 border-top: 1px solid @button-light; border-left: 1px solid @button-light;
+                                 border-bottom: 1px solid @button-dark; border-right: 1px solid 
@button-dark; }
+button                         { .theme-buttonframe; .theme-buttonshade;
+                                 display: inline-flex; text-align: center; margin: 0; padding: 3px 1em; }
+button:focus                   { outline: @focus-outline; }
+button:hover                   { box-shadow: inset 500px 500px @button-hover; }
+button.fake-active,
+button:active                  { box-shadow: inset 500px 500px @button-active;
+                                 border-color: @button-active-border; }
+button, button *               { color: @button-foreground; fill: @button-foreground !important; }
+button.fake-active *,          /* use '*' + fill!important to include svg elements in buttons */
+button:active *                { color: @button-active-fg; fill: @button-active-fg !important; }
diff --git a/ebeast/index.html b/ebeast/index.html
index ef9fb8f..5132406 100644
--- a/ebeast/index.html
+++ b/ebeast/index.html
@@ -1,15 +1,13 @@
 <!DOCTYPE html> <!-- GNU LGPL v2.1+: http://www.gnu.org/licenses/lgpl.html -->
 <html>
 <head>
-  <title>Untitled.bse (0 tracks, inactive) – BEAST</title>
+  <title>BEAST</title>
+  <link rel="stylesheet" href="objects/app.css">
   <script>
    "use strict";
    const app = require ('electron').remote.app;
    const Bse = require ('./v8bse/v8bse.node');
   </script>
-  <style>
-   html        { color: #fff; }
-  </style>
 </head>
 <body>
 
@@ -36,6 +34,8 @@
       <tr> <th> Config Path: </th> <td><script> document.write (app.getPath ('userData')); </script></td> 
</tr>
       <tr> <th> Music Path: </th>  <td><script> document.write (app.getPath ('music')); </script></td> </tr>
     </table>
+
+    <button> Close </button>
   </div>
 
 </body>
diff --git a/ebeast/package.json.in b/ebeast/package.json.in
index 6fbb88b..6b9df12 100644
--- a/ebeast/package.json.in
+++ b/ebeast/package.json.in
@@ -4,7 +4,7 @@
   "description":     "Beast - Music Synthesizer and Composer",
   "main":            "main.js",
   "dependencies":    { "electron": "^1.4.15" },
-  "devDependencies": { "node-gyp": "^3.5.0",
+  "devDependencies": { "node-gyp": "^3.5.0", "less": "^2.7.2",
                       "eslint": "^3.16.1", "eslint-plugin-html": "^2.0.1" },
   "license":         "LGPL-3.0",
   "scripts": {