vulcan/vweb/src/simulator.css

/* Basic night-mode and mono styling */
body {
    background-color: #333333;
    color: #dddddd;
    font-family: monospace;
}
a { color: #cccccc; }

/* The simulator container itself, with the grid */
.simulator {
    display: grid;
    grid-template:
        "filebtns tab btns" 1em
        "files content screen " 1fr
        "files status screen" 1em / 16em 1fr calc(640px + 3em);
    row-gap: 0.3em;
}

/* Setting where things go in the grid */
.tabbar { grid-area: tab }
.buttons { grid-area: btns }
.file-buttons { grid-area: filebtns }
.content { grid-area: content }
.status { grid-area: status }
.files { grid-area: files }

/* Make the content fill the remainder of the screen */
.content {
    height: calc(100vh - 5em);
    width: 100%;
    overflow: auto;
}

/* Some styling to the <pre>s in the content */
.content pre {
    margin: 0;
}

/* Make the editor fill the entire height */
.content .editor .cm-editor {
    height: calc(100vh - 5em)
}

/* Status, btns, tabs all look right */
.status, .buttons, .file-buttons, .tabbar { font-weight: bold; }
.tabbar a, .buttons a, .file-buttons a, .file { cursor: pointer; }

/* Make the display the right size by centering the canvas in a rectangle */
/* The display is in the screen section of the main grid but it's also got to define its own grid  */
.display {
    grid-area: screen;
    height: 100%;
    display: grid;
    grid-template:
        "lt top rt" 1fr
        "lt screen rt" calc(480px + 2em)
        "lt btm rt" 1fr / 1fr calc(640px + 2em) 1fr;
}

/* The beige monitor border around the screen */
.display { background-color: #0f0f0f }
.display canvas {
    grid-area: screen;
    border: 1em solid #bb9;
    border-radius: 1em;
}

/* Colors of tabs and buttons */
.tabbar a.active { background-color: #686868; }
.buttons .run, .file-buttons .new { color: #66bb66 }
.buttons .stop, .file-buttons .del, .button[data-tab=errors] { color: #bb6666 }
.buttons .build { color: #aaaaff; }
.buttons .reset { color: #bbbb66; }
.files .file.selected-file { background-color: #686868 !important; }
.files .file:hover, .button:hover, .file-buttons a:hover, .buttons a:hover {
    background-color: #505050;
    user-select: none;
}