/* ========================================================================= Mod aplikasi — gaya yang HANYA berkuat kuasa apabila Tafaqquh dijalankan sebagai PWA terpasang. DUA cangkuk, sengaja: html.pwa-standalone ditetapkan oleh cebisan skrip sebaris dalam sebelum lukisan pertama, dan disahkan semula oleh assets/pwa.js. Ini cangkuk UTAMA kerana ia satu-satunya yang meliputi iOS "Add to Home Screen", yang tidak melaporkan display-mode pada versi lama. @media (display-mode: standalone) jaring keselamatan tanpa JavaScript. Ia menduakan hanya peraturan yang paling penting (sembunyi kaki dan bar atas laman web), supaya aplikasi terpasang tidak kelihatan seperti laman web penuh jika skrip gagal dimuat. Pelayar biasa TIDAK menerima satu pun daripada peraturan di bawah — laman web mudah alih kekal betul-betul seperti sedia ada. ========================================================================= */ /* ---- Token bar bawah ---- Diisytiharkan pada :root supaya halaman boleh merujuknya untuk pelapik kandungan tanpa mengulang nombor yang sama di banyak tempat. */ :root{ --pwa-bar: 56px; --pwa-bar-jumlah: calc(56px + env(safe-area-inset-bottom, 0px)); } /* ========================================================================= 1. Rangka aplikasi ========================================================================= */ /* ---- Gerbang mod aplikasi ---- `display-mode: standalone` SAHAJA tidak mencukupi untuk menentukan chrome aplikasi. Chrome desktop PWA, papan pintar landscape dan tetingkap lebar semuanya melapor standalone — namun pada skrin besar dengan tetikus, chrome laman web penuh (kepala + kaki, tanpa bar bawah) ialah yang betul. Chrome aplikasi (kepala padat, kaki disorok, ruang untuk bar bawah) hanya apabila skrin kecil ATAU peranti sentuh. Nilai 900px sepadan dengan gerbang yang sama dalam assets/pwa.js — ubah kedua-duanya sekali. */ @media (max-width: 899px), (pointer: coarse){ /* Kandungan mesti berhenti di ATAS bar bawah. Tanpa pelapik ini, item terakhir setiap senarai tersembunyi di belakang bar dan kelihatan hilang. */ html.pwa-standalone body{ padding-bottom: var(--pwa-bar-jumlah); } /* Bar atas laman web dan kaki laman web ialah perabot LAMAN WEB. Dalam aplikasi terpasang, navigasi datang daripada bar bawah dan kaki setinggi 300px hanyalah skrol mati. */ /* Dua pemilih kaki, kerana dua cangkerang tidak berkongsi markup: tfd-shell.php menghantar