/**
* assets/css/custom-admin.css
*
* Ini adalah versi RAPI dari kode custom kamu sendiri yang sebelumnya
* ditempel di bagian paling bawah file SB Admin 2 (bukan bagian
* Bootstrap/vendor-nya — itu sengaja tidak disentuh).
*
* Cara pakai — load file ini SETELAH CSS SB Admin 2 di :
* (atau nama file kamu)
*
*
* Semua nama class DIPERTAHANKAN PERSIS seperti aslinya, supaya HTML
* yang sudah pakai class ini (form, tabel, modal, dll) tidak perlu diubah.
*/
:root {
--tombol-info: #1e90ff;
--tombol-info-hover: #4da6ff;
--tombol-warning: #ccad00;
--tombol-warning-hover: #ffd700;
--tombol-danger: #b22222;
--tombol-danger-hover: #d62929;
--tombol-secondary: #696969;
--tombol-secondary-hover: #808080;
--warna-orange: #ff6600;
}
/* ==================== FORM CHECK (ukuran custom) ==================== */
.form-check-input-sm {
width: .8em;
height: .8em;
}
.form-check-input-lg {
width: 1.5em;
height: 1.5em;
}
/* ==================== TEKS INFORMASI / PERINGATAN ==================== */
.infoperingatan {
color: #dc3545;
font-size: .7rem;
font-style: italic;
}
.infoinputanmodal {
font-size: .7rem;
font-style: italic;
color: #6c757d;
}
/* ==================== CAPTCHA ==================== */
.captcha-canva {
width: 100%;
border: 1px solid #808080;
border-radius: 10px;
cursor: pointer;
display: block;
margin-bottom: 10px;
transition: border-color .15s ease;
}
.captcha-canva:hover {
border-color: #4e73df;
}
/* ==================== LOADING OVERLAY ==================== */
#loading-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(255, 255, 255, .5);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
z-index: 9999;
/* Ditambahkan supaya konten (mis. spinner) di dalamnya otomatis
ke tengah layar — sebelumnya overlay ini kosong tanpa alignment. */
align-items: center;
justify-content: center;
}
#loading-overlay.show {
display: flex;
}
.loadingtunggukecil {
margin-left: 10px;
width: 10px;
}
/* ==================== LINK KHUSUS (jendela kembali) ==================== */
a.linkjendelakembali {
color: #fff;
transition: color .15s ease;
}
a.linkjendelakembali:hover {
color: #28a745;
}
/* ==================== TOMBOL AKSI TABEL ==================== */
/* Base + modifier warna disatukan lewat CSS variable, supaya tidak
ada 4x blok kode yang isinya sama persis kecuali warnanya. */
.tombolmenutabel {
display: inline-block;
background: gray;
color: #fff;
border-radius: 5px;
border: 0;
padding: 3px 10px;
margin: 0 .5px;
font-size: 9pt;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transition: background-color .15s ease;
cursor: pointer;
}
.tombolmenutabel:hover {
text-decoration: none;
color: #fff;
}
.tombolmenutabel:focus-visible {
outline: 2px solid #212529;
outline-offset: 2px;
}
.tombolmenutabel:disabled {
cursor: not-allowed;
opacity: .6;
color: #fafafa;
text-decoration: none;
}
.tombolmenutabel-info { background: var(--tombol-info); }
.tombolmenutabel-info:hover { background: var(--tombol-info-hover); }
.tombolmenutabel-warning { background: var(--tombol-warning); }
.tombolmenutabel-warning:hover { background: var(--tombol-warning-hover); }
.tombolmenutabel-danger { background: var(--tombol-danger); }
.tombolmenutabel-danger:hover { background: var(--tombol-danger-hover); }
.tombolmenutabel-secondary { background: var(--tombol-secondary); }
.tombolmenutabel-secondary:hover { background: var(--tombol-secondary-hover); }
/* ==================== ELEMEN FORM LAIN ==================== */
.textareainputmodal {
resize: none;
}
/* ==================== FOTO PROFIL ==================== */
.fotoprofil {
object-fit: cover;
object-position: center;
}
/* ==================== UTILITY WARNA ==================== */
.warnaorange {
color: var(--warna-orange) !important;
}
/* ==================== POLA BACKGROUND DEKORATIF ==================== */
/* Pola checkerboard/hexagon dekoratif — dipakai sebagai background
halaman tertentu (mis. login). Nilai --s/--c1/--c2/--c3 bisa
di-override per elemen lewat inline style kalau perlu ukuran beda. */
.bg-gray {
--s: 200px;
--c1: #ffffff;
--c2: #e0e0e0;
--c3: #cfcfcf;
background:
repeating-conic-gradient(from 30deg, #0000 0 120deg, var(--c3) 0 50%)
calc(var(--s) / 2) calc(var(--s) * tan(30deg) / 2),
repeating-conic-gradient(from 30deg, var(--c1) 0 60deg, var(--c2) 0 120deg, var(--c3) 0 50%);
background-size: var(--s) calc(var(--s) * tan(30deg));
}
.bg-login {
--s: 52px;
--c1: #ffffff;
--c2: #f2f2f2;
--c3: #e3e3e3;
--_s: calc(2 * var(--s)) calc(2 * var(--s));
--_g1: var(--_s) conic-gradient(at calc(500% / 6) 50%, var(--c3) 25%, #0000 0);
--_g2: var(--_s) conic-gradient(at calc(200% / 3) 50%, var(--c2) 25%, #0000 0);
background:
var(--s) var(--s) / var(--_g1), 0 0 / var(--_g1),
var(--s) var(--s) / var(--_g2), 0 0 / var(--_g2),
repeating-conic-gradient(var(--c1) 0 25%, #0000 0 50%) 0 0 / var(--_s),
linear-gradient(var(--c1) calc(100% / 3), var(--c2) 0 calc(200% / 3), var(--c3) 0) 0 0 / var(--s) var(--s);
}