/* |-------------------------------------------------------------------------- | unomas.App Admin Themes |-------------------------------------------------------------------------- | Cargar este archivo DESPUÉS del CSS actual del panel. | Cambia el tema agregando una clase al : | theme-dark | theme-light | theme-gray */ :root, body.theme-dark { --theme-body-bg: #1f2329; --theme-page-bg: #1f2329; --theme-sidebar-bg: #2c333d; --theme-sidebar-sub-bg: #202a2f; --theme-sidebar-active: rgba(0,0,0,0.1); --theme-sidebar-active-bg: rgb(6 7 8 / 10%); --theme-navbar-brand-bg: #0c0c0c; --theme-card-bg: #2c333d; --theme-card-header-bg: #2d3540; --theme-card-border: #252c34; --theme-panel-bg: #262e38; --theme-panel-border: #1e242c; --theme-list-bg: #303742; --theme-modal-header-bg: #414954; --theme-modal-body-bg: #2d3540; --theme-text: #f2f2f2; --theme-text-soft: #fff; --theme-text-muted: #999; --theme-text-dark: #333; --theme-sidebar-text: #abb1b7; --theme-sidebar-text-hover: #c8cccf; --theme-link: var(--theme-primary); --theme-link-hover: #72afd2; --theme-btn: #fff; --theme-input-border: #7a7676; --theme-table-border: #252c34; --theme-shadow: rgba(0,0,0,0.18); } body.theme-light { --theme-body-bg: #f4f7fb; --theme-page-bg: #f4f7fb; --theme-sidebar-bg: #ffffff; --theme-sidebar-sub-bg: #edf3f8; --theme-sidebar-active: rgba(0,0,0,0.1); --theme-sidebar-active-bg: rgb(169 199 225 / 10%); --theme-navbar-brand-bg: #ffffff; --theme-card-bg: #ffffff; --theme-card-header-bg: #f8fafc; --theme-card-border: #dfe7ef; --theme-panel-bg: #f8fafc; --theme-panel-border: #e8ebee; --theme-list-bg: #ffffff; --theme-modal-header-bg: #f8fafc; --theme-modal-body-bg: #ffffff; --theme-text: #1f2937; --theme-text-soft: #334155; --theme-text-muted: #64748b; --theme-sidebar-text: #334155; --theme-sidebar-text-hover: #404e63; --theme-link: #005aa4; --theme-link-hover: #003f73; --theme-btn: #fff; --theme-input-border: #cbd5e1; --theme-table-border: #e2e8f0; --theme-shadow: rgba(15, 23, 42, 0.10); } body.theme-gray { --theme-body-bg: #e7eaee; --theme-page-bg: #e7eaee; --theme-sidebar-bg: #374151; --theme-sidebar-sub-bg: #2f3845; --theme-sidebar-active: #212831; --theme-sidebar-active-bg: rgb(24 28 33 / 10%); --theme-navbar-brand-bg: #263238; --theme-card-bg: #f5f6f8; --theme-card-header-bg: #eceff3; --theme-card-border: #cfd6de; --theme-panel-bg: #eef1f5; --theme-panel-border: #e1e6ec; --theme-list-bg: #f8fafc; --theme-modal-header-bg: #eceff3; --theme-modal-body-bg: #f8fafc; --theme-text: #263238; --theme-text-soft: #374151; --theme-text-muted: #6b7280; --theme-sidebar-text: #d1d5db; --theme-sidebar-text-hover: #e7e9ec; --theme-link: #37474f; --theme-link-hover: #111827; --theme-btn: #fff; --theme-input-border: #b0bac5; --theme-table-border: #d6dce3; --theme-shadow: rgba(31, 41, 55, 0.12); } /* Layout */ body.theme-dark, body.theme-light, body.theme-gray { color: var(--theme-text-soft); background-color: var(--theme-body-bg); } body.theme-dark #page-content-wrapper, body.theme-light #page-content-wrapper, body.theme-gray #page-content-wrapper { background: var(--theme-page-bg); } body.theme-dark #sidebar-wrapper, body.theme-light #sidebar-wrapper, body.theme-gray #sidebar-wrapper { background: var(--theme-sidebar-bg); border-right: 1px solid var(--theme-card-border); } body.theme-dark .navbar-header, body.theme-light .navbar-header, body.theme-gray .navbar-header { background: var(--theme-navbar-brand-bg); } body.theme-light .navbar-brand > img, body.theme-gray .navbar-brand > img { filter: none; } body.theme-dark .navbar-inverse, body.theme-light .navbar-inverse, body.theme-gray .navbar-inverse { background-color: var(--theme-primary); } /* Typography */ body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6, body.theme-light h1, body.theme-light h2, body.theme-light h3, body.theme-light h4, body.theme-light h5, body.theme-light h6, body.theme-gray h1, body.theme-gray h2, body.theme-gray h3, body.theme-gray h4, body.theme-gray h5, body.theme-gray h6 { color: var(--theme-text); } body.theme-dark a, body.theme-light a, body.theme-gray a { color: var(--theme-link); } body.theme-dark a:hover, body.theme-dark a:focus, body.theme-light a:hover, body.theme-light a:focus, body.theme-gray a:hover, body.theme-gray a:focus { color: var(--theme-link-hover); } body.theme-dark a.btn, body.theme-light a.btn, body.theme-gray a.btn { color: var(--override-brand-text); } body.theme-dark a.label, body.theme-light a.label, body.theme-gray a.label { color: #fff; } /* Sidebar */ body.theme-dark .sidebar ul li a, body.theme-light .sidebar ul li a, body.theme-gray .sidebar ul li a { color: var(--theme-sidebar-text); } body.theme-dark .sidebar ul li a:hover, body.theme-light .sidebar ul li a:hover, body.theme-gray .sidebar ul li a:hover, body.theme-dark .sidebar ul li.active-link a, body.theme-light .sidebar ul li.active-link a, body.theme-gray .sidebar ul li.active-link a { color: var(--theme-sidebar-text-hover); } body.theme-dark .sidebar ul li.active-link, body.theme-light .sidebar ul li.active-link, body.theme-gray .sidebar ul li.active-link { background-color: var(--theme-sidebar-active-bg); } body.theme-dark .sidebar ul li.active-link a, body.theme-light .sidebar ul li.active-link a, body.theme-gray .sidebar ul li.active-link a{ color: #fff; box-shadow: inset 2px 0 0 0 #17B6A4; } body.theme-dark .sidebar ul .list-header, body.theme-light .sidebar ul .list-header, body.theme-gray .sidebar ul .list-header { color: var(--theme-text-muted); } body.theme-dark .sidebar .nav-second-level, body.theme-light .sidebar .nav-second-level, body.theme-gray .sidebar .nav-second-level, body.theme-dark .sidebar ul li.active, body.theme-light .sidebar ul li.active, body.theme-gray .sidebar ul li.active { background-color: var(--theme-sidebar-sub-bg); border-color: var(--theme-sidebar-active); } body.theme-dark .sidebar ul li.active-link a, body.theme-light .sidebar ul li.active-link a, body.theme-gray .sidebar ul li.active-link a { box-shadow: inset 2px 0 0 0 var(--theme-accent); } body.theme-light .sidebar ul li.active-link a, body.theme-light .sidebar ul li a:hover { color: var(--theme-primary); } /* Headers/cards */ body.theme-dark .content-header, body.theme-light .content-header, body.theme-gray .content-header { background-color: var(--theme-card-bg); border-bottom-color: var(--theme-card-border); } body.theme-dark .content-header .header-icon, body.theme-light .content-header .header-icon, body.theme-gray .content-header .header-icon, body.theme-dark .card-title h2, body.theme-light .card-title h2, body.theme-gray .card-title h2 { color: var(--theme-primary-hover); } body.theme-dark .content-header .header-title small, body.theme-light .content-header .header-title small, body.theme-gray .content-header .header-title small, body.theme-dark .card .card-content p, body.theme-light .card .card-content p, body.theme-gray .card .card-content p { color: var(--theme-text-muted); } body.theme-dark .card, body.theme-light .card, body.theme-gray .card, body.theme-dark .panel, body.theme-light .panel, body.theme-gray .panel { background-color: var(--theme-card-bg) !important; color: var(--theme-text-soft); box-shadow: 0 2px 5px 0 var(--theme-shadow), 0 2px 10px 0 var(--theme-shadow); } body.theme-dark .card-header, body.theme-light .card-header, body.theme-gray .card-header, body.theme-dark .panel-heading, body.theme-light .panel-heading, body.theme-gray .panel-heading { background: var(--theme-card-header-bg); border-bottom-color: var(--theme-card-border); color: var(--theme-text); } body.theme-dark .card-header > h2, body.theme-light .card-header > h2, body.theme-gray .card-header > h2, body.theme-dark .card .card-content, body.theme-light .card .card-content, body.theme-gray .card .card-content { color: var(--theme-text-soft); } body.theme-dark .card-header i.fa, body.theme-light .card-header i.fa, body.theme-gray .card-header i.fa, body.theme-dark .material-button, body.theme-light .material-button, body.theme-gray .material-button, body.theme-dark .timeline-badge, body.theme-light .timeline-badge, body.theme-gray .timeline-badge, body.theme-dark span.badge, body.theme-light span.badge, body.theme-gray span.badge { background-color: var(--theme-primary); color: #fff; } body.theme-dark .card .card-content .well, body.theme-light .card .card-content .well, body.theme-gray .card .card-content .well { background: var(--theme-panel-bg); border-color: var(--theme-card-border); color: var(--theme-text-soft); } body.theme-dark .card .card-content .list-group-item, body.theme-light .card .card-content .list-group-item, body.theme-gray .card .card-content .list-group-item { background-color: var(--theme-list-bg); border: 1px solid var(--theme-card-border); color: var(--theme-text-soft); } /* Forms */ body.theme-dark input:not([type]), body.theme-dark input[type="text"], body.theme-dark input[type="password"], body.theme-dark input[type="email"], body.theme-dark input[type="url"], body.theme-dark input[type="time"], body.theme-dark input[type="date"], body.theme-dark input[type="datetime"], body.theme-dark input[type="datetime-local"], body.theme-dark input[type="tel"], body.theme-dark input[type="number"], body.theme-dark input[type="search"], body.theme-dark textarea.materialize-textarea, body.theme-light input:not([type]), body.theme-light input[type="text"], body.theme-light input[type="password"], body.theme-light input[type="email"], body.theme-light input[type="url"], body.theme-light input[type="time"], body.theme-light input[type="date"], body.theme-light input[type="datetime"], body.theme-light input[type="datetime-local"], body.theme-light input[type="tel"], body.theme-light input[type="number"], body.theme-light input[type="search"], body.theme-light textarea.materialize-textarea, body.theme-gray input:not([type]), body.theme-gray input[type="text"], body.theme-gray input[type="password"], body.theme-gray input[type="email"], body.theme-gray input[type="url"], body.theme-gray input[type="time"], body.theme-gray input[type="date"], body.theme-gray input[type="datetime"], body.theme-gray input[type="datetime-local"], body.theme-gray input[type="tel"], body.theme-gray input[type="number"], body.theme-gray input[type="search"], body.theme-gray textarea.materialize-textarea, body.theme-dark .form-control, body.theme-light .form-control, body.theme-gray .form-control, body.theme-dark select, body.theme-light select, body.theme-gray select { color: var(--theme-text-soft); border-bottom-color: var(--theme-input-border); background-color: transparent; } body.theme-light .form-control, body.theme-gray .form-control, body.theme-light select, body.theme-gray select { background-color: #fff; border-color: var(--theme-input-border); } body.theme-dark label, body.theme-light label, body.theme-gray label, body.theme-dark [type="checkbox"] + label, body.theme-light [type="checkbox"] + label, body.theme-gray [type="checkbox"] + label, body.theme-dark [type="radio"]:not(:checked) + label, body.theme-light [type="radio"]:not(:checked) + label, body.theme-gray [type="radio"]:not(:checked) + label, body.theme-dark [type="radio"]:checked + label, body.theme-light [type="radio"]:checked + label, body.theme-gray [type="radio"]:checked + label { color: var(--theme-text-muted); } /* Tables */ body.theme-dark .table, body.theme-light .table, body.theme-gray .table { color: var(--theme-text-soft); } body.theme-dark .table-bordered, body.theme-light .table-bordered, body.theme-gray .table-bordered, body.theme-dark .table-bordered>tbody>tr>td, body.theme-light .table-bordered>tbody>tr>td, body.theme-gray .table-bordered>tbody>tr>td, body.theme-dark .table-bordered>thead>tr>th, body.theme-light .table-bordered>thead>tr>th, body.theme-gray .table-bordered>thead>tr>th{ border: 1px solid var(--theme-card-border); } body.theme-dark .table > tbody > tr > td, body.theme-dark .table > tbody > tr > th, body.theme-dark .table > tfoot > tr > td, body.theme-dark .table > tfoot > tr > th, body.theme-dark .table > thead > tr > td, body.theme-dark .table > thead > tr > th, body.theme-light .table > tbody > tr > td, body.theme-light .table > tbody > tr > th, body.theme-light .table > tfoot > tr > td, body.theme-light .table > tfoot > tr > th, body.theme-light .table > thead > tr > td, body.theme-light .table > thead > tr > th, body.theme-gray .table > tbody > tr > td, body.theme-gray .table > tbody > tr > th, body.theme-gray .table > tfoot > tr > td, body.theme-gray .table > tfoot > tr > th, body.theme-gray .table > thead > tr > td, body.theme-gray .table > thead > tr > th { border-top-color: var(--theme-table-border); } body.theme-light .table-striped > tbody > tr:nth-of-type(odd), body.theme-gray .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(0,0,0,.025); } /* Dropdowns */ body.theme-dark .dropdown-menu, body.theme-light .dropdown-menu, body.theme-gray .dropdown-menu, body.theme-dark .dropdown-menu .list-details, body.theme-light .dropdown-menu .list-details, body.theme-gray .dropdown-menu .list-details { background: var(--theme-card-bg); color: var(--theme-text-soft); border-color: var(--theme-card-border); } body.theme-dark .dropdown-menu > li > a, body.theme-light .dropdown-menu > li > a, body.theme-gray .dropdown-menu > li > a, body.theme-dark .list-details > a > p, body.theme-light .list-details > a > p, body.theme-gray .list-details > a > p { color: var(--theme-text-soft); } body.theme-dark .dropdown-menu > li > a:hover, body.theme-dark .dropdown-menu > li > a:focus, body.theme-light .dropdown-menu > li > a:hover, body.theme-light .dropdown-menu > li > a:focus, body.theme-gray .dropdown-menu > li > a:hover, body.theme-gray .dropdown-menu > li > a:focus { background-color: color-mix(in srgb, var(--theme-primary) 18%, transparent); box-shadow: none; } body.theme-dark .dropdown-content li > span{ color: var(--theme-text-dark); } body.theme-light .dropdown-content li > span, body.theme-gray .dropdown-content li > span{ color: var(--theme-text); } /* Modal */ body.theme-dark .modal-content, body.theme-light .modal-content, body.theme-gray .modal-content, body.theme-dark .modal-dialog .modal-header, body.theme-light .modal-dialog .modal-header, body.theme-gray .modal-dialog .modal-header, body.theme-dark .modal-dialog .modal-footer, body.theme-light .modal-dialog .modal-footer, body.theme-gray .modal-dialog .modal-footer { background: var(--theme-modal-header-bg); color: var(--theme-text-soft); border-color: var(--theme-card-border); } body.theme-dark .modal-dialog .modal-body, body.theme-light .modal-dialog .modal-body, body.theme-gray .modal-dialog .modal-body { background: var(--theme-modal-body-bg); color: var(--theme-text-soft); } body.theme-light .md-content form p, body.theme-gray .md-content form p, body.theme-light .modal-dialog .modal-footer .btn, body.theme-gray .modal-dialog .modal-footer .btn, body.theme-light .modal-dialog .modal-footer .btn-large, body.theme-gray .modal-dialog .modal-footer .btn-large, body.theme-light .modal-dialog .modal-footer .btn-flat, body.theme-gray .modal-dialog .modal-footer .btn-flat { color: var(--theme-text-soft); } /* Utilities */ body.theme-dark .text-muted, body.theme-light .text-muted, body.theme-gray .text-muted, body.theme-dark .icons-name, body.theme-light .icons-name, body.theme-gray .icons-name, body.theme-dark .icon-container [class^="ti-"], body.theme-light .icon-container [class^="ti-"], body.theme-gray .icon-container [class^="ti-"], body.theme-dark .icon-container [class*=" ti-"], body.theme-light .icon-container [class*=" ti-"], body.theme-gray .icon-container [class*=" ti-"] { color: var(--theme-text-muted); } body.theme-light .text-white, body.theme-gray .text-white{ color: var(--theme-text-muted); } body.theme-light .tree li, body.theme-light .tree li a, body.theme-light .tree li button, body.theme-gray .tree li, body.theme-gray .tree li a, body.theme-gray .tree li button { color: var(--theme-text-soft); } body.theme-dark .tab-box .tab-box-option, .tabcordion .nav-tabs li, body.theme-light .tab-box .tab-box-option, .tabcordion .nav-tabs li, body.theme-gray .tab-box .tab-box-option, .tabcordion .nav-tabs li { border-bottom: 1px solid var(--override-filters-border); border-right: 1px solid var(--override-filters-border); background-color: var(--theme-body-bg); } .tab-box, .tabcordion { background-color: var(--theme-panel-bg); box-shadow: 2px 1px 8px -1px rgba(0,0,0,.09)!important; } .tab-box .tab-box-option.active, .tabcordion .nav-tabs li.active { background-color: var(--theme-panel-bg) !important; }