/* This file is for providing custom CSS code to the TrueVoIP Portal */ /* Empty flash container leaves a residual colored strip. Only show it when something is actually in it. */ #flashContainer:empty { display: none !important; } .nav-bg-image { background-image: url('https://s3.us-central-1.wasabisys.com/truevoip/truevoip-navigation-custom-2023.png'); } #nav-buttons div.nav-button { border: 1px solid #ffffff !important; } #nav-buttons .nav-button.btn { background-image: none !important; background-color: #ffffff !important; } /* select#PhoneRecord { visibility: hidden !important; } */ /* ───────────────────────────────────────────────────────────── Dark mode toggle button (placed in the user toolbar) ───────────────────────────────────────────────────────────── */ .custom-dark-mode-toggle-btn { display: inline-block; padding: 4px 10px; margin-right: 8px; border-radius: 16px; background: rgba(60, 133, 251, 0.08); color: #3C85FB !important; text-decoration: none !important; font-size: 14px; line-height: 1; vertical-align: middle; transition: background 0.15s; } .custom-dark-mode-toggle-btn:hover { background: rgba(60, 133, 251, 0.18); text-decoration: none !important; } /* ───────────────────────────────────────────────────────────── Dark mode — applied when has class "dark-mode" ───────────────────────────────────────────────────────────── */ html.dark-mode { /* Custom properties other rules can reference */ --dm-bg: #1b1f24; --dm-bg-elev: #252a31; --dm-bg-elev-2: #2f353d; --dm-border: #3a4049; --dm-text: #e6e8eb; --dm-text-dim: #a3a9b2; --dm-accent: #4f95ff; } html.dark-mode, html.dark-mode body { background: var(--dm-bg) !important; color: var(--dm-text) !important; } /* Force the main outer wrappers dark. These catch the large white area behind the logo + nav that didn't get hit by panel-specific rules. */ html.dark-mode #container, html.dark-mode #content, html.dark-mode #main, html.dark-mode #page, html.dark-mode #page-wrapper, html.dark-mode #wrapper, html.dark-mode #body, html.dark-mode .main-content, html.dark-mode .page-content, html.dark-mode .content-container, html.dark-mode .content-wrap, html.dark-mode .app-container, html.dark-mode .home-content, html.dark-mode .container-fluid, html.dark-mode .main-wrap, html.dark-mode .wrapper, html.dark-mode .content { background: var(--dm-bg) !important; color: var(--dm-text) !important; } /* Panels / cards / elevated surfaces (things that SHOULD look like a card) */ html.dark-mode .well, html.dark-mode .graphs-panel-home, html.dark-mode .tab-content, html.dark-mode .panel, html.dark-mode .panel-default, html.dark-mode .panel-body, html.dark-mode .modal-content, html.dark-mode .modal-body, html.dark-mode .modal-header, html.dark-mode .modal-footer, html.dark-mode .popover, html.dark-mode .popover-content, html.dark-mode .dropdown-menu, html.dark-mode .ui-autocomplete, html.dark-mode .custom-filter-menu, html.dark-mode .rounded, html.dark-mode .box, html.dark-mode .card, html.dark-mode .widget { background: var(--dm-bg-elev) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } /* Layout containers that should blend with the page (not look like a card). Bootstrap 2's `.container` is a generic wrapper used on every page, so it must NOT get an elevated bg. Same for panel-main content wrappers and forms. */ html.dark-mode .container, html.dark-mode .users-panel-main, html.dark-mode .profile-panel-main, html.dark-mode [class$="-panel-main"], html.dark-mode .form-horizontal, html.dark-mode .form-wide, html.dark-mode .form-vertical, html.dark-mode form { background: transparent !important; color: var(--dm-text) !important; } /* Catch-all fallback: any white-background div becomes elevated dark. Targets inline and class-based whites commonly used in the portal. */ html.dark-mode div[style*="background:#fff"], html.dark-mode div[style*="background: #fff"], html.dark-mode div[style*="background-color:#fff"], html.dark-mode div[style*="background-color: #fff"], html.dark-mode div[style*="background:#ffffff"], html.dark-mode div[style*="background: #ffffff"], html.dark-mode div[style*="background-color:#ffffff"], html.dark-mode div[style*="background-color: #ffffff"] { background: var(--dm-bg-elev) !important; color: var(--dm-text) !important; } /* Table rows */ html.dark-mode .table, html.dark-mode .table-condensed, html.dark-mode table { color: var(--dm-text) !important; background: transparent !important; } html.dark-mode .table th, html.dark-mode .table td, html.dark-mode table th, html.dark-mode table td { background: transparent !important; border-color: var(--dm-border) !important; } html.dark-mode .table tbody tr:hover, html.dark-mode table tbody tr:hover { background: var(--dm-bg-elev-2) !important; } html.dark-mode .table-striped tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.02) !important; } /* Inputs + selects */ html.dark-mode input[type="text"], html.dark-mode input[type="password"], html.dark-mode input[type="email"], html.dark-mode input[type="number"], html.dark-mode input[type="search"], html.dark-mode input[type="tel"], html.dark-mode input[type="url"], html.dark-mode textarea, html.dark-mode select, html.dark-mode .form-control, html.dark-mode .search-query { background: var(--dm-bg) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark-mode input::placeholder, html.dark-mode textarea::placeholder { color: var(--dm-text-dim) !important; } /* Buttons */ html.dark-mode .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) { background: var(--dm-bg-elev-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; background-image: none !important; /* Bootstrap 2 applies a white text-shadow for light backgrounds; it reads as a bloated halo in dark mode. */ text-shadow: none !important; box-shadow: none !important; } html.dark-mode .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):hover { background: var(--dm-border) !important; } /* Primary / success / danger / warning / info buttons keep their color but lose the white text-shadow halo. */ html.dark-mode .btn { text-shadow: none !important; } /* Links */ html.dark-mode a { color: var(--dm-accent) !important; } html.dark-mode a:hover { color: #6fa8ff !important; } /* Labels + muted text */ html.dark-mode label, html.dark-mode .muted, html.dark-mode .text-muted, html.dark-mode small { color: var(--dm-text-dim) !important; } /* Navigation buttons — match the clean light-mode look by making them transparent (the original light-mode rules use white bg + white border on a white page, effectively invisible). */ html.dark-mode #nav-buttons .nav-button.btn { background-color: transparent !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; } html.dark-mode #nav-buttons div.nav-button { border: 1px solid transparent !important; } /* Nav label text */ html.dark-mode #nav-buttons .nav-text { color: var(--dm-text-dim) !important; } /* Active nav item — make its label stand out in dark mode */ html.dark-mode #nav-buttons li.nav-link-current .nav-text, html.dark-mode #nav-buttons li.active .nav-text { color: #ffffff !important; font-weight: 600; } /* Domain message (blue "You are viewing" banner) */ html.dark-mode #domain-message.alert-info { background: #1a2942 !important; color: #c8dbff !important; border-color: #2a3f60 !important; } html.dark-mode #domain-message .domain-description { color: #8fb9ff !important; } /* Compliance warning banner */ html.dark-mode #custom-compliance-global-banner.alert-warning { background: #3a2f1a !important; color: #ffd88a !important; border-color: #5a4a25 !important; } /* Page header / h6 / h5 etc */ html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6, html.dark-mode legend { color: var(--dm-text) !important; border-bottom-color: var(--dm-border) !important; } /* The big blue header ("Users", "Home", "Domains", etc.) */ html.dark-mode .page-header, html.dark-mode .panel-heading, html.dark-mode #navigation-subbar { background: linear-gradient(90deg, #2d5cb8, #3c85fb) !important; color: #fff !important; } /* Links + icons inside the navigation subbar (title + refresh button) */ html.dark-mode #navigation-subbar, html.dark-mode #navigation-subbar a, html.dark-mode #navigation-subbar .navigation-title, html.dark-mode #navigation-subbar .subbar-btn, html.dark-mode #navigation-subbar i { color: #ffffff !important; } html.dark-mode #navigation-subbar .subbar-btn { background: rgba(255, 255, 255, 0.12) !important; background-image: none !important; border-color: rgba(255, 255, 255, 0.2) !important; } html.dark-mode #navigation-subbar .subbar-btn:hover { background: rgba(255, 255, 255, 0.22) !important; } /* Google Chart — already restyled, but flip the chart container bg */ html.dark-mode #chart_div svg > rect:first-child, html.dark-mode #chart_div svg rect[fill="#ffffff"] { fill: var(--dm-bg-elev) !important; } html.dark-mode #chart_div svg text { fill: var(--dm-text) !important; /* Google Charts draws a white halo stroke around text to improve contrast on light backgrounds. In dark mode that halo becomes a bloated white outline — strip it. */ stroke: transparent !important; stroke-width: 0 !important; paint-order: normal !important; } html.dark-mode #chart_div svg rect[fill="#ececf7"], html.dark-mode #chart_div svg rect[fill="#f7f7fc"] { fill: var(--dm-border) !important; opacity: 0.35 !important; } /* Google Chart HTML wrappers + controls */ html.dark-mode #chart_div, html.dark-mode .chart-container, html.dark-mode .google-visualization-atl, html.dark-mode .chartControls, html.dark-mode .zoomControls, html.dark-mode .legend, html.dark-mode .outerChartContainer, html.dark-mode .chartContainer, html.dark-mode .rangeControl, html.dark-mode .containerTable, html.dark-mode .chartTdContainer, html.dark-mode .annotationsTdContainer, html.dark-mode .annotationsContainer, html.dark-mode .annotationsFilterContainer { background: var(--dm-bg-elev) !important; color: var(--dm-text) !important; } /* Zoom buttons (1h / 1d / 1w) */ html.dark-mode .chartControls .btn-mini, html.dark-mode .zoomControls .btn-mini { background: var(--dm-bg) !important; background-image: none !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; text-shadow: none !important; } html.dark-mode .chartControls .btn-mini:hover, html.dark-mode .zoomControls .btn-mini:hover { background: var(--dm-bg-elev-2) !important; } /* Filter badge adjusts for dark background */ html.dark-mode #custom-filter-badge { background: #4f95ff !important; } /* Missing Info pill stays recognizable */ html.dark-mode .label.label-warning { background: #a07228 !important; color: #fff !important; } /* Sticky form actions bar (Save/Cancel/Back at bottom of edit pages) */ html.dark-mode .form-actions, html.dark-mode .affix-form-actions, html.dark-mode .scroll-to-fixed-fixed { background: var(--dm-bg-elev) !important; border-top: 1px solid var(--dm-border) !important; color: var(--dm-text) !important; box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3) !important; } /* Pagination bar (bottom of list pages) */ html.dark-mode .pagination-container { background: transparent !important; } html.dark-mode .pagination > ul { background: var(--dm-bg-elev) !important; box-shadow: none !important; } html.dark-mode .pagination > ul > li > a, html.dark-mode .pagination > ul > li > span { background: var(--dm-bg-elev) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark-mode .pagination > ul > li > a:hover { background: var(--dm-bg-elev-2) !important; color: var(--dm-text) !important; } html.dark-mode .pagination > ul > li.active > a, html.dark-mode .pagination > ul > li.active > a:hover { background: #3C85FB !important; color: #ffffff !important; border-color: #3C85FB !important; } html.dark-mode .pagination > ul > li.disabled > a, html.dark-mode .pagination > ul > li.disabled > a:hover { background: var(--dm-bg) !important; color: var(--dm-text-dim) !important; } /* Bootstrap nav-tabs (e.g. Phone Numbers / SMS Numbers / Phone Hardware) */ html.dark-mode .nav-tabs { border-bottom-color: var(--dm-border) !important; } html.dark-mode .nav-tabs > li > a { color: var(--dm-text-dim) !important; background: transparent !important; border-color: transparent !important; } html.dark-mode .nav-tabs > li > a:hover { background: var(--dm-bg-elev-2) !important; border-color: var(--dm-border) var(--dm-border) transparent !important; color: var(--dm-text) !important; } /* Active tab — match the dark content panel underneath */ html.dark-mode .nav-tabs > li.active > a, html.dark-mode .nav-tabs > li.active > a:hover, html.dark-mode .nav-tabs > li.active > a:focus { background: var(--dm-bg-elev) !important; border-color: var(--dm-border) var(--dm-border) var(--dm-bg-elev) !important; color: var(--dm-text) !important; } /* ───────────────────────────────────────────────────────────── Home-page Call Graph — modernize Google AnnotationChart (the gradient fill under the line is applied via custom.js) ───────────────────────────────────────────────────────────── */ /* Re-color every blue line Google Charts draws */ #chart_div svg path[stroke="#396ab1"] { stroke: #3C85FB !important; stroke-linejoin: round !important; stroke-linecap: round !important; } /* Thicker line on the main chart only (not the range selector below) */ #chart_div_AnnotationChart_chartContainer svg path[stroke="#396ab1"] { stroke-width: 3 !important; } /* Fade the horizontal grid lines */ #chart_div svg rect[fill="#ececf7"], #chart_div svg rect[fill="#f7f7fc"] { opacity: 0.5 !important; } /* Fade vertical grid lines a touch */ #chart_div svg rect[fill="#cccccc"] { opacity: 0.35 !important; } /* Modern font on axis labels */ #chart_div svg text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif !important; font-weight: 500 !important; } /* Legend dot + label colored to accent */ #chart_div_AnnotationChart_legendContainer .legend-dot { background-color: #3C85FB !important; } #chart_div_AnnotationChart_legendContainer span { color: #3C85FB !important; } /* Soften the panel shell around the chart */ .graphs-panel-home.rounded { border-radius: 10px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important; overflow: hidden; } .graphs-panel-home h6 { font-weight: 600; letter-spacing: 0.2px; }