Update view.js (#1285)

Author: lutzroeder

source/grapher.css

@@ -51,10 +51,11 @@
 .node-item-undefined:hover { cursor: pointer; }
 .node-item-undefined:hover path { fill: #fff; }
 
-.node-attribute-list > path { fill: #fff; stroke-width: 0; stroke: #000; }
-.node-attribute-list:hover { cursor: pointer; }
-.node-attribute-list:hover > path { fill: #f6f6f6; }
-.node-attribute > text { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 9px; font-weight: normal; text-rendering: geometricPrecision; user-select: none; }
+.node-argument-list > path { fill: #fff; stroke-width: 0; stroke: #000; }
+.node-argument-list:hover { cursor: pointer; }
+.node-argument-list:hover > path { fill: #f6f6f6; }
+.node-argument > text { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 9px; font-weight: normal; text-rendering: geometricPrecision; user-select: none; }
+.node-argument > rect { fill: transparent; }
 
 .graph-item-input path { fill: #eee; }
 .graph-item-input:hover { cursor: pointer; }
@@ -72,6 +73,8 @@
 
 .select > .node.node-border { stroke: #e00; stroke-width: 2px; }
 .select.edge-path { stroke: #e00; stroke-width: 1px; marker-end: url("#arrowhead-select"); }
+.select.node-argument > rect { fill: #e00; }
+.select.node-argument > text { fill: #f6f6f6; }
 
 .edge-label { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 10px; }
 .edge-path-control-dependency { stroke-dasharray: 3, 2; }
@@ -89,6 +92,8 @@
 
     .select > .node.node-border { stroke: #b00; }
     .select.edge-path { stroke: #b00; }
+    .select.node-argument > rect { fill: #b00; }
+    .select.node-argument > text { fill: #b2b2b2; }
 
     #arrowhead { fill: #888; }
     #arrowhead-hover { fill: #b00; }
@@ -110,9 +115,9 @@
     .node-item path { stroke: #fff; }
     .node-item text { fill: #dfdfdf; }
 
-    .node-attribute > text { fill: #b2b2b2; }
-    .node-attribute-list > path { fill: #2d2d2d; }
-    .node-attribute-list:hover > path { fill: #666666; }
+    .node-argument > text { fill: #b2b2b2; }
+    .node-argument-list > path { fill: #2d2d2d; }
+    .node-argument-list:hover > path { fill: #303030; }
 
     .graph-item-input path { fill: #404040; }
     .graph-item-input:hover { cursor: pointer; }