scatter.css

@import url('https://fonts.googleapis.com/css?family=Fira+Code&display=swap');


.jscodable .button-drawer {
    border: 1px solid black;
    box-sizing: border-box;
    padding: 5px;
    max-height: 100%;
    overflow-y: auto;
}

.jscodable .code-controls {
    margin: 2px;
}

.jscodable .onscreen-html-console {
    overflow-y: scroll;
    background: whitesmoke;
}

.jscodable .onscreen-html-console .comment {
    font-style: italic;
    color: #999;
}

.jscodable .onscreen-html-console .success {
    font-style: italic;
    color: #999;
}

.jscodable .onscreen-html-console .error {
    font-style: italic;
    color: maroon;
}

.jscodable .onscreen-html-console pre {
    margin-bottom: 2px;
}


.scatter-area {
    background: whitesmoke;
    touch-action: none;
}

.scatter-area text {
    touch-action: none;
    user-select: none;
    cursor: default;
}

.scatter-area .tile text {
    dominant-baseline: text-before-edge;
    stroke: none;
    fill: black;
    font-family: "Fira Code", monospace;
    white-space: pre;
    touch-action: none;
    cursor: default;
}

.tile {
    stroke: darkslategray;
    fill: white;
    stroke-width: 2;
    stroke-linejoin: round;
}

.scatter-area .tile.contained > rect {
    stroke: none;
}

.scatter-area .tile .type-icon > text {
    dominant-baseline: middle;
    text-anchor: middle;
    transform: translate(7px, 10px);
    fill: dodgerblue;
}

.scatter-area .tile .socket-type-icon > text {
    dominant-baseline: middle;
    text-anchor: middle;
    transform: translate(7px, 10px);
    fill: gray;
}

.scatter-area .tile.contained.mouseover > rect {
    stroke: #ffc65c;
}

.scatter-area .tile.play {
    stroke: green;
}

.scatter-area .socket {
    stroke: slategray;
    fill: whitesmoke;
}

.scatter-area .socket.thin {
    stroke: #eee;
}

.scatter-area .socket.active {
    stroke: darkorange;
}

.scatter-area .socket.thin.active {
    stroke: darkorange;
}

.scatter-number-input {
    width: 3em;
}