Styling improvements, selection and funcs search

browser/vue-flow/src/assets/dark-theme.css

@@ -2,7 +2,7 @@
   --header-background: #212121;
   --header-color: #eee;
   --background: #303030;
-  --background-transparent: rgba(48, 48, 48, 1);
+  --background-transparent: rgba(48, 48, 48, 0.9);
   --background-secondary: #424242;
   --background-tertiary: #323232;
   --normal: #bfbfbf;

browser/vue-flow/src/assets/lines-theme.css

@@ -2,13 +2,13 @@
   --header-background: #fff;
   --header-color: #333;
   --background: #fff;
-  --background-transparent: rgba(240, 240, 240, 0.9);
+  --background-transparent: rgba(255, 255, 255, 0.9);
   --background-secondary: #fff;
   --background-tertiary: #fff;
   --normal: #333;
   --normal-secondary: #999;
   --primary: #0be;
-  --primary-darker: #405090;
+  --primary-darker: #0ae;
   --primary-lighter: #6080b0;
   --primary-inverse: #fff;
   --secondary: #666;
@@ -60,6 +60,12 @@
   color: var(--normal);
 }
 
+.lines .flow-funcs__src b {
+  font-size: 1.2em;
+  text-shadow: none;
+  color: var(--primary);
+}
+
 /* left panel */
 .lines .hx-collapsible {
   border-bottom: solid 1px var(--border-color);
@@ -73,3 +79,7 @@
 .lines .flow-node__label {
   fill: black;
 }
+
+.lines .flow-node--selected .flow-node__label {
+  fill: white !important;
+}

browser/vue-flow/src/components/flow/editor.vue

@@ -107,13 +107,15 @@
 
 .flow-container__control {
   position:absolute;
-  top: 20px;
+  padding:10px;
+  top: 0;
   left: 20px;
   display:flex;
   flex-flow:row;
   justify-content: center;
   align-items: center;
   color: #fff;
+  background: var(--background-transparent);
 }
 
 .flow-container__control button {

browser/vue-flow/src/components/flow/node.vue

@@ -494,17 +494,18 @@ for hidden
   fill:#333 !default;
 }
 
-.flow-node .flow-node__selection {
+.flow-node__selection {
   opacity:0;
-  stroke-width:2;
+  stroke-width:3;
   stroke: var(--node-selection);
   stroke-dasharray:2,2;
   pointer-events:none;
   transition: all var(--transition-speed);
+  fill: var(--primary-darker);
 }
 
 .flow-node--selected .flow-node__selection {
-  opacity:0.9;
+  opacity:0.7;
   animation: flow-node--selected__dash 3s linear infinite;
 }