/* theme tokens, override in css/themes//dark.css */ :root { --mc-body-bg: #1c1c1e; --mc-body-color: #f2f2f7; --mc-surface: #2c2c2e; --mc-surface-alt: #282828; --mc-text: #ccc; --mc-text-soft: #bbb; --mc-muted: #8e8e93; --mc-border: #555; --mc-tab-border: #444444; --mc-link: #6fc7e9; --mc-link-hover: #3daedb; --mc-btn-bg: #5e5e5e; --mc-btn-border: #4c4c4e; --mc-input-bg: #424242; --mc-input-color: #e2e2e2; --mc-input-border: #999; --mc-dropdown-bg: #424242; --mc-table-bg: #3a3a3a; --mc-table-stripe: #282828; --mc-table-stripe-row: #424242; --mc-table-hover: #343434; --mc-table-border: #5c5c5c; --mc-progress-bg: #555; --mc-placeholder: #d4d4d4; --mc-btn-outline-color: #e0e0e0; --mc-btn-outline-border: #7a7a7a; --mc-btn-outline-hover-bg: #5c5c5c; --mc-btn-outline-active-bg: #7a7a7a; --mc-btn-light-active-color: #f2f2f7; --mc-btn-light-active-bg: #242424; --mc-btn-light-active-border: #1c1c1e; --mc-btn-dark-bg: #242424; --mc-input-disabled-bg: #6e6e6e; --mc-input-disabled-color: #a8a8a8; --mc-list-header-bg: #444; --mc-list-details-bg: #555; --mc-chip-bg: #444; --mc-table-child-bg: #414141; --mc-dtr-bg: #7a7a7a; --mc-dtr-border: #5c5c5c; --mc-dtr-color: #e0e0e0; --mc-dtr-hover-bg: #7a7a7a; --mc-dtr-active-bg: #949494; } body { background-color: var(--mc-body-bg); color: var(--mc-body-color); } .card { border: 1px solid var(--mc-surface); background-color: var(--mc-surface); } legend { color: var(--mc-body-color); } .card-header { color: var(--mc-muted); background-color: var(--mc-body-bg); border-color: transparent; } .card-body { --bs-card-color: var(--mc-text-soft); } .btn-secondary, .paginate_button, .page-link, .btn-light { color: var(--mc-body-color) !important; background-color: var(--mc-btn-bg) !important; border-color: var(--mc-btn-border) !important; } .btn-dark { color: var(--mc-body-color) !important; background-color: var(--mc-btn-dark-bg) !important; border-color: var(--mc-body-bg) !important; } .btn-check:checked+.btn-secondary, .btn-check:active+.btn-secondary, .btn-secondary:active, .btn-secondary.active, .show>.btn-secondary.dropdown-toggle { border-color: var(--mc-btn-bg) !important; } .alert-secondary { color: var(--mc-body-color) !important; background-color: var(--mc-btn-bg) !important; border-color: var(--mc-btn-border) !important; } .bg-secondary { color: var(--mc-body-color) !important; background-color: var(--mc-btn-bg) !important; } .alert-secondary, .alert-secondary a, .alert-secondary .alert-link { color: var(--mc-body-color); } .page-item.active .page-link { background-color: #3e3e3e !important; border-color: #3e3e3e !important; } .btn-secondary:focus, .btn-secondary:hover, .btn-group.open .dropdown-toggle.btn-secondary { background-color: var(--mc-btn-bg); border-color: var(--mc-btn-border) !important; color: var(--mc-body-color); } .btn-secondary:disabled, .btn-secondary.disabled { border-color: var(--mc-btn-bg) !important; } .modal-content { --bs-modal-color: var(--mc-text-soft); background-color: var(--mc-surface); } .modal-header { border-bottom: 1px solid #999; } .modal-title { color: var(--mc-text-soft); } .modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .navbar.bg-light { background-color: var(--mc-body-bg) !important; border-color: var(--mc-surface); } .nav-link { color: var(--mc-muted) !important; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: none; } .nav-tabs, .nav-tabs .nav-link { border-color: var(--mc-tab-border) !important; } .nav-tabs .nav-link:not(.disabled):hover, .nav-tabs .nav-link:not(.disabled):focus, .nav-tabs .nav-link.active { border-bottom-color: var(--mc-body-bg) !important; } .card .nav-tabs .nav-link:not(.disabled):hover, .card .nav-tabs .nav-link:not(.disabled):focus, .card .nav-tabs .nav-link.active { border-bottom-color: var(--mc-surface) !important; } .table, .table-striped>tbody>tr:nth-of-type(odd)>*, tbody tr { color: var(--mc-body-color) !important; } .dropdown-menu { background-color: var(--mc-dropdown-bg); border: 1px solid #282828; } .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { color: #fafafa; } .bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover { color: #fff; } .bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary { color: var(--mc-placeholder) !important; } tbody tr { color: var(--mc-text); } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { color: var(--mc-text); } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { color: var(--mc-text); } .list-group-item { background-color: var(--mc-surface-alt); border: 1px solid var(--mc-border); } .table-striped>tbody>tr:nth-of-type(odd) { background-color: var(--mc-table-stripe-row); } table.dataTable>tbody>tr.child ul.dtr-details>li { border-bottom: 1px solid rgba(255, 255, 255, 0.13); } .label.label-last-login { color: var(--mc-text) !important; background-color: #555 !important; } .progress { background-color: var(--mc-progress-bg); } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { color: var(--mc-text); } div.numberedtextarea-number { color: #999; } .well { border: 1px solid var(--mc-border); background-color: var(--mc-surface-alt); } pre { color: var(--mc-text); background-color: var(--mc-surface-alt); border: 1px solid var(--mc-border); } .form-control { background-color: transparent; } input.form-control, textarea.form-control { color: var(--mc-input-color) !important; background-color: var(--mc-input-bg) !important; border: 1px solid var(--mc-input-border); } input.form-control:focus, textarea.form-control { background-color: var(--mc-input-bg) !important; } input.form-control:disabled, textarea.form-disabled { color: var(--mc-input-disabled-color) !important; background-color: var(--mc-input-disabled-bg) !important; } .input-group-addon { color: var(--mc-text); background-color: var(--mc-input-bg) !important; border: 1px solid var(--mc-input-border); } .input-group-text { color: var(--mc-text); background-color: #1c1c1c; } .list-group-item { color: var(--mc-text); } .dropdown-item { color: var(--mc-text); } .dropdown-item:hover { color: #616161 !important; } .dropdown-item.active:hover { color: #fff !important; background-color: #007aff; } .form-select { color: var(--mc-input-color)!important; background-color: var(--mc-input-bg)!important; border: 1px solid var(--mc-input-border); } .responsive-tabs .card-header button[data-bs-toggle="collapse"] { color: #c7c7c7; } .navbar-toggler { color: #fff !important; } .form-control-plaintext { color: #e0e0e0; } .breadcrumb { color: #fff !important; background-color: #7a7a7a !important; border-color: #5c5c5c !important; } a { color: var(--mc-link); text-decoration: underline; } a:hover { color: var(--mc-link-hover); } .breadcrumb-item.active { color: var(--mc-text); } .list-group-item.disabled, .list-group-item:disabled { color: #fff; background-color: #a8a8a8 !important; border-color: #a8a8a8; } .card.bg-light .card-title { color: #000 !important; } .card.bg-light .card-text { color: #000; } .accordion-item { background-color: #3a3a3a; } .accordion-button { color: var(--mc-text-soft); background-color: #2c2c2c; } .accordion-button:not(.collapsed) { color: var(--mc-link); background-color: #2c2c2c; } .accordion-button::after { background-image: none; } .accordion-button:not(.collapsed)::after { background-image: none; } .toast-header { background-color: #4c4c4c; } .toast-body { background-color: #626262; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff !important; } .tag-box { background-color: var(--mc-surface-alt); border: 1px solid var(--mc-border); } .tag-input { color: #fff; background-color: var(--mc-surface-alt); } .tag-add { color: var(--mc-text); } .tag-add:hover { color: #d1d1d1; } .btn-check-label { color: #fff; } .btn-outline-secondary:hover { background-color: var(--mc-btn-outline-hover-bg); } .btn.btn-outline-secondary { color: var(--mc-btn-outline-color) !important; border-color: var(--mc-btn-outline-border) !important; } .btn-check:checked+.btn-outline-secondary, .btn-check:active+.btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show { background-color: var(--mc-btn-outline-active-bg) !important; } .btn-check:checked+.btn-light, .btn-check:active+.btn-light, .btn-light:active, .btn-light.active, .show>.btn-light.dropdown-toggle { color: var(--mc-btn-light-active-color) !important; background-color: var(--mc-btn-light-active-bg) !important; border-color: var(--mc-btn-light-active-border) !important; } .btn-input-missing, .btn-input-missing:hover, .btn-input-missing:active, .btn-input-missing:focus, .btn-input-missing:active:hover, .btn-input-missing:active:focus { color: #fff !important; background-color: #ff3b30 !important; border-color: #ff3b30 !important; } .inputMissingAttr { border-color: #ff4136 !important; } .list-group-details { background: var(--mc-list-details-bg); } .list-group-header { background: var(--mc-list-header-bg); } span.mail-address-item { background-color: var(--mc-chip-bg); border-radius: 4px; border: 1px solid var(--mc-border); padding: 2px 7px; display: inline-block; margin: 2px 6px 2px 0; } table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before:hover, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before:hover { background-color: var(--mc-dtr-hover-bg) !important; } table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before { background-color: var(--mc-dtr-bg) !important; border: 1.5px solid var(--mc-dtr-border) !important; color: var(--mc-dtr-color) !important; } table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before { background-color: var(--mc-dtr-active-bg); } table.dataTable.dtr-inline.collapsed>tbody>tr>td.child, table.dataTable.dtr-inline.collapsed>tbody>tr>th.child, table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty { background-color: var(--mc-table-child-bg); } table.table, .table-striped>tbody>tr:nth-of-type(odd)>*, tbody tr { color: var(--mc-text) !important; } .table-secondary { --bs-table-bg: #282828; --bs-table-striped-bg: #343434; --bs-table-striped-color: var(--mc-body-color); --bs-table-active-bg: #4c4c4c; --bs-table-active-color: var(--mc-body-color); --bs-table-hover-bg: #3a3a3a; --bs-table-hover-color: var(--mc-body-color); color: var(--mc-text); border-color: #3a3a3a; } .table-light { --bs-table-bg: #3a3a3a; --bs-table-striped-bg: #444444; --bs-table-striped-color: var(--mc-body-color); --bs-table-active-bg: #5c5c5c; --bs-table-active-color: var(--mc-body-color); --bs-table-hover-bg: #4c4c4c; --bs-table-hover-color: var(--mc-body-color); color: var(--mc-text); border-color: #4c4c4c; } .table-bordered { border-color: #3a3a3a; } .table-bordered th, .table-bordered td { border-color: #3a3a3a !important; } .table-bordered thead th, .table-bordered thead td { border-bottom-width: 2px; } .table-striped>tbody>tr:nth-of-type(odd)>td, .table-striped>tbody>tr:nth-of-type(odd)>th { background-color: var(--mc-table-stripe); } .table-hover>tbody>tr:hover { background-color: var(--mc-table-hover); } .table>:not(caption)>*>* { border-color: var(--mc-table-border); --bs-table-color-state:var(--mc-text-soft); --bs-table-bg: var(--mc-table-bg); } .text-muted { --bs-secondary-color: var(--mc-muted); } input::placeholder { color: var(--mc-muted) !important; } .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e8e93' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .btn-light, .btn-light:hover { background-image: none; }