rick/LEDMatrix
1
0
Fork 0
mirror of https://github.com/ChuckBuilds/LEDMatrix.git synced 2026-04-10 13:02:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix log viewer readability — add missing CSS utility classes (#244)

Browse Source 
* fix(web): add missing utility classes for log viewer readability

The log viewer uses text-gray-100, text-gray-200, text-gray-300,
text-red-300, text-yellow-300, bg-gray-800, bg-red-900, bg-yellow-900,
border-gray-700, and hover:bg-gray-800 — none of which were defined in
app.css. Without definitions, log text inherited the body's dark color
(#111827) which was invisible against the dark bg-gray-900 log container
in light mode.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(web): remove dead bg-opacity classes, use proper log level colors

The bg-opacity-10/bg-opacity-30 classes set a --bg-opacity CSS variable
that no background-color rule consumed, making them dead code. Replace
the broken two-class pattern (e.g. "bg-red-900 bg-opacity-10") with
dedicated log-level-error/warning/debug classes that use rgb() with
actual alpha values.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Chuck <chuck@example.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Chuck
2026-02-12 22:14:20 -05:00
committed by GitHub
parent 3975940cff
commit 82370a0253
2 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web_interface/static/v3/app.css
View File

@@ -101,6 +101,7 @@ body {
/* Utility classes */
.bg-gray-50 { background-color: #f9fafb; }
.bg-white { background-color: #ffffff; }
.bg-gray-800 { background-color: #1f2937; }
.bg-gray-900 { background-color: #111827; }
.bg-green-500 { background-color: #10b981; }
.bg-red-500 { background-color: #ef4444; }
@@ -112,16 +113,27 @@ body {
.bg-yellow-600 { background-color: #d97706; }
.bg-gray-200 { background-color: #e5e7eb; }
/* Log level row backgrounds (subtle tints on dark log container) */
.log-level-error { background-color: rgb(127 29 29 / 10%); }
.log-level-warning { background-color: rgb(120 53 15 / 10%); }
.log-level-debug { background-color: rgb(31 41 55 / 30%); }
.text-gray-100 { color: #f3f4f6; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-300 { color: #d1d5db; }
.text-gray-900 { color: #111827; }
.text-gray-600 { color: #374151; }
.text-gray-500 { color: #4b5563; }
.text-gray-400 { color: #6b7280; }
.text-red-300 { color: #fca5a5; }
.text-yellow-300 { color: #fcd34d; }
.text-white { color: #ffffff; }
.text-green-600 { color: #059669; }
.text-red-600 { color: #dc2626; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-gray-700 { border-color: #374151; }
.border-transparent { border-color: transparent; }
.rounded-lg { border-radius: 0.5rem; }
@@ -249,6 +261,7 @@ h4 { font-size: 1.125rem; }
.hover\:bg-green-700:hover { background-color: #047857; }
.hover\:bg-red-700:hover { background-color: #b91c1c; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-gray-800:hover { background-color: #1f2937; }
.hover\:bg-yellow-700:hover { background-color: #b45309; }
.hover\:text-gray-700:hover { color: #374151; }
.hover\:border-gray-300:hover { border-color: #d1d5db; }

6
web_interface/templates/v3/partials/logs.html
View File

@@ -380,10 +380,10 @@ function renderLogs() {
function getLogLevelClass(level) {
// Background color for the entire log entry row
const classes = {
'ERROR': 'bg-red-900 bg-opacity-10',
'WARNING': 'bg-yellow-900 bg-opacity-10',
'ERROR': 'log-level-error',
'WARNING': 'log-level-warning',
'INFO': '',
'DEBUG': 'bg-gray-800 bg-opacity-30'
'DEBUG': 'log-level-debug'
};
return classes[level] || '';
}