/* ============================================================ FunnelPro (React) — override anti-flicker & mode navigasi Mengontrol tampil/sembunyi navbar berdasar atribut pada : - data-bs-theme="light|dark" (ditangani theme.min.css Phoenix) - data-navigation-type="vertical|horizontal" - html.navbar-vertical-collapsed (sidebar ikon-saja) ============================================================ */ /* --- MODE VERTIKAL (default): sembunyikan top horizontal bar --- */ #navbarTop { display: none; } /* --- MODE HORIZONTAL: sembunyikan sidebar + topbar default, tampilkan navbarTop --- */ [data-navigation-type="horizontal"] .navbar-vertical, [data-navigation-type="horizontal"] #navbarDefault { display: none !important; } [data-navigation-type="horizontal"] #navbarTop { display: flex !important; } [data-navigation-type="horizontal"] .content { margin-left: 0 !important; } /* --- Pesan ruang sidebar sejak awal agar konten tidak melompat --- */ @media (min-width: 992px) { [data-navigation-type="vertical"] .content { margin-left: 15.875rem; } html.navbar-vertical-collapsed[data-navigation-type="vertical"] .content { margin-left: 4rem; } } /* --- Anti-flash: sembunyikan body sampai React mount --- */ body.fp-booting { visibility: hidden; } html.fp-ready .content { transition: margin-left .2s ease; } /* --- tombol kontrol topbar --- */ .navbar-nav-icons .btn.nav-link { border: 0; background: transparent; } /* --- brand Praxio Monitor --- */ .praxio-brand { min-width: 0; line-height: 1; } .praxio-brand-mark { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; } .praxio-brand-copy { min-width: 0; } .praxio-brand .logo-text { color: var(--phoenix-emphasis-color); font-weight: 800; line-height: 1.05; letter-spacing: 0; white-space: nowrap; } .praxio-brand-tagline { display: block; margin-top: .15rem; color: var(--phoenix-tertiary-color); font-size: .625rem; font-weight: 800; line-height: 1; letter-spacing: .045rem; text-transform: uppercase; white-space: nowrap; } .navbar-vertical-collapsed .navbar-logo .praxio-brand-copy { display: none; } @media (max-width: 575.98px) { .praxio-brand-tagline { display: none; } .praxio-brand-mark { width: 2rem; height: 2rem; } } /* ============================================================ UKURAN IKON — feather.replace() default 24px, kita kecilkan agar sesuai Phoenix: 16px di menu, 20px di kontrol topbar. ============================================================ */ .nav-link-icon svg, .nav-link-icon [data-feather] { width: 16px; height: 16px; } .navbar-nav-icons svg, .navbar-nav-icons [data-feather] { width: 20px; height: 20px; } .dropdown-profile [data-feather], .dropdown-profile svg { width: 16px; height: 16px; } /* ikon di dalam item dropdown (submenu) */ .dropdown-menu .dropdown-item svg, .dropdown-menu .dropdown-item [data-feather], .dropdown-item-wrapper svg, .dropdown-item-wrapper [data-feather] { width: 16px; height: 16px; } /* ikon Unicons (toggle tema/navigasi) — samakan proporsi */ .navbar-nav-icons .uil { font-size: 20px; line-height: 1; } /* Hover dropdown horizontal ditangani via JS (Bootstrap Dropdown API) di Layout.jsx, sehingga caret & posisi Popper sama persis dgn Phoenix. */