Make terminal output more authentic: smaller font, tighter line spacing

Message font dropped from 20px to 14px and the 10px inline margin-bottom
(set from JS on every message) replaced with a 2px CSS margin so the
terminal reads like dense console output instead of spaced-out chat
bubbles. Colors are unchanged.
This commit is contained in:
Frank
2026-07-11 17:21:41 +02:00
parent 6fd0b5d993
commit f6a0d62017
2 changed files with 5 additions and 7 deletions
-4
View File
@@ -29,7 +29,6 @@ function subscribeToMercure(mercurePublicUrl, topic, myScreen) {
msgEl.className = 'message';
msgEl.textContent = data[1];
msgEl.style.color = '#0F0'; // Green for incoming messages
msgEl.style.marginBottom = '10px';
messageContainer.appendChild(msgEl);
window.scrollTo(0, document.body.scrollHeight);
if(stillPlayingSound)
@@ -92,7 +91,6 @@ function appendResultMessage(container, text, messageType) {
const msgEl = document.createElement('div');
msgEl.className = ('message ' + lockMessageClass(messageType)).trim();
msgEl.textContent = text;
msgEl.style.marginBottom = '10px';
container.appendChild(msgEl);
}
@@ -345,7 +343,6 @@ document.addEventListener('DOMContentLoaded', async () => {
msgEl.className = 'message ' + extraClass;
msgEl.textContent = msg[0];
msgEl.style.marginBottom = '10px';
messageContainer.appendChild(msgEl);
window.scrollTo(0, document.body.scrollHeight);
@@ -374,7 +371,6 @@ document.addEventListener('DOMContentLoaded', async () => {
const msgEl = document.createElement('div');
msgEl.className = 'message';
msgEl.textContent = message;
msgEl.style.marginBottom = '10px';
messageContainer.appendChild(msgEl);
if (message && apiEchoUrl) {
+5 -3
View File
@@ -47,12 +47,14 @@ div#message-container {
justify-content: flex-end;
min-height: calc(100vh - 100px); /* Fill most of the viewport initially */
box-sizing: border-box;
font-size: 20px;
font-size: 14px;
}
div.message {
color: #C0C0C0;
white-space: pre-wrap;
line-height: 1.35;
margin-bottom: 2px;
}
div.message-virus {
@@ -103,11 +105,11 @@ div#input {
input#input-message {
width: 100%;
padding: 10px;
padding: 6px 10px;
background: #111;
border: 1px solid #A00000;
color: #C0C0C0;
font-size: 18px;
font-size: 14px;
box-sizing: border-box;
font-family: monospace;
}