playground.css

@import url('./normalize.min.css');

/* font */
body, h1 {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 24px;
}
h1 {
    display: inline;
    font-weight: normal;
}
textarea {
    font-family: monospace;
}
pre {
    white-space: pre-wrap;
    word-break: break-all;
}

/* color */
body {
    color: #333;
    background-color: #fff;
}
.stdout {
    color: #333;
}
.stderr {
    color: #c33;
}
.info {
    color: #33c;
}
.stdout.subprocess {
    color: #999;
}
.stderr.subprocess {
    color: #c99;
}
#loading {
    background-color: #fffc;
}

/* flex */
body {
    display: flex;
    flex-direction: column;
    height: calc(var(--vh, 1vh) * 100);
}
header {
    flex-grow: 0;
    height: 48px;
}
main {
    flex-grow: 1;

    display: flex;
}
main > textarea {
    flex-grow: 0;
    width: 50%;
}
aside {
    flex-grow: 0;
    width: 50%;
    height: calc(var(--vh, 1vh) * 100 - 48px * 2);
    overflow: auto;
}
footer {
    flex-grow: 0;
    height: 48px;
}
#loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    position: absolute;
}