/* * Override/kustomisasi visual Elite Law Counsel di atas assets/vendor/theme/style.css * (theme admin dasar). File ini yang dipakai untuk brand override (warna, tipografi, * shadow/card style, dsb) — jangan edit style.css di folder vendor. */ :root { --ec-navy: #0b2545; --ec-navy-dark: #081a33; --ec-blue: #13315c; --ec-accent: #c9a35b; --ec-accent-light: #e6c98a; --ec-bg: #f5f7fb; --ec-danger: #d64545; --ec-warning: #e0a63a; --ec-success: #2e8b57; /* Semantic dark/light tokens — dipakai di halaman chat, layout & navbar. */ --bg: #f5f7fb; --surface: #ffffff; --surface-alt: #f0f2f6; --text: #1c2430; --text-muted: #6c757d; --border: #e2e5ec; --primary: var(--ec-navy); --primary-contrast: #ffffff; --bubble-user: var(--ec-navy); --bubble-user-text: #ffffff; --bubble-admin: #eef0f4; --bubble-admin-text: #1c2430; --shadow: 0 2px 10px rgba(11, 37, 69, 0.08); } [data-theme="dark"] { --bg: #10141c; --surface: #1a2029; --surface-alt: #212836; --text: #e8eaed; --text-muted: #9aa2b1; --border: #2b3242; --primary: #3f6fb3; --primary-contrast: #ffffff; --bubble-user: #3f6fb3; --bubble-user-text: #ffffff; --bubble-admin: #262e3d; --bubble-admin-text: #e8eaed; --shadow: 0 2px 10px rgba(0, 0, 0, 0.35); --ec-bg: var(--bg); } body { font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif; background-color: var(--bg); color: var(--text); } [data-theme="dark"] .card, [data-theme="dark"] .auth-form, [data-theme="dark"] #main-wrapper, [data-theme="dark"] .header, [data-theme="dark"] .quixnav { background-color: var(--surface); color: var(--text); } [data-theme="dark"] .form-control { background-color: var(--surface-alt); color: var(--text); border-color: var(--border); } [data-theme="dark"] .form-control:focus { background-color: var(--surface-alt); color: var(--text); } /* Modal Bootstrap dipindah jadi anak langsung lewat app.js (lihat komentar di atas soal show.bs.modal), jadi TIDAK ada di dalam .content-body — override warna mode gelap untuk .content-body tidak menjangkaunya sama sekali. Tanpa ini modal tetap pakai warna default Bootstrap (background putih), sehingga label/teks berwarna terang (warisan dari mode gelap) jadi putih di atas putih / nyaris tak terbaca. */ [data-theme="dark"] .modal-content { background-color: var(--surface); color: var(--text); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--border); } [data-theme="dark"] .modal .close { color: var(--text); text-shadow: none; } [data-theme="dark"] .modal .form-control, [data-theme="dark"] .modal select.form-control { background-color: var(--surface-alt); color: var(--text); border-color: var(--border); } [data-theme="dark"] .modal .form-control:focus { background-color: var(--surface-alt); color: var(--text); } [data-theme="dark"] .table { color: var(--text); } [data-theme="dark"] .table-hover tbody tr:hover { color: var(--text); background-color: var(--surface-alt); } /* style.css vendor punya ".modal-backdrop { z-index: 10 !important; }" (baris ~15851) yang menimpa nilai default Bootstrap (1040/1050) — dipulihkan di sini supaya modal & backdrop selalu tampil paling atas dan bisa diklik. Lihat juga penanganan "show.bs.modal" di app.js yang memindahkan modal ke langsung di bawah (lepas dari #main-wrapper yang overflow:hidden). */ .modal { z-index: 1055 !important; } .modal-backdrop { z-index: 1050 !important; } /* Teks navbar atas: beberapa elemen memakai class utility Bootstrap ".text-dark" (!important) yang menimpa warna --text yang diwariskan dari .header di mode gelap, membuatnya nyaris tidak terlihat (gelap di atas gelap). */ [data-theme="dark"] .header .text-dark, [data-theme="dark"] .header span, [data-theme="dark"] .header .nav-link { color: var(--text) !important; } [data-theme="dark"] .dropdown-menu { background-color: var(--surface); color: var(--text); border-color: var(--border); } [data-theme="dark"] .dropdown-item { color: var(--text); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--surface-alt); color: var(--text); } /* Teks di area konten utama dibuat mengikuti token --text (bukan hitam paksa) supaya tetap kontras dan bisa dibalik oleh mode gelap. style.css vendor punya aturan global "h1..h6 { color: #3d4465 }" dan "a { color: #BDBDC7 }" (dibuat untuk konteks nav gelap) yang bocor ke judul/link konten biasa — di mode terang bikin link nyaris tak terlihat di atas kartu putih, di mode gelap bikin judul buram. Disamakan ke --text di sini. */ .content-body, .content-body p, .content-body span, .content-body div, .content-body td, .content-body th, .content-body label, .content-body li, .content-body h1, .content-body h2, .content-body h3, .content-body h4, .content-body h5, .content-body h6, .content-body a:not(.btn):not(.badge), .content-body .text-muted { color: var(--text) !important; } .content-body a:not(.btn):not(.badge):hover, .content-body a:not(.btn):not(.badge):focus { color: var(--primary) !important; } .content-body .text-muted { color: var(--text-muted) !important; } /* Toast SweetAlert2 (flash message) default-nya popup putih polos dengan teks gelap — di mode gelap ini kontras banget/menyilaukan di atas halaman navy. Disamakan ke token --surface/--text supaya menyatu dengan tema aktif. */ [data-theme="dark"] .swal2-popup, [data-theme="dark"] .swal2-toast { background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--shadow) !important; } [data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: var(--text) !important; } /* Badge notifikasi belum-dibaca di menu sidebar (lihat app/Views/partials/sidebar.php). Ditempel langsung di sebelah nama menu (bukan didorong ke ujung kanan) dan sengaja dibuat lebih besar dari teks nama menu (em relatif ke induk) supaya jelas terlihat. */ .nav-badge { display: inline-block; margin-left: 8px; font-size: 1.15em; font-weight: 700; padding: 3px 8px; border-radius: 10px; line-height: 1.4; vertical-align: middle; } [data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .nav-badge { display: none; } /* Tombol toggle tema (mdi-weather-sunny/mdi-weather-night), dipasang lewat assets/js/theme.js. */ .theme-toggle-btn { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 50%; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .theme-toggle-btn:hover { background: var(--surface-alt); } /* Skeleton loading, reusable:

*/ @keyframes skeleton-shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .skeleton { background: #eceef1 linear-gradient(90deg, #eceef1 0px, #f6f7f9 40px, #eceef1 80px) 0 0 / 600px 100% no-repeat; animation: skeleton-shimmer 1.2s ease-in-out infinite; border-radius: 4px; } .skeleton-line { height: 14px; margin-bottom: 8px; } .skeleton-table .skeleton-line { height: 18px; } .skeleton-card { height: 90px; border-radius: 10px; } /* Kartu statistik dashboard, diwarnai per kategori risiko/status. */ .stat-card { border: none; border-radius: 12px; box-shadow: 0 2px 10px rgba(11, 37, 69, 0.08); border-left: 4px solid var(--ec-navy); } .stat-card.stat-card-danger { border-left-color: var(--ec-danger); } .stat-card.stat-card-warning { border-left-color: var(--ec-warning); } .stat-card.stat-card-success { border-left-color: var(--ec-success); } .stat-card.stat-card-accent { border-left-color: var(--ec-accent); } .badge-risiko-kritis { background-color: var(--ec-danger); color: #fff; } .badge-risiko-berisiko { background-color: var(--ec-warning); color: #212529; } .badge-risiko-cukup { background-color: #6c9bd1; color: #fff; } .badge-risiko-terkendali { background-color: var(--ec-success); color: #fff; } /* Tombol dengan state loading (dipasang oleh showButtonLoading()/hideButtonLoading() di app.js). */ .btn.is-loading { position: relative; pointer-events: none; color: transparent !important; } .btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255, 255, 255, 0.6); border-top-color: #fff; border-radius: 50%; animation: btn-spinner 0.6s linear infinite; } .btn-outline-primary.is-loading::after, .btn-light.is-loading::after { border-color: rgba(11, 37, 69, 0.3); border-top-color: var(--ec-navy); } @keyframes btn-spinner { to { transform: rotate(360deg); } } /* Overlay spinner full-page tipis, dipakai saat transisi antar-langkah wizard. */ .page-loading-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.7); z-index: 2000; display: flex; align-items: center; justify-content: center; } .page-loading-overlay .spinner-border { width: 3rem; height: 3rem; color: var(--ec-navy); } /* Ubah tabel jadi tampilan kartu di layar mobile, opsional via class .table-cards-mobile. */ @media (max-width: 575px) { .table-cards-mobile thead { display: none; } .table-cards-mobile tbody tr { display: block; margin-bottom: 12px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; } .table-cards-mobile tbody td { display: flex; justify-content: space-between; gap: 8px; border: none; padding: 4px 0; } .table-cards-mobile tbody td::before { content: attr(data-label); font-weight: 600; color: #555; } } .auth-page { background: linear-gradient(135deg, var(--ec-navy) 0%, var(--ec-navy-dark) 100%); min-height: 100vh; } .authincation { min-height: 100vh; } .header-left span { font-size: 1.1rem; } @media (max-width: 767px) { .footer .copyright { padding-left: 0; } } /* Footer selalu menempel di bawah viewport, tidak ketarik ke tengah saat konten halaman sedikit/kosong. */ html, body { height: 100%; } #main-wrapper { display: flex; flex-direction: column; min-height: 100vh; } #main-wrapper .content-body { flex: 1 0 auto; } #main-wrapper .footer { flex-shrink: 0; } /* ------------------------------------------------------------------ */ /* Chat / ticket thread */ /* ------------------------------------------------------------------ */ .chat-thread-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .chat-window { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; height: calc(100vh - 320px); min-height: 420px; } .chat-messages { flex: 1 1 auto; overflow-y: auto; padding: 16px; } .chat-bubble-row { display: flex; margin-bottom: 12px; } .chat-bubble-row.is-mine { justify-content: flex-end; } .chat-bubble { max-width: 75%; padding: 10px 14px; border-radius: 14px; background: var(--bubble-admin); color: var(--bubble-admin-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .chat-bubble-row.is-mine .chat-bubble { background: var(--bubble-user); color: var(--bubble-user-text); } /* ".content-body div/span { color: var(--text) !important }" di atas dipakai supaya teks konten utama ikut warna mode gelap/terang, tapi ikut menimpa warna bubble chat (yang sengaja punya warna teks sendiri per bubble, bukan --text) karena sama-sama !important dan bubble ada di dalam .content-body — akibatnya di mode terang teks bubble pengirim (background gelap) jadi teks gelap juga (tidak terbaca). Ditimpa balik di sini dengan selector lebih spesifik. */ .content-body .chat-bubble, .content-body .chat-bubble span, .content-body .chat-bubble div { color: var(--bubble-admin-text) !important; } .content-body .chat-bubble-row.is-mine .chat-bubble, .content-body .chat-bubble-row.is-mine .chat-bubble span, .content-body .chat-bubble-row.is-mine .chat-bubble div { color: var(--bubble-user-text) !important; } .chat-bubble .chat-bubble-meta { display: block; font-size: 0.72rem; opacity: 0.7; margin-top: 4px; } .chat-bubble .chat-bubble-attachment { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.08); color: inherit; text-decoration: none; } .chat-bubble .chat-bubble-attachment img { max-width: 220px; max-height: 220px; border-radius: 8px; display: block; } .chat-composer { border-top: 1px solid var(--border); padding: 12px 16px; background: var(--surface); } .chat-composer .form-control { background: var(--surface-alt); color: var(--text); border-color: var(--border); } .chat-file-preview { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; display: none; } .chat-file-preview.is-active { display: block; } .ticket-list-item { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; background: var(--surface); color: var(--text); text-decoration: none; transition: box-shadow 0.15s ease; } .ticket-list-item:hover { box-shadow: var(--shadow); color: var(--text); text-decoration: none; } .skeleton-table .skeleton-line, .skeleton-bubble { background: var(--surface-alt); } /* ------------------------------------------------------------------ */ /* FAQ */ /* ------------------------------------------------------------------ */ .faq-item > a { color: var(--text) !important; } .faq-item .collapse > div { color: var(--text-muted) !important; }