web view

colony/core/roles/webview/static/style.css

@@ -5,6 +5,7 @@
   --muted: #6b7686;
   --line: #d3d9e1;
   --down: #98a2b3;
+  --track: #dde2ea;
   --panel: rgba(255, 255, 255, 0.92);
   --warn: #c67a08;
   --crit: #d64545;
@@ -24,6 +25,7 @@
     --muted: #93a0b3;
     --line: #313a47;
     --down: #6b7686;
+    --track: #2a3340;
     --panel: rgba(27, 33, 41, 0.92);
     --warn: #ffb04a;
     --crit: #ff6b6b;
@@ -119,6 +121,12 @@ p { margin: 4px 0; }
 .node.down .disc { stroke-dasharray: 4 3; }
 .node.down .dot { fill: var(--down); }
 .node.gateway .disc { stroke-width: 4; }
+
+/* The door on the network's edge and its link to the gateway node inside. */
+.port { fill: var(--card); stroke: var(--net); stroke-width: 3.5; vector-effect: non-scaling-stroke; pointer-events: none; }
+.port-link { stroke: var(--net); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
+.foot-rule { stroke: color-mix(in srgb, var(--net) 40%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
+.foot .st-text { font-weight: 600; }
 .node.none .halo, .node.unknown .halo { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 3; }
 .node.reached .halo { stroke: var(--net); stroke-width: 2; }
 .node:hover .halo { stroke: var(--muted); stroke-dasharray: none; }
@@ -131,6 +139,15 @@ p { margin: 4px 0; }
 .l-name { fill: var(--text); font-size: 13px; font-weight: 600; }
 .l-roles { fill: var(--muted); font-size: 11px; }
 .l-caption { fill: var(--net); font-size: 11px; font-weight: 600; }
+
+.st-text, .st-foot { paint-order: stroke; stroke: color-mix(in srgb, var(--net) 9%, var(--bg)); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; font-size: 11px; font-variant-numeric: tabular-nums; }
+.st-name { fill: var(--muted); }
+.st-value { fill: var(--text); }
+.st-foot { fill: var(--muted); }
+.st-track { fill: color-mix(in srgb, var(--text) 13%, transparent); }
+.st-fill { fill: var(--net); }
+.st-fill.warn { fill: var(--warn); }
+.st-fill.crit { fill: var(--crit); }
 .node.none .l-caption, .node.unknown .l-caption { fill: var(--muted); }
 
 /* Level of detail: one class on the root, decided by the zoom. */
@@ -139,7 +156,11 @@ p { margin: 4px 0; }
 .lod0 .region-count { font-size: 24px; }
 .lod0 .region-dot { r: 12px; }
 .lod1 .l-roles { display: none; }
+.lod0 .stats { display: none; }
+.lod1 .st-text, .lod1 .st-foot { display: none; }
 .lod0 .node.full .l-name, .lod0 .node.full .l-roles, .lod0 .node.full .l-caption, .lod1 .node.full .l-roles { display: inline; }
+.lod0 .node.full .stats { display: inline; }
+.lod1 .node.full .st-text, .lod1 .node.full .st-foot { display: inline; }
 .lod0 .l-caption { display: none; }
 
 .flow { stroke-dasharray: none; }