@scidian/osui/css/node.css

Lightweight JavaScript UI library.

/***** GRAPH *****/

.osui-graph-input, .osui-graph-grid, .osui-graph-nodes, .osui-graph-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Div used for processing user input */
.osui-graph-input {
    background: transparent;
    z-index: -1; /* Graph Input */
}

/* Background div that holds tiled grid */
.osui-graph-grid {
    pointer-events: none;
    background-color: rgb(var(--darkness));
    background-repeat: repeat;
    transition: none;
}

/* Scalable div to hold nodes */
.osui-graph-nodes {
    pointer-events: none;
    background-color: transparent;
    transition: none;
}

/* Canvas where lines are drawn */
.osui-graph-lines {
    pointer-events: none;
}

/* Shows rubberband box */
.osui-graph-band-box {
    position: absolute;
    display: none;
    background-color: rgba(var(--icon), 0.2);
    border: solid var(--border-small) rgba(var(--icon), 0.75);
}

/***** MINIMAP *****/

.osui-mini-map {
    position: absolute;
    background-color: rgba(var(--background-dark), 0.5);
    border: var(--border-small) solid rgba(var(--icon), 0.75);
    border-radius: var(--radius-large);
    bottom: var(--pad-large);
    right: var(--pad-large);
    width: 20%;
    height: 20%;
    z-index: 101; /* GraphMap */
    cursor: grab;
}

.osui-mini-map-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    outline: none;
}

.osui-mini-map-resizers {
    position: absolute;
    width: calc(100% + var(--resize-size));
    height: calc(100% + var(--resize-size));
    margin: calc(var(--resize-size) / -2);
    outline: none;
}

/***** NODE *****/

.osui-node {
    --node-color:       255, 0, 0;

    pointer-events: all;
    position: absolute;
    background-color: transparent;
    border-radius: var(--radius-large);
    border: none;
    outline: solid var(--pad-micro) rgb(var(--black), 0.5);
    margin: 0;
    cursor: inherit;
    overflow: visible;
    z-index: 0; /* Node */
}

.osui-active-node {
    z-index: 1; /* Active Node */
}

.osui-node:hover, .osui-node.osui-node-selected {
    filter: brightness(120%);
}

.osui-node.osui-node-selected, .osui-node.osui-node-displayed {
    outline: solid var(--pad-small) rgb(var(--black), 0.5);
}

.osui-node.osui-too-small .osui-resizer {
    pointer-events: none;
}

.osui-node-panel {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: rgba(var(--button-dark), 1);
    border-radius: var(--radius-large);
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    margin: 0;
    padding: 0;
    cursor: inherit;
    overflow: visible;
    box-shadow: /* pop-out-shadow */
        inset var(--minus) var(--pixel) var(--pixel) var(--pixel) rgba(var(--white), 0.1),
        inset var(--pixel) var(--minus) var(--pixel) var(--pixel) rgba(var(--black), 0.1);
}

.osui-node-border {
    pointer-events: none;
    border: var(--border-small) solid transparent;
    border-radius: var(--radius-large);
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    margin: calc(var(--border-small) * -0.5);
    padding: 0;
}

.osui-node.osui-node-displayed .osui-node-border {
    border: var(--border-small) solid rgba(var(--complement), 1);
}

.osui-node.osui-node-selected .osui-node-border {
    border: var(--border-small) solid rgba(var(--icon), 1);
}

.osui-node-resizers {
    pointer-events: all;
    position: absolute;
    opacity: 0;
    left: 0; top: 0; right: 0; bottom: 0;
    margin: calc(var(--resize-size) / -2);
    padding: 0;
}

/***** NODE HEADER *****/

.osui-node-header-title {
    pointer-events: none;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-image: linear-gradient(to bottom, rgba(var(--icon-light), 0.5), rgba(var(--icon-dark), 0.5));
    border-top-right-radius: var(--radius-large);
    border-top-left-radius: var(--radius-large);
    width: 100%;
    height: 1.82em;
    margin: 0;
    padding: var(--pad-x-small) 0.5em; /* vertical | horizontal */
    text-shadow: var(--minus) var(--pixel) rgba(var(--shadow), 0.5);
    box-shadow: /* pop-out-shadow */
        inset var(--minus) var(--pixel) var(--pixel) var(--pixel) rgba(var(--white), 0.1),
        inset var(--pixel) var(--minus) var(--pixel) var(--pixel) rgba(var(--black), 0.2);
}

