view-grapher.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. .node path { stroke: #333; fill: none; stroke-width: 1px; }
  2. .node line { stroke: #333; fill: none; stroke-width: 1px; }
  3. .node-item path { stroke-width: 0; stroke: #000; fill: #fff; }
  4. .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; }
  5. .node-item-function path { fill: #fff; }
  6. .node-item-function text { fill: #000; }
  7. .node-item-function:hover { cursor: hand; }
  8. .node-item-function:hover path { fill: #eee; }
  9. .node-item-type path { fill: #000; }
  10. .node-item-type text { fill: #fff; }
  11. .node-item-type:hover { cursor: hand; }
  12. .node-item-type:hover path { fill: #fff; }
  13. .node-item-type:hover text { fill: #000; }
  14. .node-item-type-constant path { fill: #eee; }
  15. .node-item-type-constant text { fill: #000; }
  16. .node-item-type-constant:hover path { fill: #fff; }
  17. .node-item-type-control path { fill: #eee; }
  18. .node-item-type-control text { fill: #000; }
  19. .node-item-type-control:hover path { fill: #fff; }
  20. .node-item-type-layer path { fill: rgb(51, 85, 136); }
  21. .node-item-type-wrapper path { fill: rgb(238, 238, 238); }
  22. .node-item-type-wrapper text { fill: rgb(0, 0, 0) }
  23. .node-item-type-activation path { fill: rgb(75, 27, 22); }
  24. .node-item-type-pool path { fill: rgb(51, 85, 51); }
  25. .node-item-type-normalization path { fill: rgb(51, 85, 68); }
  26. .node-item-type-dropout path { fill: rgb(69, 71, 112); }
  27. .node-item-type-shape path { fill: rgb(108, 79, 71); }
  28. .node-item-type-tensor path { fill: rgb(89, 66, 59); }
  29. .node-item-type-transform path { fill: rgb(51, 85, 68); }
  30. .node-item-type-data path { fill: rgb(85, 85, 85); }
  31. .node-item-type-custom path { fill: rgb(128, 128, 128); }
  32. .node-item-input path { fill: #fff; }
  33. .node-item-input:hover { cursor: hand; }
  34. .node-item-input:hover path { fill: #fff; }
  35. .node-item-constant path { fill: #eee; }
  36. .node-item-constant:hover { cursor: hand; }
  37. .node-item-constant:hover path { fill: #fff; }
  38. .node-item-undefined path { fill: #f00; }
  39. .node-item-undefined:hover { cursor: hand; }
  40. .node-item-undefined:hover path { fill: #fff; }
  41. .node-attribute:hover { cursor: hand; }
  42. .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; }
  43. .node-attribute path { fill: #fff; stroke-width: 0; stroke: #000; }
  44. .node-attribute:hover path { fill: #f6f6f6; }
  45. .graph-item-input path { fill: #eee; }
  46. .graph-item-input:hover { cursor: hand; }
  47. .graph-item-input:hover path { fill: #fff; }
  48. .graph-item-output path { fill: #eee; }
  49. .graph-item-output:hover { cursor: hand; }
  50. .graph-item-output:hover path { fill: #fff; }
  51. .edge-label text { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 10px; }
  52. .edge-path { stroke: #000; stroke-width: 1px; fill: none; }
  53. #arrowhead-vee { fill: #000; }
  54. .edge-path-control-dependency { stroke-dasharray: 3, 2; }
  55. .cluster rect { stroke: #000; fill: #000; fill-opacity: 0.02; stroke-opacity: 0.06; stroke-width: 1px; }
  56. .select .node.border { stroke: #333; stroke-width: 2px; stroke-dasharray: 6px 3px; stroke-dashoffset: 0; animation: pulse 4s infinite linear; }
  57. .select.edge-path { stroke: #333; stroke-width: 2px; stroke-dasharray: 6px 3px; stroke-dashoffset: 0; animation: pulse 4s infinite linear; }
  58. @keyframes pulse { from { stroke-dashoffset: 100px; } to { stroke-dashoffset: 0; } }
  59. @media (prefers-color-scheme: dark) {
  60. .edge-label text { fill: #b2b2b2; }
  61. .edge-path { stroke: #888888; }
  62. #arrowhead-vee { fill: #888888; }
  63. .node path { stroke: #1d1d1d; }
  64. .node line { stroke: #1d1d1d; }
  65. .select .node.border { stroke: #dfdfdf; }
  66. .select.edge-path { stroke: #dfdfdf; }
  67. .node-item-function path { fill: #404040; }
  68. .node-item-function text { fill: #dfdfdfdf; }
  69. .node-item-function:hover { cursor: hand; }
  70. .node-item-function:hover path { fill: #666666; }
  71. .node-item-type path { fill: #303030; }
  72. .node-item-type text { fill: #dfdfdf; }
  73. .node-item-type:hover { cursor: hand; }
  74. .node-item-type:hover path { fill: #808080; }
  75. .node-item-type:hover text { fill: #dfdfdf; }
  76. .node-item path { stroke: #fff; }
  77. .node-item text { fill: #dfdfdf; }
  78. .node-attribute text { fill: #b2b2b2; }
  79. .node-attribute path { fill: #2d2d2d; }
  80. .node-attribute:hover path { fill: #666666; }
  81. .graph-item-input path { fill: #404040; }
  82. .graph-item-input:hover { cursor: hand; }
  83. .graph-item-input:hover path { fill: #666666; }
  84. .graph-item-output path { fill: #404040; }
  85. .graph-item-output:hover { cursor: hand; }
  86. .graph-item-output:hover path { fill: #666666; }
  87. .node-item-input path { fill: #404040; }
  88. .node-item-input:hover path { fill: #666666; }
  89. .node-item-constant path { fill: #4b4b4b; }
  90. .node-item-constant:hover path { fill: #666666; }
  91. .node-item-type-layer path { fill: rgba(51, 85, 136, 0.7); }
  92. .node-item-type-activation path { fill: rgba(75, 27, 22, 0.7); }
  93. .node-item-type-activation path { fill: rgba(75, 27, 22, 0.7); }
  94. .node-item-type-pool path { fill: rgba(51, 85, 51, 0.7); }
  95. .node-item-type-pool path { fill: rgba(51, 85, 51, 0.7); }
  96. .node-item-type-normalization path { fill: rgba(51, 85, 68, 0.7); }
  97. .node-item-type-dropout path { fill: rgba(69, 71, 112, 0.7); }
  98. .node-item-type-shape path { fill: rgba(108, 79, 71, 0.7); }
  99. .node-item-type-tensor path { fill: rgba(89, 66, 59, 0.7); }
  100. .node-item-type-transform path { fill: rgba(51, 85, 68, 0.7); }
  101. .node-item-type-data path { fill: rgba(85, 85, 85, 0.7); }
  102. .node-item-type-custom path { fill: rgb(64, 64, 64, 0.7); }
  103. }