mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-03-28 17:42:45 +01:00
feat(ui): add dark/light theme switching with Settings toggle
- Create theme.css with CSS custom properties for light/dark themes - Dark theme inspired by demo landing page (deep navy palette) - Update style.css: replace ~145 hardcoded colors with CSS variables - Extract inline styles from index.html, contacts.html, dm.html to style.css - Add Appearance tab in Settings modal with theme selector - Bootstrap 5.3 data-bs-theme integration for native dark mode - Theme persisted in localStorage, applied before CSS loads (no FOUC) - Console and System Log panels unchanged (already dark themed) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
MarekWo
File diff suppressed because it is too large
Load Diff
613
app/static/css/theme.css
Normal file
613
app/static/css/theme.css
Normal file
@@ -0,0 +1,613 @@
|
||||
/* =============================================================================
|
||||
mc-webui Theme System
|
||||
Defines CSS custom properties for light/dark themes.
|
||||
Bootstrap 5.3 data-bs-theme handles most component styling;
|
||||
these variables cover custom app-specific elements.
|
||||
============================================================================= */
|
||||
|
||||
/* =============================================================================
|
||||
Light Theme (default)
|
||||
============================================================================= */
|
||||
:root {
|
||||
/* Backgrounds */
|
||||
--bg-body: #ffffff;
|
||||
--bg-surface: #f8f9fa;
|
||||
--bg-surface-alt: #f0f0f0;
|
||||
--bg-hover: #e9ecef;
|
||||
--bg-active: #e7f1ff;
|
||||
--bg-messages: #ffffff;
|
||||
--bg-dm-messages: #fafafa;
|
||||
|
||||
/* Text */
|
||||
--text-primary: #212529;
|
||||
--text-secondary: #495057;
|
||||
--text-muted: #6c757d;
|
||||
--text-meta: #adb5bd;
|
||||
|
||||
/* Borders */
|
||||
--border-color: #dee2e6;
|
||||
--border-light: #f0f0f0;
|
||||
|
||||
/* Messages */
|
||||
--msg-own-bg: #e7f1ff;
|
||||
--msg-other-bg: #f8f9fa;
|
||||
--msg-border: #dee2e6;
|
||||
--msg-own-border: #b8daff;
|
||||
|
||||
/* Sender */
|
||||
--sender-color: #0d6efd;
|
||||
--sender-own-color: #084298;
|
||||
|
||||
/* Navbar */
|
||||
--navbar-bg: #0d6efd;
|
||||
--navbar-border: transparent;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-track: #f1f1f1;
|
||||
--scrollbar-thumb: #888;
|
||||
--scrollbar-thumb-hover: #555;
|
||||
--scrollbar-thumb-light: #ccc;
|
||||
--scrollbar-thumb-light-hover: #aaa;
|
||||
|
||||
/* Filter */
|
||||
--filter-bg: #ffffff;
|
||||
--filter-highlight: #fff3cd;
|
||||
--filter-input-border: #ced4da;
|
||||
--filter-btn-me-bg: #e7f1ff;
|
||||
--filter-btn-me-color: #0d6efd;
|
||||
--filter-btn-me-hover: #cfe2ff;
|
||||
--filter-btn-clear-bg: #f8f9fa;
|
||||
--filter-btn-clear-color: #6c757d;
|
||||
--filter-btn-clear-hover: #e9ecef;
|
||||
|
||||
/* Popup / Dropdown */
|
||||
--popup-bg: #ffffff;
|
||||
--popup-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Quote */
|
||||
--quote-color: #6c757d;
|
||||
--quote-bg: rgba(108, 117, 125, 0.1);
|
||||
--quote-border: #6c757d;
|
||||
--quote-own-color: #495057;
|
||||
--quote-own-bg: rgba(8, 66, 152, 0.1);
|
||||
--quote-own-border: #084298;
|
||||
|
||||
/* Mention badge */
|
||||
--mention-bg: #0d6efd;
|
||||
--mention-own-bg: #084298;
|
||||
|
||||
/* Links */
|
||||
--link-color: #0d6efd;
|
||||
--link-hover: #0a58ca;
|
||||
--link-own-color: #084298;
|
||||
--link-own-hover: #052c65;
|
||||
|
||||
/* Channel link */
|
||||
--channel-link-bg: #198754;
|
||||
--channel-link-hover: #157347;
|
||||
--channel-link-own-bg: #0f5132;
|
||||
--channel-link-own-hover: #0d4429;
|
||||
|
||||
/* Echo badge */
|
||||
--echo-color: #198754;
|
||||
--echo-bg: rgba(25, 135, 84, 0.1);
|
||||
|
||||
/* Search */
|
||||
--search-mark-bg: #fff3cd;
|
||||
|
||||
/* Offcanvas menu */
|
||||
--offcanvas-item-border: #dee2e6;
|
||||
--offcanvas-item-hover: #f8f9fa;
|
||||
--offcanvas-icon-color: #0d6efd;
|
||||
|
||||
/* FAB */
|
||||
--fab-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
--fab-shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* Conversation list */
|
||||
--conversation-border: #dee2e6;
|
||||
--conversation-hover: #f8f9fa;
|
||||
--conversation-unread: #e7f1ff;
|
||||
|
||||
/* Map filter badges */
|
||||
--map-badge-inactive-bg: white;
|
||||
|
||||
/* Mention autocomplete */
|
||||
--mention-item-highlight: #e7f1ff;
|
||||
--mention-item-border: #f0f0f0;
|
||||
|
||||
/* Image border */
|
||||
--image-border: #dee2e6;
|
||||
|
||||
/* Actions border */
|
||||
--actions-border: rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* Cards */
|
||||
--card-bg: #ffffff;
|
||||
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
--card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Info badge */
|
||||
--info-badge-bg: #e7f3ff;
|
||||
--info-badge-color: #0c5460;
|
||||
|
||||
/* Contact key clickable */
|
||||
--key-hover-color: #0d6efd;
|
||||
--key-hover-bg: #e7f1ff;
|
||||
--key-copied-color: #198754;
|
||||
--key-copied-bg: #d1e7dd;
|
||||
|
||||
/* Path items (DM) */
|
||||
--path-item-bg: #ffffff;
|
||||
--path-item-border: #dee2e6;
|
||||
--path-item-primary-bg: #f0f7ff;
|
||||
--path-item-primary-border: #0d6efd;
|
||||
|
||||
/* DM contact dropdown */
|
||||
--dropdown-bg: #ffffff;
|
||||
--dropdown-separator-bg: #f8f9fa;
|
||||
--dropdown-item-hover: #e9ecef;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Dark Theme
|
||||
Inspired by mc-webui demo landing page (https://mc-webui.marwoj.net/)
|
||||
Color palette: deep navy backgrounds, slate surfaces, soft blue accents
|
||||
============================================================================= */
|
||||
[data-theme="dark"] {
|
||||
/* Override Bootstrap 5.3 dark mode variables for our custom palette */
|
||||
--bs-body-bg: #0f172a;
|
||||
--bs-body-color: #f8fafc;
|
||||
--bs-border-color: #334155;
|
||||
--bs-tertiary-bg: #1e293b;
|
||||
--bs-secondary-bg: #162032;
|
||||
|
||||
/* Backgrounds */
|
||||
--bg-body: #0f172a;
|
||||
--bg-surface: #1e293b;
|
||||
--bg-surface-alt: #162032;
|
||||
--bg-hover: #2d3a4e;
|
||||
--bg-active: #1e3a5f;
|
||||
--bg-messages: #0f172a;
|
||||
--bg-dm-messages: #131c2e;
|
||||
|
||||
/* Text */
|
||||
--text-primary: #f8fafc;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-muted: #64748b;
|
||||
--text-meta: #475569;
|
||||
|
||||
/* Borders */
|
||||
--border-color: #334155;
|
||||
--border-light: #1e293b;
|
||||
|
||||
/* Messages */
|
||||
--msg-own-bg: #1e3a5f;
|
||||
--msg-other-bg: #1e293b;
|
||||
--msg-border: #334155;
|
||||
--msg-own-border: #2563eb;
|
||||
|
||||
/* Sender */
|
||||
--sender-color: #60a5fa;
|
||||
--sender-own-color: #93c5fd;
|
||||
|
||||
/* Navbar */
|
||||
--navbar-bg: #1e293b;
|
||||
--navbar-border: #334155;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-track: #1e293b;
|
||||
--scrollbar-thumb: #475569;
|
||||
--scrollbar-thumb-hover: #64748b;
|
||||
--scrollbar-thumb-light: #334155;
|
||||
--scrollbar-thumb-light-hover: #475569;
|
||||
|
||||
/* Filter */
|
||||
--filter-bg: #1e293b;
|
||||
--filter-highlight: rgba(251, 191, 36, 0.2);
|
||||
--filter-input-border: #334155;
|
||||
--filter-btn-me-bg: #1e3a5f;
|
||||
--filter-btn-me-color: #60a5fa;
|
||||
--filter-btn-me-hover: #264a6f;
|
||||
--filter-btn-clear-bg: #1e293b;
|
||||
--filter-btn-clear-color: #94a3b8;
|
||||
--filter-btn-clear-hover: #2d3a4e;
|
||||
|
||||
/* Popup / Dropdown */
|
||||
--popup-bg: #1e293b;
|
||||
--popup-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* Quote */
|
||||
--quote-color: #94a3b8;
|
||||
--quote-bg: rgba(148, 163, 184, 0.1);
|
||||
--quote-border: #64748b;
|
||||
--quote-own-color: #94a3b8;
|
||||
--quote-own-bg: rgba(37, 99, 235, 0.15);
|
||||
--quote-own-border: #2563eb;
|
||||
|
||||
/* Mention badge */
|
||||
--mention-bg: #2563eb;
|
||||
--mention-own-bg: #1d4ed8;
|
||||
|
||||
/* Links */
|
||||
--link-color: #60a5fa;
|
||||
--link-hover: #93c5fd;
|
||||
--link-own-color: #93c5fd;
|
||||
--link-own-hover: #bfdbfe;
|
||||
|
||||
/* Channel link */
|
||||
--channel-link-bg: #059669;
|
||||
--channel-link-hover: #10b981;
|
||||
--channel-link-own-bg: #047857;
|
||||
--channel-link-own-hover: #059669;
|
||||
|
||||
/* Echo badge */
|
||||
--echo-color: #10b981;
|
||||
--echo-bg: rgba(16, 185, 129, 0.15);
|
||||
|
||||
/* Search */
|
||||
--search-mark-bg: rgba(251, 191, 36, 0.3);
|
||||
|
||||
/* Offcanvas menu */
|
||||
--offcanvas-item-border: #334155;
|
||||
--offcanvas-item-hover: #253347;
|
||||
--offcanvas-icon-color: #60a5fa;
|
||||
|
||||
/* FAB */
|
||||
--fab-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
|
||||
--fab-shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.6);
|
||||
|
||||
/* Conversation list */
|
||||
--conversation-border: #334155;
|
||||
--conversation-hover: #253347;
|
||||
--conversation-unread: #1e3a5f;
|
||||
|
||||
/* Map filter badges */
|
||||
--map-badge-inactive-bg: #1e293b;
|
||||
|
||||
/* Mention autocomplete */
|
||||
--mention-item-highlight: #1e3a5f;
|
||||
--mention-item-border: #334155;
|
||||
|
||||
/* Image border */
|
||||
--image-border: #334155;
|
||||
|
||||
/* Actions border */
|
||||
--actions-border: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* Cards */
|
||||
--card-bg: #1e293b;
|
||||
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* Info badge */
|
||||
--info-badge-bg: rgba(37, 99, 235, 0.15);
|
||||
--info-badge-color: #60a5fa;
|
||||
|
||||
/* Contact key clickable */
|
||||
--key-hover-color: #60a5fa;
|
||||
--key-hover-bg: #1e3a5f;
|
||||
--key-copied-color: #10b981;
|
||||
--key-copied-bg: rgba(16, 185, 129, 0.15);
|
||||
|
||||
/* Path items (DM) */
|
||||
--path-item-bg: #1e293b;
|
||||
--path-item-border: #334155;
|
||||
--path-item-primary-bg: #1e3a5f;
|
||||
--path-item-primary-border: #2563eb;
|
||||
|
||||
/* DM contact dropdown */
|
||||
--dropdown-bg: #1e293b;
|
||||
--dropdown-separator-bg: #162032;
|
||||
--dropdown-item-hover: #2d3a4e;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Dark Theme - Bootstrap Component Overrides
|
||||
Bootstrap 5.3 data-bs-theme="dark" handles most defaults; these overrides
|
||||
customize colors to match our deep navy palette.
|
||||
============================================================================= */
|
||||
|
||||
/* Navbar */
|
||||
[data-theme="dark"] .navbar.bg-primary {
|
||||
background-color: var(--navbar-bg) !important;
|
||||
border-bottom: 1px solid var(--navbar-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .navbar .btn-outline-light {
|
||||
border-color: #475569;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .navbar .btn-outline-light:hover {
|
||||
background-color: #334155;
|
||||
border-color: #64748b;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
/* Form controls */
|
||||
[data-theme="dark"] .form-control,
|
||||
[data-theme="dark"] .form-select {
|
||||
background-color: var(--bg-body);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control:focus,
|
||||
[data-theme="dark"] .form-select:focus {
|
||||
background-color: var(--bg-body);
|
||||
color: var(--text-primary);
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
[data-theme="dark"] .modal-content {
|
||||
background-color: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .modal-header {
|
||||
border-bottom-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .modal-footer {
|
||||
border-top-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .btn-close {
|
||||
filter: invert(1) grayscale(100%) brightness(200%);
|
||||
}
|
||||
|
||||
/* Offcanvas */
|
||||
[data-theme="dark"] .offcanvas {
|
||||
background-color: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .offcanvas-header {
|
||||
border-bottom-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* List group */
|
||||
[data-theme="dark"] .list-group-item {
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .list-group-item-action:hover {
|
||||
background-color: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Nav tabs */
|
||||
[data-theme="dark"] .nav-tabs {
|
||||
border-bottom-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .nav-tabs .nav-link {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .nav-tabs .nav-link:hover {
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .nav-tabs .nav-link.active {
|
||||
background-color: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color) var(--border-color) var(--bg-surface);
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
[data-theme="dark"] .table {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
[data-theme="dark"] .alert-info {
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
color: #60a5fa;
|
||||
border-color: rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .alert-light {
|
||||
background-color: var(--bg-surface-alt);
|
||||
color: var(--text-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* Card (Bootstrap) */
|
||||
[data-theme="dark"] .card {
|
||||
background-color: var(--bg-surface);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Badge overrides for better dark mode contrast */
|
||||
[data-theme="dark"] .badge.bg-secondary {
|
||||
background-color: #475569 !important;
|
||||
}
|
||||
|
||||
/* Text utilities */
|
||||
[data-theme="dark"] .text-muted {
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-dark {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .border-bottom {
|
||||
border-bottom-color: var(--border-color) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .border-top {
|
||||
border-top-color: var(--border-color) !important;
|
||||
}
|
||||
|
||||
/* bg-light override */
|
||||
[data-theme="dark"] .bg-light {
|
||||
background-color: var(--bg-surface-alt) !important;
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
[data-theme="dark"] .toast {
|
||||
background-color: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .toast-header {
|
||||
background-color: var(--bg-surface-alt);
|
||||
color: var(--text-primary);
|
||||
border-bottom-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
[data-theme="dark"] .progress {
|
||||
background-color: var(--bg-surface-alt);
|
||||
}
|
||||
|
||||
/* Tooltip-like popups */
|
||||
[data-theme="dark"] .dm-delivery-popup,
|
||||
[data-theme="dark"] .path-popup {
|
||||
background-color: #475569;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
/* Form check / switch */
|
||||
[data-theme="dark"] .form-check-input {
|
||||
background-color: var(--bg-surface-alt);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-check-input:checked {
|
||||
background-color: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Input group */
|
||||
[data-theme="dark"] .input-group-text {
|
||||
background-color: var(--bg-surface-alt);
|
||||
color: var(--text-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* Accordion (if used) */
|
||||
[data-theme="dark"] .accordion-item {
|
||||
background-color: var(--bg-surface);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* Dropdown menu (Bootstrap) */
|
||||
[data-theme="dark"] .dropdown-menu {
|
||||
background-color: var(--bg-surface);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .dropdown-item {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .dropdown-item:hover {
|
||||
background-color: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Spinner */
|
||||
[data-theme="dark"] .spinner-border {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Status bar (bottom) */
|
||||
[data-theme="dark"] .border-top {
|
||||
border-color: var(--border-color) !important;
|
||||
}
|
||||
|
||||
/* QR code container - keep white bg for readability */
|
||||
[data-theme="dark"] .qr-code-container,
|
||||
[data-theme="dark"] #shareChannelQR,
|
||||
[data-theme="dark"] #deviceShareContent .text-center img,
|
||||
[data-theme="dark"] #deviceShareContent canvas {
|
||||
background-color: #ffffff;
|
||||
padding: 8px;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Emoji picker dark mode */
|
||||
[data-theme="dark"] emoji-picker {
|
||||
--background: #1e293b;
|
||||
--border-color: #334155;
|
||||
--indicator-color: #3b82f6;
|
||||
--input-border-color: #334155;
|
||||
--input-font-color: #f8fafc;
|
||||
--input-placeholder-color: #64748b;
|
||||
--outline-color: #3b82f6;
|
||||
--category-font-color: #94a3b8;
|
||||
--button-active-background: #334155;
|
||||
--button-hover-background: #2d3a4e;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Theme Switcher UI
|
||||
============================================================================= */
|
||||
|
||||
.theme-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
background-color: var(--card-bg);
|
||||
}
|
||||
|
||||
.theme-option:hover {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.theme-option.active {
|
||||
border-color: #3b82f6;
|
||||
background-color: var(--bg-active);
|
||||
}
|
||||
|
||||
.theme-option-preview {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.theme-option-preview.light {
|
||||
background: linear-gradient(135deg, #ffffff 50%, #e9ecef 50%);
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.theme-option-preview.dark {
|
||||
background: linear-gradient(135deg, #1e293b 50%, #0f172a 50%);
|
||||
border: 1px solid #334155;
|
||||
}
|
||||
|
||||
.theme-option-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.theme-option-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="light" data-bs-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
@@ -12,6 +12,15 @@
|
||||
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
|
||||
<!-- Theme: apply saved preference before CSS loads to prevent flash -->
|
||||
<script>
|
||||
(function() {
|
||||
var t = localStorage.getItem('mc-webui-theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', t);
|
||||
document.documentElement.setAttribute('data-bs-theme', t);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Bootstrap 5 CSS (local) -->
|
||||
<link href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
|
||||
<!-- Bootstrap Icons (local) -->
|
||||
@@ -24,6 +33,8 @@
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
<!-- Theme CSS (light/dark mode) -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
|
||||
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
@@ -360,6 +371,9 @@
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabSettingsChat" type="button">Group Chat</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabSettingsAppearance" type="button">Appearance</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="tabSettingsMessages">
|
||||
@@ -432,6 +446,29 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="tabSettingsAppearance">
|
||||
<h6 class="text-muted mb-3">Theme</h6>
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<div class="theme-option active" data-theme-value="light" onclick="setTheme('light')">
|
||||
<div class="theme-option-preview light">
|
||||
<i class="bi bi-sun"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="theme-option-label">Light</div>
|
||||
<div class="theme-option-desc">Classic bright interface</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-option" data-theme-value="dark" onclick="setTheme('dark')">
|
||||
<div class="theme-option-preview dark">
|
||||
<i class="bi bi-moon-stars" style="color: #60a5fa;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="theme-option-label">Dark</div>
|
||||
<div class="theme-option-desc">Easy on the eyes, deep navy palette</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -656,6 +693,27 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Theme Switching -->
|
||||
<script>
|
||||
function setTheme(theme) {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
localStorage.setItem('mc-webui-theme', theme);
|
||||
// Update theme selector UI
|
||||
document.querySelectorAll('.theme-option').forEach(function(el) {
|
||||
el.classList.toggle('active', el.getAttribute('data-theme-value') === theme);
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize theme selector UI on settings modal open
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var current = localStorage.getItem('mc-webui-theme') || 'light';
|
||||
document.querySelectorAll('.theme-option').forEach(function(el) {
|
||||
el.classList.toggle('active', el.getAttribute('data-theme-value') === current);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -3,208 +3,6 @@
|
||||
{% block title %}Contact Management - mc-webui{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
/* Mobile-first custom styles for Contact Management */
|
||||
/* Compact manual approval section */
|
||||
.compact-setting {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
color: #6c757d;
|
||||
cursor: help;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.info-icon:hover {
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.pending-contact-card {
|
||||
background-color: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #212529;
|
||||
margin-bottom: 0.5rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.contact-key {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #6c757d;
|
||||
word-break: break-all;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
min-height: 44px; /* Touch-friendly size */
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 1.5rem 1rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state.compact {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.empty-state.compact i {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.info-badge {
|
||||
display: inline-block;
|
||||
background-color: #e7f3ff;
|
||||
color: #0c5460;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Existing Contacts Styles */
|
||||
.existing-contact-card {
|
||||
background-color: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.existing-contact-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contact-info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.counter-badge {
|
||||
font-size: 1rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
}
|
||||
|
||||
.counter-ok {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.counter-warning {
|
||||
background-color: #ffc107;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.counter-alarm {
|
||||
background-color: #dc3545;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.search-toolbar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-toolbar input,
|
||||
.search-toolbar select {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
/* Scrollable contacts lists */
|
||||
#pendingList {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#existingList {
|
||||
/* No max-height limit - let it use available space */
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
/* Dynamic height based on viewport */
|
||||
max-height: calc(100vh - 400px);
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#existingList {
|
||||
max-height: calc(100vh - 450px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar styling */
|
||||
#existingList::-webkit-scrollbar,
|
||||
#pendingList::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#existingList::-webkit-scrollbar-track,
|
||||
#pendingList::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#existingList::-webkit-scrollbar-thumb,
|
||||
#pendingList::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#existingList::-webkit-scrollbar-thumb:hover,
|
||||
#pendingList::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* Compact section headers */
|
||||
.section-compact {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@@ -1,10 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="light" data-bs-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<title>{% block title %}Contact Management - mc-webui{% endblock %}</title>
|
||||
|
||||
<!-- Theme: apply saved preference before CSS loads to prevent flash -->
|
||||
<script>
|
||||
(function() {
|
||||
var t = localStorage.getItem('mc-webui-theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', t);
|
||||
document.documentElement.setAttribute('data-bs-theme', t);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon-32x32.png') }}">
|
||||
@@ -24,126 +33,11 @@
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
<!-- Theme CSS (light/dark mode) -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
|
||||
|
||||
<style>
|
||||
/* Mobile-first custom styles for Contact Management */
|
||||
/* Compact manual approval section */
|
||||
.compact-setting {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
color: #6c757d;
|
||||
cursor: help;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.info-icon:hover {
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.pending-contact-card {
|
||||
background-color: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #212529;
|
||||
margin-bottom: 0.1rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.contact-key {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #6c757d;
|
||||
word-break: break-all;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.contact-key.clickable-key {
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, background-color 0.15s;
|
||||
padding: 0.15rem 0.3rem;
|
||||
margin-left: -0.3rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.contact-key.clickable-key:hover {
|
||||
color: #0d6efd;
|
||||
background-color: #e7f1ff;
|
||||
}
|
||||
|
||||
.contact-key.clickable-key.copied {
|
||||
color: #198754;
|
||||
background-color: #d1e7dd;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 1.5rem 1rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state.compact {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.empty-state.compact i {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.info-badge {
|
||||
display: inline-block;
|
||||
background-color: #e7f3ff;
|
||||
color: #0c5460;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Existing Contacts Styles */
|
||||
.existing-contact-card {
|
||||
background-color: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.existing-contact-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Protected contact styling */
|
||||
/* Contact Management page layout overrides */
|
||||
.protection-indicator {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
@@ -167,7 +61,7 @@
|
||||
|
||||
.type-filter-badge[data-type="COM"] {
|
||||
color: #0d6efd;
|
||||
background-color: white;
|
||||
background-color: var(--map-badge-inactive-bg);
|
||||
border: 2px solid #0d6efd;
|
||||
}
|
||||
.type-filter-badge[data-type="COM"].active {
|
||||
@@ -177,7 +71,7 @@
|
||||
|
||||
.type-filter-badge[data-type="REP"] {
|
||||
color: #198754;
|
||||
background-color: white;
|
||||
background-color: var(--map-badge-inactive-bg);
|
||||
border: 2px solid #198754;
|
||||
}
|
||||
.type-filter-badge[data-type="REP"].active {
|
||||
@@ -187,7 +81,7 @@
|
||||
|
||||
.type-filter-badge[data-type="ROOM"] {
|
||||
color: #0dcaf0;
|
||||
background-color: white;
|
||||
background-color: var(--map-badge-inactive-bg);
|
||||
border: 2px solid #0dcaf0;
|
||||
}
|
||||
.type-filter-badge[data-type="ROOM"].active {
|
||||
@@ -197,7 +91,7 @@
|
||||
|
||||
.type-filter-badge[data-type="SENS"] {
|
||||
color: #ffc107;
|
||||
background-color: white;
|
||||
background-color: var(--map-badge-inactive-bg);
|
||||
border: 2px solid #ffc107;
|
||||
}
|
||||
.type-filter-badge[data-type="SENS"].active {
|
||||
@@ -205,52 +99,7 @@
|
||||
background-color: #ffc107;
|
||||
}
|
||||
|
||||
.contact-info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.counter-badge {
|
||||
font-size: 1rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
}
|
||||
|
||||
.counter-ok {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.counter-warning {
|
||||
background-color: #ffc107;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.counter-alarm {
|
||||
background-color: #dc3545;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.search-toolbar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-toolbar input,
|
||||
.search-toolbar select {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
/* Scrollable contacts lists */
|
||||
/* Scrollable contacts lists (overrides for standalone page) */
|
||||
#pendingList {
|
||||
height: calc(100vh - 280px);
|
||||
overflow-y: auto;
|
||||
@@ -267,35 +116,7 @@
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
/* Custom scrollbar styling */
|
||||
#existingList::-webkit-scrollbar,
|
||||
#pendingList::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#existingList::-webkit-scrollbar-track,
|
||||
#pendingList::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#existingList::-webkit-scrollbar-thumb,
|
||||
#pendingList::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#existingList::-webkit-scrollbar-thumb:hover,
|
||||
#pendingList::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* Compact section headers */
|
||||
.section-compact {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* NEW: Full-screen lists for dedicated pages - fill remaining space */
|
||||
/* Full-screen lists for dedicated pages */
|
||||
.contacts-list-fullscreen {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
@@ -304,10 +125,10 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* NEW: Navigation cards on manage page */
|
||||
/* Navigation cards on manage page */
|
||||
.nav-card {
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
@@ -319,7 +140,7 @@
|
||||
}
|
||||
|
||||
.nav-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: var(--card-shadow-hover);
|
||||
}
|
||||
|
||||
.nav-card h6 {
|
||||
@@ -341,8 +162,7 @@
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
/* NEW: Back buttons */
|
||||
/* Back buttons */
|
||||
.back-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
@@ -355,7 +175,7 @@
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* NEW: Cleanup section on manage page */
|
||||
/* Cleanup section on manage page */
|
||||
.cleanup-section {
|
||||
background-color: #fff3cd;
|
||||
border: 1px solid #ffc107;
|
||||
@@ -364,6 +184,11 @@
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .cleanup-section {
|
||||
background-color: rgba(255, 193, 7, 0.1);
|
||||
border-color: rgba(255, 193, 7, 0.3);
|
||||
}
|
||||
|
||||
.cleanup-section h6 {
|
||||
color: #856404;
|
||||
margin-bottom: 0.75rem;
|
||||
@@ -372,6 +197,10 @@
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .cleanup-section h6 {
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
/* Override global overflow: hidden from style.css for Contact Management pages */
|
||||
html, body {
|
||||
overflow: auto !important;
|
||||
@@ -381,6 +210,8 @@
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--bg-body);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
main {
|
||||
@@ -400,7 +231,6 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Page content containers should fill available space */
|
||||
#pendingPageContent,
|
||||
#existingPageContent {
|
||||
flex: 1 1 0;
|
||||
@@ -408,10 +238,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
}
|
||||
</style>
|
||||
|
||||
{% block extra_head %}{% endblock %}
|
||||
|
||||
@@ -1,10 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="light" data-bs-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<title>Direct Messages - mc-webui</title>
|
||||
|
||||
<!-- Theme: apply saved preference before CSS loads to prevent flash -->
|
||||
<script>
|
||||
(function() {
|
||||
var t = localStorage.getItem('mc-webui-theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', t);
|
||||
document.documentElement.setAttribute('data-bs-theme', t);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon-32x32.png') }}">
|
||||
@@ -24,166 +33,12 @@
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
<!-- Theme CSS (light/dark mode) -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
|
||||
|
||||
<!-- Emoji Picker (local) -->
|
||||
<script type="module" src="{{ url_for('static', filename='vendor/emoji-picker-element/index.js') }}"></script>
|
||||
<style>
|
||||
emoji-picker {
|
||||
--emoji-size: 1.5rem;
|
||||
--num-columns: 8;
|
||||
}
|
||||
.emoji-picker-container {
|
||||
position: relative;
|
||||
}
|
||||
.emoji-picker-popup {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
margin-bottom: 0.5rem;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.emoji-picker-popup.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments */
|
||||
@media (max-width: 576px) {
|
||||
emoji-picker {
|
||||
--emoji-size: 1.25rem;
|
||||
--num-columns: 6;
|
||||
}
|
||||
.emoji-picker-popup {
|
||||
right: auto;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Searchable contact dropdown */
|
||||
.dm-contact-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1050;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
border: 1px solid #dee2e6;
|
||||
border-top: none;
|
||||
border-radius: 0 0 0.375rem 0.375rem;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.dm-contact-item {
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.dm-contact-item:hover,
|
||||
.dm-contact-item.active {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
.dm-contact-item .contact-name {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dm-contact-item .badge {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.dm-dropdown-separator {
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
color: #6c757d;
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Path management styles */
|
||||
.path-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
background: #fff;
|
||||
}
|
||||
.path-list-item.primary {
|
||||
border-color: #0d6efd;
|
||||
background: #f0f7ff;
|
||||
}
|
||||
.path-list-item .path-hex {
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.path-list-item .path-label {
|
||||
color: #6c757d;
|
||||
font-size: 0.7rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.path-list-item .path-actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 0.15rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.path-list-item .path-actions .btn {
|
||||
padding: 0 0.25rem;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.path-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.path-section-header h6 {
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
}
|
||||
.repeater-picker-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 0.5rem;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.repeater-picker-item:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
.repeater-picker-item .badge {
|
||||
font-family: monospace;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.path-uniqueness-warning {
|
||||
color: #dc3545;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
/* Leaflet z-index fix for Bootstrap modal */
|
||||
#rptLeafletMap { z-index: 1; }
|
||||
#rptLeafletMap .leaflet-top,
|
||||
#rptLeafletMap .leaflet-bottom { z-index: 1000; }
|
||||
/* Map modal backdrop stacks above Contact Info modal */
|
||||
</style>
|
||||
<!-- Inline styles removed - now in style.css -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- Main Content -->
|
||||
|
||||
@@ -5,70 +5,6 @@
|
||||
{% block extra_head %}
|
||||
<!-- Emoji Picker (local) -->
|
||||
<script type="module" src="{{ url_for('static', filename='vendor/emoji-picker-element/index.js') }}"></script>
|
||||
<style>
|
||||
emoji-picker {
|
||||
--emoji-size: 1.5rem;
|
||||
--num-columns: 8;
|
||||
}
|
||||
.emoji-picker-container {
|
||||
position: relative;
|
||||
}
|
||||
.emoji-picker-popup {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
margin-bottom: 0.5rem;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.emoji-picker-popup.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments */
|
||||
@media (max-width: 576px) {
|
||||
emoji-picker {
|
||||
--emoji-size: 1.25rem;
|
||||
--num-columns: 6;
|
||||
}
|
||||
.emoji-picker-popup {
|
||||
right: auto;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal fullscreen - remove all margins and padding */
|
||||
#dmModal .modal-dialog.modal-fullscreen,
|
||||
#contactsModal .modal-dialog.modal-fullscreen,
|
||||
#logsModal .modal-dialog.modal-fullscreen,
|
||||
#consoleModal .modal-dialog.modal-fullscreen {
|
||||
margin: 0 !important;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
max-height: 100vh !important;
|
||||
}
|
||||
|
||||
#dmModal .modal-content,
|
||||
#contactsModal .modal-content,
|
||||
#logsModal .modal-content,
|
||||
#consoleModal .modal-content {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
#dmModal .modal-body,
|
||||
#contactsModal .modal-body,
|
||||
#logsModal .modal-body,
|
||||
#consoleModal .modal-body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
Reference in New Issue
Block a user