/* ===================================================================== BARIS SELANG-SELING (ZEBRA STRIPE) UNTUK SEMUA TABEL DI APLIKASI — v2 --------------------------------------------------------------------- Simpan sebagai: css/ui-core/03-baris-selang-seling-tabel.css (REVISI: ganti seluruh isi file lama dengan file ini, nama file sama) Kenapa v1 kelihatan belang: kolom PH1/PH2 di tabel "Input Nilai Harian" berisi yang secara BAWAAN BROWSER (bukan dari CSS aplikasi) punya latar putih solid, jadi menutupi warna baris di baliknya. Kolom RERATA/ASAS memang sengaja diberi warna sendiri sepanjang kolom oleh aplikasi (bukan bug) -- itu tetap dipertahankan apa adanya di revisi ini. Muat file ini SETELAH css/base/tailwind-build.css, dengan cara yang sama seperti css/ui-core/01-....css dan 02-....css sudah dimuat. TIDAK memengaruhi PDF: semua PDF dibuat oleh jsPDF-AutoTable (downloadPDF di js/presensi/09-pdf-engine-equal-column-ratio-v4.js) yang menggambar ulang tabel dari nol tanpa membaca CSS halaman. ===================================================================== */ :root { --stripe-ganjil: #eaf3fb; /* biru muda */ --stripe-genap: #ffffff; /* putih */ --stripe-hover: #dbeafe; /* biru saat disorot kursor */ } /* 1) Warna dasar per baris */ table tbody tr:nth-child(odd) { background-color: var(--stripe-ganjil); } table tbody tr:nth-child(even) { background-color: var(--stripe-genap); } table tbody tr:hover { background-color: var(--stripe-hover); } /* 2) Kolom "Nama Siswa/Guru" yang dibekukan (sticky) saat digeser ke samping -- di kode aplikasi, kolom ini SELALU dipaksa bg-white supaya menutupi konten di belakangnya. Di sini warnanya disamakan dengan warna baris (bukan putih rata) agar satu baris terlihat menyatu, tapi tetap tidak transparan (tetap menutupi konten lain saat digeser). !important dipakai karena harus menang melawan class bg-white bawaan aplikasi. */ table tbody tr:nth-child(odd) td[class*="sticky"][class*="bg-white"] { background-color: var(--stripe-ganjil) !important; } table tbody tr:nth-child(even) td[class*="sticky"][class*="bg-white"] { background-color: var(--stripe-genap) !important; } table tbody tr:hover td[class*="sticky"][class*="bg-white"] { background-color: var(--stripe-hover) !important; } /* 3) Kolom header beku (mis. "No") yang memang berlatar abu-abu (bg-gray-100) dibiarkan apa adanya -- itu bagian dari header, bukan baris data, jadi tidak disentuh. */ /* 4) Kotak input/dropdown angka nilai (PH1, PH2, dst.) yang TIDAK diberi warna dasar oleh aplikasi dibuat transparan supaya warna baris tembus. REVISI v3: aturan lama memakai :not([class*="bg-"]) sehingga input yang punya class "focus:bg-blue-50" (kotak nilai Input Nilai Harian) IKUT DIKECUALIKAN -- padahal "focus:bg-..." hanya berlaku saat kotak diklik. Akibatnya kotak itu tetap putih dan menutupi warna baris. Sekarang yang dikecualikan HANYA input yang class-nya benar-benar diawali token "bg-..." (warna dasar, mis. kotak ASAS bg-[#00a65a]/10). Checkbox/radio/file/tombol tidak disentuh. */ table tbody tr td input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([class^="bg-"]):not([class*=" bg-"]), table tbody tr td select:not([class^="bg-"]):not([class*=" bg-"]), table tbody tr td textarea:not([class^="bg-"]):not([class*=" bg-"]) { background-color: transparent; } /* 5) MODAL "RIWAYAT KEHADIRAN" (siswa -> Absen Mapel Saya) Baris isi tabel di modal ini dirender dengan class text-white + hover:bg-slate-700 (gaya gelap), padahal latar barisnya terang (zebra biru muda/putih), sehingga teks putih tidak terbaca. Di sini teks isi dipaksa hitam dan baris yang disorot kursor dibuat biru muda (bukan slate gelap). Hanya berlaku untuk tabel di dalam .modal-overlay dan baris ber-class hover:bg-slate-700; header tabel (thead) dan badge status tidak tersentuh. */ .modal-overlay table tbody tr.hover\:bg-slate-700 td.text-white { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } .modal-overlay table tbody tr.hover\:bg-slate-700:hover { background-color: var(--stripe-hover) !important; } /* 6) KOLOM 1 & 2 (No & Nama) di tabel "whitespace-nowrap". css/base/layout-komponen.css memaksa kolom 1 dan 2 berlatar putih (background-color: white !important) supaya menutupi isi tabel saat digeser. Akibatnya kolom "No" (dan kolom 2 yang tidak punya class sticky+bg-white) tidak ikut berwarna selang-seling -- baris berwarna tampak "putus" di sebelah kiri. Di sini warna kedua kolom itu disamakan dengan warna barisnya (tetap solid/tidak transparan, jadi fungsi menutupi isi saat digeser tetap jalan). Awalan "html body" dipakai agar menang atas aturan layout-komponen.css walau urutan pemuatan file berbeda. */ html body table.whitespace-nowrap:not(.no-sticky) tbody tr:nth-child(odd) td:nth-child(1), html body table.whitespace-nowrap:not(.no-sticky) tbody tr:nth-child(odd) td:nth-child(2) { background-color: var(--stripe-ganjil) !important; } html body table.whitespace-nowrap:not(.no-sticky) tbody tr:nth-child(even) td:nth-child(1), html body table.whitespace-nowrap:not(.no-sticky) tbody tr:nth-child(even) td:nth-child(2) { background-color: var(--stripe-genap) !important; } html body table.whitespace-nowrap:not(.no-sticky) tbody tr:hover td:nth-child(1), html body table.whitespace-nowrap:not(.no-sticky) tbody tr:hover td:nth-child(2) { background-color: var(--stripe-hover) !important; } /* 7) KOLOM RINGKASAN/TOTAL berlatar abu-abu/biru muda SOLID (mis. kolom total & persentase di Rekap Nilai dan Rekap Absen Mapel). Warna solid ini menutupi warna baris. Dibuat semi-transparan (seperti kolom RERATA) supaya kolomnya tetap tampak beda tetapi baris berwarna / putih tetap terlihat. Kolom 1-2 tidak termasuk (sudah diatur di bagian 6). Hapus bagian 7 ini jika ingin kolom ringkasan kembali solid. */ table tbody tr td.bg-gray-50:not(:nth-child(1)):not(:nth-child(2)) { background-color: rgba(100, 116, 139, 0.07); } table tbody tr td.bg-blue-50:not(:nth-child(1)):not(:nth-child(2)) { background-color: rgba(59, 130, 246, 0.10); }