Droning building Sun Jan 21 22:03:06 -02 2018

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

@@ -9,12 +9,23 @@
   --primary: #f57c00 !important;
   --node-label: var(--normal) !important;
   --node-socket: var(--primary) !important;
+  --link-hover: var(--primary) !important;
 }
 
 .dark .flow-node__body {
   fill: transparent;
 }
 
+.dark .flow-node__socket-detail {
+  filter: url(#solid-dark);
+}
+
+.dark .flow-node--dragging .flow-node__body,
+.dark .flow-view:not(.activity) .flow-node:hover .flow-node__body {
+  stroke-width: 2;
+  stroke: var(--primary);
+}
+
 .dark input {
   outline: none;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);

browser/vue-flow/src/assets/dark-theme.scss.bak

@@ -1,167 +0,0 @@
-.dark {
-  --header-background: #eee !important;
-  --header-color: #212121 !important;
-  --background: #303030 !important;
-  --background-secondary: #424242 !important;
-  --normal: #eee !important;
-  --primary: #f57c00 !important;
-}
-
-.dark {
-  button {
-    color: var(--normal);
-  }
-
-  input {
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
-    outline: none;
-  }
-
-  .app-header {
-    display: flex;
-    align-items: center;
-    color: var(--normal) !important;
-    background: #212121 !important;
-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) !important;
-    overflow: visible;
-    z-index: 10;
-  }
-
-  .app-info {
-    color: var(--normal);
-  }
-
-  .app-watermark {
-    color: black !important;
-    opacity: 0.02;
-  }
-
-  .app-flow-container {
-    background: var(--background);
-  }
-
-  .flow-funcs__control {
-    border-bottom: solid 1px var(--primary);
-  }
-
-  .flow-funcs__container {
-    background: var(--background-secondary) !important;
-  }
-
-  .flow-funcs__container .flow-funcs__header {
-    color: var(--normal);
-  }
-
-  .hx-toggle-arrow.active {
-    color: var(--primary) !important;
-  }
-
-  .flow-funcs__inner {
-    display: flex;
-    flex: 1;
-    flex-flow: column;
-    justify-content: center;
-  }
-
-  .flow-funcs__inner .hx-collapsible {
-    border: none !important;
-  }
-
-  .flow-funcs__container .item {
-    color: var(--normal) !important;
-    border: none !important;
-  }
-
-  .flow-funcs__group {
-    padding: 10px;
-    background: #323232;
-  }
-
-  .flow-funcs__control .item {
-    color: var(--normal) !important;
-  }
-
-  .flow-container__control button {
-    color: var(--normal) !important;
-  }
-
-  .flow-container__info {
-    color: var(--normal);
-  }
-
-  .flow-node__body:hover {
-    stroke: var(--primary) !important;
-  }
-
-  /*
- * LINKS
- */
-  .flow-link__visible {
-    stroke: var(--normal) !important;
-    stroke-width: 2;
-  }
-
-  svg:not(.activity)
-  .flow-link:not(.flow-link--pointer):hover
-  .flow-link__visible {
-    stroke: var(--primary) !important;
-  }
-
-  .flow-link__head {
-    fill: var(--normal) !important;
-  }
-
-  /*
- * NODES
- */
-  .flow-node {
-    filter: none;
-  }
-
-  .flow-node:hover {
-    /*filter: url(#highlight-border);*/
-  }
-
-  .flow-node__body {
-    fill: transparent;
-    stroke: attr(fill);
-  }
-
-  .flow-linking .flow-node__socket:not(.flow-node__socket--match) {
-    fill: var(--primary) !important;
-    stroke: var(--primary) !important;
-  }
-
-  /*
- * CHAT
- */
-  .flow-chat {
-    background: var(--background-secondary) !important;
-    color: var(--normal);
-  }
-
-  .flow-chat__toggle {
-    border: none;
-    background: var(--background-secondary) !important;
-  }
-
-  .flow-chat .message .text {
-    color: #999;
-  }
-
-  .flow-chat input.message {
-    box-shadow: none !important;
-    background: var(--background) !important;
-    color: var(--normal);
-  }
-
-  .flow-modal .hx-modal__container {
-    background: var(--background-secondary);
-    color: var(--normal);
-  }
-
-  .flow-modal .hx-modal__body input {
-    background: #777 !important;
-    color: var(--normal) !important;
-  }
-}

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

