dandri/meshcore-bot
1
0
Fork 0
mirror of https://github.com/agessaman/meshcore-bot.git synced 2026-08-27 21:10:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add light mode support for modal and UI elements in web viewer

Browse Source 
- Implemented comprehensive light mode styles for various components in the web viewer, including modals, segment cards, and tables.
- Enhanced visual consistency by applying theme-based background and text colors across different UI elements.
- Updated styles for header and message content to ensure readability and aesthetic appeal in light mode.
This commit is contained in:
agessaman
2026-01-10 19:44:24 -08:00
parent ca80924e38
commit 106e7efca8
1 changed files with 87 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/web_viewer/templates/realtime.html
+87 -6
View File
@@ -335,17 +335,98 @@
display: block !important;
}
/* Light mode overrides for modal (keep modal dark themed) */
/* Light mode support for modal */
[data-theme="light"] .packet-detail-body,
[data-theme="light"] #packetDetailModal .modal-content,
[data-theme="light"] #packetDetailModal .modal-content {
background-color: var(--bg-secondary);
color: var(--text-color);
}
[data-theme="light"] #packetDetailModal .modal-header,
[data-theme="light"] #packetDetailModal .modal-footer {
background-color: #1a1d21;
color: #e9ecef;
background-color: var(--bg-tertiary);
border-color: var(--border-color);
color: var(--text-color);
}
[data-theme="light"] #packetDetailModal .btn-close {
filter: invert(1);
[data-theme="light"] .segment-card {
background-color: var(--card-bg);
border-color: var(--border-color);
}
[data-theme="light"] .segment-value {
background-color: #e9ecef;
color: #212529;
}
[data-theme="light"] .hex-breakdown {
background-color: var(--bg-tertiary);
border-left-color: #ffc107;
}
[data-theme="light"] .hex-breakdown-container {
background-color: var(--card-bg);
}
[data-theme="light"] .section-title {
color: #0d6efd;
border-bottom-color: var(--border-color);
}
[data-theme="light"] .packet-info-label {
color: var(--text-muted);
}
[data-theme="light"] .segment-bytes,
[data-theme="light"] .segment-description {
color: var(--text-muted);
}
/* Override Bootstrap table-dark in light mode */
[data-theme="light"] .header-bits-table,
[data-theme="light"] .header-bits-table.table-dark {
--bs-table-bg: var(--bg-secondary);
--bs-table-color: var(--text-color);
color: var(--text-color);
background-color: var(--bg-secondary);
}
[data-theme="light"] .header-bits-table th,
[data-theme="light"] .header-bits-table.table-dark th {
border-color: var(--border-color) !important;
color: #495057 !important;
background-color: #f8f9fa !important;
}
[data-theme="light"] .header-bits-table td,
[data-theme="light"] .header-bits-table.table-dark td {
border-color: var(--border-color) !important;
color: #212529 !important;
background-color: #ffffff !important;
}
[data-theme="light"] .message-content {
background-color: var(--bg-tertiary);
color: var(--text-color);
}
[data-theme="light"] #grouptext-breakdown,
[data-theme="light"] #advert-breakdown {
background-color: var(--card-bg);
border-color: var(--border-color);
}
[data-theme="light"] .decrypted-label {
color: #495057;
}
[data-theme="light"] .decrypted-value {
color: var(--text-color);
}
[data-theme="light"] .decrypted-card {
background-color: rgba(25, 135, 84, 0.1);
border-color: #198754;
}
</style>
{% endblock %}