/* ============================================================================= App-wide light/dark theme. Include AFTER bootstrap on any page that opts in. Toggle by setting `data-theme="dark"` on the element (theme.js handles persistence). Also see theme.js `normalizeInlineColorsForDark` — that catches ad-hoc inline styles this stylesheet couldn't anticipate. ============================================================================= */ :root { /* Light palette (default) */ --thm-bg: #f4f7fa; --thm-surface: #ffffff; --thm-panel: #ffffff; --thm-text: #22303c; --thm-muted: #566573; --thm-border: #d0d7e2; --thm-input-bg: #ffffff; --thm-input-brd: #cbd2d9; --thm-row-alt: #f7fafc; --thm-row-hover: #e6f2f8; --thm-row-sel: #cfe6f5; --thm-header-bg: #1e3a5f; --thm-header-fg: #ffffff; --thm-header-grad: linear-gradient(135deg, #1e3a5f 0%, #142a48 100%); --thm-link: #17607a; --thm-accent: #17a2b8; --thm-shadow: 0 2px 4px rgba(0,0,0,0.08); --thm-shadow-md: 0 4px 10px rgba(0,0,0,0.12); } html[data-theme="dark"] { /* Professional slate palette — inspired by medical imaging workstations. Warm-neutral rather than pure grey so long-form reading doesn't feel clinical/harsh. Accent teal survives on both themes. */ --thm-bg: #10161d; --thm-surface: #1a222c; --thm-panel: #212c38; --thm-text: #e6ecf3; --thm-muted: #8fa0b3; --thm-border: #2c3a4b; --thm-input-bg: #253140; --thm-input-brd: #3b4b5e; --thm-row-alt: #1c2531; --thm-row-hover: #29394d; --thm-row-sel: #2d4664; --thm-header-bg: #0d2137; --thm-header-fg: #ffffff; --thm-header-grad: linear-gradient(135deg, #0e2540 0%, #071523 100%); --thm-link: #6cd0e6; --thm-accent: #22b8ce; --thm-shadow: 0 2px 4px rgba(0,0,0,0.55); --thm-shadow-md: 0 6px 14px rgba(0,0,0,0.65); } /* Smooth cross-fade when the user flips the switch */ html { transition: background-color 200ms ease, color 200ms ease; } /* ==================== Baseline surfaces ==================================== */ body { background: var(--thm-bg) !important; color: var(--thm-text) !important; transition: background-color 200ms ease, color 200ms ease; } /* Cyan Roundbox header on the main dashboard */ html[data-theme="dark"] .RoundBox { background: var(--thm-header-grad) !important; border-color: rgba(255,255,255,0.06) !important; color: var(--thm-header-fg) !important; box-shadow: var(--thm-shadow) !important; } html[data-theme="dark"] .RoundBox * { color: var(--thm-header-fg) !important; } html[data-theme="dark"] .RoundBox a { color: var(--thm-link) !important; } /* User label and payable badge in the header */ html[data-theme="dark"] .pay-badge { background: rgba(255,255,255,0.10) !important; color: var(--thm-header-fg) !important; } html[data-theme="dark"] .pay-badge-label { background: rgba(255,255,255,0.18) !important; } /* ==================== Buttons ============================================== */ html[data-theme="dark"] .btn-default { background-color: var(--thm-input-bg) !important; color: var(--thm-text) !important; border-color: var(--thm-input-brd) !important; } html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-default:focus { background-color: var(--thm-row-hover) !important; color: var(--thm-text) !important; border-color: var(--thm-border) !important; } /* .navbar-btn variants used in the RoundBox header — keep them light against the dark header so the change-password / logout buttons stand out. */ html[data-theme="dark"] .navbar-btn { background-color: rgba(255,255,255,0.08) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.18) !important; } html[data-theme="dark"] .navbar-btn:hover { background-color: rgba(255,255,255,0.16) !important; } /* Anchor tags with the shared `.a` grey background on the toolbar row */ html[data-theme="dark"] .a { background-color: transparent !important; color: var(--thm-text) !important; } /* ==================== Form controls ======================================== */ html[data-theme="dark"] .form-control, html[data-theme="dark"] input.txt, html[data-theme="dark"] select.txt, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--thm-input-bg) !important; color: var(--thm-text) !important; border-color: var(--thm-input-brd) !important; } html[data-theme="dark"] .form-control::placeholder { color: var(--thm-muted) !important; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color: var(--thm-accent) !important; box-shadow: 0 0 0 2px rgba(34,184,206,0.18) !important; } /* ==================== Panels + cards ======================================= */ html[data-theme="dark"] .panel, html[data-theme="dark"] .panel-default, html[data-theme="dark"] .panel-primary, html[data-theme="dark"] .panel-info, html[data-theme="dark"] .panel-warning, html[data-theme="dark"] .panel-danger, html[data-theme="dark"] .panel-success, html[data-theme="dark"] .rx-card, html[data-theme="dark"] .rx-toolbar, html[data-theme="dark"] .rx-grid-wrap, html[data-theme="dark"] .well { background: var(--thm-panel) !important; color: var(--thm-text) !important; border-color: var(--thm-border) !important; box-shadow: var(--thm-shadow) !important; } html[data-theme="dark"] .panel-heading, html[data-theme="dark"] .panel-default > .panel-heading { background: var(--thm-surface) !important; color: var(--thm-text) !important; border-color: var(--thm-border) !important; } html[data-theme="dark"] .panel-primary > .panel-heading { background: var(--thm-header-grad) !important; color: var(--thm-header-fg) !important; border-color: var(--thm-border) !important; } /* ==================== Tables + GridView ==================================== */ html[data-theme="dark"] table, html[data-theme="dark"] .table { color: var(--thm-text) !important; background: var(--thm-panel) !important; border-color: var(--thm-border) !important; } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th, html[data-theme="dark"] table td, html[data-theme="dark"] table th { border-color: var(--thm-border) !important; background-color: var(--thm-panel) !important; color: var(--thm-text) !important; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td, html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th, html[data-theme="dark"] table tr:nth-child(even) td { background-color: var(--thm-row-alt) !important; } html[data-theme="dark"] table:not(.Grid) tr:hover td { background-color: var(--thm-row-hover) !important; } /* GridView class="Grid" — resting cells use panel; hover/selection colors are owned by MedteleradDashboard (.gv-hover → #f9fbfc, .gv-selected → #999999) and intentionally beat these rules. */ html[data-theme="dark"] table.Grid, html[data-theme="dark"] table.Grid th { background-color: var(--thm-panel) !important; color: var(--thm-text) !important; border-color: var(--thm-border) !important; } html[data-theme="dark"] table.Grid td:not(.gv-mark) { background-color: var(--thm-panel) !important; color: var(--thm-text) !important; border-color: var(--thm-border) !important; } html[data-theme="dark"] table.Grid tr:nth-child(even) td:not(.gv-mark) { background-color: var(--thm-row-alt) !important; } html[data-theme="dark"] table.Grid td.gv-mark { border-color: var(--thm-border) !important; } html[data-theme="dark"] table.Grid a, html[data-theme="dark"] table.Grid a:link, html[data-theme="dark"] table.Grid a:visited { color: var(--thm-link) !important; } /* GridView Header/Pager rows carry inline background-color attributes */ html[data-theme="dark"] table.Grid tr[style*="background-color:#333333"] td, html[data-theme="dark"] table.Grid tr[style*="background-color:#1C5E55"] td, html[data-theme="dark"] table.Grid tr[style*="background-color:#666666"] td { background: var(--thm-header-grad) !important; color: var(--thm-header-fg) !important; } /* rx-grid — used by ValidationDashboard (already CSS-var-based, dark-friendly) */ html[data-theme="dark"] .rx-grid tbody td { border-color: var(--thm-border) !important; background: transparent !important; color: var(--thm-text) !important; } html[data-theme="dark"] .rx-grid tbody tr:nth-child(even) td { background: var(--thm-row-alt) !important; } html[data-theme="dark"] .rx-grid tbody tr.queue-row:hover td { background: var(--thm-row-hover) !important; } html[data-theme="dark"] .rx-grid tbody tr.queue-row-selected td { background: var(--thm-row-sel) !important; } html[data-theme="dark"] .rx-topbar { background: var(--thm-header-grad) !important; } /* ==================== Legacy inline attribute overrides ==================== */ /* Divs with hardcoded backgrounds sprinkled across dashboard / report pages */ html[data-theme="dark"] [style*="background-color: #9fdddd"], html[data-theme="dark"] [style*="background-color:#9fdddd"], html[data-theme="dark"] [style*="background-color: #f5f5f5"], html[data-theme="dark"] [style*="background-color:#f5f5f5"], html[data-theme="dark"] [style*="background-color: #e0e0e0"], html[data-theme="dark"] [style*="background-color:#e0e0e0"], html[data-theme="dark"] [style*="background-color: #999999"], html[data-theme="dark"] [style*="background-color:#999999"], html[data-theme="dark"] [style*="background-color: #f9fbfc"], html[data-theme="dark"] [style*="background-color:#f9fbfc"], html[data-theme="dark"] [style*="background-color: #e2e2e2"], html[data-theme="dark"] [style*="background-color:#e2e2e2"], html[data-theme="dark"] [style*="background-color: #ccccb3"], html[data-theme="dark"] [style*="background-color:#ccccb3"], html[data-theme="dark"] [style*="background:#eef4f7"], html[data-theme="dark"] [style*="background: #eef4f7"], html[data-theme="dark"] [style*="background-color:#eef4f7"], html[data-theme="dark"] [style*="background-color: #eef4f7"] { background-color: var(--thm-surface) !important; color: var(--thm-text) !important; } /* Link buttons rendered with inline `color:#02277d` (patient id / name) */ html[data-theme="dark"] a[style*="color:#02277d"], html[data-theme="dark"] a[style*="color: #02277d"] { color: var(--thm-link) !important; } /* Labels with inline `color:Black` — swap so text stays readable */ html[data-theme="dark"] span[style*="color:Black"], html[data-theme="dark"] span[style*="color: Black"], html[data-theme="dark"] span[style*="color:#000000"], html[data-theme="dark"] span[style*="color: #000000"] { color: var(--thm-text) !important; } /* ==================== Dropdowns + combobox ================================= */ html[data-theme="dark"] .dropdown-menu { background: var(--thm-panel) !important; border-color: var(--thm-border) !important; box-shadow: var(--thm-shadow-md) !important; } html[data-theme="dark"] .dropdown-menu > li > a { color: var(--thm-text) !important; } html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .dropdown-menu > li > a:focus { background: var(--thm-row-hover) !important; color: var(--thm-text) !important; } html[data-theme="dark"] .combobox-item, html[data-theme="dark"] #cboFrStudyList, html[data-theme="dark"] #cboStudyList, html[data-theme="dark"] #cboDocList, html[data-theme="dark"] #cboInstList, html[data-theme="dark"] #cboModalityList, html[data-theme="dark"] #cboStatusList { background: var(--thm-panel) !important; color: var(--thm-text) !important; border-color: var(--thm-border) !important; box-shadow: var(--thm-shadow-md) !important; } /* ==================== Modal overlay ======================================== */ html[data-theme="dark"] .modalBackground { background-color: #000000 !important; opacity: 0.75 !important; } html[data-theme="dark"] .modal-content { background: var(--thm-panel) !important; color: var(--thm-text) !important; border-color: var(--thm-border) !important; } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--thm-border) !important; } html[data-theme="dark"] #pnlPopup, html[data-theme="dark"] [id$="_pnlPopup"] { background-color: var(--thm-panel) !important; color: var(--thm-text) !important; border: 1px solid var(--thm-border) !important; } /* ==================== Text elements ======================================== */ html[data-theme="dark"] a { color: var(--thm-link); } html[data-theme="dark"] a:hover { color: var(--thm-accent); } html[data-theme="dark"] hr { border-color: var(--thm-border) !important; } html[data-theme="dark"] .text-muted { color: var(--thm-muted) !important; } html[data-theme="dark"] .text-danger, html[data-theme="dark"] .text-warning { /* keep original tint — Bootstrap defaults are already legible on dark */ } /* Legend row on the dashboard (E=Emergency, A=Attachment, ...) has colored ForeColor labels that stay readable, plus small BackColor swatches. Only the surrounding grey div needs fixing — handled by attribute selectors. */ /* ==================== Sun/moon toggle ====================================== */ .thm-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; padding: 0; line-height: 1; font-size: 14px; margin-left: 6px; vertical-align: middle; transition: background-color 150ms ease, transform 150ms ease; } .thm-toggle:hover { background: rgba(255,255,255,0.12); transform: rotate(-8deg); } .thm-toggle:active { transform: rotate(-16deg); } .thm-toggle .thm-ico-sun { display: none; } .thm-toggle .thm-ico-moon { display: inline; } html[data-theme="dark"] .thm-toggle .thm-ico-sun { display: inline; } html[data-theme="dark"] .thm-toggle .thm-ico-moon { display: none; } html[data-theme="dark"] .thm-toggle { border-color: rgba(255,255,255,0.28); color: #ffe08a; }