rpd/src/style/plain/html.css

RPD is a minimal framework for building Node-Based User Interfaces, powered by Reactive Programming

.rpd-patch {
    font-family: 'PT Mono', 'Andale Mono', 'Fira mono', 'Menlo', sans-serif;
    font-size: 10px;
    color: #111;
    background-color: transparent;
    margin: 0;
}

.rpd-node-box {
    position: absolute;
}

.rpd-node .rpd-body {
    border: 1px solid black;
    background-color: white;
}

.rpd-header {
    position: absolute;
    text-align: left;
    /* bottom: 2em; */
    top: -3px;
    font-size: 0.8em;
    color: lightgray;
    font-weight: normal;
}

.rpd-dragging .rpd-node .rpd-body {
    border: 1px solid darkblue;
}

table.rpd-node {
    border-collapse: collapse;
}

.rpd-link {
    height: 1px;
    background-color: rgba(0,0,0,0.8);
}

.rpd-link.rpd-disabled {
    background-color: rgba(200,200,200,0.8);
}

.rpd-link:hover {
    cursor: crosshair;
}

.rpd-link.rpd-disabled:hover {
    cursor: cell;
}

.rpd-inlets, .rpd-outlets {
    height: 1em;
}

.rpd-inlet, .rpd-outlet {
    font-size: 0.8em;
}

.rpd-inlet .rpd-value-holder .rpd-value-editor {
    display: none;
}

.rpd-inlet .rpd-value-holder.rpd-editor-enabled .rpd-value {
    display: none;
}

.rpd-inlet .rpd-value-holder.rpd-editor-enabled .rpd-value-editor {
    display: block;
    z-index: 1000;
    position: absolute;
    left: 20px;
    top: 0px;
    /* font-size: 0.8em; */
}

.rpd-inlet .rpd-value-holder .rpd-value-editor input {
    font-size: 0.8em;
    width: 25px;
}

.rpd-inlet .rpd-connector,
.rpd-outlet .rpd-connector {
    cursor: pointer;
    border-radius: 4px;
    border-width: 3px;
    border-style: solid;
    position: absolute;
}

.rpd-inlet .rpd-connector {
    top: 13px;
}

.rpd-outlet .rpd-connector {
    top: -8px;
}

.rpd-connector:hover {
    transition: none;
}

.rpd-fresh .rpd-connector {
    border-color: #c00;
    background-color: #ff0;
}

.rpd-fresh .rpd-connector:hover {
    border-color: #c66;
}

.rpd-stale .rpd-connector {
    border-color: #000;
    background-color: #fff;
    transition: border-color .3s ease-out;
    /* position: absolute; */
    /* top: 0; */
}

.rpd-stale .rpd-connector:hover {
    transition: none;
    /* border-color: #333; */
    border-color: #ccc;
    opacity: 0.6;
}

.rpd-cold .rpd-connector {
    border-color: #009;
}

.rpd-cold .rpd-connector:hover {
    border-color: #669;
}

.rpd-error .rpd-connector {
    border-color: #cc0;
    background-color: #f00;
    transition: border-color .3s;
}

.rpd-error .rpd-connector:hover {
    border-color: #aa0;
}

.rpd-value-holder {
    /* position: absolute; */
    font-size: 0.6em;
    /* right: 0px; */
    padding: 0 3px;
    color: deepskyblue;
    /* top: -10px; */
}

.rpd-node .rpd-remove-button {
    display: none;
    cursor: pointer;
    position: absolute;
    right: 0px;
    margin-top: -13px;
}

.rpd-node:hover .rpd-remove-button {
    display: inline;
}

.rpd-remove-button:hover {
    color: red;
}