/* ==================================================================== SPPG — KERANGKA Dimuat SETELAH app.css dan SEBELUM berkas tema. Isinya hanya struktur: bagaimana bilah sisi menyempit, bagaimana ikon berukuran, bagaimana bilah atas tersusun. Warna, huruf, dan kerapatan ditentukan oleh berkas tema, bukan di sini. Pemisahan ini disengaja. Bila suatu saat ada tema keempat, tidak ada perilaku yang perlu ditulis ulang. ================================================================== */ :root { --rel-sempit: 68px; /* bilah sisi saat hanya ikon */ --rel-lebar: 246px; /* bilah sisi saat ikon dan teks */ --atas-tinggi: 60px; --alih: 220ms cubic-bezier(.32, .72, 0, 1); } /* ------------------------------------------------------------------ */ /* Rangka */ /* ------------------------------------------------------------------ */ /* Lebar kolom pertama ikut keadaan bilah sisi, bukan diubah oleh JS lewat gaya sebaris — dengan begitu peralihannya mulus dan satu kelas di menjadi satu-satunya sumber kebenaran. */ .rangka { grid-template-columns: var(--rel-sempit) minmax(0, 1fr); grid-template-areas: "sisi atas" "sisi halaman"; transition: grid-template-columns var(--alih); } body.sisi-lebar .rangka { grid-template-columns: var(--rel-lebar) minmax(0, 1fr); } @media (prefers-reduced-motion: reduce) { .rangka, .sisi, .menu__butir, .menu__teks { transition: none !important; } } /* ------------------------------------------------------------------ */ /* Ikon */ /* ------------------------------------------------------------------ */ /* Ikon berukuran mengikuti huruf induknya, sehingga satu nama ikon dapat dipakai di tombol besar maupun label kecil tanpa penyesuaian. */ .ikon { display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; } .ikon svg { width: 100%; height: 100%; display: block; } /* Bila pustaka ikon gagal dimuat, tempatnya menjadi titik kecil, bukan kotak kosong yang menggeser tata letak. */ .ikon--ganti::before { content: ""; width: .38em; height: .38em; border-radius: 50%; background: currentColor; opacity: .45; } /* ------------------------------------------------------------------ */ /* Bilah atas */ /* ------------------------------------------------------------------ */ .atas { grid-area: atas; display: flex; align-items: center; gap: 14px; height: var(--atas-tinggi); padding: 0 20px; position: sticky; top: 0; z-index: 20; } .atas__menu { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; padding: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; font-size: 19px; cursor: pointer; transition: background var(--alih), border-color var(--alih); } .atas__judul { flex: 1; min-width: 0; } /* Label kecil di atas judul. Isinya nama kelompok menu, sehingga pengguna tahu di modul mana ia berada tanpa membuka bilah sisi. */ .atas__eyebrow { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; } .atas__eyebrow:empty { display: none; } .atas h1 { font-size: 19px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ------------------------------------------------------------------ */ /* Bilah sisi */ /* ------------------------------------------------------------------ */ .sisi { grid-area: sisi; display: flex; flex-direction: column; overflow: hidden; /* teks yang terpotong tidak boleh menggulir */ z-index: 30; } .sisi__merek { display: flex; align-items: center; gap: 12px; height: var(--atas-tinggi); padding: 0 14px; flex: none; text-decoration: none; overflow: hidden; } .sisi__tanda { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 11px; font-size: 13px; font-weight: 800; letter-spacing: .04em; } .sisi__nama { display: block; min-width: 0; line-height: 1.2; } .sisi__nama strong { display: block; font-size: 14.5px; letter-spacing: .02em; } .sisi__nama small { display: block; font-size: 11px; } .menu { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 10px 14px; scrollbar-width: thin; } .menu__kelompok { margin-bottom: 10px; } .menu__kelompok--tunggal { margin-bottom: 10px; } .menu__kelompok h3 { font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; padding: 10px 10px 6px; white-space: nowrap; overflow: hidden; } .menu__butir { display: flex; align-items: center; gap: 12px; padding: 9px 11px; margin-bottom: 2px; border-radius: 10px; border-left: 0; /* menimpa penanda garis di app.css */ text-decoration: none; font-size: 14px; white-space: nowrap; position: relative; transition: background var(--alih), color var(--alih); } .menu__ikon { font-size: 18px; } /* Teks menu dipudarkan dan dipotong lebarnya, bukan disembunyikan dengan display:none. Dengan begitu peralihan sempit-lebar terasa satu gerakan, bukan kedipan. */ .menu__teks { min-width: 0; overflow: hidden; opacity: 0; transition: opacity 140ms linear; } body.sisi-lebar .menu__teks { opacity: 1; } /* ---- Kaki bilah sisi ---- */ .sisi__kaki { flex: none; padding: 10px; } .pengguna { display: flex; align-items: center; gap: 10px; padding: 6px 5px 10px; overflow: hidden; } .pengguna__awal { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 50%; font-size: 12.5px; font-weight: 700; } .pengguna__teks { min-width: 0; line-height: 1.3; } .pengguna__teks strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pengguna__teks small { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sisi__keluar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 11px; border: 1px solid transparent; border-radius: 10px; background: transparent; font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap; overflow: hidden; } .sisi__keluar .ikon { font-size: 17px; } /* ------------------------------------------------------------------ */ /* Halaman */ /* ------------------------------------------------------------------ */ .halaman { grid-area: halaman; min-width: 0; /* tanpa ini tabel lebar memaksa rangka melebar */ overflow-x: hidden; padding: 22px 24px 64px; } /* Isi halaman diberi lebar maksimum supaya baris teks tidak melebar sampai satu setengah meter di monitor lebar, tetapi tabel tetap boleh memakai seluruh ruangnya lewat .tabel-gulir. */ .halaman > * { max-width: 1180px; } /* ------------------------------------------------------------------ */ /* Ponsel */ /* ------------------------------------------------------------------ */ @media (max-width: 860px) { .rangka, body.sisi-lebar .rangka { grid-template-columns: minmax(0, 1fr); grid-template-areas: "atas" "halaman"; } /* Di ponsel bilah sisi menjadi panel geser di atas isi, bukan kolom. Ruang selebar 68px terlalu mahal pada layar 360px. */ .sisi { position: fixed; inset: 0 auto 0 0; width: min(84vw, var(--rel-lebar)); transform: translateX(-100%); transition: transform var(--alih); box-shadow: 0 0 0 100vmax rgba(10, 16, 13, 0); } body.sisi-lebar .sisi { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(10, 16, 13, .48); } .menu__teks { opacity: 1; } .halaman { padding: 16px 14px 72px; } .atas { padding: 0 12px; gap: 10px; } .atas h1 { font-size: 17px; } } /* Layar sangat sempit: bilah atas tidak boleh mendorong penanda koneksi keluar dari layar. */ @media (max-width: 420px) { .koneksi { font-size: 0; padding: 0; } .koneksi::before { margin: 0; width: 9px; height: 9px; } }