/** * Dark mode untuk lsmile.gmsnetx.com (template Sneat free, tanpa file dark bawaan). * Aktif saat punya class .dark-style — dikendalikan theme/js/dark-mode.js * (otomatis 18:00-06:00, atau manual via tombol #theme-mode-toggle). * Palet mengikuti Sneat dark: bg #232333, panel #2b2c40, border #444564. */ html.dark-style body { background-color: #232333 !important; color: #b2b2ca; } /* ---- Panel / permukaan ---- */ html.dark-style .card, html.dark-style .dropdown-menu, html.dark-style .modal-content, html.dark-style .offcanvas, html.dark-style .toast, html.dark-style .swal2-popup { background-color: #2b2c40; color: #b2b2ca; } html.dark-style .card { box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4); } html.dark-style .card-header, html.dark-style .card-footer, html.dark-style .modal-header, html.dark-style .modal-footer { background-color: transparent; border-color: #444564; } /* ---- Navbar, sidebar menu, footer ---- */ html.dark-style .bg-navbar-theme, html.dark-style .layout-navbar, html.dark-style .bg-menu-theme, html.dark-style .bg-footer-theme, html.dark-style .content-footer { background-color: #2b2c40 !important; color: #b2b2ca; } html.dark-style .layout-navbar .nav-link, html.dark-style .layout-navbar .nav-item, html.dark-style .bg-menu-theme .menu-link, html.dark-style .bg-menu-theme .menu-sub .menu-link { color: #b2b2ca !important; } html.dark-style .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) { color: #fff !important; } html.dark-style .bg-menu-theme .menu-inner > .menu-item.active:before { background: #696cff; } html.dark-style .menu-inner-shadow { display: none; } /* ---- Teks & utilitas ---- */ html.dark-style h1, html.dark-style h2, html.dark-style h3, html.dark-style h4, html.dark-style h5, html.dark-style h6, html.dark-style .card-title, html.dark-style .modal-title, html.dark-style label, html.dark-style .form-label { color: #cbcbe2; } html.dark-style .text-dark { color: #cbcbe2 !important; } html.dark-style .text-muted { color: #8082ad !important; } html.dark-style .text-body { color: #b2b2ca !important; } html.dark-style .bg-white, html.dark-style .bg-light, html.dark-style .bg-lighter { background-color: #393a52 !important; } html.dark-style .border, html.dark-style .border-top, html.dark-style .border-bottom, html.dark-style .border-start, html.dark-style .border-end { border-color: #444564 !important; } html.dark-style hr, html.dark-style .dropdown-divider { border-color: #444564; opacity: 1; } /* ---- Form ---- */ html.dark-style .form-control, html.dark-style .form-select, html.dark-style .input-group-text { background-color: #232333; border-color: #444564; color: #cbcbe2; } html.dark-style .form-control:focus, html.dark-style .form-select:focus { background-color: #232333; border-color: #696cff; color: #cbcbe2; box-shadow: 0 0 0 0.15rem rgba(105, 108, 255, 0.25); } html.dark-style .form-control::placeholder { color: #7071a4; } html.dark-style .form-control:disabled, html.dark-style .form-select:disabled { background-color: #2b2c40; color: #8082ad; } html.dark-style .form-check-input:not(:checked) { background-color: #232333; border-color: #444564; } /* ---- Tabel ---- */ html.dark-style .table { color: #b2b2ca; border-color: #444564; } html.dark-style .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-color: #444564; box-shadow: none; } html.dark-style .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.03); color: #b2b2ca; } html.dark-style .table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 0.05); color: #cbcbe2; } html.dark-style .table-light, html.dark-style .table thead th { background-color: #393a52 !important; color: #cbcbe2; } /* ---- Dropdown, list, pagination, tab ---- */ html.dark-style .dropdown-item { color: #b2b2ca; } html.dark-style .dropdown-item:hover, html.dark-style .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06); color: #cbcbe2; } html.dark-style .list-group-item { background-color: transparent; color: #b2b2ca; border-color: #444564; } html.dark-style .page-link { background-color: #2b2c40; border-color: #444564; color: #b2b2ca; } html.dark-style .page-item.active .page-link { background-color: #696cff; border-color: #696cff; color: #fff; } html.dark-style .nav-tabs { border-color: #444564; } html.dark-style .nav-tabs .nav-link.active { background-color: #2b2c40; color: #cbcbe2; border-color: #444564 #444564 transparent; } html.dark-style .btn-outline-secondary { color: #b2b2ca; border-color: #444564; } /* ---- Pre-loader & alert ---- */ html.dark-style .pre-loader, html.dark-style #pre-loader, html.dark-style .preloader { background-color: #232333 !important; } html.dark-style .alert-light { background-color: #393a52; color: #cbcbe2; border-color: #444564; } /* ---- Tombol toggle tema ---- */ #theme-mode-toggle { cursor: pointer; } #theme-mode-toggle i { vertical-align: middle; } /* ---- DataTables (tabel dashboard, pelanggan, user, dll) ---- */ html.dark-style .dataTables_wrapper, html.dark-style .dataTables_info, html.dark-style .dataTables_length, html.dark-style .dataTables_length label, html.dark-style .dataTables_filter, html.dark-style .dataTables_filter label { color: #b2b2ca !important; } html.dark-style .dataTables_filter input, html.dark-style .dataTables_length select { background-color: #232333 !important; border-color: #444564 !important; color: #cbcbe2 !important; } html.dark-style .dataTables_paginate .paginate_button { color: #b2b2ca !important; } html.dark-style .dataTables_paginate .paginate_button.current, html.dark-style .dataTables_paginate .paginate_button.current:hover { background: #696cff !important; border-color: #696cff !important; color: #fff !important; } html.dark-style .dataTables_paginate .paginate_button:hover { background: #393a52 !important; color: #cbcbe2 !important; border-color: #444564 !important; } html.dark-style table.dataTable tbody tr { background-color: transparent !important; } html.dark-style table.dataTable.stripe tbody tr.odd, html.dark-style table.dataTable.display tbody tr.odd, html.dark-style table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.03) !important; color: #b2b2ca; } html.dark-style .table > :not(caption) > * > * { background-color: transparent; } /* ---- Cakupan ekstra permukaan putih ---- */ html.dark-style .content-wrapper, html.dark-style .layout-page, html.dark-style .bg-body { background-color: #232333 !important; } html.dark-style .card.card-x, html.dark-style .card.card-x2 { background-color: #2b2c40 !important; } html.dark-style .accordion-item, html.dark-style .accordion-button { background-color: #2b2c40; color: #cbcbe2; } html.dark-style .swal2-html-container, html.dark-style .swal2-title { color: #cbcbe2 !important; } html.dark-style .form-select { background-image: none; } /* ---- Input login: teks jelas + fix autofill Chrome (username/password) ---- */ html.dark-style .form-control, html.dark-style .form-control:focus { color: #e7e7f5 !important; -webkit-text-fill-color: #e7e7f5 !important; caret-color: #e7e7f5; } html.dark-style .form-control::placeholder { color: #7c7ca8 !important; -webkit-text-fill-color: #7c7ca8 !important; } html.dark-style input:-webkit-autofill, html.dark-style input:-webkit-autofill:hover, html.dark-style input:-webkit-autofill:focus, html.dark-style input:-webkit-autofill:active { -webkit-text-fill-color: #e7e7f5 !important; -webkit-box-shadow: 0 0 0 1000px #232333 inset !important; box-shadow: 0 0 0 1000px #232333 inset !important; caret-color: #e7e7f5; transition: background-color 5000s ease-in-out 0s; } html.dark-style .input-group-text { color: #cbcbe2 !important; } /* ---- Fix garis/pita terang di header (mode dark) ---- Strip blur di belakang fixed-navbar (theme-default: .layout-navbar-fixed .layout-page:before) pakai bg terang rgba(245,245,249,.6) -> di dark tampak sbg garis terang. Samakan ke warna gelap. */ html.dark-style.layout-navbar-fixed .layout-page:before { background: rgba(35, 35, 51, 0.6) !important; } html.dark-style .navbar-detached { box-shadow: 0 0 0.375rem 0.25rem rgba(0, 0, 0, 0.25) !important; } /* ---- Menu aktif lebih jelas di mode dark (termasuk yg di dalam grup) ---- */ html.dark-style .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) { background-color: rgba(105, 108, 255, 0.38) !important; color: #ffffff !important; border-radius: 0.375rem; } html.dark-style .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon { color: #ffffff !important; } /* grup/kategori yg terbuka karena berisi menu aktif -> teks terang */ html.dark-style .bg-menu-theme .menu-item.active.open > .menu-link.menu-toggle, html.dark-style .bg-menu-theme .menu-item.active.open > .menu-link.menu-toggle .menu-icon { color: #ffffff !important; }