2023-01-26 15:14:37 -06:00
|
|
|
body {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 1fr auto 1fr;
|
|
|
|
|
grid-template-rows: 2em auto;
|
|
|
|
|
background: #777777;
|
|
|
|
|
}
|
|
|
|
|
.react-root {
|
|
|
|
|
grid-area: 2 / 2 / 3 / 3;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.snippetEmulator {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-rows: 10em 1em 1em 2em;
|
|
|
|
|
grid-template-columns: 20em;
|
|
|
|
|
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;
|
2023-01-27 01:25:01 -06:00
|
|
|
user-select: none;
|
2023-01-26 15:14:37 -06:00
|
|
|
}
|
|
|
|
|
.snippetEmulator .step, .snippetEmulator .run { color: lightgreen }
|
|
|
|
|
.snippetEmulator .reset { color: lightcoral }
|
|
|
|
|
.snippetEmulator .build, .snippetEmulator .edit { color: dodgerblue }
|
2023-01-27 01:25:01 -06:00
|
|
|
.snippetEmulator .highlight { background-color: darkgoldenrod }
|
|
|
|
|
.snippetEmulator .src { overflow: scroll }
|