73 lines
1.9 KiB
CSS
73 lines
1.9 KiB
CSS
body {
|
|
display: grid;
|
|
grid-template-columns: 1fr 50% 1fr;
|
|
grid-template-rows: 2em auto;
|
|
background: #777777;
|
|
}
|
|
|
|
.main {
|
|
grid-area: 2 / 2 / 3 / 3;
|
|
}
|
|
|
|
.main .snippet, .main .display {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
}
|
|
|
|
.main .snippet .snippetEmulator, .main .display canvas {
|
|
grid-area: 1 / 2 / 2 / 3;
|
|
}
|
|
|
|
.snippetEmulator {
|
|
display: grid;
|
|
grid-template-rows: auto 1em 1em 2em;
|
|
grid-template-columns: 40em;
|
|
background: #333333;
|
|
font-family: monospace;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.snippetEmulator textarea { grid-area: 1 / 1 / 2 / 2 }
|
|
.snippetEmulator .src { grid-area: 1 / 1 / 2 / 2 }
|
|
.snippetEmulator .message { grid-area: 2 / 1 / 3 / 2 }
|
|
.snippetEmulator .buttons { grid-area: 3 / 1 / 4 / 2 }
|
|
.snippetEmulator .stacks { grid-area: 4 / 1 / 5 / 2 }
|
|
.snippetEmulator textarea {
|
|
background: #0f0f0f;
|
|
color: #dddddd;
|
|
min-height: 10em;
|
|
border: none;
|
|
resize: vertical;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
.snippetEmulator textarea:focus { outline: none; }
|
|
.snippetEmulator .buttons a {
|
|
margin-right: 0.5em;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.snippetEmulator .step, .snippetEmulator .run { color: lightgreen }
|
|
.snippetEmulator .reset { color: lightcoral }
|
|
.snippetEmulator .build, .snippetEmulator .edit { color: dodgerblue }
|
|
.snippetEmulator .highlight { background-color: darkgoldenrod }
|
|
.snippetEmulator .src { overflow: scroll }
|
|
|
|
.snippetEmulator .src .directive { color: darkcyan }
|
|
.snippetEmulator .src .macro { color: mediumpurple }
|
|
.snippetEmulator .src .number { color: lightskyblue }
|
|
.snippetEmulator .src .string { color: darkseagreen }
|
|
.snippetEmulator .src .label { color: chocolate }
|
|
.snippetEmulator .src .comment { color: grey }
|
|
|
|
span.mono {
|
|
font-family: monospace;
|
|
font-weight: bolder;
|
|
color: white;
|
|
}
|
|
p.sidebar {
|
|
background-color: #555555;
|
|
border: 1px solid #aaaaaa;
|
|
padding: 0.5em;
|
|
} |