WiredPanels.css

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fadeIn {
    animation: fadeIn 0.25s ease-in forwards;
}

.fadeOut {
    animation: fadeOut 0.25s ease-in forwards;
}

.WiredPanels {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    position: absolute;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: crosshair;
    background-color: var(--background-color);
    fill: var(--text-color);
}

.WiredPanels .ignore, .WiredPanels .separator, .fadeOut {
    pointer-events: none;
}

.WiredPanels .selected {
    filter: url(#blurFilter);
}

.WiredPanels .boxSelection {
    pointer-events: none;
    stroke-width: 1px;
    fill-opacity: 0.4;
    stroke: var(--box-selection-color);
    fill: var(--box-selection-color);
}

.WiredPanels .panel {
    cursor: default;
    stroke-width: 1px;
    transition: stroke-width 0.25s;
    fill: var(--panel-fill);
    stroke: var(--panel-stroke);
}

.WiredPanels .separator {
    fill: var(--panel-stroke);
}

.WiredPanels rect.panel.selected {
    stroke-width: 2px;
}

.WiredPanels rect.panel:hover {
    stroke-width: 3px;
}

.WiredPanels .label {
    font-family: Verdana;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    dominant-baseline: central;
    pointer-events: none;
}

.WiredPanels .socket {
    cursor: pointer;
    transition: stroke-width 0.25s;
    stroke-width: 2px;
    fill: var(--socket-fill);
    stroke: var(--socket-stroke);
}

.WiredPanels .socket.selected {
    stroke-width: 2.5px;
}

.WiredPanels .socket:hover {
    stroke-width: 4px;
}

.WiredPanels .wire {
    cursor: pointer;
    transition: stroke-opacity 0.25s;
    stroke-linecap: round;
    stroke-width: 4px;
    stroke-opacity: 0.6;
    fill: none;
    stroke: var(--wire-stroke);
}

.WiredPanels .wire:hover {
    stroke-opacity: 1.0;
}