simulator.css

/* CSS file for the 'output' part: the entire webview in VSCode or the right hand
 * side of the webpage on play.tinygo.org. */

/* TODO: complete split between Bootstrap and VSCode styles, and move this to
 * simulator-vscode.css */
body:not(.vscode) {
    --vscode-button-background: #005fb8;
    --vscode-button-foreground: #fff;
    --vscode-button-hoverBackground: #0258a8;
    --vscode-editor-background: #fff;
    --vscode-editor-font-family: monospace;
    --vscode-editor-font-size: 13px;
    --vscode-editorHoverWidget-background: #f8f8f8;
    --vscode-editorHoverWidget-border: #c8c8c8;
    --vscode-editorHoverWidget-foreground: #3b3b3b;
    --vscode-panelTitle-activeBorder: #005fb8;
    --vscode-panelTitle-activeForeground: #3b3b3b;
    --vscode-panelTitle-inactiveForeground: #3b3b3b;
    --vscode-settings-dropdownBackground: #fff;
    --vscode-settings-dropdownBorder: #c3c3c3;
    --vscode-settings-dropdownForeground: #3b3b3b;
    --vscode-terminal-ansiBrightRed: #cd3131;
    --vscode-panel-background: #f8f8f8;
    --vscode-panel-border: #e5e5e5;
    --vscode-terminal-foreground: #3b3b3b;
    --vscode-terminal-selectionBackground: #add6ff;
    --vscode-widget-shadow: rgba(0, 0, 0, 0.16);
}
/* We should use light-dark(...) but it's not well supported in Safari yet as of
 * 2024. */
@media (prefers-color-scheme: dark) {
    body:not(.vscode) {
        --vscode-button-background: #0e639c;
        --vscode-button-hoverBackground: #1177bb;
        --vscode-editor-background: #1f1f1f;
        --vscode-editorHoverWidget-background: #252526;
        --vscode-editorHoverWidget-border: #454545;
        --vscode-editorHoverWidget-foreground: #cccccc;
        --vscode-panelTitle-activeBorder: #e7e7e7;
        --vscode-panelTitle-activeForeground: #e7e7e7;
        --vscode-panelTitle-inactiveForeground: rgba(231, 231, 231, 0.6);
        --vscode-settings-dropdownBackground: #3c3c3c;
        --vscode-settings-dropdownBorder: #3c3c3c;
        --vscode-settings-dropdownForeground: inherit;
        --vscode-terminal-ansiBrightRed: #f55;
        --vscode-panel-background: #181818;
        --vscode-panel-border: #2b2b2b;
        --vscode-terminal-foreground: white;
        --vscode-terminal-selectionBackground: rgba(255, 255, 255, 0.3);
        --vscode-widget-shadow: rgb(0 0 0 / 36%);
    }
}

/* Area at the top with all the devices */

.simulator {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.simulator .schematic {
    position: relative;
    overflow: hidden;
    width: 100%;
    flex-grow: 1;
}
.simulator.compiling .schematic {
    opacity: 0.7;
}
.simulator.no-schematic .schematic {
    display: none;
}

.simulator .schematic-buttons {
    position: absolute;
    right: 0;
    top: 1px;
    z-index: 1;
}
.simulator .schematic-button {
    display: inline-block;
    width: 32px;
    height: 32px;
    padding: 0;
    color: white;
    line-height: 1;
    font-size: 24px;
    text-align: center;
    background-color: rgba(150, 150, 150, 0.5);
    border: none;
    border-radius: 3px;
    opacity: 0.3;
    transition: opacity 150ms;
}
.simulator .schematic-button:hover,
.simulator .schematic-button:disabled {
    opacity: 1;
}
.simulator .schematic-button img {
    filter: invert(1); /* make white instead of black */
    width: 24px;
    padding-bottom: 2px;
}
.simulator.paused .button-img-pause,
.simulator:not(.paused) .button-img-play {
    display: none; /* hide the other button image */
}

.simulator .board-container {
    position: absolute;
    filter: drop-shadow(0 0 6px #777c);
}
.simulator .board-container > .background {
    fill: transparent;
}
.simulator .board-container.selected > .background {
    outline: 1.7px dashed gray;
}
.simulator.compiling .board-container {
    pointer-events: none;
}

.simulator .pin-hover-dot {
    r: 1px; /* actually: 1mm */
    fill: #080;
}
.simulator [data-pin]:not(:hover) .pin-hover-dot {
    visibility: hidden;
}

.simulator .hover-connection {
    filter: brightness(1.4);
}

.simulator .wire {
    stroke: #008800;
    stroke-width: 1mm;
    stroke-linecap: round;
}
.simulator .wire:hover {
    stroke-width: 1.5mm;
}
.simulator .wire.selected {
    stroke: #009900;
    stroke-width: 1.5mm;
}
.simulator.adding-wire .wire {
    /* ignore clicks on other wires (they only get in the way) */
    pointer-events: none;
}
.simulator.compiling .wire {
    pointer-events: none;
}

/* Tooltip for pin names */
.simulator .schematic-tooltip {
    position: absolute;
    border: 1px solid var(--vscode-editorHoverWidget-border);
    padding: 2px 8px;
    font-size: 12px;
    color: var(--vscode-editorHoverWidget-foreground);
    background: var(--vscode-editorHoverWidget-background);
    box-shadow: 0 2px 8px var(--vscode-widget-shadow);
    pointer-events: none;
}
.simulator .schematic-tooltip:not(.visible) {
    opacity: 0;
}
.simulator .schematic-tooltip:after {
    content: "";
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    border: solid var(--vscode-editorHoverWidget-border);
    border-width: 0px 1px 1px 0px;
    background: var(--vscode-editorHoverWidget-background);
}

/* Terminal at the bottom of the screen */

.simulator .terminal {
    flex: 1 0 0;
    padding: 8px 20px;
    overflow: hidden auto;
}
.simulator .terminal > .output,
.simulator .terminal > .message.error {
    font-family: var(--vscode-editor-font-family);
    font-size: var(--terminal-font-size);
    line-height: var(--terminal-line-height);
    white-space: break-spaces;
    word-break: break-all;
}

/* Properties tab at the bottom */

.simulator .panel-properties > .content {
    padding: 8px 20px;
    overflow: auto;
    display: grid;
    grid-template-columns: auto minmax(auto, 100%);
    column-gap: 1ch;
    align-content: start;
    line-height: 1.5;
    height: inherit;
}

.simulator .panel-properties .ledstrip {
    display: flex;
}
.simulator .panel-properties .ledstrip-channel {
    text-align: right;
    width: 4ch;
    /* line under the number that graphically indicates the percent the channel is on */
    background-position: bottom right;
    background-size: 4ch 2px;
    background-repeat: repeat-x;
}

.simulator .panel-power > .content {
    padding: 8px 20px;
    overflow: auto;
    line-height: 1.5;
    height: inherit;
}

.simulator .panel-power .power-table {
    display: grid;
    grid-template-columns: max-content 5em 5em 5em;
    column-gap: 1ch;
}

/* Add parts tab */

.simulator .panel-add > .content {
    padding: 8px 20px;
    display: grid;
    overflow: auto;
    height: inherit;
    grid-template-columns: auto minmax(auto, 100%) auto auto;
    column-gap: 1ch;
    align-content: start;
}

.simulator.adding-part .panel-add .content {
    opacity: 0.5;
    pointer-events: none;
}

.simulator .panel-add .part-image {
    filter: drop-shadow(0 0 6px #777c);
    border: 0;
    width: 10mm;
    height: 10mm;
}