engineering/opencompletion.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #18 from russellballestrini/claude/improve-dark-mode-output-011CUvnEP44R3WNw6F9qQxiP

Browse source 
Improve dark mode styling and readability
This commit is contained in:
Russell 2025-11-08 12:06:44 -05:00 • committed by GitHub
commit ed63672e66
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 40 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

29
templates/base.html
View file

@ -45,6 +45,11 @@
--text-primary: #000000;
--text-secondary: #495057;
--text-muted: #666;
--text-info: #0066cc;
--text-success: #008800;
--text-error: #cc0000;
--link-color: #0066cc;
--link-hover: #004499;
--border-color: #e1e1e1;
--border-color-dark: #ced4da;
--border-code: #ccc;
@ -69,6 +74,11 @@
--text-primary: #e0e0e0;
--text-secondary: #b0b0b0;
--text-muted: #888;
--text-info: #4da3ff;
--text-success: #5fcc5f;
--text-error: #ff6b6b;
--link-color: #58a6ff;
--link-hover: #79b8ff;
--border-color: #404040;
--border-color-dark: #4a4a4a;
--border-code: #555;
@ -317,13 +327,28 @@
transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* General link styling */
a {
color: var(--link-color);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--link-hover);
text-decoration: underline;
}
/* Styling for links in the rooms list */
#rooms-list a {
text-decoration: none; /* Optional: Removes underline from links */
color: var(--text-primary); /* Ensures link color matches the text color */
color: var(--link-color);
transition: color 0.3s ease;
}
#rooms-list a:hover {
color: var(--link-hover);
}
.hljs {
position: relative;
padding-left: 46px !important;

26
templates/chat.html
View file

@ -1276,7 +1276,7 @@ async function executeCodeBlock(code, blockElement, playButton) {
resultsContainer.classList.add('code-execution-results');
resultsContainer.style.marginTop = '10px';
resultsContainer.style.padding = '10px';
resultsContainer.style.backgroundColor = '#f0f0f0';
resultsContainer.style.backgroundColor = 'var(--bg-code)';
resultsContainer.style.borderRadius = '5px';
resultsContainer.style.fontFamily = 'monospace';
resultsContainer.style.fontSize = '14px';
@ -1288,7 +1288,7 @@ async function executeCodeBlock(code, blockElement, playButton) {
}
// Clear previous results
resultsContainer.innerHTML = '<div style="color: #666;">Executing code...</div>';
resultsContainer.innerHTML = '<div style="color: var(--text-muted);">Executing code...</div>';
try {
// Try to detect language from the code block's class
@ -1338,7 +1338,7 @@ async function executeCodeBlock(code, blockElement, playButton) {
cancelButton.style.display = 'none';
cancelButton.style.marginTop = '8px';
cancelButton.style.padding = '4px 8px';
cancelButton.style.backgroundColor = '#cc0000';
cancelButton.style.backgroundColor = 'var(--button-danger)';
cancelButton.style.color = 'white';
cancelButton.style.border = 'none';
cancelButton.style.borderRadius = '3px';
@ -1382,10 +1382,10 @@ async function executeCodeBlock(code, blockElement, playButton) {
const errorMsg = job.result?.error || 'Execution failed';
const partialOutput = job.result?.partial_output;
let outputHtml = `<div style="color: #cc0000; font-weight: bold;">${escapeHtml(errorMsg)}</div>`;
let outputHtml = `<div style="color: var(--text-error); font-weight: bold;">${escapeHtml(errorMsg)}</div>`;
if (partialOutput) {
outputHtml += '<div style="color: #666; margin-top: 8px;">Partial output before timeout:</div>';
outputHtml += `<div style="color: #333; margin-left: 10px;">${escapeHtml(partialOutput)}</div>`;
outputHtml += '<div style="color: var(--text-muted); margin-top: 8px;">Partial output before timeout:</div>';
outputHtml += `<div style="color: var(--text-primary); margin-left: 10px;">${escapeHtml(partialOutput)}</div>`;
}
resultsContainer.innerHTML = outputHtml;
break;
@ -1400,7 +1400,7 @@ async function executeCodeBlock(code, blockElement, playButton) {
} catch (error) {
console.error('Error executing code:', error);
resultsContainer.innerHTML = `<div style="color: #cc0000;">Error: ${escapeHtml(error.message)}</div>`;
resultsContainer.innerHTML = `<div style="color: var(--text-error);">Error: ${escapeHtml(error.message)}</div>`;
} finally {
// Reset button state
playButton.textContent = '▶ Run';
@ -1430,24 +1430,24 @@ function displayExecutionResults(result, resultsContainer, language) {
// Show language
if (language) {
outputHtml += `<div style="color: #0066cc; margin-bottom: 8px;">Language: ${language}</div>`;
outputHtml += `<div style="color: var(--text-info); margin-bottom: 8px;">Language: ${language}</div>`;
}
// Show stdout
if (actualStdout) {
outputHtml += '<div style="color: #008800; font-weight: bold;">Output:</div>';
outputHtml += `<div style="color: #333; margin-left: 10px;">${escapeHtml(actualStdout)}</div>`;
outputHtml += '<div style="color: var(--text-success); font-weight: bold;">Output:</div>';
outputHtml += `<div style="color: var(--text-primary); margin-left: 10px;">${escapeHtml(actualStdout)}</div>`;
}
// Show stderr if present
if (actualStderr) {
outputHtml += '<div style="color: #cc0000; font-weight: bold; margin-top: 8px;">Errors/Warnings:</div>';
outputHtml += `<div style="color: #cc0000; margin-left: 10px;">${escapeHtml(actualStderr)}</div>`;
outputHtml += '<div style="color: var(--text-error); font-weight: bold; margin-top: 8px;">Errors/Warnings:</div>';
outputHtml += `<div style="color: var(--text-error); margin-left: 10px;">${escapeHtml(actualStderr)}</div>`;
}
// If no output at all
if (!actualStdout && !actualStderr) {
outputHtml += '<div style="color: #666;">(No output produced)</div>';
outputHtml += '<div style="color: var(--text-muted);">(No output produced)</div>';
}
resultsContainer.innerHTML = outputHtml;