mirror of
https://github.com/coding-horror/basic-computer-games.git
synced 2025-12-06 04:41:34 -08:00
79 lines
1.7 KiB
CSS
79 lines
1.7 KiB
CSS
:root {
|
|
--terminal-font: 1rem "Lucida Console", "Courier New", monospace;
|
|
--background-color: transparent;
|
|
--text-color: var(--text);
|
|
--prompt-char: '$ ';
|
|
--cursor-char: '_';
|
|
}
|
|
|
|
/* Basic terminal style.
|
|
* If you wan t to overwrite them use custom properties (variables).
|
|
*/
|
|
.terminal {
|
|
display: block;
|
|
font: var(--terminal-font);
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
|
|
overflow-y: scroll;
|
|
width: 100%;
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* The terminal consits of multiple "line" elements
|
|
* Because sometimes we want to add a simulates "prompt" at the end of a line
|
|
* we need to make it an "inline" element and handle line-breaks
|
|
* by adding <br> elements */
|
|
.terminal pre.line {
|
|
display: inline-block;
|
|
font: var(--terminal-font);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* The "terminal" has one "prompt" input-element. */
|
|
@keyframes prompt-blink {
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.terminal #prompt {
|
|
display: inline-block;
|
|
}
|
|
.terminal #prompt:before {
|
|
display: inline-block;
|
|
content: var(--prompt-char);
|
|
font: var(--terminal-font);
|
|
}
|
|
.terminal #prompt:after {
|
|
display: inline-block;
|
|
content: var(--cursor-char);
|
|
background: var(--text);
|
|
animation: prompt-blink 1s steps(2) infinite;
|
|
width: 0.75rem;
|
|
opacity: 1;
|
|
}
|
|
.terminal input#prompt {
|
|
text-transform: uppercase;
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
caret-color: var(--text);
|
|
color: var(--text);
|
|
font: var(--terminal-font);
|
|
}
|
|
|
|
|
|
/* Terminal scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 3px;
|
|
height: 3px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: var(--background-color);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--text-color);
|
|
}
|