Optimize visual effects

Co-authored-by: Nwuzewu <wuzewu@baidu.com>

frontend/packages/netron/src/style.scss

 html {
+
     text-size-adjust: 100%;
+
     text-rendering: optimizeLegibility;
+
 }
 
+
 body {
+
     overflow: hidden;
+
     margin: 0;
+
     width: 100vw;
+
     height: 100vh;
+
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif,
+
         'PingFang SC';
     font-size: 12px;
+
     text-rendering: geometricPrecision;
+
     background-color: #fff;
 
+
+
     &.dark {
+
         background-color: #1d1d1f;
+
     }
 }
 
+
 .graph {
+
     overflow: auto;
+
     width: 100%;
+
     height: 100%;
+
 }
 
+
 .canvas {
+
     display: block;
+
     // position: absolute;
     text-rendering: geometricPrecision;
+
     user-select: none;
+
     cursor: grab;
+
 }
 
+
 path {
+
     stroke: #666;
+
     stroke-width: 1px;
+
     fill: none;
+
 }
 
+
 line {
+
     stroke: #666;
+
     stroke-width: 1px;
+
     fill: #666;
+
 }
 
+
 text {
+
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif,
+
         'PingFang SC';
     font-size: 11px;
+
     text-rendering: geometricPrecision;
+
     fill: #000;
 
+
+
     .dark & {
+
         fill: #cfcfd1;
+
     }
 }
 
+
 .node-item {
+
     path {
+
         fill: #fff;
+
         fill-opacity: 1;
+
         stroke: none;
+
         transition: fill 0.075s ease-in, fill-opacity 0.075s ease-in;
+
     }
 
+
     text {
+
         transition: fill 0.075s ease-in;
+
     }
 
+
     &:hover {
+
         path {
+
             fill: #2932e1;
+
             fill-opacity: 1;
+
         }
 
+
         text {
+
             fill: #fff;
+
         }
     }
 }
 
+
 .node-item-function path {
+
     fill: #9bb9e8;
+
     fill-opacity: 0.7;
+
 }
 
+
 .node-item-type {
+
     cursor: pointer;
 
+
+
     path {
+
         fill: #8bb8ff;
+
         fill-opacity: 0.9;
+
     }
 }
 
+
 .node-item-type-constant path {
+
     fill: #b4ccb7;
+
 }
 
+
 .node-item-type-control path {
+
     fill: #a8e9b8;
+
 }
 
+
 .node-item-type-layer path {
+
     fill: #db989a;
+
     fill-opacity: 0.7;
+
 }
 
+
 .node-item-type-container path {
+
     fill: #db989a;
+
     fill-opacity: 0.7;
+
 }
 
+
 .node-item-type-wrapper path {
+
     fill: #6dcde4;
+
     fill-opacity: 0.7;
+
 }
 
+
 .node-item-type-conv path {
+
     fill: #6dcde4;
+
     fill-opacity: 0.7;
+
 }
 
+
 .node-item-type-activation path {
+
     fill: #93c2ca;
+
     fill-opacity: 0.7;
+
 }
 
+
 .node-item-type-pool path {
+
     fill: #de7cce;
+
     fill-opacity: 0.7;
+
 }
 
+
 .node-item-type-normalization path {
+
     fill: #da96bc;
+
     fill-opacity: 0.7;
+
 }
 
+
 .node-item-type-dropout path {
+
     fill: #309e51;
+
     fill-opacity: 0.7;
+
 }
+
 .node-item-type-pad path {
+
     fill: #309e51;
+
     fill-opacity: 0.7;
+
 }
 
+
 .node-item-type-shape path {
+
     fill: #d6c482;
+
     fill-opacity: 0.7;
+
 }
 
+
 .node-item-type-tensor path {
+
     fill: #6d7ce4;
+
     fill-opacity: 0.7;
+
 }
 
+
 .node-item-type-transform path {
+
     fill: #cdcb74;
+
 }
 
+
 .node-item-type-sequence path {
+
     fill: #cdcb74;
+
 }
 
+
 .node-item-type-data path {
+
     fill: #2576ad;
+
     fill-opacity: 0.7;
+
 }
 
+
 .node-item-type-custom path {
+
     fill: #e46d6d;
+
     fill-opacity: 0.7;
+
 }
 
+
 .node-item-input {
+
     cursor: pointer;
 
+
+
     path {
+
         fill: #fff;
+
     }
 }
 
+
 .node-item-constant {
+
     cursor: pointer;
 
+
+
     path {
+
         fill: #eee;
+
     }
 }
 
