/* //////////////////////////////////////////////////////////////////////////// // PANEL_APARIENCIA.CSS // AJUSTES DE APARIENCIA DEL PANEL: ESCALA DE INTERFAZ Y SKINS DE COLOR DEL MENU // LATERAL. SE APLICAN COMO ATRIBUTOS DEL , PUESTOS POR EL SCRIPT INLINE // PRE-PINTADO DE MASTER.BLADE.PHP Y POR PUBLIC/JS/COMPONENTS/PANEL_APARIENCIA.JS // // CLAVE LOCALSTORAGE ATRIBUTO VALORES DEFAULT // tema data-bs-theme light / dark / auto light // skin data-skin navy-sky dlm azul grafito verde navy-sky // vino // (clasico = SIN atributo) // escala data-escala 80 / 85 / 90 / 95 / 100 90 // // ESTA HOJA SE CARGA DESPUES DE ADMINLTE.MIN.CSS Y DE APP.CSS. // REGLA DEL PROYECTO: TODA MEDIDA FIJA DEL SHELL VA EN REM, NUNCA EN PX, O NO // ACOMPANA LA ESCALA Y QUEDA DESALINEADA. //////////////////////////////////////////////////////////////////////////// */ /* //////////////////////////////////////////////////////////////////////////// // 1. ESCALA DE LA INTERFAZ // SE BAJA EL FONT-SIZE DEL ROOT: BOOTSTRAP 4 Y ADMINLTE 3 DIMENSIONAN EN REM, // ASI QUE ENCOGE LETRA, PADDINGS, ALTURA DE INPUTS Y GAPS DE UNA SOLA VEZ. // NO USAR ZOOM NI TRANSFORM: SCALE(): ROMPEN EL POSICIONAMIENTO DE LOS DROPDOWN // DE BOOTSTRAP (POPPER) Y EL CALCULO DE ANCHOS DE DATATABLES. //////////////////////////////////////////////////////////////////////////// */ html { font-size: 90%; } /* DEFAULT */ html[data-escala="80"] { font-size: 80%; } html[data-escala="85"] { font-size: 85%; } html[data-escala="90"] { font-size: 90%; } html[data-escala="95"] { font-size: 95%; } html[data-escala="100"] { font-size: 100%; } /* //////////////////////////////////////////////////////////////////////////// // 2. MEDIDAS FIJAS DEL SHELL PASADAS A REM // ADMINLTE 3 NO DECLARA UNA VARIABLE DE ANCHO DE SIDEBAR: LOS 250PX ESTAN // REPETIDOS EN LA HOJA. AQUI SE CENTRALIZAN EN --PANEL-SIDEBAR-W (15.625REM = // 250PX AL 100%) PARA QUE EL SIDEBAR SE ANGOSTE JUNTO CON LA ESCALA Y NO QUEDE // FRANJA VACIA ENTRE EL SIDEBAR Y EL CONTENIDO. //////////////////////////////////////////////////////////////////////////// */ :root { --panel-sidebar-w: 15.625rem; /* 250PX AL 100% */ --panel-sidebar-w-neg: -15.625rem; } html .main-sidebar, html .main-sidebar::before { width: var(--panel-sidebar-w); } html .sidebar-collapse .main-sidebar, html .sidebar-collapse .main-sidebar::before { margin-left: var(--panel-sidebar-w-neg); } @media (max-width: 767.98px) { html .main-sidebar, html .main-sidebar::before { margin-left: var(--panel-sidebar-w-neg); } } @media (min-width: 768px) { html body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper, html body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer, html body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header, html .sidebar-mini-md .content-wrapper, html .sidebar-mini-md .main-footer, html .sidebar-mini-md .main-header, html .sidebar-mini-xs .content-wrapper, html .sidebar-mini-xs .main-footer, html .sidebar-mini-xs .main-header { margin-left: var(--panel-sidebar-w); } } /* MARCA (BRAND-LINK) EN LOS LAYOUTS FIJOS */ html .layout-fixed .brand-link, html [class*="navbar-fixed"] .wrapper .brand-link, html [class*="navbar-fixed"] .wrapper .main-sidebar:hover .brand-link, html [class*="navbar-fixed"] .wrapper.sidebar-collapse .main-sidebar:hover .brand-link { width: var(--panel-sidebar-w); } /* SIDEBAR-MINI: ANCHO AL EXPANDIR POR HOVER Y ANCHO DE LOS ENLACES */ html .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused, html .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover, html .sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused, html .sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover, html .sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused, html .sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover, html .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused .brand-link, html .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-link, html .sidebar-mini.sidebar-collapse.layout-fixed .main-sidebar:hover .brand-link { width: var(--panel-sidebar-w); } html .sidebar-mini .main-sidebar .nav-link, html .sidebar-mini-md .main-sidebar .nav-link, html .sidebar-mini-xs .main-sidebar .nav-link { width: calc(var(--panel-sidebar-w) - 1rem); } /* LOGO DE LA MARCA Y OFFSET DEL IFRAME: UNICAS MEDIDAS EN PX QUE QUEDABAN */ html .brand-link .brand-image, html .brand-link .brand-image-xs { max-height: 2.0625rem; /* 33PX AL 100% */ } html .brand-link .brand-image-xl { max-height: 2.5rem; /* 40PX AL 100% */ } html .content-wrapper.iframe-mode iframe { margin-bottom: -0.5rem; /* 8PX AL 100% */ } /* //////////////////////////////////////////////////////////////////////////// // 3. SKINS DE COLOR DEL MENU LATERAL // EL SKIN PINTA SOLO EL SIDEBAR, MAS EL BORDE SUPERIOR DEL TOPBAR Y LA PESTANA // ACTIVA DEL SHELL DE IFRAMES. ES INDEPENDIENTE DE CLARO/OSCURO. // CLASICO = AUSENCIA DE DATA-SKIN: EL SIDEBAR VUELVE AL FONDO DE SIEMPRE Y // SIGUE AL MODO CLARO/OSCURO. //////////////////////////////////////////////////////////////////////////// */ html[data-skin] { /* TOKENS DERIVADOS, IGUALES PARA TODOS LOS SKINS (FONDOS OSCUROS) */ --skin-texto: rgba(255, 255, 255, 0.82); --skin-texto-hover: #ffffff; --skin-hover-bg: rgba(255, 255, 255, 0.10); --skin-header: rgba(255, 255, 255, 0.55); --skin-borde: rgba(255, 255, 255, 0.12); --skin-submenu-bg: rgba(0, 0, 0, 0.20); } html[data-skin="navy-sky"] { --skin-bg: #001f3f; --skin-brand-bg: #00162d; --skin-acento: #3c8dbc; } html[data-skin="dlm"] { --skin-bg: #23479b; --skin-brand-bg: #1a3576; --skin-acento: #4d7fe0; } html[data-skin="azul"] { --skin-bg: #1c3f94; --skin-brand-bg: #16327a; --skin-acento: #4dabf7; } html[data-skin="grafito"] { --skin-bg: #212529; --skin-brand-bg: #16191c; --skin-acento: #6c757d; } html[data-skin="verde"] { --skin-bg: #0b3d2e; --skin-brand-bg: #072a20; --skin-acento: #20c997; } html[data-skin="vino"] { --skin-bg: #3b1220; --skin-brand-bg: #2a0c17; --skin-acento: #e64980; } /* FONDO DEL SIDEBAR. GANA A [CLASS*=SIDEBAR-DARK-]{BACKGROUND-COLOR:#343A40} */ html[data-skin] .main-sidebar, html[data-skin] body.dark-mode .main-sidebar { background-color: var(--skin-bg); } /* FRANJA DE LA MARCA */ html[data-skin] .main-sidebar .brand-link, html[data-skin] body.dark-mode .main-sidebar .brand-link, html[data-skin] [class*="navbar-fixed"] .wrapper .main-sidebar .brand-link:not([class*="navbar"]), html[data-skin] body.dark-mode [class*="navbar-fixed"] .wrapper .main-sidebar .brand-link:not([class*="navbar"]) { background-color: var(--skin-brand-bg); border-bottom: 1px solid var(--skin-borde); color: var(--skin-texto); } html[data-skin] .main-sidebar .brand-link:hover, html[data-skin] .main-sidebar .brand-link .pushmenu:hover { color: var(--skin-texto-hover); } /* TEXTO BASE DE LOS ENLACES */ html[data-skin] .main-sidebar .nav-sidebar > .nav-item > .nav-link, html[data-skin] .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link, html[data-skin] body.dark-mode .main-sidebar .nav-sidebar > .nav-item > .nav-link, html[data-skin] body.dark-mode .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link { color: var(--skin-texto); } /* HOVER, FOCO Y RAMA ABIERTA */ html[data-skin] .main-sidebar .nav-sidebar > .nav-item:hover > .nav-link, html[data-skin] .main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link, html[data-skin] .main-sidebar .nav-sidebar > .nav-item > .nav-link:focus, html[data-skin] .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover, html[data-skin] .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:focus, html[data-skin] body.dark-mode .main-sidebar .nav-sidebar > .nav-item:hover > .nav-link, html[data-skin] body.dark-mode .main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link, html[data-skin] body.dark-mode .main-sidebar .nav-sidebar > .nav-item > .nav-link:focus, html[data-skin] body.dark-mode .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover { background-color: var(--skin-hover-bg); color: var(--skin-texto-hover); } /* ENLACE ACTIVO: DEBE GANARLE A .DARK-MODE .SIDEBAR-DARK-PRIMARY ... .ACTIVE */ html[data-skin] .main-sidebar .nav-sidebar > .nav-item > .nav-link.active, html[data-skin] .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active, html[data-skin] body.dark-mode .main-sidebar .nav-sidebar > .nav-item > .nav-link.active, html[data-skin] body.dark-mode .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active { background-color: var(--skin-acento); color: #ffffff; } html[data-skin] .main-sidebar .nav-sidebar.nav-legacy > .nav-item > .nav-link.active, html[data-skin] body.dark-mode .main-sidebar .nav-sidebar.nav-legacy > .nav-item > .nav-link.active { border-color: var(--skin-acento); } /* SUBMENUS, CABECERAS Y SEPARADORES */ html[data-skin] .main-sidebar .nav-sidebar .nav-treeview, html[data-skin] body.dark-mode .main-sidebar .nav-sidebar .nav-treeview { background-color: var(--skin-submenu-bg); } html[data-skin] .main-sidebar .nav-header, html[data-skin] body.dark-mode .main-sidebar .nav-header { background-color: transparent; color: var(--skin-header); } html[data-skin] .main-sidebar .user-panel, html[data-skin] .main-sidebar .sidebar-custom, html[data-skin] body.dark-mode .main-sidebar .user-panel { border-color: var(--skin-borde); } html[data-skin] .main-sidebar .user-panel .info a, html[data-skin] body.dark-mode .main-sidebar .user-panel .info a { color: var(--skin-texto); } /* BUSCADOR DEL SIDEBAR */ html[data-skin] .main-sidebar .form-control-sidebar, html[data-skin] .main-sidebar .btn-sidebar, html[data-skin] body.dark-mode .main-sidebar .form-control-sidebar, html[data-skin] body.dark-mode .main-sidebar .btn-sidebar { background-color: var(--skin-brand-bg); border: 1px solid var(--skin-borde); color: var(--skin-texto-hover); } /* BORDE SUPERIOR DEL TOPBAR */ html[data-skin] .main-header.navbar { border-top: 0.1875rem solid var(--skin-acento); } /* PESTANA ACTIVA DEL SHELL DE IFRAMES */ html[data-skin] .content-wrapper.iframe-mode .navbar-nav .nav-item.active .nav-link, html[data-skin] .content-wrapper.iframe-mode .navbar-nav .nav-link.active { box-shadow: inset 0 -0.1875rem 0 var(--skin-acento); color: var(--skin-bg); font-weight: 600; } /* //////////////////////////////////////////////////////////////////////////// // 4. MODO OSCURO: FONDO DEL DOCUMENTO ANTES DE QUE PINTE EL CONTENIDO // EVITA EL DESTELLO BLANCO ENTRE EL SCRIPT PRE-PINTADO Y EL RENDER DEL BODY. //////////////////////////////////////////////////////////////////////////// */ html[data-tema-resuelto="dark"], html[data-tema-resuelto="dark"] body { background-color: #454d55; } /* //////////////////////////////////////////////////////////////////////////// // 5. DROPDOWN DE APARIENCIA DEL TOPBAR //////////////////////////////////////////////////////////////////////////// */ .panel-apariencia-menu { min-width: 15rem; max-height: 70vh; overflow-y: auto; } .panel-apariencia-menu .dropdown-header { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .panel-apariencia-menu .dropdown-item { align-items: center; display: flex; font-size: 0.875rem; } .panel-apariencia-menu .dropdown-item .panel-apariencia-check { margin-left: auto; visibility: hidden; } .panel-apariencia-menu .dropdown-item.active, .panel-apariencia-menu .dropdown-item:active { background-color: rgba(0, 0, 0, 0.06); color: inherit; } .panel-apariencia-menu .dropdown-item.active .panel-apariencia-check { visibility: visible; } .panel-apariencia-muestra { border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 0.1875rem; display: inline-block; height: 0.875rem; margin-right: 0.5rem; width: 0.875rem; } .panel-apariencia-muestra[data-muestra="navy-sky"] { background-color: #001f3f; } .panel-apariencia-muestra[data-muestra="dlm"] { background-color: #23479b; } .panel-apariencia-muestra[data-muestra="azul"] { background-color: #1c3f94; } .panel-apariencia-muestra[data-muestra="grafito"] { background-color: #212529; } .panel-apariencia-muestra[data-muestra="verde"] { background-color: #0b3d2e; } .panel-apariencia-muestra[data-muestra="vino"] { background-color: #3b1220; } .panel-apariencia-muestra[data-muestra="clasico"] { background-color: #343a40; } body.dark-mode .panel-apariencia-menu .dropdown-item.active, body.dark-mode .panel-apariencia-menu .dropdown-item:active { background-color: rgba(255, 255, 255, 0.10); }