@skydive-project/skydive-ui/src/Topology.css

Skydive WebUI v2

svg {
    cursor: default;
}

.levels {
    fill: none;
}

.level-zone {
    stroke: #888;
    stroke-dasharray: 5, 10;
    fill: #f6f6f6;
}

.level-label rect {
    fill: #e4e4e4;
}

.level-label text {
    fill:#333;
    font-weight: 500;
}

.hiera-links {
    fill: none;
    stroke: #333;
    stroke-width: 2;
}

.link-overlays {
    fill: none;
    stroke: #ffeb3b;
    stroke-width: 20;
    marker-start: url(#link-overlay-marker);
    marker-end: url(#link-overlay-marker);
}

.link-overlay-selected {
    stroke: #5097c7;
    marker-start: url(#link-overlay-selected-marker);
    marker-end: url(#link-overlay-selected-marker);
}

.link-overlay-marker {
    fill: #ffeb3b;
}

.link-overlay-selected-marker {
    fill: #5097c7;
}

.links {
    fill: none;
    stroke: #0069bd;
    stroke-width: 3;
    marker-start: url(#link-marker);
    marker-end: url(#link-marker);
}

.links .directed {
    marker-start: unset;
    marker-end: url(#link-directed-marker);
}

.links .directed-inv {
    marker-start: url(#link-directed-marker);
    marker-end: unset;
}

.link-marker {
    fill: #003865;
}

.link-wraps {
    stroke: #000;
    stroke-width: 30;
    opacity: 0;
    fill: none;
}

.link-label {
    font-size: 18px;
    font-weight: normal;
    font-family: sans-serif;
}

.hiera-link {
    stroke-dasharray: 5, 10;
}

.node-circle {
    fill: #ffffff00;
    stroke-width: 3;
    stroke: #5097c7;
}

.node-overlay {
    fill: #ffeb3b;
}

.node-pinned {
    fill: rgb(55, 255, 37);
}

.node-disc {
    stroke: none;
    fill: #5097c7;
}

.node-selected .node-circle {
    fill: #5097c7;
}

.node-hexagon {
    stroke: #455f6b;
    stroke-dasharray: 5, 5;
    fill: #C9ADA7;
}

.node-icon {
    font-size: 24px;
    text-anchor: middle;
    font-family: 'Font Awesome 5 Free' !important;
    fill: #444;
    font-weight: 900;
}

.node-badge text {
    font-size: 18px;
    text-anchor: middle;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.font-brands {
    font-family: 'Font Awesome 5 Brands' !important;
}

.node-pinned text {
    font-size: 30px;
    text-anchor: middle;
    font-family: 'Font Awesome 5 Free' !important;
    fill: #444;
    font-weight: 900;
}

.node-name {
    font-size: 22px;
    text-anchor: middle;
    font-weight: normal;
    font-family: sans-serif;
}

.node-name-wrap {
    fill: #fff;
    stroke: #666;
    opacity: 0.7;
}

.node-exco-circle {
    fill: #48e448;
    stroke: #666;

}

.node-exco-children {
    font-size: 16px;
    fill: #fff;
    text-anchor: middle;
    font-weight: bold;
    font-family: sans-serif;
}

.group .group-brace {
    stroke: #555;
    stroke-width: 2px;
    fill: none;
}

.group .group-brace-bg {
    fill: #e0e0e0;
    stroke: #ddd;
    stroke-width: 2px;
}

.group .group-brace-owner-bg {
    fill: #cac9c9;
    stroke: #aaa;
    stroke-width: 2px;
}

.group-button .brace-icon text {
    font-family: 'Font Awesome 5 Free' !important;
    fill: #444;
    font-weight: 900;
    font-size: 24px;
}

.group-button .brace-icon rect {
    stroke: none;
    fill: #eee;
}

.group-button .brace-offset text {
    fill: #eee;
    font-size: 16px;
    font-weight: bold;
}

.group-button .brace-offset rect {
    stroke: none;
    fill: #444;
}

.group-button .brace-icon:disabled {
    fill: #bbb;
}  

.context-menu {
    font-size: 16px;
}

.context-menu rect {
    fill: #fff;
    stroke: #333;
    stroke-width: 1px;
}

.context-menu-item rect {
    fill: #eee;
    stroke: none;
}

.context-menu-item text.disabled {
    fill: #888;
}