+
 .node-item-undefined {
+
     cursor: pointer;
 
+
+
     path {
+
         fill: #ca5353;
+
         fill-opacity: 0.7;
+
     }
 }
 
+
 .node-attribute {
+
     cursor: pointer;
 
+
+
     text {
+
         font-size: 9px;
+
         font-weight: normal;
+
     }
 }
 
+
 .node-attribute path {
+
     fill: #fff;
+
     stroke-width: 0;
 
+
+
     .dark & {
+
         fill: #262629;
+
     }
 }
 
+
 .graph-item-input {
+
     cursor: pointer;
 
+
+
     path {
+
         fill: #e49d6d;
+
         fill-opacity: 0.7;
+
     }
 }
 
+
 .graph-item-output {
+
     cursor: pointer;
 
+
+
     path {
+
         fill: #e4e06d;
+
         fill-opacity: 0.9;
+
     }
 }
 
+
 .edge-label text {
+
     font-size: 10px;
+
 }
 
+
 .edge-path {
+
     stroke: #666;
+
     stroke-width: 1px;
+
     fill: none;
+
 }
 
+
 #arrowhead-vee path {
+
     fill: #666;
+
 }
 
+
 .edge-path-control-dependency {
+
     stroke-dasharray: 3, 2;
+
 }
 
+
 .cluster .clusterGroup {
+
     fill: #dce9ff;
+
     stroke: #666;
+
     stroke-width: 1px;
+
 }
+
 .node-item-function path {
+
     fill: #9bb9e8;
+
     fill-opacity: 0.7;
+
 }
+
 .cluster .clusterGroup-constant {
+
     fill: #e8efe9;
+
 }
 
+
 .cluster .clusterGroup-control {
+
     fill: #e4f8e9;
+
 }
 
+
 .cluster .clusterGroup-layer {
+
     fill: #f4e0e0;
+
 }
 
+
 .cluster .clusterGroup-conv {
+
     fill: #d3f0f6;
+
 }
 
+
 .cluster .clusterGroup-container {
+
     fill: #f4e0e0;
+
 }
 
+
 .cluster .clusterGroup-wrapper {
+
     fill: #d3f0f6;
+
 }
 
+
 .cluster .clusterGroup-activation {
+
     fill: #deecef;
+
 }
 
+
 .cluster .clusterGroup-pool {
+
     fill: #f5d7f0;
+
 }
 
+
 .cluster .clusterGroup-normalization {
+
     fill: #f3dfea;
+
 }
 
+
 .cluster .clusterGroup-dropout {
+
     fill: #c0e1ca;
+
 }
 
+
 .cluster .clusterGroup-pad {
+
     fill: #c0e1ca;
+
 }
 
+
 .cluster .clusterGroup-shape {
+
     fill: #f2edd9;
+
 }
 
+
 .cluster .clusterGroup-tensor {
+
     fill: #d3d7f6;
+
 }
 
+
 .cluster .clusterGroup-transform {
+
     fill: #f0efd5;
+
 }
 
+
 .cluster .clusterGroup-sequence {
+
     fill: #f0efd5;
+
 }
 
+
 .cluster .clusterGroup-data {
+
     fill: #bdd5e6;
+
 }
 
+
 .cluster .clusterGroup-custom {
+
     fill: #f6d3d3;
+
 }
+
 .cluster .clusterButton {
-    fill-opacity: 0.3;
+
+    fill-opacity: 0;
+
     fill: #db989a;
+
     stroke: #999;
+
     cursor: pointer;
+
 }
+
 .cluster .button-text {
+
     fill: #999;
+
 }
+
 .cluster.border {
+
     display: none;
+
 }
+
 .select {
+
     &.edge-path {
+
         stroke: #1527c2;
+
         stroke-width: 2px;
+
         stroke-dasharray: 6px 3px;
+
         stroke-dashoffset: 0;
+
         animation: pulse 4s infinite linear;
+
     }
 
+
     .node.border {
+
         stroke: #1527c2;
+
         stroke-width: 2px;
+
         stroke-dasharray: 6px 3px;
+
         stroke-dashoffset: 0;
+
         animation: pulse 4s infinite linear;
+
     }
+
     .cluster.border {
+
         display: block;
+
         stroke: #1527c2;
+
         stroke-width: 2px;
+
         stroke-dasharray: 6px 3px;
+
         stroke-dashoffset: 0;
+
         animation: pulse 4s infinite linear;
+
     }
 }
 
+
 @keyframes pulse {
+
     from {
+
         stroke-dashoffset: 100px;
+
     }
 
+
     to {
+
         stroke-dashoffset: 0;
+
     }
-}
+}
\ No newline at end of file