/* ===================================================================== TEMA WARNA — Aplikasi Pemilihan OSIS --------------------------------------------------------------------- Menimpa variabel warna utama yang sudah ada di app.css. Karena hampir seluruh komponen memakai var(--ungu), mengganti tiga variabel ini sudah mengubah warna tombol, garis aksen, tautan aktif, bilah hasil, nomor urut, dan seluruh elemen bertema di aplikasi. Tema aktif ditentukan atribut data-tema="..." pada tag , yang diisi otomatis oleh kerangka bila migrasi & berkas ini terpasang. Muat SETELAH app.css pada setiap kerangka (lihat PANDUAN.md). Empat tema: ungu (bawaan) biru (laut) hijau (hutan) merah (marun) ===================================================================== */ /* -------- UNGU (bawaan) -------- */ :root, html[data-tema="ungu"] { --ungu: #5A2D8C; --ungu-terang: #7B4CB0; --ungu-kabut: #EFE8F7; --tema-muda: #B08CE0; /* gradasi bilah layar tayang */ } /* -------- BIRU LAUT -------- */ html[data-tema="biru"] { --ungu: #1F5FA8; --ungu-terang: #3E82C9; --ungu-kabut: #E4EFF9; --tema-muda: #8FC0EE; } /* -------- HIJAU HUTAN -------- */ html[data-tema="hijau"] { --ungu: #1B7A4B; --ungu-terang: #2E9D64; --ungu-kabut: #E3F4EA; --tema-muda: #86D6A8; } /* -------- MERAH MARUN -------- */ html[data-tema="merah"] { --ungu: #A81F3B; --ungu-terang: #C8465F; --ungu-kabut: #FBE7EB; --tema-muda: #E896A4; } /* Bilah layar tayang memakai warna muda hardcode di admin.css. Baris ini menyelaraskannya dengan tema aktif. */ .layar__bilah i { background: linear-gradient(90deg, var(--ungu-terang), var(--tema-muda)) !important; } /* --------------------------------------------------------------------- Pemilih tema di halaman Pengaturan --------------------------------------------------------------------- */ .tema-pilih { display: flex; gap: .75rem; flex-wrap: wrap; } .tema-opsi { display: flex; align-items: center; gap: .6rem; border: 2px solid var(--garis); border-radius: 10px; padding: .7rem 1rem; cursor: pointer; transition: border-color .15s; } .tema-opsi:hover { border-color: var(--garis-tebal); } .tema-opsi input { accent-color: var(--ungu); } .tema-opsi input:checked ~ .tema-nama { font-weight: 700; } .tema-opsi:has(input:checked) { border-color: var(--ungu); background: var(--ungu-kabut); } .tema-contoh { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); box-shadow: 0 0 0 1px var(--garis); } .tema-nama { font-size: .92rem; }