Fix design system violations: replace off-brand colors with terminal palette
- dashboard.css: replace all hardcoded Tailwind hex colors (#2d3748, #1a202c, #e2e8f0, #4a5568, #007cba, #3b82f6 etc.) in dark-mode sections and component styles with terminal CSS variables (--bg-*, --text-*, --border-color, --terminal-green/amber) - dashboard.css: fix card-priority colors white/black → var(--bg-primary) - dashboard.css: fix card-assignee border-radius: 50% → 0 (no circles rule) - dashboard.css: fix mobile bottom-sheet border-radius: 12px → 0 - dashboard.css: fix search-box focus border (#007cba → var(--terminal-green)) - dashboard.css: fix save-filter button blue (#3b82f6) → terminal green - dashboard.css: fix search-results-info blue highlight → terminal green - dashboard.css: fix btn-bulk/btn-secondary dark-mode bootstrap colors → terminal - ticket.css: replace comprehensive dark-mode Tailwind hex block with CSS vars - ticket.css: fix status-select white/black text → var(--bg-primary) - ticket.css: fix status-select.status-resolved hardcoded #28a745 → var(--status-open) - ticket.css: fix timeline dark-mode hardcoded colors → CSS vars - ticket.css: fix .slider:before background white → var(--bg-primary) - ticket.css: fix .btn-danger:hover color white → var(--bg-primary) - ticket.css: fix visibility-groups-list label border-radius: 4px → 0 - ticket.css: add will-change: opacity to age-warning/age-critical animations - views: bump CSS version strings to v=20260319c - views/DashboardView.php: add aria-labels to card view quick action buttons Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2115,44 +2115,43 @@ input[type="checkbox"]:checked {
|
||||
|
||||
.search-box:focus {
|
||||
outline: none;
|
||||
border-color: #007cba;
|
||||
border-color: var(--terminal-green);
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
padding: 10px 20px;
|
||||
background-color: #007cba;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s;
|
||||
background: transparent;
|
||||
color: var(--terminal-green);
|
||||
border: 2px solid var(--terminal-green);
|
||||
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
background-color: #005a87;
|
||||
background: rgba(0, 255, 65, 0.15);
|
||||
color: var(--terminal-amber);
|
||||
border-color: var(--terminal-amber);
|
||||
}
|
||||
|
||||
.clear-search-btn {
|
||||
padding: 10px 15px;
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
padding: 6px 10px;
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
border-radius: 0;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.3s;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1rem;
|
||||
transition: color 0.15s ease;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.clear-search-btn:hover {
|
||||
background-color: #545b62;
|
||||
color: var(--terminal-red);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Show search results info */
|
||||
.search-results-info {
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
background-color: #e7f3ff;
|
||||
border-left: 4px solid #007cba;
|
||||
background-color: rgba(0, 255, 65, 0.05);
|
||||
border-left: 4px solid var(--terminal-green);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@@ -2210,8 +2209,8 @@ input[type="checkbox"]:checked {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
background: var(--terminal-green);
|
||||
color: var(--bg-primary);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
@@ -2825,25 +2824,25 @@ th.sort-desc::after {
|
||||
|
||||
/* Dark mode bulk actions */
|
||||
body.dark-mode .bulk-actions-toolbar {
|
||||
--toolbar-bg: #2d3748;
|
||||
--toolbar-border: #ffc107;
|
||||
--text-primary: #f8f9fa;
|
||||
background: #2d3748 !important;
|
||||
--toolbar-bg: var(--bg-tertiary);
|
||||
--toolbar-border: var(--terminal-amber);
|
||||
--text-primary: var(--terminal-green);
|
||||
background: var(--bg-tertiary) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .bulk-actions-info {
|
||||
color: #ffc107;
|
||||
color: var(--terminal-amber);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
body.dark-mode .btn-bulk {
|
||||
--btn-bulk-bg: #0d6efd;
|
||||
--btn-bulk-hover: #0b5ed7;
|
||||
--btn-bulk-bg: var(--terminal-green);
|
||||
--btn-bulk-hover: var(--text-secondary);
|
||||
}
|
||||
|
||||
body.dark-mode .btn-secondary {
|
||||
--btn-secondary-bg: #495057;
|
||||
--btn-secondary-hover: #343a40;
|
||||
--btn-secondary-bg: var(--bg-tertiary);
|
||||
--btn-secondary-hover: var(--bg-secondary);
|
||||
}
|
||||
|
||||
/* Modal styles */
|
||||
@@ -2901,19 +2900,7 @@ body.dark-mode .btn-secondary {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Dark mode modal */
|
||||
body.dark-mode .modal-content {
|
||||
--bg-primary: #2d3748;
|
||||
--bg-secondary: #1a202c;
|
||||
--text-primary: #f7fafc;
|
||||
--border-color: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .modal-body select {
|
||||
background: #1a202c;
|
||||
color: #f7fafc;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
/* Dark mode modal — terminal CSS variables already apply; no overrides needed */
|
||||
|
||||
/* Checkbox styling in table */
|
||||
.ticket-checkbox {
|
||||
@@ -2956,60 +2943,60 @@ body.dark-mode .modal-body select {
|
||||
}
|
||||
}
|
||||
|
||||
/* Comprehensive Dark Mode Fix - Dashboard */
|
||||
/* Comprehensive Dark Mode Fix - Dashboard (terminal palette) */
|
||||
body.dark-mode {
|
||||
background: #1a202c !important;
|
||||
color: #e2e8f0 !important;
|
||||
background: var(--bg-secondary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .dashboard-container,
|
||||
body.dark-mode .dashboard-content {
|
||||
background: #1a202c !important;
|
||||
color: #e2e8f0 !important;
|
||||
background: var(--bg-secondary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* Ensure table has dark background */
|
||||
body.dark-mode table {
|
||||
background: #2d3748 !important;
|
||||
background: var(--bg-tertiary) !important;
|
||||
}
|
||||
|
||||
body.dark-mode table thead {
|
||||
background: #1a202c !important;
|
||||
background: var(--bg-secondary) !important;
|
||||
}
|
||||
|
||||
body.dark-mode table tbody tr {
|
||||
background: #2d3748 !important;
|
||||
background: var(--bg-tertiary) !important;
|
||||
}
|
||||
|
||||
body.dark-mode table tbody tr:hover {
|
||||
background: #374151 !important;
|
||||
background: var(--hover-bg) !important;
|
||||
}
|
||||
|
||||
body.dark-mode table td,
|
||||
body.dark-mode table th {
|
||||
color: #e2e8f0 !important;
|
||||
border-color: #4a5568 !important;
|
||||
color: var(--text-primary) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
}
|
||||
|
||||
/* Fix search box */
|
||||
body.dark-mode .search-box,
|
||||
body.dark-mode input[type="search"],
|
||||
body.dark-mode input[type="text"] {
|
||||
background: #2d3748 !important;
|
||||
color: #e2e8f0 !important;
|
||||
border-color: #4a5568 !important;
|
||||
background: var(--bg-tertiary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
}
|
||||
|
||||
/* Fix any white backgrounds in modals */
|
||||
body.dark-mode .modal-content {
|
||||
background: #2d3748 !important;
|
||||
color: #e2e8f0 !important;
|
||||
background: var(--bg-tertiary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* Fix dropdown menus */
|
||||
body.dark-mode select option {
|
||||
background: #2d3748 !important;
|
||||
color: #e2e8f0 !important;
|
||||
background: var(--bg-tertiary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE DESIGN - TERMINAL EDITION ===== */
|
||||
@@ -4954,11 +4941,11 @@ table td:nth-child(4) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-priority.p1 { background: var(--priority-1); color: white; }
|
||||
.card-priority.p2 { background: var(--priority-2); color: black; }
|
||||
.card-priority.p3 { background: var(--priority-3); color: white; }
|
||||
.card-priority.p4 { background: var(--priority-4); color: black; }
|
||||
.card-priority.p5 { background: var(--priority-5); color: white; }
|
||||
.card-priority.p1 { background: var(--priority-1); color: var(--bg-primary); }
|
||||
.card-priority.p2 { background: var(--priority-2); color: var(--bg-primary); }
|
||||
.card-priority.p3 { background: var(--priority-3); color: var(--bg-primary); }
|
||||
.card-priority.p4 { background: var(--priority-4); color: var(--bg-primary); }
|
||||
.card-priority.p5 { background: var(--priority-5); color: var(--bg-primary); }
|
||||
|
||||
.card-title {
|
||||
color: var(--terminal-green);
|
||||
@@ -4990,7 +4977,7 @@ table td:nth-child(4) {
|
||||
height: 28px;
|
||||
background: var(--terminal-cyan);
|
||||
color: var(--bg-primary);
|
||||
border-radius: 50%;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -5202,7 +5189,7 @@ table td:nth-child(4) {
|
||||
min-height: 44px;
|
||||
font-size: 0.95rem;
|
||||
background: rgba(0, 255, 65, 0.05);
|
||||
border-radius: 4px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.dashboard-sidebar .filter-group label:active {
|
||||
@@ -5593,7 +5580,7 @@ table td:nth-child(4) {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
max-height: 90vh;
|
||||
border-radius: 12px 12px 0 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -5635,7 +5622,7 @@ table td:nth-child(4) {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
max-height: 85vh;
|
||||
border-radius: 12px 12px 0 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ===== ADMIN DROPDOWN ===== */
|
||||
@@ -5648,7 +5635,7 @@ table td:nth-child(4) {
|
||||
width: 100%;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
border-radius: 12px 12px 0 0;
|
||||
border-radius: 0;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
|
||||
@@ -347,6 +347,7 @@ textarea[data-field="description"]:not(:disabled)::after {
|
||||
background: rgba(255, 176, 0, 0.1);
|
||||
box-shadow: 0 0 6px rgba(255, 176, 0, 0.4);
|
||||
animation: pulse-warning 2s ease-in-out infinite;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.ticket-age.age-critical {
|
||||
@@ -355,6 +356,7 @@ textarea[data-field="description"]:not(:disabled)::after {
|
||||
background: rgba(255, 77, 77, 0.15);
|
||||
box-shadow: 0 0 8px rgba(255, 77, 77, 0.5);
|
||||
animation: pulse-critical 1s ease-in-out infinite;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
@keyframes pulse-warning {
|
||||
@@ -1172,7 +1174,7 @@ textarea.editable {
|
||||
width: 16px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
background-color: var(--bg-primary);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
@@ -1331,24 +1333,24 @@ input:checked + .slider:before {
|
||||
}
|
||||
|
||||
body.dark-mode .timeline-content {
|
||||
--card-bg: #2d3748;
|
||||
--border-color: #444;
|
||||
--text-muted: #a0aec0;
|
||||
--text-secondary: #cbd5e0;
|
||||
background: #2d3748;
|
||||
color: #f7fafc;
|
||||
--card-bg: var(--bg-tertiary);
|
||||
--border-color: var(--border-color);
|
||||
--text-muted: var(--text-muted);
|
||||
--text-secondary: var(--text-secondary);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
body.dark-mode .timeline-header strong {
|
||||
color: #f7fafc;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
body.dark-mode .timeline-action {
|
||||
color: #a0aec0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
body.dark-mode .timeline-date {
|
||||
color: #718096;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
/* Status select dropdown */
|
||||
.status-select {
|
||||
@@ -1376,22 +1378,22 @@ body.dark-mode .timeline-date {
|
||||
/* Status colors for dropdown */
|
||||
.status-select.status-open {
|
||||
background-color: var(--status-open) !important;
|
||||
color: white !important;
|
||||
color: var(--bg-primary) !important;
|
||||
}
|
||||
|
||||
.status-select.status-in-progress {
|
||||
background-color: var(--status-in-progress) !important;
|
||||
color: #212529 !important;
|
||||
color: var(--bg-primary) !important;
|
||||
}
|
||||
|
||||
.status-select.status-closed {
|
||||
background-color: var(--status-closed) !important;
|
||||
color: white !important;
|
||||
color: var(--bg-primary) !important;
|
||||
}
|
||||
|
||||
.status-select.status-resolved {
|
||||
background-color: #28a745 !important;
|
||||
color: white !important;
|
||||
background-color: var(--status-open) !important;
|
||||
color: var(--bg-primary) !important;
|
||||
}
|
||||
|
||||
/* Dropdown options inherit colors */
|
||||
@@ -1402,8 +1404,8 @@ body.dark-mode .timeline-date {
|
||||
}
|
||||
|
||||
body.dark-mode .status-select option {
|
||||
background-color: #2d3748;
|
||||
color: #f7fafc;
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Dark mode for Activity tab and general improvements */
|
||||
@@ -1420,48 +1422,38 @@ body.dark-mode #activity-tab p {
|
||||
color: var(--text-primary, #f7fafc);
|
||||
}
|
||||
|
||||
/* Comprehensive Dark Mode Fix - Ensure no white on white */
|
||||
body.dark-mode {
|
||||
--bg-primary: #1a202c;
|
||||
--bg-secondary: #2d3748;
|
||||
--bg-tertiary: #4a5568;
|
||||
--text-primary: #e2e8f0;
|
||||
--text-secondary: #cbd5e0;
|
||||
--text-muted: #a0aec0;
|
||||
--border-color: #4a5568;
|
||||
--card-bg: #2d3748;
|
||||
}
|
||||
/* Comprehensive Dark Mode Fix - terminal CSS variables apply throughout */
|
||||
|
||||
/* Ensure ticket container has dark background */
|
||||
body.dark-mode .ticket-container {
|
||||
background: #1a202c !important;
|
||||
color: #e2e8f0 !important;
|
||||
background: var(--bg-secondary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* Ensure all ticket details sections are dark */
|
||||
body.dark-mode .ticket-details {
|
||||
background: #1a202c !important;
|
||||
color: #e2e8f0 !important;
|
||||
background: var(--bg-secondary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* Ensure detail groups are dark */
|
||||
body.dark-mode .detail-group {
|
||||
background: transparent !important;
|
||||
color: #e2e8f0 !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* Ensure labels are visible */
|
||||
body.dark-mode .detail-group label,
|
||||
body.dark-mode label {
|
||||
color: #cbd5e0 !important;
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
/* Fix textarea and input fields */
|
||||
body.dark-mode textarea,
|
||||
body.dark-mode input[type="text"] {
|
||||
background: #2d3748 !important;
|
||||
color: #e2e8f0 !important;
|
||||
border-color: #4a5568 !important;
|
||||
background: var(--bg-tertiary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
}
|
||||
|
||||
/* Ensure timeline event backgrounds are dark */
|
||||
@@ -1471,30 +1463,30 @@ body.dark-mode .timeline-event {
|
||||
|
||||
/* Fix any remaining white text issues */
|
||||
body.dark-mode .timeline-details {
|
||||
color: #cbd5e0 !important;
|
||||
color: var(--text-secondary) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Fix comment sections */
|
||||
body.dark-mode .comment {
|
||||
background: #2d3748 !important;
|
||||
color: #e2e8f0 !important;
|
||||
background: var(--bg-tertiary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .comment-text {
|
||||
color: #e2e8f0 !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
body.dark-mode .comment-header {
|
||||
color: #cbd5e0 !important;
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
/* Fix any form elements */
|
||||
body.dark-mode select,
|
||||
body.dark-mode .editable {
|
||||
background: #2d3748 !important;
|
||||
color: #e2e8f0 !important;
|
||||
border-color: #4a5568 !important;
|
||||
background: var(--bg-tertiary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE DESIGN - TERMINAL EDITION ===== */
|
||||
@@ -1759,7 +1751,7 @@ body.dark-mode .editable {
|
||||
|
||||
.btn-danger:hover {
|
||||
background: var(--priority-1);
|
||||
color: white;
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Mobile responsiveness for attachments */
|
||||
@@ -2647,7 +2639,7 @@ body.dark-mode .editable {
|
||||
min-height: 44px;
|
||||
padding: 0.5rem;
|
||||
background: rgba(0, 255, 65, 0.05);
|
||||
border-radius: 4px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user