* menyusut ke lebar ISINYA — konten hanya memakai sekitar dua pertiga layar, * dengan sisanya kosong. Tidak ada galat, tidak ada luapan; hanya terlihat * kalau benar-benar dilihat. */ body.shell-mitra .shell { flex-direction: column; align-items: stretch; } /* -- bilah atas ringkas ------------------------------------------------- */ body.shell-mitra .topbar { padding: 0 .5rem 0 .35rem; gap: .3rem; } body.shell-mitra .topbar .brand span { display: none; } body.shell-mitra .topbar .badge { display: none; } body.shell-mitra .topbar #btn-logout { display: none; } body.shell-mitra .appbar-back { display: inline-flex; } body.shell-mitra .appbar-title { display: block; flex: 1; min-width: 0; font-size: 1rem; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Logo disembunyikan saat ada tombol kembali — keduanya bersaing memperebutkan sudut kiri, dan pada halaman dalam yang dibutuhkan adalah jalan keluar. */ body.shell-mitra .topbar:has(.appbar-back) .brand { display: none; } /* -- tabel menjadi kartu ------------------------------------------------ */ /* * Penanda paling jelas bahwa sesuatu "situs web, bukan aplikasi" adalah * tabel yang harus digulir ke samping. Judul kolomnya dipindahkan ke tiap * sel lewat `data-l` (lihat labeliSel() di app.js), sehingga yang * tidak lagi berarti dapat disembunyikan. * * `thead` disembunyikan dengan teknik sr-only, BUKAN `display:none`: * pembaca layar tetap membacakan keterkaitan sel dengan judul kolomnya. */ body.shell-mitra .table-wrap { overflow-x: visible; margin: 0; padding: 0; } body.shell-mitra .table-wrap table { border-collapse: separate; } body.shell-mitra .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } body.shell-mitra .table-wrap table, body.shell-mitra .table-wrap tbody, body.shell-mitra .table-wrap tr, body.shell-mitra .table-wrap td { display: block; width: 100%; } body.shell-mitra .table-wrap tr { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: .55rem .85rem; margin-bottom: .65rem; } body.shell-mitra .table-wrap tr:last-child { margin-bottom: 0; } body.shell-mitra .table-wrap td { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .3rem 0; border: 0; text-align: right; } body.shell-mitra .table-wrap td::before { content: attr(data-l); flex: 0 0 auto; text-align: left; color: var(--muted); font-size: .74rem; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; } /* Sel tanpa label (colspan, atau kolom tanpa judul) memakai lebar penuh. */ body.shell-mitra .table-wrap td:not([data-l]) { justify-content: flex-start; text-align: left; } body.shell-mitra .table-wrap td:not([data-l])::before { content: none; } body.shell-mitra .table-wrap td.num { text-align: right; } /* -- modal menjadi lembar bawah ---------------------------------------- */ /* * Kartu melayang di tengah layar adalah pola desktop. Pada ponsel, lembar * yang naik dari bawah berada di jangkauan jempol dan menutup dengan gerak * yang sama seperti aplikasi asli. */ body.shell-mitra .modal-wrap { align-items: flex-end; padding: 0; } body.shell-mitra .modal-card { max-width: none; width: 100%; max-height: 88dvh; border-radius: 22px 22px 0 0; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); animation: sheet-naik var(--t) var(--ease-out); } /* Pegangan seret — penanda visual bahwa ini lembar, bukan halaman baru. */ body.shell-mitra .modal-card::before { content: ''; display: block; width: 38px; height: 4px; margin: -.2rem auto .9rem; background: var(--border-strong); border-radius: 99px; } } @keyframes sheet-naik { from { transform: translateY(100%); } to { transform: translateY(0); } } /* -- modal: gaya dipindahkan dari style sebaris di openModal() ------------- */ /* * Nilainya sama persis dengan yang dulu ditulis `wrap.style.cssText`, jadi * tampilan desktop tidak berubah sedikit pun. Yang berubah adalah ia kini * DAPAT ditimpa media query — gaya sebaris tidak bisa. */ .modal-wrap { position: fixed; inset: 0; z-index: 200; background: rgb(19 28 38 / .45); display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-card { max-width: 660px; width: 100%; max-height: 85vh; overflow: auto; margin: 0; box-shadow: var(--e5); border-color: transparent; } /* -- isi lembar "Lainnya" -------------------------------------------------- */ .sheet-akun { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; margin-bottom: .9rem; background: var(--surface-2); border-radius: 14px; color: var(--text); text-decoration: none; } .sheet-akun strong { display: block; font-weight: 500; } .sheet-chev { margin-left: auto; color: var(--muted); font-size: .8rem; } .sheet-nav { display: flex; flex-direction: column; } .sheet-group { padding: 1rem .3rem .35rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .sheet-link { display: flex; align-items: center; gap: .85rem; /* 48px: batas bawah target sentuh yang nyaman. Daftar menu adalah tempat paling sering salah ketuk kalau barisnya dirapatkan. */ min-height: 48px; padding: .1rem .3rem; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); } .sheet-link:last-child { border-bottom: 0; } .sheet-link > i:first-child { width: 1.3rem; text-align: center; color: var(--muted); } .sheet-link.active { color: var(--brand-on-bg); font-weight: 500; } .sheet-link.active > i:first-child { color: var(--brand-on-bg); } .sheet-link:active { background: var(--surface-2); } .sheet-keluar { width: 100%; margin-top: 1.1rem; justify-content: center; } /* ========================================================================== Poles sentuh — berlaku untuk SEMUA peran, termasuk admin ========================================================================== */ /* * `100dvh` menggantikan `100vh` pada tinggi kerangka. Di peramban ponsel, * `100vh` dihitung terhadap viewport TANPA bilah alamat, sehingga elemen * setinggi layar selalu sedikit terpotong sampai penggunanya menggulir. */ .shell { min-height: calc(100dvh - var(--topbar-h)); } @media (max-width: 860px) { /* Menahan pull-to-refresh yang tak disengaja saat menggulir daftar panjang, dan mencegah gulir di dalam lembar merambat ke halaman di belakangnya. */ body { overscroll-behavior-y: contain; } .drawer-body, .modal-card { overscroll-behavior: contain; } /* * Tekan-lama pada elemen antarmuka memunculkan menu "Salin/Bagikan" bawaan * peramban — gerak yang di aplikasi asli tidak pernah terjadi. Dibatasi pada * kendali saja; teks konten tetap bisa disalin, karena nomor pesanan dan * nomor rekening memang perlu disalin. */ .tabbar, .topbar, .sidebar, .shopbar, .btn, button, .badge, .tab { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Target sentuh minimum. Tombol ikon di bilah atas paling sering meleset. */ .topbar .btn.icon, .topbar button.icon, .appbar-back { min-width: 42px; min-height: 42px; } } /* * Peramban ponsel memperbesar halaman secara otomatis bila ukuran huruf input * di bawah 16px saat difokuskan — dan tidak pernah mengembalikannya. Satu * ketukan pada kolom pencarian cukup untuk membuat seluruh tata letak tergeser * sampai halaman dimuat ulang. */ @media (max-width: 860px) { input, select, textarea { font-size: 16px; } } /* ========================================================================== Gerak yang dikurangi & cetak ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js [data-reveal] { opacity: 1; transform: none; } .product-card:hover { transform: none; } .product-quick { opacity: 1; transform: none; } /* * Animasi bernama harus dimatikan lewat `animation: none`, bukan cukup * dengan `animation-duration: .001ms` di atas. Durasi nol tetap menjalankan * keyframe-nya, dan keyframe yang berawal dari `opacity: 0` sempat * menyembunyikan elemennya satu frame — pada halaman dengan banyak kartu, * hasilnya kedipan yang justru mengganggu pengguna yang meminta lebih * sedikit gerak. */ .js main > .page-head, .js main > .card, .js main > .grid, .js main > .stat-grid, .js .stat .value { animation: none; opacity: 1; transform: none; } .card:hover, .stat:hover { transform: none; } .stat::after { display: none; } .product-card:hover .product-media img { transform: none; } .sidebar a::before { transition: none; } .shop-foot a:hover, .doc-body a:hover { background-size: 100% 1px; } } @media print { .topbar, .sidebar, .shopbar, .drawer, .drawer-scrim, .fab, .toast-wrap, .pwa-banner, .tabbar, #push-ask-banner, button, .btn, .no-print { display: none !important; } body { background: #fff; } /* Ruang bawah untuk tab bar tidak berlaku di kertas — tanpa penimpaan ini, setiap halaman cetak berakhir dengan satu blok kosong setinggi tab bar. */ main, .shop-body, .shop-foot { padding: 0; } .card, .stat { box-shadow: none; border-color: #ccc; break-inside: avoid; } /* -------------------------------------------------- dokumen pengiriman Latar dan garis pada label/surat jalan bukan hiasan: kepala tabel abu-abu dan garis tebal pemisah adalah penanda yang dibaca petugas sekilas. Tanpa print-color-adjust, peramban membuang seluruh latar demi menghemat tinta dan dokumennya kehilangan strukturnya. */ .cetak-body { background: #fff; } .cetak-body * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } #lembar { padding: 0; } .ship-label, .surat { border: 0 !important; box-shadow: none !important; margin: 0 auto; } /* Mode termal: satu label memenuhi satu halaman 100×150 mm tanpa margin. */ .cetak-body[data-ukuran="termal"] .label-wrap { display: block; } .cetak-body[data-ukuran="termal"] .ship-label { width: 100mm; height: 150mm; break-after: page; page-break-after: always; } .cetak-body[data-ukuran="termal"] .ship-label:last-child { break-after: auto; page-break-after: auto; } /* Mode A4: dua label per halaman, tetap 100×150 mm supaya bisa digunting dan ditempel tanpa penyesuaian. */ .cetak-body[data-ukuran="a4"] .label-wrap { display: grid; grid-template-columns: repeat(2, 100mm); justify-content: center; gap: 4mm; } .surat { width: auto; min-height: 0; padding: 0; } }