/* ===================================================================== TEMA "TIMBUL" (KEYCAP 3D) — DASHBOARD & KARTU STATISTIK UMUM --------------------------------------------------------------------- Simpan sebagai: css/ui-core/04-tema-timbul-dashboard.css Muat SETELAH tailwind-build.css, layout-komponen.css, 01/02/03-*.css. Gaya ini disamakan dengan halaman Indeks Kinerja Guru / BK / asm.css (.asm-stats): gradasi 160deg, bayangan tebal bawah (efek tombol), kilau kapsul di atas, dan watermark ikon miring -12deg. Kelas yang dipakai: .kt-tile -> kartu statistik (ditambahkan otomatis oleh js/ui-core/02-tema-timbul-dashboard.js, atau bisa dipasang manual di halaman lain) .kt-c- -> warna: blue sky green teal yellow orange red pink purple slate .kt-num / .kt-lbl -> angka besar / label kartu body.tema-timbul -> sakelar tema (dilepas = tampilan lama kembali) body.kt-on-dash -> aktif hanya saat halaman Dashboard dibuka ===================================================================== */ /* ---------- 1) KARTU TIMBUL ---------- */ body.tema-timbul .kt-tile { position: relative !important; overflow: hidden !important; display: block !important; min-height: 80px; margin-bottom: 5px !important; padding: .7rem .85rem .8rem !important; text-align: left !important; color: #fff !important; border: 0 !important; border-radius: .85rem !important; background: linear-gradient(160deg, var(--c1, #5aa2ff) 0%, var(--c2, #1d63e0) 100%) !important; box-shadow: 0 5px 0 var(--sh, #154aa8), 0 14px 18px -4px rgba(15, 23, 42, .38), inset 0 2px 1px rgba(255, 255, 255, .5), inset 0 -8px 12px rgba(0, 0, 0, .16) !important; transition: transform .15s, box-shadow .15s; } /* kilau kapsul di atas */ body.tema-timbul .kt-tile::before { content: ""; position: absolute; left: 7%; right: 7%; top: 3px; height: 42%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0)); pointer-events: none; } /* watermark ikon miring */ body.tema-timbul .kt-tile::after { content: attr(data-ic); font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome; font-weight: 900; position: absolute; right: -.3rem; bottom: -.6rem; z-index: 0; font-size: 3.6rem; line-height: 1; color: #fff; opacity: .22; transform: rotate(-12deg); pointer-events: none; text-shadow: 2px 3px 0 rgba(0, 0, 0, .28), -1px -1px 0 rgba(255, 255, 255, .5); } /* ikon/gambar bawaan kartu lama disembunyikan agar tidak dobel dengan watermark */ body.tema-timbul .kt-tile .kt-hide { display: none !important; } body.tema-timbul .kt-tile .kt-num { position: relative; z-index: 1; display: block; font-size: 1.55rem !important; line-height: 1.1 !important; font-weight: 900 !important; white-space: nowrap; color: #fff !important; margin: 0 !important; text-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 0 2px rgba(255, 255, 255, .35); } /* judul kartu pintasan berupa teks (Absen & Jurnal, Nilai Rapor, ...) : lebih kecil dari angka */ body.tema-timbul .kt-tile .kt-num.kt-teks { font-size: 1.1rem !important; line-height: 1.15 !important; font-weight: 900 !important; padding-right: 2rem; } body.tema-timbul .kt-tile .kt-lbl { position: relative; z-index: 1; display: block; margin: .25rem 0 0 !important; padding-right: 1.9rem; white-space: nowrap; font-size: .62rem !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: .04em; text-transform: uppercase; color: #fff !important; opacity: 1 !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); } body.tema-timbul .kt-tile a, body.tema-timbul .kt-tile .kt-lbl.kt-link { color: #fff !important; } body.tema-timbul .kt-tile:hover { transform: translateY(-2px); } /* kartu REKAP (angka/persen): angka & label rata tengah, isi berada di tengah kartu secara vertikal */ body.tema-timbul .kt-tile.kt-center { display: flex !important; flex-direction: column; justify-content: center; } body.tema-timbul .kt-tile.kt-center, body.tema-timbul .kt-tile.kt-center *:not(i) { text-align: center !important; } body.tema-timbul .kt-tile.kt-center .kt-lbl { padding-left: 0; padding-right: 0; } body.tema-timbul .kt-tile.kt-center .kt-num.kt-teks { padding-left: 0; padding-right: 0; } body.tema-timbul .kt-tile.kt-center .kt-num { letter-spacing: 0 !important; } /* induk grid: beri jarak vertikal agar bayangan tebal tidak menabrak baris bawah */ body.tema-timbul .kt-grid { row-gap: .9rem !important; } /* ---------- 1b) STABIL SAAT DATA BERUBAH ---------- Isi kartu sering diganti oleh render ulang / penghitung real-time (mis. saat siswa tap kartu). Aturan ini membuat SETIAP elemen di dalam kartu langsung putih & tanpa animasi, tanpa menunggu JS memberi class -> tidak ada kedipan hitam. */ body.tema-timbul .kt-tile, body.tema-timbul .kt-tile *:not(i) { color: #fff !important; animation: none !important; transition-property: transform, box-shadow; } body.tema-timbul .kt-tile *:not(i) { background-color: transparent !important; background-image: none !important; border-color: transparent !important; } body.tema-timbul .kt-tile i { color: #fff !important; } body.kt-on-dash .fade-in, body.kt-on-dash .fade-out { animation: none !important; } /* ---------- 2) PALET WARNA (sama dengan .asm-stats) ---------- */ .kt-c-blue { --c1: #5aa2ff; --c2: #1d63e0; --sh: #154aa8; } .kt-c-sky { --c1: #5fd0ff; --c2: #0ea5e9; --sh: #0a6fa3; } .kt-c-orange { --c1: #ffb457; --c2: #f97316; --sh: #b25208; } .kt-c-red { --c1: #fb7a8a; --c2: #dc2626; --sh: #951b1b; } .kt-c-purple { --c1: #c78bff; --c2: #7c3aed; --sh: #561fae; } .kt-c-teal { --c1: #34d6c1; --c2: #0d9488; --sh: #0a665e; } .kt-c-green { --c1: #5eea8c; --c2: #16a34a; --sh: #0d7132; } .kt-c-pink { --c1: #f77fbd; --c2: #db2777; --sh: #97154f; } .kt-c-yellow { --c1: #fde068; --c2: #d99a06; --sh: #8f6204; } .kt-c-slate { --c1: #a8b3c4; --c2: #64748b; --sh: #3f4a5c; } /* ---------- 3) PANEL, JUDUL & TABEL DI DASHBOARD (gaya BK) ---------- */ /* Panel putih biasa. Kartu putih BERAKSEN (garis tebal berwarna di tepi) dikecualikan supaya garis aksennya tidak ditimpa -- warna aksen itu dipakai JS untuk menentukan warna kartu timbul. */ body.tema-timbul.kt-on-dash .bg-white:is(.rounded, .rounded-lg, .rounded-xl, .rounded-2xl):not(.kt-tile):not([class*="border-l-"]):not([class*="border-t-"]):not([class*="border-b-"]):not([style*="border-left"]):not([style*="border-top"]) { border: 1px solid #e5e7eb !important; border-radius: .75rem !important; box-shadow: 0 4px 18px rgba(15, 23, 42, .07) !important; } body.tema-timbul.kt-on-dash h3 { font-weight: 900; color: #0f172a; } /* Banner/header berlatar warna (SELAMAT DATANG, HALO siswa, dll.): teks tetap PUTIH. Tanpa aturan ini, h3 di atas ikut berubah jadi biru tua dan sulit dibaca di latar ungu/biru. */ body.tema-timbul.kt-on-dash .text-white h3, body.tema-timbul.kt-on-dash .text-white h4, body.tema-timbul.kt-on-dash .text-white p, body.tema-timbul.kt-on-dash .text-white span { color: #fff !important; } body.tema-timbul.kt-on-dash table thead th { background: #0f172a !important; color: #fff !important; font-size: .68rem; font-weight: 800; text-transform: uppercase; } /* ---------- 4) RESPONSIF HP ---------- */ @media (max-width: 767px) { body.tema-timbul .kt-tile { min-height: 70px; padding: .6rem .75rem .7rem !important; } body.tema-timbul .kt-tile .kt-num { font-size: 1.35rem !important; } body.tema-timbul .kt-tile .kt-num.kt-teks { font-size: 1rem !important; } body.tema-timbul .kt-tile .kt-lbl { font-size: .58rem !important; padding-right: 1.5rem; } body.tema-timbul .kt-tile::after { font-size: 3rem; } } @media (prefers-reduced-motion: reduce) { body.tema-timbul .kt-tile { transition: none; } body.tema-timbul .kt-tile:hover { transform: none; } } @media print { body.tema-timbul .kt-tile { box-shadow: none !important; background: #fff !important; color: #000 !important; border: 1px solid #999 !important; } body.tema-timbul .kt-tile::before, body.tema-timbul .kt-tile::after { display: none; } body.tema-timbul .kt-tile .kt-num, body.tema-timbul .kt-tile .kt-lbl { color: #000 !important; text-shadow: none; } }