64 lines
1.2 KiB
CSS
64 lines
1.2 KiB
CSS
:root {
|
|
--host-bg: #11111b;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: var(--host-bg);
|
|
}
|
|
|
|
/* terminal.js reads the --term-* properties for xterm's theme. FitAddon sizes
|
|
the grid from #chess-terminal-screen, so the box needs a definite height. */
|
|
.chess-terminal {
|
|
--term-bg: #1a1b26;
|
|
--term-fg: #a9b1d6;
|
|
--term-cursor: #a9b1d6;
|
|
--term-selection: rgba(169, 177, 214, 0.35);
|
|
|
|
display: grid;
|
|
height: 100%;
|
|
background: var(--term-bg);
|
|
}
|
|
|
|
/* The status line shares the screen's grid cell. */
|
|
.chess-terminal > * {
|
|
grid-area: 1 / 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.chess-terminal-status {
|
|
/* Above xterm's positioned layers, which would otherwise paint over it. */
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
place-self: center;
|
|
margin: 0;
|
|
padding: 0 1.5rem;
|
|
text-align: center;
|
|
color: var(--term-fg);
|
|
font-family: sans-serif;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.chess-terminal-status.is-error {
|
|
color: #f7768e;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.chess-terminal-progress {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.chess-terminal-progress:not(:empty)::before {
|
|
content: " ";
|
|
}
|