Added new theme: lines

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

@@ -22,6 +22,7 @@
   --transition-speed: 0.1s;
   --transition-speed-slow: 0.3s;
   --node-selection: darkblue;
+  --border-color: rgba(150, 150, 150, 0.3);
 
   /*--transition-speed: 0.3s;*/
 
@@ -154,7 +155,7 @@ input {
 
 .flow-funcs__search input {
   color: var(--normal);
-  border-bottom: solid 1px rgba(150, 150, 150, 0.2);
+  border-bottom: solid 1px var(--border-color);
 }
 
 .flow-funcs__src {
@@ -187,7 +188,7 @@ input {
 }
 
 .flow-funcs__inner .hx-collapsible {
-  border: none !important;
+  /*border: none !important;*/
 }
 
 .flow-funcs__container .item {
@@ -338,7 +339,7 @@ input {
 }
 
 .hx-modal__header {
-  border-bottom: solid 1px rgba(150, 150, 150, 0.2);
+  border-bottom: solid 1px var(--border-color);
   flex-shrink: 0;
   margin-bottom: 16px;
 }
@@ -364,20 +365,24 @@ input {
   color: var(--normal);
 }
 
+.flow-chat__area {
+  border-left: solid 1px var(--border-color);
+}
+
 .flow-chat__users {
-  border-left: solid 1px rgba(150, 150, 150, 0.2);
+  border-left: solid 1px var(--border-color);
 }
 
 .flow-chat__toggle {
   border: none;
   background: var(--background-secondary);
-  border-top: solid 1px rgba(208, 208, 208, 0.4);
-  border-left: solid 1px rgba(208, 208, 208, 0.4);
-  border-bottom: solid 1px rgba(208, 208, 208, 0.4);
+  border-top: solid 1px var(--border-color);
+  border-left: solid 1px var(--border-color);
+  border-bottom: solid 1px var(--border-color);
 }
 
 .flow-chat__messages .message {
-  border-bottom: solid 1px rgba(150, 150, 150, 0.1);
+  border-bottom: solid 1px var(--border-color);
 }
 
 .flow-chat__messages .handle .name {

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

@@ -0,0 +1,75 @@
+.lines {
+  --header-background: #fff;
+  --header-color: #333;
+  --background: #fff;
+  --background-transparent: rgba(240, 240, 240, 0.9);
+  --background-secondary: #fff;
+  --background-tertiary: #fff;
+  --normal: #333;
+  --normal-secondary: #999;
+  --primary: #0be;
+  --primary-darker: #405090;
+  --primary-lighter: #6080b0;
+  --primary-inverse: #fff;
+  --secondary: #666;
+  --secondary-inverse: #fff;
+  --node-label: #fff;
+  --node-socket: #444;
+  --node-socket--withvalue: #44f;
+  --link-hover: #f00;
+  --selector-background: rgba(0, 0, 200, 0.1);
+  --selector-color: var(--primary);
+  --transition-speed: 0.1s;
+  --transition-speed-slow: 0.3s;
+  --node-selection: darkblue;
+
+  /*--transition-speed: 0.3s;*/
+
+  /*--transition-speed-slow: 0.7s;*/
+}
+
+.lines .app-header {
+  box-shadow: none;
+  border-bottom: solid 1px var(--border-color);
+}
+
+.lines .split .splitter {
+  flex-basis: 1px !important;
+}
+
+.lines .split.resizeable.horizontal .splitter::after {
+  background: transparent !important;
+}
+
+.lines input {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+/* chat */
+.lines .flow-chat__container input.handle {
+  background: var(--background);
+  color: var(--normal);
+  box-shadow: none;
+  border-bottom: solid 1px var(--border-color);
+}
+
+.lines .flow-funcs__src {
+  background: transparent !important;
+  border: solid 1px var(--border-color);
+  text-shadow: none;
+  color: var(--normal);
+}
+
+/* left panel */
+.lines .hx-collapsible {
+  border-bottom: solid 1px var(--border-color);
+}
+
+.lines .flow-node__body {
+  fill: transparent;
+  stroke-width: 3px;
+}
+
+.lines .flow-node__label {
+  fill: black;
+}

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

@@ -1,11 +1,11 @@
 <template>
-  <div class="flow-main" :class="{dark:dark}">
+  <div class="flow-main" :class="themes[theme%themes.length]">
     <div class="app-content" :class="{'app-content--blur':helpModal}">
       <div class="app-header">
         Flow
         <div>
           <button @click="helpModal=true">?</button>
-          <button @click="dark=!dark">{{ dark?'light':'dark' }}</button>
+          <button @click="theme++">{{ themes[theme%themes.length] }}</button>
         </div>
       </div>
       <div class="app-horizontal">
@@ -81,6 +81,7 @@ import AppChat from '@/components/flow/chat'
 import AppInfo from '@/components/flow/modal-info'
 import 'reset-css/reset.css'
 
+import '@/assets/lines-theme.css'
 import '@/assets/dark-theme.css'
 import '@/assets/style.css'
 // import nodeData from './nodedata'
@@ -105,7 +106,8 @@ export default {
       funcsSize: '250px',
       funcsResizeable: false,
 
-      dark: false
+      themes: ['light', 'dark', 'lines'],
+      theme: 0
     }
   },
   computed: {

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

@@ -132,7 +132,7 @@ export default {
   align-items: center;
   width:30px;
   height:50px;
-  left:-30px;
+  left:-29px;
   top:calc(50% - 25px);
 
 }