Finish style

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

@@ -159,19 +159,43 @@ input {
  * CHAT
  */
 .flow-chat {
-  background: var(--background-secondary) !important;
+  background: var(--background-secondary);
   color: var(--normal);
 }
 
+.flow-chat__users {
+  border-left: solid 1px rgba(150, 150, 150, 0.2);
+}
+
 .flow-chat__toggle {
   border: none;
-  background: var(--background-secondary) !important;
+  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);
+}
+
+.flow-chat__messages .message {
+  border-bottom: solid 1px rgba(150, 150, 150, 0.1);
 }
 
-.flow-chat .message .text {
+.flow-chat__messages .handle .name {
+  font-weight: bold;
+}
+
+.flow-chat__messages .message .text {
+  color: #777;
+}
+
+.flow-chat__messages .handle .time {
   color: #999;
 }
 
+.flow-chat input.handle {
+  background: #777;
+  color: #fff;
+}
+
 .flow-chat input.message {
   background: var(--background) !important;
   color: var(--normal);

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

@@ -130,7 +130,6 @@ function pad (n, width, z) {
   position:relative;
   width:0px;
   transition: all .3s;
-  background: rgba(208,208,208,0.9);
 }
 .flow-chat.active {
   width:530px;
@@ -138,7 +137,6 @@ function pad (n, width, z) {
 .flow-chat__toggle {
   user-select:none;
   cursor: pointer;
-  background: rgba(108,108,208,0.3);
   position:absolute;
   display:flex;
   justify-content: center;
@@ -147,10 +145,8 @@ function pad (n, width, z) {
   height:50px;
   left:-30px;
   top:calc(50% - 25px);
-  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);
-}
+
+ }
 
 .flow-chat__area {
   height:100%;
@@ -175,7 +171,6 @@ function pad (n, width, z) {
 .flow-chat__users {
   flex-basis:100px;
   padding:20px 8px;
-  border-left: solid 1px rgba(150,150,150,0.2);
 
 }
 .flow-chat__user {
@@ -206,7 +201,6 @@ function pad (n, width, z) {
 }
 .flow-chat__messages .message{
   padding:2px 2px 12px 2px;
-  border-bottom: solid 1px rgba(150,150,150,0.1);
 
 }
 .flow-chat__messages .handle {
@@ -219,23 +213,16 @@ function pad (n, width, z) {
 
 }
 .flow-chat__messages .handle .name {
-  font-weight:bold;
   padding-bottom:4px;
 }
 .flow-chat__messages .handle .time{
   font-weight:normal;
   font-size:8px;
-  color: #999;
 }
 
 .flow-chat__messages .text {
   padding-top:0px;
   padding-left:9px;
-  color:#777;
 }
 
-.flow-chat input.handle {
-  background: #777;
-  color: #FFF;
-}
 </style>

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

@@ -47,6 +47,12 @@ export default {
 .flow-view:not(.activity) .flow-link {
   cursor:pointer;
 }
+.flow-link__head{
+  fill:#333;
+}
+.flow-link {
+  stroke:#333;
+}
 .flow-link .flow-link__area {
   stroke-width:20;
   stroke: transparent;

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

@@ -236,6 +236,7 @@ for hidden
   stroke:none;
   pointer-events:none;
   user-select:none;
+  fill:#333;
 }
 .flow-node__socket-detail {
   pointer-events:none;