143 lines
6.1 KiB
CSS
143 lines
6.1 KiB
CSS
|
/* this file is from https://github.com/lutzroeder/netron/blob/main/source/grapher.css */
|
||
|
|
.node path { stroke: #333; fill: none; stroke-width: 1px; }
|
||
|
|
.node line { stroke: #333; fill: none; stroke-width: 1px; }
|
||
|
|
|
||
|
|
.node-item path { stroke-width: 0; stroke: #000; fill: #fff; }
|
||
|
|
.node-item text { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 11px; text-rendering: geometricPrecision; user-select: none; }
|
||
|
|
|
||
|
|
.node-item-function path { fill: #fff; }
|
||
|
|
.node-item-function text { fill: #000; }
|
||
|
|
.node-item-function:hover { cursor: pointer; }
|
||
|
|
.node-item-function:hover path { fill: #eee; }
|
||
|
|
|
||
|
|
.node-item-type path { fill: #000; }
|
||
|
|
.node-item-type text { fill: #fff; }
|
||
|
|
.node-item-type:hover { cursor: pointer; }
|
||
|
|
.node-item-type:hover path { fill: #fff; }
|
||
|
|
.node-item-type:hover text { fill: #000; }
|
||
|
|
|
||
|
|
.node-item-type-constant path { fill: #eee; }
|
||
|
|
.node-item-type-constant text { fill: #000; }
|
||
|
|
.node-item-type-constant:hover path { fill: #fff; }
|
||
|
|
|
||
|
|
.node-item-type-control path { fill: #eee; }
|
||
|
|
.node-item-type-control text { fill: #000; }
|
||
|
|
.node-item-type-control:hover path { fill: #fff; }
|
||
|
|
|
||
|
|
.node-item-type-layer path { fill: rgb(51, 85, 136); }
|
||
|
|
.node-item-type-wrapper path { fill: rgb(238, 238, 238); }
|
||
|
|
.node-item-type-wrapper text { fill: rgb(0, 0, 0) }
|
||
|
|
.node-item-type-activation path { fill: rgb(112, 41, 33); }
|
||
|
|
.node-item-type-pool path { fill: rgb(51, 85, 51); }
|
||
|
|
.node-item-type-normalization path { fill: rgb(51, 85, 68); }
|
||
|
|
.node-item-type-dropout path { fill: rgb(69, 71, 112); }
|
||
|
|
.node-item-type-shape path { fill: rgb(108, 79, 71); }
|
||
|
|
.node-item-type-tensor path { fill: rgb(89, 66, 59); }
|
||
|
|
.node-item-type-transform path { fill: rgb(51, 85, 68); }
|
||
|
|
.node-item-type-data path { fill: rgb(85, 85, 85); }
|
||
|
|
.node-item-type-quantization path { fill: rgb(80, 40, 0); }
|
||
|
|
.node-item-type-custom path { fill: rgb(128, 128, 128); }
|
||
|
|
|
||
|
|
.node-item-input path { fill: #fff; }
|
||
|
|
.node-item-input:hover { cursor: pointer; }
|
||
|
|
.node-item-input:hover path { fill: #fff; }
|
||
|
|
|
||
|
|
.node-item-constant path { fill: #eee; }
|
||
|
|
.node-item-constant:hover { cursor: pointer; }
|
||
|
|
.node-item-constant:hover path { fill: #fff; }
|
||
|
|
|
||
|
|
.node-item-undefined path { fill: #f00; }
|
||
|
|
.node-item-undefined:hover { cursor: pointer; }
|
||
|
|
.node-item-undefined:hover path { fill: #fff; }
|
||
|
|
|
||
|
|
.node-attribute-list > path { fill: #fff; stroke-width: 0; stroke: #000; }
|
||
|
|
.node-attribute-list:hover { cursor: pointer; }
|
||
|
|
.node-attribute-list:hover > path { fill: #f6f6f6; }
|
||
|
|
.node-attribute > text { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 9px; font-weight: normal; text-rendering: geometricPrecision; user-select: none; }
|
||
|
|
|
||
|
|
.graph-item-input path { fill: #eee; }
|
||
|
|
.graph-item-input:hover { cursor: pointer; }
|
||
|
|
.graph-item-input:hover path { fill: #fff; }
|
||
|
|
|
||
|
|
.graph-item-output path { fill: #eee; }
|
||
|
|
.graph-item-output:hover { cursor: pointer; }
|
||
|
|
.graph-item-output:hover path { fill: #fff; }
|
||
|
|
|
||
|
|
#arrowhead { fill: #000; }
|
||
|
|
#arrowhead-select { fill: #e00; }
|
||
|
|
|
||
|
|
.edge-path { stroke: #000; stroke-width: 1px; fill: none; marker-end: url("#arrowhead"); }
|
||
|
|
.edge-path-hit-test { pointer-events: stroke; stroke-width: 0.5em; fill: none; stroke: #000; stroke-opacity: 0.001; }
|
||
|
|
|
||
|
|
.select > .node.node-border { stroke: #e00; stroke-width: 2px; }
|
||
|
|
.select.edge-path { stroke: #e00; stroke-width: 1px; marker-end: url("#arrowhead-select"); }
|
||
|
|
|
||
|
|
.edge-label { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 10px; }
|
||
|
|
.edge-path-control-dependency { stroke-dasharray: 3, 2; }
|
||
|
|
|
||
|
|
.cluster rect { stroke: #000; fill: #000; fill-opacity: 0.02; stroke-opacity: 0.06; stroke-width: 1px; }
|
||
|
|
|
||
|
|
@keyframes pulse { from { stroke-dashoffset: 100px; } to { stroke-dashoffset: 0; } }
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
|
||
|
|
.edge-path { stroke: #888; }
|
||
|
|
|
||
|
|
.node path { stroke: #1d1d1d; }
|
||
|
|
.node line { stroke: #1d1d1d; }
|
||
|
|
|
||
|
|
.select > .node.node-border { stroke: #b00; }
|
||
|
|
.select.edge-path { stroke: #b00; }
|
||
|
|
|
||
|
|
#arrowhead { fill: #888; }
|
||
|
|
#arrowhead-hover { fill: #b00; }
|
||
|
|
#arrowhead-select { fill: #b00 }
|
||
|
|
|
||
|
|
.edge-label { fill: #b2b2b2; }
|
||
|
|
|
||
|
|
.node-item-function path { fill: #404040; }
|
||
|
|
.node-item-function text { fill: #dfdfdfdf; }
|
||
|
|
.node-item-function:hover { cursor: pointer; }
|
||
|
|
.node-item-function:hover path { fill: #666666; }
|
||
|
|
|
||
|
|
.node-item-type path { fill: #303030; }
|
||
|
|
.node-item-type text { fill: #dfdfdf; }
|
||
|
|
.node-item-type:hover { cursor: pointer; }
|
||
|
|
.node-item-type:hover path { fill: #808080; }
|
||
|
|
.node-item-type:hover text { fill: #dfdfdf; }
|
||
|
|
|
||
|
|
.node-item path { stroke: #fff; }
|
||
|
|
.node-item text { fill: #dfdfdf; }
|
||
|
|
|
||
|
|
.node-attribute > text { fill: #b2b2b2; }
|
||
|
|
.node-attribute-list > path { fill: #2d2d2d; }
|
||
|
|
.node-attribute-list:hover > path { fill: #666666; }
|
||
|
|
|
||
|
|
.graph-item-input path { fill: #404040; }
|
||
|
|
.graph-item-input:hover { cursor: pointer; }
|
||
|
|
.graph-item-input:hover path { fill: #666666; }
|
||
|
|
|
||
|
|
.graph-item-output path { fill: #404040; }
|
||
|
|
.graph-item-output:hover { cursor: pointer; }
|
||
|
|
.graph-item-output:hover path { fill: #666666; }
|
||
|
|
|
||
|
|
.node-item-input path { fill: #404040; }
|
||
|
|
.node-item-input:hover path { fill: #666666; }
|
||
|
|
.node-item-constant path { fill: #4b4b4b; }
|
||
|
|
.node-item-constant:hover path { fill: #666666; }
|
||
|
|
|
||
|
|
.node-item-type-layer path { fill: rgba(51, 85, 136, 0.7); }
|
||
|
|
.node-item-type-activation path { fill: rgba(75, 27, 22, 0.7); }
|
||
|
|
.node-item-type-activation path { fill: rgba(75, 27, 22, 0.7); }
|
||
|
|
.node-item-type-pool path { fill: rgba(51, 85, 51, 0.7); }
|
||
|
|
.node-item-type-pool path { fill: rgba(51, 85, 51, 0.7); }
|
||
|
|
.node-item-type-normalization path { fill: rgba(51, 85, 68, 0.7); }
|
||
|
|
.node-item-type-dropout path { fill: rgba(69, 71, 112, 0.7); }
|
||
|
|
.node-item-type-shape path { fill: rgba(108, 79, 71, 0.7); }
|
||
|
|
.node-item-type-tensor path { fill: rgba(89, 66, 59, 0.7); }
|
||
|
|
.node-item-type-transform path { fill: rgba(51, 85, 68, 0.7); }
|
||
|
|
.node-item-type-data path { fill: rgba(85, 85, 85, 0.7); }
|
||
|
|
.node-item-type-quantization path { fill: rgb(80, 40, 0, 0.7); }
|
||
|
|
.node-item-type-custom path { fill: rgb(64, 64, 64, 0.7); }
|
||
|
|
}
|