gommand/static/stylesheet.css

:root {
	--bg-color: #222;
	--text-color: #eee;
	--command-color: #75df0b;
	--error-color: #ff5555;
	--directory-color: #1bc9e7;
	--ps1-color: #75df0b;
}

/* Default is pwny theme */
html, body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: monospace;
	font-size: 14pt;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}
#terminal {
	flex: 1;
	padding: 12px;
	overflow-y: auto;
	white-space: pre-wrap;
	border: none;
	margin: 10px 10px 0 10px;
	display: flex;
	flex-direction: column;
	padding-bottom: 3vh;
}
#terminal form {
	display: flex;
	/* flex-wrap: nowrap; */
	align-items: center;
	width: 100%;
}
#terminal .command {
	white-space: nowrap;
	/* overflow: hidden; */
	/* text-overflow: ellipsis; */
}
/* current-line is for interactive mode */
#current-line {
	display: inline;
}
input {
	flex-grow: 1;
	font-size: 14pt;
	background: var(--bg-color);
	color: var(--text-color);
	border: none;
	min-width: 100vh;
	font-family: monospace;
	margin-left: 8px;
}
input:focus {
	outline: none;
}
span.cursor {
	display: inline-block;
	width: 10px;
	animation: blink 1s step-end infinite;
	vertical-align: bottom;
}
@keyframes blink {
	50% { opacity: 0; }
}
span.command {
	color: var(--command-color);
}
span.error {
	color: var(--error-color);
}
span.directory {
	color: var(--directory-color);
}
span.ps1 {
	color: var(--ps1-color);
}


.info {
	/* text-align: justify; */
	/* color: var(--text-color); */
	/* animation: 0.75s 2 changeColor; */
	animation: changeColor 1.75s forwards;
	/* max-width: 80ch; */
}
@keyframes changeColor {
	from { color: var(--command-color) };
	to { color: var(--text-color) };
}

.error {
	/* text-align: justify; */
	color: var(--error-color);
	/* max-width: 80ch; */
}

.light-theme {
	--bg-color: #fff;
	--text-color: #222;
	--command-color: #007700;
	--error-color: #cc0000;
	--directory-color: #0044cc;
	--ps1-color: #222;
}

.catppuccin-theme {
	--bg-color: #363a4f;
	--text-color: #cad3f5;
	--command-color: #a6da95;
	--error-color: #ed8796;
	--directory-color: #7dc4e4;
	--ps1-color: #c6a0f6;
}

.doom1-theme {
	--bg-color: #21242b;
	--text-color: #bbc2cf;
	--command-color: #50fa7b;
	--error-color: #da8548;
	--directory-color: #51afef;
	--ps1-color: #ffa8ff;
}

.gruvbox-theme {
	--bg-color: #282828;
	--text-color: #ebdbb2;
	--command-color: #b8bb26;
	--error-color: #fb4934;
	--directory-color: #83a598;
	--ps1-color: #d3869b;
}

.nord-theme {
	--bg-color: #2e3440;
	--text-color: #d8dee9;
	--command-color: #8fbcbb;
	--error-color: #bf616a;
	--directory-color: #81a1c1;
	--ps1-color: #a3be8c;
}

.dracula-theme {
	--bg-color: #282a36;
	--text-color: #f8f8f2;
	--command-color: #6272a4;
	--error-color: #ff5555;
	--directory-color: #bd93f9;
	--ps1-color: #ff79c6;
}