/* ----------------------------------------------- MyGuide Connect — Light / Dark Theme Switcher Light is default. Add class .theme-dark to body to activate dark mode. Brand primary: #CBA86B (gold) ----------------------------------------------- */ /* Pre-Angular dark class applied to to prevent flash */ html.theme-dark-pending body.mgConnect { background-color: #181b22; color: #e2e6ea; } /* ---- CSS Variables — Light (default) ---- */ body.mgConnect { --mg-body-bg: #f8f9fa; --mg-card-bg: #ffffff; --mg-card-header-bg: #f1f3f5; --mg-card-header-fg: #343a40; --mg-text: #343a40; --mg-text-muted: #6c757d; --mg-border: #e9ecef; --mg-input-bg: #ffffff; --mg-input-border: #dee2e6; --mg-roundedBg: #f1f3f5; --mg-roundedBg-text: #343a40; --mg-table-stripe: #f8f9fa; --mg-table-hover: #f1f3f5; --mg-brand: #e91d62; --mg-brand-rgb: 233, 29, 98; /* header & sidebar stay dark in both themes — brand identity */ --mg-header-bg: #363c48; --mg-header-fg: #ffffff; --mg-sidebar-bg: #363c48; --mg-sidebar-border: rgba(255,255,255,0.12); /* breadcrumb / section-title bar — light in default theme */ --mg-breadcrumb-bg: #ffffff; --mg-breadcrumb-fg: #343a40; /* modal */ --mg-modal-bg: #ffffff; --mg-modal-header-bg:#f1f3f5; background-color: var(--mg-body-bg); color: var(--mg-text); transition: background-color 0.25s ease, color 0.25s ease; } /* ---- CSS Variables — Dark ---- */ body.mgConnect.theme-dark { --mg-body-bg: #181b22; --mg-card-bg: #2d3142; --mg-card-header-bg: #252a35; --mg-card-header-fg: #e9ecef; --mg-text: #e2e6ea; --mg-text-muted: #8d99a6; --mg-border: #3d4358; --mg-input-bg: #363c52; --mg-input-border: #4a5068; --mg-roundedBg: #363c52; --mg-roundedBg-text: #e2e6ea; --mg-table-stripe: #323749; --mg-table-hover: #383d55; --mg-header-bg: #2d3142; --mg-sidebar-bg: #2d3142; --mg-sidebar-border: rgba(255,255,255,0.12); --mg-breadcrumb-bg: #252a35; --mg-breadcrumb-fg: #e9ecef; --mg-modal-bg: #2d3142; --mg-modal-header-bg:#252a35; } /* ---- Apply variables ---- */ /* Main content area */ body.mgConnect #main { background-color: var(--mg-body-bg); color: var(--mg-text); } body.mgConnect #main #dashboard, body.mgConnect #main #configuration, body.mgConnect #main #bookings, body.mgConnect #main #bookings-table { background-color: var(--mg-body-bg); } /* General text */ body.mgConnect p, body.mgConnect h1, body.mgConnect h2, body.mgConnect h3, body.mgConnect h4, body.mgConnect h5, body.mgConnect h6, body.mgConnect label, body.mgConnect strong { color: var(--mg-text); } /* Header entity title inherits header foreground, not body text */ body.mgConnect header .header-entity-title strong, body.mgConnect header .header-entity-title small { color: inherit; } body.mgConnect .text-muted { color: var(--mg-text-muted) !important; } body.mgConnect a { color: var(--mg-brand); } body.mgConnect a:hover { color: var(--mg-brand); filter: brightness(0.85); } /* Cards */ body.mgConnect .card { background-color: var(--mg-card-bg); border-color: var(--mg-border); color: var(--mg-text); } body.mgConnect .card-header { background-color: var(--mg-card-header-bg); color: var(--mg-card-header-fg); border-bottom-color: var(--mg-border); } body.mgConnect .card-footer { background-color: var(--mg-card-bg); border-top-color: var(--mg-border); color: var(--mg-text-muted); } /* Login box — override card theming so the semi-transparent dark bg shows through */ body.mgConnect #login .card, body.mgConnect #login .card-header, body.mgConnect #login .card-footer { background-color: rgba(0, 0, 0, 0.5) !important; border: none !important; box-shadow: none !important; } /* text-bg-light Bootstrap utility used in package editor cards */ body.mgConnect .text-bg-light { background-color: var(--mg-card-bg) !important; color: var(--mg-text) !important; } /* roundedBg (dashboard widgets) */ body.mgConnect .roundedBg { background: var(--mg-roundedBg); color: var(--mg-roundedBg-text); } /* Header (dark in both themes, but uses variable for easy override) */ body.mgConnect header { background: var(--mg-header-bg); color: var(--mg-header-fg); } body.mgConnect header a, body.mgConnect header button { color: var(--mg-header-fg); } /* Sidebar */ body.mgConnect #sidebar .offcanvas-header { background-color: var(--mg-header-bg); } body.mgConnect #sidebar .offcanvas-body { background-color: var(--mg-sidebar-bg); } body.mgConnect #sidebar .offcanvas-body ul li a { border-bottom-color: var(--mg-sidebar-border); } body.mgConnect #sidebar .offcanvas-footer { background: var(--mg-sidebar-bg); } /* Breadcrumb config bar — sticky under header, themed background */ body.mgConnect .breadcrumbsConfig, body.mgConnect #main #configuration .breadcrumbsConfig, body.mgConnect #main #dashboard .breadcrumbsConfig, body.mgConnect #main #bookings .breadcrumbsConfig, body.mgConnect #main #account .breadcrumbsConfig { background: var(--mg-breadcrumb-bg); color: var(--mg-breadcrumb-fg); } body.mgConnect #main #configuration .breadcrumbsConfig h3, body.mgConnect #main #configuration .breadcrumbsConfig h4, body.mgConnect .breadcrumbsConfig h3, body.mgConnect .breadcrumbsConfig h4 { color: var(--mg-breadcrumb-fg); } /* nav-link colors in content area */ body.mgConnect #main #configuration .nav-link, body.mgConnect #main #configuration .flex-column li a { color: var(--mg-text); } /* Tables */ body.mgConnect .table { color: var(--mg-text); border-color: var(--mg-border); --bs-table-color: var(--mg-text); --bs-table-bg: var(--mg-card-bg); --bs-table-border-color: var(--mg-border); --bs-table-striped-bg: var(--mg-table-stripe); --bs-table-striped-color: var(--mg-text); --bs-table-hover-bg: var(--mg-table-hover); --bs-table-hover-color: var(--mg-text); } body.mgConnect .table thead.table-light th { background-color: var(--mg-table-stripe); color: var(--mg-text); border-color: var(--mg-border); } /* Form controls */ body.mgConnect .form-control, body.mgConnect .form-select { background-color: var(--mg-input-bg) !important; border-color: var(--mg-input-border) !important; color: var(--mg-text) !important; } body.mgConnect .form-control::placeholder { color: var(--mg-text-muted); } body.mgConnect .input-group-text { background-color: var(--mg-table-stripe); border-color: var(--mg-input-border); color: var(--mg-text); } /* Dropdown menus */ body.mgConnect .dropdown-menu { background-color: var(--mg-card-bg); border-color: var(--mg-border); } body.mgConnect .dropdown-item { color: var(--mg-text); } body.mgConnect .dropdown-item:hover, body.mgConnect .dropdown-item:focus { background-color: var(--mg-table-hover); color: var(--mg-text); } /* Modals */ body.mgConnect .modal-content { background-color: var(--mg-modal-bg); border-color: var(--mg-border); color: var(--mg-text); } body.mgConnect .modal-header { background-color: var(--mg-modal-header-bg); border-bottom-color: var(--mg-border); color: var(--mg-card-header-fg); } body.mgConnect .modal-footer { background-color: var(--mg-modal-bg); border-top-color: var(--mg-border); } /* Alerts */ body.mgConnect .alert-info { background-color: rgba(var(--mg-brand-rgb), 0.12); border-color: rgba(var(--mg-brand-rgb), 0.3); color: var(--mg-text); } /* Bootstrap bg utilities used in cards */ body.mgConnect.theme-dark .bg-light { background-color: var(--mg-table-stripe) !important; color: var(--mg-text) !important; } body.mgConnect.theme-dark .bg-white { background-color: var(--mg-card-bg) !important; } /* Accordion */ body.mgConnect.theme-dark .accordion-item { background-color: var(--mg-card-bg); border-color: var(--mg-border); color: var(--mg-text); } body.mgConnect.theme-dark .accordion-button { background-color: var(--mg-card-header-bg); color: var(--mg-card-header-fg); } /* Bookings table action buttons — light theme */ body.mgConnect #main #bookings .btn-outline-primary, body.mgConnect #main #bookings-table .btn-outline-primary { font-size: 12px; color: #212529; background-color: #ffffff; border-color: #ffffff; } /* Bookings table action buttons — dark theme */ body.mgConnect.theme-dark #main #bookings .btn-outline-primary, body.mgConnect.theme-dark #main #bookings-table .btn-outline-primary { color: #e2e6ea; background-color: #2d3142; border-color: #2d3142; } /* Brand accent */ body.mgConnect .btn-pink { background-color: #e91d62; border-color: #e91d62; color: #ffffff; } body.mgConnect .pink, body.mgConnect .pink-color { color: #e91d62 !important; } /* ----------------------------------------------- Persistent sidebar on large screens (lg+) Bootstrap offcanvas is overridden to always show. On small screens the hamburger + offcanvas behaviour is preserved unchanged. ----------------------------------------------- */ @media (min-width: 992px) { /* Pin the sidebar full height */ body.mgConnect #sidebar.offcanvas { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 250px !important; height: 100vh !important; transform: none !important; visibility: visible !important; z-index: 1029 !important; /* just below Bootstrap fixed-top (1030) */ display: flex !important; flex-direction: column; border-right: none !important; } /* Hide close button — sidebar is always open on desktop */ body.mgConnect #sidebar .btn-close { display: none !important; } /* Sidebar header matches main header height — same line */ body.mgConnect #sidebar .offcanvas-header { height: 60px; min-height: 60px; padding-top: 0; padding-bottom: 0; flex-shrink: 0; align-items: center; } /* Remove backdrop overlay on desktop */ body.mgConnect .offcanvas-backdrop { display: none !important; } /* Shift main content right — no overlap */ body.mgConnect #main { margin-left: 250px; } /* Shift the fixed header right so it sits beside the sidebar */ body.mgConnect header.fixed-top { left: 250px !important; width: calc(100% - 250px) !important; } /* Hide sidebar hamburger in the header on desktop */ body.mgConnect header .navbar-toggler[data-bs-target="#sidebar"] { display: none !important; } } /* Theme toggle button in header */ body.mgConnect .btn-theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #ffffff; border-radius: 20px; padding: 3px 10px; font-size: 13px; line-height: 1.6; cursor: pointer; transition: border-color 0.2s, background 0.2s; } body.mgConnect .btn-theme-toggle:hover { border-color: var(--mg-brand); background: rgba(var(--mg-brand-rgb), 0.15); } body.mgConnect .btn-theme-toggle i { font-size: 13px; }