Fix dark mode text readability in table view and other elements
- 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:
parent
fd3cbe686d
commit
4bcbb9134d
1 changed files with 19 additions and 11 deletions
|
@ -163,7 +163,8 @@ input[type="text"], textarea {
|
|||
.autocomplete-item {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.autocomplete-item:hover,
|
||||
|
@ -176,7 +177,8 @@ input[type="text"], textarea {
|
|||
}
|
||||
|
||||
.input-help {
|
||||
color: #666;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
font-size: 0.85em;
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
|
@ -266,7 +268,8 @@ footer {
|
|||
|
||||
.disclaimer {
|
||||
font-size: 0.8em;
|
||||
color: #777;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Reports header and toggle */
|
||||
|
@ -362,19 +365,21 @@ footer {
|
|||
}
|
||||
|
||||
.table-info {
|
||||
color: #666;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Table cell specific styles */
|
||||
.location-cell {
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
color: var(--text-color);
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.details-cell {
|
||||
color: #6c757d;
|
||||
color: var(--text-color);
|
||||
opacity: 0.8;
|
||||
font-style: italic;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
|
@ -384,31 +389,34 @@ footer {
|
|||
|
||||
.time-cell {
|
||||
font-size: 12px;
|
||||
color: #868e96;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.remaining-cell {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.remaining-cell.urgent {
|
||||
color: #dc3545;
|
||||
color: #ff6b6b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.remaining-cell.warning {
|
||||
color: #fd7e14;
|
||||
color: #ffa726;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.remaining-cell.normal {
|
||||
color: #28a745;
|
||||
color: #66bb6a;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: #6c757d;
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue