signal-works/ice
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Fix dark mode text readability in table view and other elements

Browse source 
- Updated table cell colors to use CSS variables instead of hardcoded values
- Fixed location-cell, details-cell, time-cell text colors for dark mode
- Improved contrast with opacity adjustments for secondary text
- Updated status colors (urgent/warning/normal) to work better in dark mode
- Fixed autocomplete, input-help, disclaimer, and table-info text colors
- All text now properly adapts to both light and dark themes
This commit is contained in:
Deco Vander 2025-07-03 20:59:10 -04:00
parent fd3cbe686d
commit 4bcbb9134d
1 changed files with 19 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

30
public/style.css
View file

@ -163,7 +163,8 @@ input[type="text"], textarea {
.autocomplete-item { .autocomplete-item {
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #eee; border-bottom: 1px solid var(--border-color);
color: var(--text-color);
} }
.autocomplete-item:hover, .autocomplete-item:hover,
@ -176,7 +177,8 @@ input[type="text"], textarea {
} }
.input-help { .input-help {
color: #666; color: var(--text-color);
opacity: 0.7;
font-size: 0.85em; font-size: 0.85em;
margin-top: 4px; margin-top: 4px;
display: block; display: block;
@ -266,7 +268,8 @@ footer {
.disclaimer { .disclaimer {
font-size: 0.8em; font-size: 0.8em;
color: #777; color: var(--text-color);
opacity: 0.7;
} }
/* Reports header and toggle */ /* Reports header and toggle */
@ -362,19 +365,21 @@ footer {
} }
.table-info { .table-info {
color: #666; color: var(--text-color);
opacity: 0.7;
font-size: 14px; font-size: 14px;
} }
/* Table cell specific styles */ /* Table cell specific styles */
.location-cell { .location-cell {
font-weight: 500; font-weight: 500;
color: #495057; color: var(--text-color);
max-width: 250px; max-width: 250px;
} }
.details-cell { .details-cell {
color: #6c757d; color: var(--text-color);
opacity: 0.8;
font-style: italic; font-style: italic;
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
@ -384,31 +389,34 @@ footer {
.time-cell { .time-cell {
font-size: 12px; font-size: 12px;
color: #868e96; color: var(--text-color);
opacity: 0.7;
} }
.remaining-cell { .remaining-cell {
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
color: var(--text-color);
} }
.remaining-cell.urgent { .remaining-cell.urgent {
color: #dc3545; color: #ff6b6b;
font-weight: 600; font-weight: 600;
} }
.remaining-cell.warning { .remaining-cell.warning {
color: #fd7e14; color: #ffa726;
font-weight: 600; font-weight: 600;
} }
.remaining-cell.normal { .remaining-cell.normal {
color: #28a745; color: #66bb6a;
} }
.loading { .loading {
text-align: center; text-align: center;
color: #6c757d; color: var(--text-color);
opacity: 0.7;
font-style: italic; font-style: italic;
} }