.osui-node-header-icon .osui-vector-box {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 85%;
    filter: drop-shadow(0 0 var(--pad-micro) rgba(var(--shadow), 0.8));
}

.osui-node-header-icon .osui-image {
    filter: brightness(calc(10 * var(--bright))) opacity(0.9);
}

.osui-node-header-icon {
    pointer-events: none;
    position: absolute;
    background-color: rgba(var(--button-dark), 1);
    border-radius: 0.25em;
    left: 0.2em;
    top: 0.2em;
    width: 1.65em;
    height: 1.35em;
    opacity: 1;
    box-shadow: inset 0 0 var(--pixel) rgba(var(--shadow), 0.5);
}

.osui-node-header-text {
    pointer-events: none;
    flex-grow: 1;
    flex-shrink: 2;
    color: rgba(var(--text-light), 1.0);
    font-size: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 0.5em;
}

/***** NODE ITEM *****/

.osui-node-interior {
    pointer-events: none;
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    position: relative;
    background-color: transparent;
    min-width: 100px;
    min-height: 25px;
}

.osui-node-item-list {
    pointer-events: none;
    display: block;
    flex: 1 1 auto;
    position: relative;
    background-color: transparent;
    width: 50%;
    min-height: 25px;
}

/* Item */
.osui-node-item {
    pointer-events: none;
    position: relative;
    background-color: transparent;
    color: var(--text);
    font-size: 85%;
    width: 100%;
    padding: var(--pad-medium);
    margin-top: var(--pad-x-small);
    margin-bottom: var(--pad-x-small);
    vertical-align: middle;
}

.osui-node-left {
    text-align: left;
    padding-left: 1.2em;
}

.osui-node-right {
    text-align: right;
    padding-right: 1.2em;
}

/* Item point */
.osui-node-item-point {
    pointer-events: all;
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: rgba(var(--background-dark), 1);
    border: var(--border-small) solid rgba(var(--button-light), 1);
    border-radius: 0.3em;
    outline: none;
    top: 50%;
    overflow: visible;
    z-index: 100; /* Node Item Point */
}

.osui-node-left .osui-node-item-point {
    left: 0;
    transform: translate(-50%, -50%);
}
.osui-node-right .osui-node-item-point {
    right: 0;
    transform: translate( 50%, -50%);
}

/* Increases mouse over hit area */
.osui-node-item-point::before {
    content: ' ';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: -0.5em;
    background-color: transparent;
}

/* Inner square */
.osui-node-item.osui-item-connected .osui-node-item-point::after,
.osui-node-item .osui-node-item-point.osui-active-item::after {
    content: ' ';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: var(--pad-x-small);
    background-color: rgb(var(--node-color));
    border-radius: 0.08em;
}

/* Item point highlight border */
.osui-node.osui-node-displayed .osui-node-item-point {
    border: var(--border-small) solid rgba(var(--complement), 1);
}
.osui-node.osui-node-selected .osui-node-item-point {
    border: var(--border-small) solid rgba(var(--icon), 1);
}

.osui-node-item-point.osui-hover-point, .osui-node.osui-node-selected .osui-node-item-point.osui-hover-point,
.osui-node-item-point.osui-active-item, .osui-node.osui-node-selected .osui-node-item-point.osui-active-item {
    border: var(--border-small) solid rgba(var(--highlight), 1);
    width: 1.2em;
    height: 1.2em;
}

/* Item detacher (little 'X') */
.osui-node-item-detach {
    pointer-events: none;
    position: absolute;
    width: 1em;
    height: 1em;
    top: 10%;
    background-color: transparent;
    border: none;
    outline: none;
    overflow: visible;
    filter: brightness(50%);
    transform: translateY(-50%);
    opacity: 0;
}

.osui-node-right .osui-node-item-detach {
    left: calc(100% + 0.7em);
}
.osui-node-left .osui-node-item-detach {
    left: calc(0em - var(--row-height));
}

/* Increases mouse over hit area */
.osui-node-item-detach::before {
    content: ' ';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: -0.5em;
    background-color: transparent;
}

.osui-node-item.osui-item-connected .osui-node-item-detach {
    pointer-events: all;
}

.osui-node-item.osui-item-connected:hover .osui-node-item-detach {
    opacity: 1;
}

.osui-node-item-detach .osui-image {
    filter: var(--drop-shadow);
}

.osui-node-item.osui-item-connected .osui-node-item-detach:hover {
    filter: brightness(100%);
}