@@ -1,7 +1,7 @@
 :root {
   --header-background: #113244;
   --header-color: #fff;
-  --background: #fff;
+  --background: #f4f4f4;
   --background-secondary: rgba(208, 208, 208, 1);
   --background-tertiary: rgba(188, 188, 188, 1);
   --normal: #333;
@@ -9,6 +9,7 @@
   --primary: #aaa;
   --node-label: #fff;
   --node-socket: #444;
+  --link-hover: #f00;
 }
 
 button {
@@ -16,6 +17,7 @@ button {
 }
 
 input {
+  padding: 20px;
   outline: none;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 }
@@ -111,7 +113,9 @@ input {
 .flow-view:not(.activity)
 .flow-link:not(.flow-link--pointer):hover
 .flow-link__visible {
-  stroke: var(--primary);
+  stroke: var(--link-hover);
+
+  /*filter: url(#highlight-border);*/
 }
 
 .flow-link__head {
@@ -121,10 +125,14 @@ input {
 /*
  * NODES
  */
+.flow-node {
+  /*filter: url(#highlight-border);*/
+}
+
 .flow-node--dragging .flow-node__body,
 .flow-view:not(.activity) .flow-node:hover .flow-node__body {
-  stroke-width: 1;
-  stroke: var(--primary);
+  stroke-width: 1.5;
+  stroke: var(--normal);
 }
 
 .flow-node__socket {
@@ -139,18 +147,22 @@ input {
 }
 
 .flow-node__label {
-  font-family: FiraMono, monospace;
+  /*font-family: FiraMono, monospace;*/
+  font-family: RobotoMono, monospace;
   letter-spacing: -0.05em;
   font-size: 14px;
   fill: var(--node-label);
 }
 
 .flow-node__socket-detail {
+  font-size: 12px;
+  font-weight: 100;
   transition: all 0.3s;
 }
 
-.flow-view.flow-detail .flow-node__socket-detail {
-  fill: black;
+.flow-node__socket-detail {
+  fill: var(--normal);
+  filter: url(#solid-white);
 }
 
 /*
@@ -200,7 +212,7 @@ input {
 }
 
 .flow-modal .flow-view {
-  background: var(--background-tertiary);
+  background: var(--background);
 }
 
 .flow-modal .hx-modal__container {

browser/vue-flow/src/assets/style.css

@@ -1,5 +1,5 @@
 @import "./fonts/roboto/font.css";
-@import "./fonts/fira-mono/font.css";
+@import "./fonts/roboto-mono/font.css";
 
 * {
   text-shadow: 0 0 1px rgba(0, 0, 0, 0.05);

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

@@ -165,7 +165,6 @@ function pad (n, width, z) {
 }
 .flow-chat__container >*:not(last-child) {
   margin-bottom:10px;
-  padding:8px;
 }
 
 .flow-chat__users {

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

@@ -15,8 +15,10 @@
     <text
       ref="label"
       class="flow-node__label"
-      v-bind="labelProps">
-      <tspan x="0" dy="1em" v-for="s in labelWrap" text-anchor="middle">
+      v-bind="labelProps"
+      text-anchor="middle"
+    >
+      <tspan x="0" dy="1em" v-for="s in labelWrap" >
         {{ s }}
       </tspan>
       <!--{{ label }}-->
@@ -49,12 +51,12 @@
       class="flow-node__socket-detail"
       v-for="(inp,i) in inputs"
       text-anchor="end"
-      :x="inputPos(i).x - 10"
+      :x="inputPos(i).x - 13"
       :y="inputPos(i).y+5"
     >{{ inp }}</text>
     <text
       class="flow-node__socket-detail"
-      :x="outputPos(0).x + 10"
+      :x="outputPos(0).x + 13"
       :y="outputPos(0).y+5">
       {{ output }}
     </text>
@@ -242,10 +244,10 @@ for hidden
 .flow-node__socket-detail {
   pointer-events:none;
   opacity:0;
+  fill: #fff !default;
 }
 .flow-view.flow-detail .flow-node__socket-detail {
   opacity:1;
-  filter: url(#solid) /* doubt */
 }
 
 </style>

browser/vue-flow/src/components/flow/svgdefs.svg

@@ -2,11 +2,15 @@
     <marker id="head" class="flow-link__head" orient="auto" markerWidth="4" markerHeight="8" refX="0.1" refY="4">
       <path d="M0,0 V8 L4,4 Z"/>
     </marker>
-		<filter x="0" y="0" width="1" height="1" id="solid">
-      <feFlood flood-color="rgba(250,250,0,0.8)"/>
+		<filter x="-.1" y="-.2" width="1.2" height="1.4" id="solid-white" class="flow-socket__detail-solid">
+      <feFlood flood-color="rgba(230,230,230,0.7)"/>
       <feComposite in="SourceGraphic"/>
     </filter>
-<!--    <filter id="highlight-border" x="-50%" y="-50%" width="200%" height="200%" filterUnits="userSpaceOnUse" >
+		<filter x="-.1" y="-.2" width="1.2" height="1.4" id="solid-dark" class="flow-socket__detail-solid">
+      <feFlood flood-color="rgba(30,30,30,0.7)"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <filter id="highlight-border" x="-50%" y="-50%" width="200%" height="200%" filterUnits="userSpaceOnUse" >
       <feMorphology in="SourceGraphic" result="MORPH" operator="dilate" radius="1" />
       <feColorMatrix in="MORPH" result="BORDER" type="matrix" values=".2 0 0 0 0, 0 .2 0 0 0, 0 0 .2 0 0, 0 0 0 .7 0"/>
       <feColorMatrix result = "matrixOut" in = "SourceGraphic" type = "matrix" values = ".5 0 0 0 0,  0 .5 0 0 0,  0 0 .5 0 0,  0 0 0 1 0"/>
@@ -29,6 +33,6 @@
     </filter>
     <filter id="drag-shadow" x="-100%" y="-100%" width="300%" height="300%">
       <feDropShadow dx="0" dy="2" stdDeviation="3"/>
-    </filter>-->
+    </filter>
 
   </defs>

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

@@ -125,7 +125,7 @@ import HxSplit from '@/components/shared/hx-split'
 import HxModal from '@/components/shared/hx-modal'
 import 'reset-css/reset.css'
 
-import '@/assets/dark-theme.scss'
+import '@/assets/dark-theme.css'
 import '@/assets/style.css'
 // import nodeData from './nodedata'