Novy San87
3170d7deb4
- Kelas kustom (.input/.btn-primary/.btn-outline/.card) dibungkus @layer components — sebelumnya unlayered sehingga menang atas utility Tailwind (pl-9 dll), membuat icon search menimpa placeholder - Sekarang utility (layer utilities) bisa menimpa komponen sesuai urutan layer CSS (base < components < utilities)
68 lines
2.6 KiB
CSS
68 lines
2.6 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
|
|
@import 'tailwindcss';
|
|
@import '@fortawesome/fontawesome-free/css/fontawesome.css';
|
|
@import '@fortawesome/fontawesome-free/css/brands.css';
|
|
@import '@fortawesome/fontawesome-free/css/regular.css';
|
|
@import '@fortawesome/fontawesome-free/css/solid.css';
|
|
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../storage/framework/views/*.php';
|
|
|
|
@theme {
|
|
--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
/* Custom styles for Aplikasi Ketertiban */
|
|
[x-cloak] { display: none !important; }
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
/* Seleksi teks premium */
|
|
::selection { background: #2563eb; color: #fff; }
|
|
|
|
/* Scrollbar halus & premium */
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 8px;
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #94a3b8;
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
|
|
/* Komponen kustom — dibungkus @layer components agar utility Tailwind
|
|
(mis. pl-9, px-2) tetap bisa menimpa saat dibutuhkan (urutan layer:
|
|
base < components < utilities). */
|
|
@layer components {
|
|
/* Kartu standar premium — dipakai konsisten di semua halaman */
|
|
.card {
|
|
@apply bg-white rounded-2xl border border-slate-200/80 shadow-sm;
|
|
}
|
|
|
|
/* Tombol aksi primer */
|
|
.btn-primary {
|
|
@apply inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl shadow-md shadow-blue-500/25 hover:shadow-lg hover:shadow-blue-500/30 hover:from-blue-700 hover:to-indigo-700 transition-all duration-200;
|
|
}
|
|
|
|
/* Tombol aksi sekunder (outline lembut) */
|
|
.btn-outline {
|
|
@apply inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-slate-600 bg-white border border-slate-200 rounded-xl hover:text-blue-600 hover:border-blue-200 hover:bg-blue-50/50 transition-all duration-200;
|
|
}
|
|
|
|
/* Input premium seragam */
|
|
.input {
|
|
@apply w-full px-3.5 py-2.5 border border-slate-200 rounded-xl text-sm bg-slate-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition;
|
|
}
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
body { background: white !important; }
|
|
.no-print { display: none !important; }
|
|
}
|