/* ========================================================================== AssistCare — Galaxy Theme (data-skin="galaxy") Ported from Inspinia's Galaxy skin (https://webapplayers.com/inspinia/). Loads after app.min.css and dark-theme-overrides.css so Galaxy rules win on specificity. Activated globally when is set by the customizer (Views/Shared/Partials/_Customizer.cshtml). Two modes: - Light Galaxy: Play font, lavender/teal palette, soft body bg, sharper border-radius (2px). Subtle but distinct from Default. - Dark Galaxy: starfield body backdrop (galaxy.jpg) with darkened gradient overlay + translucent dashed-border cards. The signature look. ========================================================================== */ /* ---- Galaxy font ---- */ @import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap'); /* ========================================================================== GALAXY — Light mode (CSS variables + base typography) ========================================================================== */ html[data-skin="galaxy"] { --ins-font-sans-serif: "Play", "Segoe UI", system-ui, sans-serif; --ins-font-family-secondary: "Play", "Segoe UI", system-ui, sans-serif; --bs-font-sans-serif: "Play", "Segoe UI", system-ui, sans-serif; --bs-body-font-family: "Play", "Segoe UI", system-ui, sans-serif; --bs-body-bg: #fdfdfd; --ins-body-bg: #fdfdfd; --bs-body-bg-rgb: 253, 253, 253; --bs-secondary-bg: #ffffff; --bs-border-radius: 2px; --ins-primary: #6575f5; --ins-secondary: #a59b7a; --ins-success: #36dcb8; --ins-info: #47c6f2; --ins-warning: #f2ad45; --ins-danger: #f25583; --bs-primary: #6575f5; --bs-primary-rgb: 101, 117, 245; --bs-success: #36dcb8; --bs-success-rgb: 54, 220, 184; --bs-info: #47c6f2; --bs-info-rgb: 71, 198, 242; --bs-warning: #f2ad45; --bs-warning-rgb: 242, 173, 69; --bs-danger: #f25583; --bs-danger-rgb: 242, 85, 131; --bs-primary-text-emphasis: #4c58b8; --bs-success-text-emphasis: #29a58a; } html[data-skin="galaxy"] body, html[data-skin="galaxy"] :is(.btn, .form-control, .form-select, .navbar, .nav-link, .dropdown-item, table, .table), html[data-skin="galaxy"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { font-family: var(--bs-body-font-family); } /* Snap card border-radius to Galaxy's 2px on light */ html[data-skin="galaxy"] .card, html[data-skin="galaxy"] .corp-card, html[data-skin="galaxy"] .section-card, html[data-skin="galaxy"] .sidebar-card, html[data-skin="galaxy"] .filter-card, html[data-skin="galaxy"] .quick-details-card { border-radius: 2px !important; } /* ========================================================================== GALAXY — Dark mode (starfield body + translucent cards + dashed borders) ========================================================================== */ html[data-skin="galaxy"][data-bs-theme="dark"] { --bs-body-bg: #0a0d1e; --ins-body-bg: #0a0d1e; --bs-body-bg-rgb: 10, 13, 30; --bs-secondary-bg: rgba(255, 255, 255, 0.05); --bs-tertiary-bg: rgba(255, 255, 255, 0.03); --bs-border-color: rgba(229, 243, 255, 0.07); --ins-border-color: rgba(229, 243, 255, 0.07); --ins-light: #283046; --ins-light-rgb: 40, 48, 70; --bs-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3); } /* Starfield backdrop — gradient overlay + galaxy image, fixed so it stays visible while content scrolls. */ html[data-skin="galaxy"][data-bs-theme="dark"] body { background: linear-gradient(180deg, rgba(10, 13, 30, 0.85) 0%, rgba(10, 13, 30, 0.92) 100%), url('/images/galaxy.jpg') center/cover no-repeat; background-attachment: fixed; color: #e2e8f0; } /* Inspinia leaves the page wrapper transparent so the galaxy bg shows through. */ html[data-skin="galaxy"][data-bs-theme="dark"] :is(.page-content, .content-page, main, .wrapper, .app-wrapper) { background: transparent !important; } /* ---- Translucent cards (the signature Galaxy look) ---- Defeats per-page hardcoded `.card-body { background: #ffffff }` and the dark-theme override `.card-body { background: #1e1f27 }` set by individual pages. */ html[data-skin="galaxy"][data-bs-theme="dark"] .card, html[data-skin="galaxy"][data-bs-theme="dark"] .corp-card, html[data-skin="galaxy"][data-bs-theme="dark"] .section-card, html[data-skin="galaxy"][data-bs-theme="dark"] .sidebar-card, html[data-skin="galaxy"][data-bs-theme="dark"] .filter-card, html[data-skin="galaxy"][data-bs-theme="dark"] .quick-details-card, html[data-skin="galaxy"][data-bs-theme="dark"] .ir-details-card, html[data-skin="galaxy"][data-bs-theme="dark"] .ir-sidebar-card, html[data-skin="galaxy"][data-bs-theme="dark"] .search-card, html[data-skin="galaxy"][data-bs-theme="dark"] .result-card, html[data-skin="galaxy"][data-bs-theme="dark"] .summary-card, html[data-skin="galaxy"][data-bs-theme="dark"] .stat-card, html[data-skin="galaxy"][data-bs-theme="dark"] .stat-item, html[data-skin="galaxy"][data-bs-theme="dark"] .perm-category-card, html[data-skin="galaxy"][data-bs-theme="dark"] .scheduler-wrapper, html[data-skin="galaxy"][data-bs-theme="dark"] .control-panel, html[data-skin="galaxy"][data-bs-theme="dark"] .shifts-legend-card { background-color: rgba(255, 255, 255, 0.05) !important; border-color: rgba(229, 243, 255, 0.12) !important; border-style: dashed !important; border-width: 1px !important; color: #e2e8f0; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important; } /* Card bodies / sub-bodies should be transparent so the parent card's translucent surface shows through (and the galaxy bg behind that). */ html[data-skin="galaxy"][data-bs-theme="dark"] .card-body, html[data-skin="galaxy"][data-bs-theme="dark"] .corp-card .card-body, html[data-skin="galaxy"][data-bs-theme="dark"] .filter-card .card-body, html[data-skin="galaxy"][data-bs-theme="dark"] .section-body, html[data-skin="galaxy"][data-bs-theme="dark"] .sidebar-body, html[data-skin="galaxy"][data-bs-theme="dark"] .client-tasks-body, html[data-skin="galaxy"][data-bs-theme="dark"] .search-tab-content, html[data-skin="galaxy"][data-bs-theme="dark"] .search-tabs-card .search-tab-content { background: transparent !important; color: #e2e8f0; } /* Card-headers/footers keep whatever the page sets — most are gradients (page-header, list-header, panel-header, themed-header, section-header-*) that read fine on the galaxy backdrop. The few plain light-gray ones are handled by per-page dark-mode rules already; we don't blanket-override here because that would defeat the gradient headers. */ /* Plain light-gray card-footers without gradient — make translucent on Galaxy so they don't bleach against the starfield. */ html[data-skin="galaxy"][data-bs-theme="dark"] .card-footer:not([style*="gradient"]), html[data-skin="galaxy"][data-bs-theme="dark"] .corp-card .card-footer:not([style*="gradient"]) { background: rgba(255, 255, 255, 0.03) !important; border-top-color: rgba(229, 243, 255, 0.08) !important; } /* Section-header bottom dividers: tone to galaxy border colour */ html[data-skin="galaxy"][data-bs-theme="dark"] :is(.section-header, .qd-section, .preview-item, .audit-row, .timeline-entry, .user-row, .perm-item, .form-section) { border-color: rgba(229, 243, 255, 0.08) !important; } /* ---- Form controls ---- */ html[data-skin="galaxy"][data-bs-theme="dark"] :is(.form-control, .form-select), html[data-skin="galaxy"][data-bs-theme="dark"] .corp-card :is(.form-control, .form-select), html[data-skin="galaxy"][data-bs-theme="dark"] .filter-card :is(.form-control, .form-select), html[data-skin="galaxy"][data-bs-theme="dark"] .section-body :is(.form-control, .form-select), html[data-skin="galaxy"][data-bs-theme="dark"] .sidebar-body :is(.form-control, .form-select), html[data-skin="galaxy"][data-bs-theme="dark"] .search-tabs-card :is(.form-control, .form-select), html[data-skin="galaxy"][data-bs-theme="dark"] .filter-bar :is(.form-control, .form-select), html[data-skin="galaxy"][data-bs-theme="dark"] .control-panel :is(.form-control, .form-select), html[data-skin="galaxy"][data-bs-theme="dark"] .role-name-input, html[data-skin="galaxy"][data-bs-theme="dark"] .perm-search-box input, html[data-skin="galaxy"][data-bs-theme="dark"] .search-wrap input, html[data-skin="galaxy"][data-bs-theme="dark"] .md-time-trigger, html[data-skin="galaxy"][data-bs-theme="dark"] #dateRangeInput, html[data-skin="galaxy"][data-bs-theme="dark"] #messageDateRange, html[data-skin="galaxy"][data-bs-theme="dark"] .date-picker-single { background-color: rgba(255, 255, 255, 0.05) !important; color: #e2e8f0 !important; border-color: rgba(229, 243, 255, 0.1) !important; } html[data-skin="galaxy"][data-bs-theme="dark"] .form-control::placeholder { color: #7e8aa3; } html[data-skin="galaxy"][data-bs-theme="dark"] :is(.form-control, .form-select):focus { border-color: var(--ins-primary, #6575f5) !important; box-shadow: 0 0 0 3px rgba(101, 117, 245, 0.18) !important; background-color: rgba(255, 255, 255, 0.07) !important; } /* Readonly inputs that page-level CSS forced to .bg-light */ html[data-skin="galaxy"][data-bs-theme="dark"] .form-control.bg-light, html[data-skin="galaxy"][data-bs-theme="dark"] input.form-control[readonly][style*="#f8f9fa"] { background-color: rgba(255, 255, 255, 0.04) !important; color: #cbd5e1 !important; border-color: rgba(229, 243, 255, 0.1) !important; } /* ---- Form labels ---- */ html[data-skin="galaxy"][data-bs-theme="dark"] .form-label { color: #cbd5e1; } /* ---- Dropdowns / chosen / picker popups ---- */ html[data-skin="galaxy"][data-bs-theme="dark"] .dropdown-menu, html[data-skin="galaxy"][data-bs-theme="dark"] .chosen-container .chosen-drop, html[data-skin="galaxy"][data-bs-theme="dark"] .daterangepicker { background-color: #1a1c2e !important; border-color: rgba(229, 243, 255, 0.1) !important; color: #e2e8f0; } html[data-skin="galaxy"][data-bs-theme="dark"] .chosen-container-single .chosen-single, html[data-skin="galaxy"][data-bs-theme="dark"] .chosen-container-multi .chosen-choices { background-color: rgba(255, 255, 255, 0.05) !important; border-color: rgba(229, 243, 255, 0.1) !important; color: #e2e8f0 !important; } /* ---- Tables (outside modals) ---- */ html[data-skin="galaxy"][data-bs-theme="dark"] .table:not(.modal-content .table) { --bs-table-bg: transparent; --bs-table-color: #e2e8f0; --bs-table-border-color: rgba(229, 243, 255, 0.08); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(101, 117, 245, 0.12); --bs-table-hover-color: #f1f5f9; } /* corp-table thead has its own gradient — leave it; just ensure body cells read as light text. */ html[data-skin="galaxy"][data-bs-theme="dark"] .corp-table tbody td { color: #e2e8f0; border-color: rgba(229, 243, 255, 0.08) !important; } /* ---- Alerts / badges keep their hue, sit on translucent surfaces ---- */ html[data-skin="galaxy"][data-bs-theme="dark"] .alert { background-color: rgba(255, 255, 255, 0.04); border-color: rgba(229, 243, 255, 0.12); } html[data-skin="galaxy"][data-bs-theme="dark"] .alert-success { background-color: rgba(54, 220, 184, 0.18); color: #a7f3d0; border-color: rgba(54, 220, 184, 0.35); } html[data-skin="galaxy"][data-bs-theme="dark"] .alert-danger { background-color: rgba(242, 85, 131, 0.18); color: #fecdd3; border-color: rgba(242, 85, 131, 0.35); } html[data-skin="galaxy"][data-bs-theme="dark"] .alert-warning { background-color: rgba(242, 173, 69, 0.18); color: #fde68a; border-color: rgba(242, 173, 69, 0.35); } html[data-skin="galaxy"][data-bs-theme="dark"] .alert-info { background-color: rgba(71, 198, 242, 0.18); color: #cffafe; border-color: rgba(71, 198, 242, 0.35); } /* ---- Pagination ---- */ html[data-skin="galaxy"][data-bs-theme="dark"] .pagination .page-link { background: transparent; border-color: rgba(229, 243, 255, 0.1); color: #cbd5e1; } html[data-skin="galaxy"][data-bs-theme="dark"] .pagination .page-item.active .page-link { background: rgba(101, 117, 245, 0.3); border-color: var(--ins-primary, #6575f5); color: #fff; } html[data-skin="galaxy"][data-bs-theme="dark"] .pagination .page-link:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(229, 243, 255, 0.18); color: #fff; } /* ---- Scrollable / list elements ---- */ html[data-skin="galaxy"][data-bs-theme="dark"] .list-group-item { background: transparent !important; border-color: rgba(229, 243, 255, 0.08) !important; color: #e2e8f0; } /* ---- Close button on dark surfaces ---- */ html[data-skin="galaxy"][data-bs-theme="dark"] .alert .btn-close, html[data-skin="galaxy"][data-bs-theme="dark"] .offcanvas .btn-close { filter: invert(1) grayscale(100%) brightness(1.6); } /* ---- Topbar (Inspinia) ---- */ html[data-skin="galaxy"][data-bs-theme="dark"] .app-topbar, html[data-skin="galaxy"][data-bs-theme="dark"] .app-topbar.topbar-active { background-color: rgba(16, 18, 24, 0.4) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(229, 243, 255, 0.06); } /* ---- Sidenav (Inspinia) ---- */ html[data-skin="galaxy"][data-bs-theme="dark"] .sidenav-menu, html[data-skin="galaxy"][data-bs-theme="dark"] .app-sidenav { background-color: #1a1c2e !important; border-color: rgba(229, 243, 255, 0.05); } /* ---- Custom dialogs that draw their own white panel (e.g., cpc-* on Client/Create) — leave them light by design (intentional, like modals). */ /* ---- Card border-radius — Galaxy uses 2px ---- But for cards whose page-level CSS already sets a specific radius (8px, 10px, 12px) we keep the page intent in light mode. In dark + Galaxy, snap to 2px. */ html[data-skin="galaxy"][data-bs-theme="dark"] :is(.card, .corp-card, .section-card, .sidebar-card, .filter-card, .quick-details-card, .ir-details-card, .ir-sidebar-card, .search-card, .result-card, .summary-card, .stat-card, .stat-item, .perm-category-card) { border-radius: 2px !important; } /* ---- Modals stay light per project convention ---- Defensive: Galaxy must not bleed translucent dashed borders into modal-content. */ html[data-skin="galaxy"][data-bs-theme="dark"] .modal-content, html[data-skin="galaxy"][data-bs-theme="dark"] .modal-content .card, html[data-skin="galaxy"][data-bs-theme="dark"] .modal-content .corp-card { border-style: solid !important; } /* ---- Page surfaces that hardcoded their own dark background ---- Many per-page dark overrides set `.card-body { background: #1e1f27 }`. With our `.card-body { background: transparent !important }` above, those cards become correctly translucent and the galaxy bg shows. */