# HG changeset patch
# User Drew Perttula <drewp@bigasterisk.com>
# Date 1496566718 0
# Node ID 5707e7b42de6d2b9cdc9089db3927ad3b7f45c64
# Parent  0fc61e701347936016d16651496c04196820b44c
css work on live ui
Ignore-this: e70c49ee127305aeba8efa9f65acb430

diff -r 0fc61e701347 -r 5707e7b42de6 light9/web/live/index.html
--- a/light9/web/live/index.html	Sat Jun 03 20:55:01 2017 +0000
+++ b/light9/web/live/index.html	Sun Jun 04 08:58:38 2017 +0000
@@ -26,6 +26,20 @@
          paper-slider { width: 100%; margin: -19px 0; }
         </style>
 
+        <style is="custom-style">
+         paper-slider {
+             --paper-slider-knob-color: var(--paper-red-500);
+             --paper-slider-active-color: var(--paper-red-500);
+
+             --paper-slider-font-color: white;
+             --paper-slider-input: {
+                 width: 75px;
+
+                 background: black;
+             }
+         }
+         </style>
+
         <template is="dom-if" if="{{deviceAttr.useSlider}}">
           <paper-slider min="0"
                         max="{{deviceAttr.max}}"
@@ -59,18 +73,18 @@
       <template>
         <style>
          .device {
-             border: 2px solid gray;
-             border: 2px solid gray;
-             margin: 9px;
-             padding: 5px;
-             background: #171717;
+             border: 2px solid #151e2d;
+             margin: 4px;
+             padding: 1px;
+             background: #171717;  /* deviceClass gradient added later */
              break-inside: avoid-column;
+             border-top-right-radius: 15px;
+             overflow: hidden;
              
          }
          .deviceAttr {
-             border-top: 1px solid #ffffff26;
-             margin-top: 6px;
-             padding-top: 4px;
+             border-top: 1px solid #272727;
+             padding-bottom: 2px;
              display: flex;
          }
          .deviceAttr > span {
@@ -82,7 +96,6 @@
          h2 {
              font-size: 110%;
              padding: 4px;
-             background: #1f1f1f;
          }
          #mainLabel {
              font-size: 120%; 
@@ -91,13 +104,13 @@
          }
         </style>
         <div class="device">
-          <h2>
+          <h2 style$="[[bgStyle]]">
             <resource-display id="mainLabel" graph="{{graph}}" uri="{{uri}}"></resource-display>
-            a <resource-display graph="{{graph}}" uri="{{deviceClass}}"></resource-display>
+            a <resource-display minor graph="{{graph}}" uri="{{deviceClass}}"></resource-display>
           </h2>
           <template is="dom-repeat" items="{{deviceAttrs}}" as="dattr">
             <div class="deviceAttr">
-              <span>attr <resource-display graph="{{graph}}" uri="{{dattr.uri}}"></resource-display></span>
+              <span>attr <resource-display minor graph="{{graph}}" uri="{{dattr.uri}}"></resource-display></span>
               <light9-live-control device="{{uri}}" device-attr="{{dattr}}"></light9-live-control>
             </div>
           </template>
diff -r 0fc61e701347 -r 5707e7b42de6 light9/web/live/live.coffee
--- a/light9/web/live/live.coffee	Sat Jun 03 20:55:01 2017 +0000
+++ b/light9/web/live/live.coffee	Sun Jun 04 08:58:38 2017 +0000
@@ -38,9 +38,17 @@
     uri: { type: String, notify: true }
     deviceClass: { type: String, notify: true }
     deviceAttrs: { type: Array, notify: true }
+    bgStyle: { type: String, computed: '_bgStyle(deviceClass)' }
   observers: [
     'onGraph(graph)'
     ]
+  _bgStyle: (deviceClass) ->
+    hash = 0
+    for i in [(deviceClass.length-10)...deviceClass.length]
+        hash += deviceClass.charCodeAt(i)
+    hue = (hash * 8) % 360
+    accent = "hsl(#{hue}, 49%, 22%)"
+    "background: linear-gradient(to right, rgba(31,31,31,0) 50%, #{accent} 100%);"
   onGraph: ->
     @graph.runHandler(@update.bind(@), "#{@uri} update")
   update: ->
diff -r 0fc61e701347 -r 5707e7b42de6 light9/web/resource-display.html
--- a/light9/web/resource-display.html	Sat Jun 03 20:55:01 2017 +0000
+++ b/light9/web/resource-display.html	Sun Jun 04 08:58:38 2017 +0000
@@ -1,20 +1,20 @@
 <link rel="import" href="/lib/polymer/polymer.html">
 <link rel="import" href="/lib/paper-dialog/paper-dialog.html">
 <link rel="import" href="/lib/paper-button/paper-button.html">
+<link rel="stylesheet" href="/style.css">
 
 <dom-module id="resource-display">
   <template>
-    <link rel="stylesheet" href="/style.css">
     <style>
      :host {
          display: inline-block;
-         vertical-align: top;
-         border: 2px rgba(84, 84, 84, 0.27) outset;
-         border-radius: 9px;
-         padding: 2px;
+         zvertical-align: top;
+         zborder: 2px rgba(84, 84, 84, 0.27) outset;
+         zborder-radius: 9px;
+         zpadding: 2px;
      }
     </style>
-    <span class="resource"><a href="{{uri}}">{{label}}</a></span>
+    <span class$="[[resClasses]]"><a href="{{uri}}">{{label}}</a></span>
     <template is="dom-if" if="{{rename}}">
       <button on-click="onRename">Rename</button>
 
@@ -42,9 +42,14 @@
            uri: { type: String },
            label: { type: String },
            rename: { type: Boolean },
+           minor: { type: Boolean },
+           resClasses: { type: String, computed: '_resClasses(minor)', value: 'resource' },
            renameTo: { type: String, notify: true },
        },
        observers: ['onUri(graph, uri)'],
+       _resClasses: function(minor) {
+           return minor ? 'resource minor' : 'resource';
+       },
        onUri: function(graph, uri) {
            this.graph.runHandler(this.setLabel.bind(this), `label ${this.uri}`);
        },
diff -r 0fc61e701347 -r 5707e7b42de6 light9/web/style.css
--- a/light9/web/style.css	Sat Jun 03 20:55:01 2017 +0000
+++ b/light9/web/style.css	Sun Jun 04 08:58:38 2017 +0000
@@ -151,18 +151,28 @@
 }
 
 .resource {
-    border: 1px solid gray;
+    border: 1px solid #545454;
     border-radius: 5px;
     padding: 1px;
     margin: 2px;
-    background: rgb(66, 66, 66);
+    background: rgb(49, 49, 49);
     display: block;
+    text-shadow: 1px 1px 2px black;
+}
+.resource.minor {
+    background: none;
+    border: none;
 }
 .resource a {
     color: rgb(150, 150, 255);
     padding: 1px;
     display: inline-block;
 }
+.resource.minor a {
+    text-decoration: none;
+    color: rgb(155, 155, 193);
+    padding: 0
+}
 .sub {
     display: inline-block;
     vertical-align: top;