@charset "UTF-8"; /* ============================================================= * Chế độ tối (dark mode) - lớp phủ lên bảng màu sáng mặc định. * * Kích hoạt bằng thuộc tính data-theme="dark" trên thẻ , * do share/renew/js/theme-toggle.js đặt ngay trong để * trang không bị chớp sáng trước khi áp theme. * * File này phải nạp SAU cùng trong để thắng các khai báo * cùng độ đặc hiệu. Với những khai báo gốc đã dùng !important * (main.css, layout.css...) thì ở đây buộc phải dùng !important theo. * ============================================================= */ /* ------------------------------------------------------------- * 1. Token ngữ nghĩa - ghi đè phần :root của tokens.css * Thang màu gốc (neutral/primary/success...) giữ nguyên, chỉ đổi * ánh xạ ngữ nghĩa để mọi chỗ đã dùng var() tự động đổi theo. * ------------------------------------------------------------- */ html[data-theme="dark"] { color-scheme: dark; /* Thang độ sâu: nền trang tối nhất, thẻ nội dung nổi lên một bậc, thanh tiêu đề và đầu bảng nổi thêm một bậc nữa. Khoảng cách giữa các bậc phải đủ rộng, nếu không các khối sẽ dính vào nhau thành một mảng đen. */ --color-bg-body: #0A0F15; --color-bg-surface: #161E27; --color-bg-subtle: #202B38; /* Bề mặt nổi lên trên surface: dropdown, modal, menu thao tác */ --color-bg-elevated: #27333F; /* Ô nhập liệu thụt xuống dưới mặt thẻ để nhìn ra ngay chỗ điền được */ --color-bg-field: #0F161F; --color-text-primary: #E7EAEE; --color-text-secondary: #B4BCC7; --color-text-muted: #8A94A1; --color-text-on-primary: #FFFFFF; --color-border-subtle: #2F3B49; --color-border-primary: #43505F; --color-border-brand: var(--brand-primary); /* Màu dải phân cách giữa các khối, phải trùng nền trang. Chỉ khai báo ở chế độ tối; ở chế độ sáng các nơi dùng sẽ rơi về giá trị dự phòng #f1f4f5 (đúng bằng background-color của body trong site.min.css). */ --color-bg-page-gap: var(--color-bg-body); /* Đỏ Viettel #B9000E quá tối khi đặt trên nền tối (tỉ lệ tương phản với #0F141A chỉ ~1.6:1). Nâng độ sáng của thang primary để nút và chữ nhấn vẫn đọc được, vẫn giữ đúng sắc đỏ thương hiệu. */ --brand-primary: #E11D2B; --brand-primary-hover: #F0424F; --brand-primary-active: #C4111E; --brand-primary-disabled: #7A2A30; } /* ------------------------------------------------------------- * 2. Nền trang và chữ * ------------------------------------------------------------- */ /* Đặt trên cả : khi cuộn quá đà (overscroll) trình duyệt vẽ nền của chứ không phải của , thiếu dòng này sẽ lộ một vệt trắng. */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--color-bg-body); color: var(--color-text-primary); } html[data-theme="dark"] .page, html[data-theme="dark"] .page-content { background-color: transparent; } /* Chỉ đổi màu chữ, không đụng tới nền: một số màn tự sơn nền trắng cho .main_bg (vd loginHistoryIndex.jsp) và đã chuyển sang dùng biến, nếu ở đây ép background-color thì độ đặc hiệu cao hơn sẽ vô hiệu hoá biến đó. */ html[data-theme="dark"] main, html[data-theme="dark"] .main_bg, html[data-theme="dark"] .cover-content { color: var(--color-text-primary); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] label, html[data-theme="dark"] strong, html[data-theme="dark"] .title_page, html[data-theme="dark"] .form-control-label, html[data-theme="dark"] .form-horizontal .form-control-label { color: var(--color-text-primary); } html[data-theme="dark"] .link, html[data-theme="dark"] a, html[data-theme="dark"] .cover-content a { color: #7EB3F5; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .date-format-hint { color: var(--color-text-muted) !important; } html[data-theme="dark"] hr { border-color: var(--color-border-subtle); } /* ------------------------------------------------------------- * 3. Header * Hai layout dùng chung ảnh nền header-background.png (nền sáng), * ở chế độ tối thay hẳn bằng màu đặc để chữ trắng sẵn có vẫn đọc được. * ------------------------------------------------------------- */ html[data-theme="dark"] header.fixed-header, html[data-theme="dark"] .animsition .site-navbar, html[data-theme="dark"] .site-navbar { background-image: none; background-color: #131A22; border-bottom: 1px solid var(--color-border-subtle); } html[data-theme="dark"] .site-navbar .navbar-container { background-color: transparent; } html[data-theme="dark"] .heading h1 { color: var(--brand-primary-hover); } /* Mặc định #404040 - trên nền header tối sẽ gần như không nhìn thấy */ html[data-theme="dark"] .heading span { color: var(--color-text-secondary); } html[data-theme="dark"] .form_search input, html[data-theme="dark"] .active-search { background: var(--color-bg-subtle); color: var(--color-text-primary); opacity: 1; } /* ------------------------------------------------------------- * 4. Menu tài khoản (dropdown ở header) * ------------------------------------------------------------- */ html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .animsition .dropdown-menu { background: var(--color-bg-elevated); box-shadow: 0 4px 16px rgba(0, 0, 0, .55); } html[data-theme="dark"] .dropdown-menu .dropdown-item, html[data-theme="dark"] .animsition .dropdown-menu .dropdown-item { color: var(--color-text-primary); border-bottom-color: var(--color-border-subtle); } html[data-theme="dark"] .dropdown-menu .dropdown-item:hover, html[data-theme="dark"] .dropdown-menu .dropdown-item:focus { background-color: var(--color-bg-subtle); color: var(--color-text-primary); } /* Mũi tên nhỏ chỉ lên nút tài khoản - vẽ bằng border nên phải đổi theo màu nền menu */ html[data-theme="dark"] .info_user .dropdown-menu:after { color: var(--color-bg-elevated); } html[data-theme="dark"] .glyphicons-dropdown-item { color: var(--color-text-secondary); } /* ------------------------------------------------------------- * 5. Sidebar và footer * Sidebar vốn đã tối (#1F2937), chỉ hạ thêm một bậc cho khớp nền trang. * ------------------------------------------------------------- */ html[data-theme="dark"] sidebar, html[data-theme="dark"] .bd-sidebar { background-color: #131A22; } html[data-theme="dark"] sidebar { border-right: 1px solid var(--color-border-subtle); } html[data-theme="dark"] footer, html[data-theme="dark"] footer.site-footer { background-color: transparent; color: var(--color-text-muted); } html[data-theme="dark"] .overlay-mobile { background-color: rgba(15, 20, 26, .95); } /* ------------------------------------------------------------- * 6. Panel / thẻ nội dung * ------------------------------------------------------------- */ html[data-theme="dark"] .panel, html[data-theme="dark"] .panel-bordered, html[data-theme="dark"] .card, html[data-theme="dark"] .tab-content, html[data-theme="dark"] .background-search { background-color: var(--color-bg-surface); border-color: var(--color-border-subtle); color: var(--color-text-primary); } /* Ở chế độ sáng các thẻ tách khỏi nhau nhờ nền trắng nổi trên nền trang xám cộng thêm bóng đổ nhạt (.panel để border: 0 solid transparent). Trên nền tối cả hai dấu hiệu đó gần như mất tác dụng, nên phải kẻ viền thì mới thấy đâu là ranh giới giữa cây đơn vị, khối tìm kiếm và bảng kết quả. */ html[data-theme="dark"] .panel, html[data-theme="dark"] .panel-bordered, html[data-theme="dark"] .card { border-width: 1px; border-style: solid; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } /* Cột cây đơn vị tự sơn nền trắng bằng style inline (xem managerUserSearchForm.jsp và managerDepartmentSearchForm.jsp) nên thanh tiêu đề của nó lẫn vào phần thân. Kéo về đúng tông tiêu đề của các thẻ còn lại; phải !important mới thắng inline. */ html[data-theme="dark"] .manager-user-left-area > .panel-heading { background-color: var(--color-bg-subtle) !important; } html[data-theme="dark"] .panel-heading, html[data-theme="dark"] .panel-footer, html[data-theme="dark"] .panel-bordered > .panel-heading { background-color: var(--color-bg-subtle); border-color: var(--color-border-subtle); color: var(--color-text-primary); } html[data-theme="dark"] .panel-title { color: var(--color-text-primary); } html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--color-border-subtle); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--color-text-secondary); } html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--color-bg-surface); border-color: var(--color-border-subtle); color: var(--color-text-primary); } /* Nút quay lại: nền hồng nhạt #FEE2E2 chói mắt trên nền tối */ html[data-theme="dark"] a.icon_back { background: rgba(225, 29, 43, .18); } /* ------------------------------------------------------------- * 7. Bảng dữ liệu * ------------------------------------------------------------- */ html[data-theme="dark"] .table { color: var(--color-text-primary); background-color: transparent; } html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table > tbody > tr > td, html[data-theme="dark"] .table > tbody > tr > th, html[data-theme="dark"] .table > tfoot > tr > td { border-color: var(--color-border-subtle); color: var(--color-text-primary); } html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table-sticky-header thead th { background-color: var(--color-bg-subtle); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); } html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered > thead > tr > th, html[data-theme="dark"] .table-bordered > tbody > tr > td { border-color: var(--color-border-subtle); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .045); } html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: rgba(225, 29, 43, .10); } /* Cột thao tác được ghim (position: sticky) phải có nền đặc, nếu không nội dung cuộn phía dưới sẽ lộ ra xuyên qua. */ html[data-theme="dark"] .sticky-col-r0, html[data-theme="dark"] .sticky-col-r75, html[data-theme="dark"] .sticky-col-r150, html[data-theme="dark"] .sticky-col-r225, html[data-theme="dark"] .sticky-col-r300, html[data-theme="dark"] .sticky-col-r375 { background-color: var(--color-bg-surface); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) .sticky-col-r0, html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) .sticky-col-r75, html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) .sticky-col-r150, html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) .sticky-col-r225, html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) .sticky-col-r300, html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) .sticky-col-r375 { background-color: #1C242D; } html[data-theme="dark"] .form-actions-sticky { background-color: var(--color-bg-surface); box-shadow: 0 -1px 0 rgba(0, 0, 0, .4); } /* ------------------------------------------------------------- * 8. Ô nhập liệu * ------------------------------------------------------------- */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .custom-input, html[data-theme="dark"] .input100, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--color-bg-field); border-color: var(--color-border-primary); color: var(--color-text-primary); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .custom-input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { background-color: var(--color-bg-field); border-color: var(--color-border-brand); color: var(--color-text-primary); } html[data-theme="dark"] .custom-input:focus { box-shadow: 0 0 0 3px rgba(225, 29, 43, .25); } html[data-theme="dark"] ::placeholder { color: var(--color-text-muted); opacity: 1; } html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] input:disabled, html[data-theme="dark"] select:disabled, html[data-theme="dark"] textarea:disabled { background-color: #1A222B; color: var(--color-text-muted); } /* Đối xứng với bản chế độ sáng ở sso-design-system.css: ô ngày/giờ readonly vẫn là ô đang cho nhập (qua panel), không phải bị khoá - không nhuốm màu mờ như input readonly/disabled thật. */ html[data-theme="dark"] .form-control.vt-dtp-input[readonly] { background-color: var(--color-bg-field); color: var(--color-text-primary); } html[data-theme="dark"] .input-group-addon, html[data-theme="dark"] .animsition .input-group-addon, html[data-theme="dark"] .datePickerGroup .input-group-addon { background-color: var(--color-bg-elevated); color: var(--color-text-secondary); } html[data-theme="dark"] .checkbox-custom label::before { background-color: var(--color-bg-subtle); border-color: var(--color-border-primary) !important; } /* ------------------------------------------------------------- * 9. Nút * .btn-primary/.btn-white trong main.css khai báo kèm !important * nên bắt buộc ghi đè cũng phải !important. * ------------------------------------------------------------- */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-primary:focus { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important; } html[data-theme="dark"] .btn-primary:hover { background-color: var(--brand-primary-hover) !important; border-color: var(--brand-primary-hover) !important; } html[data-theme="dark"] .btn-white { background-color: var(--color-bg-subtle) !important; border-color: var(--brand-primary) !important; color: var(--brand-primary-hover) !important; } html[data-theme="dark"] .btn-default, html[data-theme="dark"] .btn-secondary { background-color: var(--color-bg-subtle); border-color: var(--color-border-primary); color: var(--color-text-primary); } html[data-theme="dark"] .btn-table.edit, html[data-theme="dark"] .btn-table.refresh, html[data-theme="dark"] .btn-table.switch, html[data-theme="dark"] .btn-table.warning { color: var(--color-text-secondary) !important; } html[data-theme="dark"] .btn-table.disable, html[data-theme="dark"] .btn-table.switch1, html[data-theme="dark"] .btn-table.refresh1 { color: #5A6472 !important; } html[data-theme="dark"] .btn-table.delete { color: var(--brand-primary-hover) !important; } html[data-theme="dark"] .btn-toggle-dept-tree { border-color: var(--color-border-primary); } html[data-theme="dark"] .btn-toggle-dept-tree[aria-expanded="false"] { color: var(--color-text-secondary); } html[data-theme="dark"] .btn-toggle-dept-tree[aria-expanded="false"]:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); } /* ------------------------------------------------------------- * 10. Menu thao tác trong bảng, modal, hộp thoại * ------------------------------------------------------------- */ html[data-theme="dark"] .row-actions-menu { background-color: var(--color-bg-elevated); border-color: var(--color-border-subtle); box-shadow: 0 4px 16px rgba(0, 0, 0, .55); } html[data-theme="dark"] .row-actions-item { color: var(--color-text-primary); } html[data-theme="dark"] .row-actions-item:hover { background-color: rgba(225, 29, 43, .15); color: var(--color-text-primary); } html[data-theme="dark"] .row-actions-item.disabled { color: #5A6472; } html[data-theme="dark"] .row-actions-item.disabled:hover { background-color: transparent; } html[data-theme="dark"] .row-actions-toggle { color: var(--color-text-secondary); } html[data-theme="dark"] .row-actions-toggle:hover, html[data-theme="dark"] .row-actions-toggle[aria-expanded="true"] { color: var(--color-text-primary); } html[data-theme="dark"] .modal-content, html[data-theme="dark"] .jconfirm-box, html[data-theme="dark"] .swal2-popup { background-color: var(--color-bg-elevated) !important; color: var(--color-text-primary) !important; } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--color-border-subtle); } html[data-theme="dark"] .modal-title, html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-html-container { color: var(--color-text-primary) !important; } html[data-theme="dark"] .close { color: var(--color-text-secondary); text-shadow: none; opacity: .8; } /* ------------------------------------------------------------- * 11. Cây đơn vị (dynatree) và select2 * layout.css đặt nền trắng kèm !important cho khối cây đơn vị. * ------------------------------------------------------------- */ html[data-theme="dark"] #treeFrm, html[data-theme="dark"] #orgLeftNavigator, html[data-theme="dark"] ul.dynatree-container { background: var(--color-bg-surface) !important; border-color: var(--color-border-subtle); } html[data-theme="dark"] ul.dynatree-container a, html[data-theme="dark"] a.dynatree-title { color: var(--color-text-secondary); } html[data-theme="dark"] span.dynatree-active a { background-color: #1D6FA8 !important; color: #fff; } /* Cây đơn vị dùng jsTree (share/css/jsTree.css) chứ không phải dynatree. Nền của khối chứa đã chuyển sang biến ngay trong JSP, ở đây xử lý phần màu do thư viện quy định: chữ đen và các dải nền xanh nhạt khi rê/chọn. */ html[data-theme="dark"] .jstree-anchor, html[data-theme="dark"] .jstree-anchor:link, html[data-theme="dark"] .jstree-anchor:visited { color: var(--color-text-primary); } html[data-theme="dark"] .jstree-default .jstree-hovered, html[data-theme="dark"] .jstree-default .jstree-context, html[data-theme="dark"] .jstree-default .jstree-wholerow-hovered { background: rgba(255, 255, 255, .08); box-shadow: none; } html[data-theme="dark"] .jstree-default .jstree-clicked, html[data-theme="dark"] .jstree-default .jstree-wholerow-clicked, html[data-theme="dark"] .jstree-default > .jstree-wholerow-ul .jstree-clicked { background: rgba(225, 29, 43, .28); box-shadow: none; color: var(--color-text-primary); } html[data-theme="dark"] .jstree-default .jstree-disabled { color: var(--color-text-muted); } /* Ảnh sprite mũi tên / thư mục của jsTree vẽ nét tối, gần như mất hút trên nền tối -> làm sáng lại bằng bộ lọc thay vì thay ảnh. */ html[data-theme="dark"] .jstree-default .jstree-icon:not(.jstree-themeicon-custom) { filter: invert(1) brightness(1.4); } /* Ô select đóng trông như ô nhập; danh sách xổ ra là lớp nổi nên sáng hơn một bậc */ html[data-theme="dark"] .select2-container--focus, html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-search__field { background-color: var(--color-bg-field) !important; border-color: var(--color-border-primary) !important; color: var(--color-text-primary) !important; } html[data-theme="dark"] .select2-dropdown { background-color: var(--color-bg-elevated) !important; border-color: var(--color-border-primary) !important; color: var(--color-text-primary) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--color-text-primary) !important; } html[data-theme="dark"] .select2-results__option { background-color: var(--color-bg-elevated); color: var(--color-text-primary); } /* Đặc hiệu phải cao hơn khối 18 của sso-design-system.css, nơi khai .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable (0,3,0) kèm !important. Selector cũ ở đây mới 0,2,1 nên thua, hover trong chế độ tối vẫn ăn nền sáng của bảng màu ngày. Thêm .select2-container--default cho đủ 0,4,1. */ html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: rgba(225, 29, 43, .25) !important; color: var(--color-text-primary) !important; } /* --color-primary-50 (#FEF2F2) không được ánh xạ lại cho chế độ tối nên ô đang chọn sẽ là một vệt gần trắng giữa panel tối. Dùng chính sắc đỏ đó ở dạng mờ, đậm hơn hover để vẫn phân biệt được hai trạng thái. */ html[data-theme="dark"] .select2-container--default .select2-results__option--selected, html[data-theme="dark"] .select2-container--default .select2-results__option--selected.select2-results__option--highlighted { background-color: rgba(225, 29, 43, .45) !important; color: var(--color-text-primary) !important; } /* ------------------------------------------------------------- * 12. Phân trang, thanh cuộn, thông báo * ------------------------------------------------------------- */ html[data-theme="dark"] span.pagelinks { color: var(--color-text-primary); } html[data-theme="dark"] .pagelinks a, html[data-theme="dark"] .pagelinks strong { border-color: transparent; color: var(--color-text-primary); } html[data-theme="dark"] .pagelinks a[href] { color: #7EB3F5; } /* --color-primary-50 (#FEF2F2) không ánh xạ cho chế độ tối - lý do như ô select2 đang chọn ở trên. Dùng cùng công thức rgba đỏ mờ cho hover. */ html[data-theme="dark"] .pagelinks a[href]:hover, html[data-theme="dark"] .pagelinks a[href]:focus, html[data-theme="dark"] #groups_pagination .page-link:hover, html[data-theme="dark"] #groups_pagination .page-link:focus { background-color: rgba(225, 29, 43, .25); color: var(--brand-primary); } html[data-theme="dark"] ::-webkit-scrollbar-track { background-color: #1A222B; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #3A4653; outline: none; border-color: #1A222B; } html[data-theme="dark"] .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, html[data-theme="dark"] .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail { background-color: #1A222B !important; border-color: #1A222B !important; } html[data-theme="dark"] .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, html[data-theme="dark"] .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #3A4653 !important; border-color: #1A222B !important; } /* ------------------------------------------------------------- * 13. Trang đăng nhập / các trang ẩn layout * Không có menu tài khoản để bật tắt theme, nhưng lựa chọn đã lưu * vẫn áp dụng nên vẫn phải phủ màu cho thẻ đăng nhập. * ------------------------------------------------------------- */ html[data-theme="dark"] .wrap-login100 { background: var(--color-bg-surface); } html[data-theme="dark"] .label-input100 { color: var(--color-text-secondary); } /* ------------------------------------------------------------- * 14. Nút bật/tắt chế độ tối trong menu tài khoản * Giữ nguyên bố cục block + icon inline như các mục còn lại trong * menu, chỉ thay hiệu ứng di chuột. * ------------------------------------------------------------- */ .theme-toggle-item { cursor: pointer; user-select: none; } /* Hover giống các mục khác trong dropdown: dịch phải 5px (25px tổng). */ .box-account a.theme-toggle-item:hover, .animsition .box-account a.theme-toggle-item:hover { padding-left: 25px; }