diff --git a/app/Views/_layouts/main.php b/app/Views/_layouts/main.php index e2f06da..0b36b4d 100644 --- a/app/Views/_layouts/main.php +++ b/app/Views/_layouts/main.php @@ -15,7 +15,7 @@ - + @@ -50,16 +50,19 @@ /* Hover - biru lembut transparan */ .sidebar .nav-link:hover { - background-color: #0d6efd20; /* biru muda transparan */ + background-color: #0d6efd20; + /* biru muda transparan */ color: #fff; } /* Active - biru solid */ .sidebar .nav-link.active { - background-color: #0d6efd; /* biru solid Bootstrap */ + background-color: #0d6efd; + /* biru solid Bootstrap */ color: #fff !important; font-weight: 600; - box-shadow: 0 0 6px rgba(13, 110, 253, 0.4); /* efek glow lembut */ + box-shadow: 0 0 6px rgba(13, 110, 253, 0.4); + /* efek glow lembut */ } .main { @@ -80,6 +83,55 @@ } } + + /* Untuk Card Status Counter */ + .status-card { + width: 123px; + /* lebar tetap */ + height: 65px; + /* tinggi seragam */ + border-radius: 8px; + background-color: #fff; + border : solid 1px #ddd ; + /* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08); */ + transition: transform 0.15s ease, box-shadow 0.15s ease; + display: flex; + /* flex untuk isi card */ + align-items: center; + /* tengah vertikal */ + justify-content: center; + /* tengah horizontal */ + flex-direction: column; + /* urut atas ke bawah */ + } + + .status-card:hover { + transform: translateY(-3px); + box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); + } + + .status-icon { + font-size: 1.1rem; + } + + .status-count { + font-weight: 700; + font-size: 1.1rem; + } + + .status-label { + font-size: 0.75rem; + font-weight: 500; + white-space: nowrap; + /* biar teks tidak turun ke bawah */ + overflow: hidden; + text-overflow: ellipsis; + /* kalau terlalu panjang, potong dengan "..." */ + max-width: 100%; + /* biar rapih dalam box */ + } + + .dot { height: 7px; width: 7px; @@ -88,6 +140,11 @@ margin: 0; } + /* Untuk Cursor di Tabel */ + .pointercol { + cursor: pointer; + } + .Pend { background-color: white; } @@ -140,27 +197,30 @@
= $this->renderSection('script'); ?>