/* ============================================================ 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; } /* ============================================================ 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; } /* ============================================================ SKALA FUNGSI AREA KERJA Ukuran dibedakan sesuai fungsi: judul halaman, KPI, judul bagian, tabel, form, tombol, dan badge. ============================================================ */ .content { font-size: 0.875rem; } .content .page-title { font-size: 1.5rem; line-height: 1.2; letter-spacing: 0; } @media (min-width: 1200px) { .content .page-title { font-size: 1.625rem; } } .content .page-subtitle { font-size: 0.8rem; line-height: 1.45; } .content .section-title { font-size: 0.95rem; line-height: 1.2; } .content .panel-title { font-size: 0.9rem; line-height: 1.2; } .content .status-title { font-size: 1.125rem; line-height: 1.2; } .content .kpi-value { font-size: 1.125rem; line-height: 1.15; } .content .kpi-value-lg { font-size: 1.35rem; line-height: 1.15; } .content .summary-value { font-size: 1rem; line-height: 1.2; } .content .summary-value-primary { font-size: 1.125rem; } .content .metric-value { font-size: 0.875rem; line-height: 1.2; } .content .card-header, .content .card-footer { font-size: 0.8rem; } .content .table { font-size: 0.8rem; } .content .table > :not(caption) > * > * { padding: 0.45rem 0.625rem; } .content .table > thead > tr > th { padding-top: 0.55rem; padding-bottom: 0.55rem; } .content .table > thead > tr > th:first-child, .content .table > tbody > tr > td:first-child { padding-left: 0.75rem; } .content .table > thead > tr > th:last-child, .content .table > tbody > tr > td:last-child { padding-right: 0.75rem; } .content .table-ongkir-compact { font-size: 0.76rem; } .content .table-ongkir-compact > :not(caption) > * > * { padding: 0.32rem 0.5rem; } .content .table-ongkir-compact > thead > tr > th { padding-top: 0.4rem; padding-bottom: 0.4rem; } .content .table-nowrap > :not(caption) > * > * { white-space: nowrap; } .content .table-nowrap > :not(caption) > * > * * { white-space: nowrap; } .content .table-nowrap > thead > tr > th, .content .table-nowrap > tbody > tr > td { vertical-align: middle; } .content .table-nowrap .text-wrap, .content .table-nowrap .text-wrap * { white-space: normal !important; } .content .table-action-cell { min-width: 7rem; white-space: nowrap; } .content .table-action-buttons { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 0.25rem; white-space: nowrap; } .content .table-action-buttons .btn-icon { flex: 0 0 auto; } .content .table-ongkir-compact .btn-icon { width: 1.7rem; height: 1.7rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .content .summary-kpi-total { min-width: 13.5rem; } .content .summary-kpi-total .summary-value { overflow: visible; } .content .form-label.fs-9 { font-size: 0.64rem !important; } .content .btn, .content .form-control, .content .form-select, .content .dropdown-menu, .content .pagination, .content .page-link { font-size: 0.8rem; } .content .badge { font-size: 0.64rem; } /* Kunci ukuran ikon setelah feather.replace() mengubah span menjadi svg. */ .content svg.feather, .content [data-feather] { width: 16px; height: 16px; stroke-width: 2; } .content .btn svg.feather, .content .btn [data-feather], .content .nav-link svg.feather, .content .nav-link [data-feather], .content .table svg.feather, .content .table [data-feather], .content .card-header svg.feather, .content .card-header [data-feather] { width: 14px; height: 14px; } .content .uil, .content .fa, .content .fas, .content .far, .content .fab { font-size: 0.875rem; line-height: 1; } /* Input angka operasional tetap memakai tinggi Phoenix, tanpa kontrol spinner browser. */ .no-spinner::-webkit-outer-spin-button, .no-spinner::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .no-spinner { appearance: textfield; -moz-appearance: textfield; } /* Hover dropdown horizontal ditangani via JS (Bootstrap Dropdown API) di Layout.jsx, sehingga caret & posisi Popper sama persis dgn Phoenix. */