/* ===================================================================== SiMR - Custom Bold Theme Override Palet: Navy tegas (#1e3c72) + Gold aksen (#d88c00) File ini dimuat SETELAH style.css, jadi override di sini menang. CATATAN: background header tabel (table th) SENGAJA TIDAK diubah, itu tetap didefinisikan di layout/template.php sesuai instruksi. ===================================================================== */ /* Perkecil ukuran font & spacing secara proporsional (semua komponen Bootstrap pakai satuan rem relatif ke ), bukan cuma teks body. */ html { font-size: 91.25%; /* 16px -> ~14.6px, body text 14px -> ~12.8px */ } :root { /* -- Palet inti aplikasi -- */ --brand-navy: #1e3c72; --brand-navy-dark: #122344; --brand-navy-darker: #0b1730; --brand-gold: #d88c00; --brand-gold-dark: #b57500; --brand-gold-light: #f7ddab; /* -- Override variabel tema (dipakai luas oleh style.css) -- */ --primary: var(--brand-navy); --primary-hover: var(--brand-navy-dark); --primary-dark: var(--brand-navy-darker); --primary-light: #d9e2f2; --secondary: var(--brand-gold); --secondary-light: var(--brand-gold-light); /* -- Override variabel Bootstrap 5 (otomatis mengubah semua util class .bg-primary, .btn-primary, .text-primary, .badge, dsb) -- */ --bs-primary: var(--brand-navy); --bs-primary-rgb: 30, 60, 114; --bs-primary-text-emphasis: var(--brand-navy-darker); --bs-primary-bg-subtle: #dce4f2; --bs-primary-border-subtle: #9fb4d8; --bs-secondary: var(--brand-gold); --bs-secondary-rgb: 216, 140, 0; --bs-secondary-text-emphasis: #6b4600; --bs-secondary-bg-subtle: #fbe8c7; --bs-secondary-border-subtle: #f0c674; --bs-link-color: var(--brand-navy); --bs-link-color-rgb: 30, 60, 114; --bs-link-hover-color: var(--brand-gold-dark); --bs-link-hover-color-rgb: 181, 117, 0; /* -- Chrome aplikasi (sidebar & header) -- */ --sidebar-bg: var(--brand-navy); --nav-headbg: #ffffff; --headerbg: #ffffff; } /* --------------------------------------------------------------------- SIDEBAR - navy tegas dengan aksen emas untuk menu aktif --------------------------------------------------------------------- */ .dlabnav { background-color: var(--brand-navy) !important; border-right: 0 !important; } .dlabnav .metismenu > li > a { color: rgba(255, 255, 255, 0.85) !important; } .dlabnav .metismenu > li > a i, .dlabnav .metismenu > li > a svg { color: rgba(255, 255, 255, 0.85) !important; } .dlabnav .metismenu > li:hover > a, .dlabnav .metismenu > li:focus > a { background-color: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } .dlabnav .metismenu > li:hover > a i, .dlabnav .metismenu > li:focus > a i { color: var(--brand-gold) !important; } .dlabnav .metismenu > li.mm-active > a { background-color: rgba(216, 140, 0, 0.18) !important; color: #ffffff !important; border-right: 0.25rem solid var(--brand-gold) !important; } .dlabnav .metismenu > li.mm-active > a i, .dlabnav .metismenu > li.mm-active > a svg { color: var(--brand-gold) !important; } .dlabnav .metismenu .has-arrow:after { border-color: rgba(255, 255, 255, 0.75) transparent transparent rgba(255, 255, 255, 0.75) !important; } .dlabnav .metismenu ul { background: rgba(0, 0, 0, 0.15) !important; } .dlabnav .metismenu ul a { color: rgba(255, 255, 255, 0.7) !important; } .dlabnav .metismenu ul a:before { background: rgba(255, 255, 255, 0.5) !important; } .dlabnav .metismenu ul a:hover, .dlabnav .metismenu ul a:focus, .dlabnav .metismenu ul a.mm-active { color: var(--brand-gold) !important; } .dlabnav .metismenu ul a:hover:before, .dlabnav .metismenu ul a:focus:before, .dlabnav .metismenu ul a.mm-active:before { background: var(--brand-gold) !important; } /* -- Rapikan label menu yang panjang & jadi 2 baris (mis. "Unit Kerja Kementerian Dalam Negeri") supaya ikon tetap center, bukan nempel di baris pertama saja -- */ .dlabnav .metismenu > li > a { display: flex !important; align-items: center !important; } .dlabnav .metismenu > li a > i { flex-shrink: 0; } .dlabnav .metismenu > li > a .nav-text { flex: 1; line-height: 1.3; } /* --------------------------------------------------------------------- HEADER ATAS & LOGO - putih bersih dengan garis aksen emas tegas --------------------------------------------------------------------- */ .nav-header { border-bottom: 0.1875rem solid var(--brand-gold) !important; } .header { border-bottom: 1px solid var(--border, #e6e6e6); box-shadow: 0 0.125rem 0.5rem rgba(30, 60, 114, 0.08) !important; } .header .dashboard_bar { color: var(--brand-navy) !important; font-weight: 700 !important; } .nav-control .hamburger .line { background-color: var(--brand-navy) !important; } /* --------------------------------------------------------------------- TOMBOL & BADGE - tegas, kontras tinggi --------------------------------------------------------------------- */ .btn-primary { background-color: var(--brand-navy) !important; border-color: var(--brand-navy) !important; color: #fff !important; font-weight: 600; box-shadow: 0 0.25rem 0.75rem rgba(30, 60, 114, 0.25); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--brand-navy-dark) !important; border-color: var(--brand-navy-dark) !important; color: #fff !important; } .btn-secondary { background-color: var(--brand-gold) !important; border-color: var(--brand-gold) !important; color: #fff !important; font-weight: 600; box-shadow: 0 0.25rem 0.75rem rgba(216, 140, 0, 0.25); } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { background-color: var(--brand-gold-dark) !important; border-color: var(--brand-gold-dark) !important; color: #fff !important; } .btn-outline-primary { color: var(--brand-navy) !important; border-color: var(--brand-navy) !important; } .btn-outline-primary:hover { background-color: var(--brand-navy) !important; border-color: var(--brand-navy) !important; color: #fff !important; } .badge.bg-primary { background-color: var(--brand-navy) !important; } .badge.bg-secondary { background-color: var(--brand-gold) !important; } /* --------------------------------------------------------------------- CARD - header kartu diberi garis aksen emas tipis (bukan tabel!) dan kartu ber-bg-primary di dashboard ikut skema navy --------------------------------------------------------------------- */ .card { border-radius: 0.75rem; box-shadow: 0 0.125rem 0.75rem rgba(18, 35, 68, 0.06); } .card-header { border-bottom: 0.125rem solid var(--brand-gold); } .card.bg-primary { background-color: var(--brand-navy) !important; } /* --------------------------------------------------------------------- LINK, FOKUS FORM, PAGINATION, BREADCRUMB --------------------------------------------------------------------- */ a { color: var(--brand-navy); } a:hover { color: var(--brand-gold-dark); } .form-control:focus, .form-select:focus { border-color: var(--brand-navy) !important; box-shadow: 0 0 0 0.2rem rgba(30, 60, 114, 0.15) !important; } .page-titles .breadcrumb-item a { color: var(--brand-navy); } .dataTables_wrapper .pagination .page-item.active .page-link, .pagination .page-item.active .page-link { background-color: var(--brand-navy) !important; border-color: var(--brand-navy) !important; } .dataTables_wrapper .pagination .page-link, .pagination .page-link { color: var(--brand-navy); } /* --------------------------------------------------------------------- PRELOADER - ikut warna brand --------------------------------------------------------------------- */ .lds-ripple div { border-color: var(--brand-navy) !important; } /* --------------------------------------------------------------------- HALAMAN LOGIN - aksen brand tegas --------------------------------------------------------------------- */ .fix-wrapper { background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-darker) 100%); } .fix-wrapper .card { border-top: 0.3125rem solid var(--brand-gold); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25); } /* ===================================================================== DASHBOARD - kartu statistik, progress tahapan, animasi masuk ===================================================================== */ /* -- Animasi fade + naik saat elemen dimuat -- */ @keyframes simrFadeUp { from { opacity: 0; transform: translateY(0.9375rem); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: simrFadeUp .5s ease both; } .dz-dashboard-greet h4 { color: var(--brand-navy); font-weight: 700; } /* -- Kartu statistik dashboard -- */ .stat-card { border: 0; border-radius: 0.9rem; color: #fff; overflow: hidden; position: relative; transition: transform .25s ease, box-shadow .25s ease; } .stat-card:hover { transform: translateY(-0.375rem); box-shadow: 0 1rem 2rem rgba(18, 35, 68, 0.18); } .stat-card .stat-label { font-size: 0.85rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; } .stat-card .stat-number { font-size: 2.25rem; font-weight: 700; } .stat-card .stat-icon { font-size: 1.75rem; width: 3.25rem; height: 3.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.18); } .stat-card .stat-foot { font-size: 0.8rem; opacity: 0.9; border-top: 1px solid rgba(255, 255, 255, 0.25); padding-top: 0.5rem; } .stat-card-primary { background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%); } .stat-card-danger { background: linear-gradient(135deg, #ff5b6e 0%, #dc3545 100%); } .stat-card-warning { background: linear-gradient(135deg, #ffb648 0%, var(--brand-gold) 100%); } .stat-card-success { background: linear-gradient(135deg, #34c77b 0%, #1e9e5e 100%); } /* -- Progress bar tahapan pipeline risiko -- */ .pipeline-label { font-weight: 600; color: var(--text-dark, #312a2a); } .pipeline-value { font-weight: 600; color: var(--brand-navy); } .pipeline-progress { height: 0.6rem; border-radius: 1rem; background-color: #eef1f6; overflow: hidden; } .pipeline-fill { background: linear-gradient(90deg, var(--brand-navy) 0%, var(--brand-gold) 100%); border-radius: 1rem; transition: width 1s cubic-bezier(.22, .9, .3, 1); } /* -- Popover content readability -- */ .popover-body { color: #000 !important; } /* --------------------------------------------------------------------- LOGO - ukurannya di-set via atribut width/height (px) di HTML, jadi tidak ikut mengecil bersama skala root font-size. Dipaksa pakai rem di sini supaya proporsional dengan tinggi header sidebar. --------------------------------------------------------------------- */ .nav-header .brand-logo img { width: 100%; height: 3.75rem; } /* --------------------------------------------------------------------- TABEL DATA (DataTables) - dibuat sedikit lebih kecil dari teks biasa supaya baris yang padat data tetap ringkas. --------------------------------------------------------------------- */ table.dataTable, table.dataTable td, table.dataTable th { font-size: 0.8125rem !important; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { font-size: 0.8125rem; } /* -- Tombol paging DataTables di style.css di-hardcode 50px/18px (px absolut), jadi tidak ikut mengecil bersama root font-size. Dipaksa pakai rem di sini supaya proporsional lagi dengan sisa tabel. -- */ .dataTables_wrapper .dataTables_paginate .paginate_button.previous, .dataTables_wrapper .dataTables_paginate .paginate_button.next, .dataTables_wrapper .dataTables_paginate span .paginate_button { height: 2rem !important; width: 2rem !important; line-height: 2rem !important; font-size: 0.8125rem !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.previous i, .dataTables_wrapper .dataTables_paginate .paginate_button.next i { font-size: 0.875rem !important; }