/* ============================================================================ dale-claro.css — Piel clara con los colores de la marca ---------------------------------------------------------------------------- Se carga DESPUES de AdminLTE y de _all-skins, y solo anade reglas: no se modifico ningun archivo original. Para volver atras basta con quitar el de plantilla.php y la clase "skin-dale-claro" del . Colores tomados del logo (Original fondo azul.png), medidos pixel a pixel: #2E3B8E azul 89,6% de la imagen #EB6B14 naranja 4,8% #FFFFFF blanco 3,9% El naranja se usa poco a proposito: en el tablero ya significa "Advertencia (10-24h)". Si se convierte en decoracion, ese aviso deja de destacar. Aqui aparece solo en el indicador de la seccion activa. ========================================================================== */ .skin-dale-claro { --dx-azul: #2E3B8E; --dx-azul-hondo: #232C6B; --dx-azul-suave: #EEF0FA; --dx-naranja: #EB6B14; --dx-tinta: #2A2E3E; --dx-tinta-2: #5A6070; --dx-tinta-3: #8A90A0; --dx-linea: #E5E7EE; --dx-fondo: #F6F7FB; --dx-blanco: #FFFFFF; --dx-panel-2: #F4F5FA; /* cabeceras de tabla y superficies de apoyo */ --dx-fila-alterna:#FAFBFD; /* El cuadro amarillo de aviso y la cabecera rojiza de bloqueados no son decoracion: dicen "leeme" y "cuidado". Se conservan en las dos pieles, ajustando solo la luminosidad para que se lean sobre cada fondo. */ --dx-aviso-fondo: #FFFBEA; --dx-aviso-borde: #F0E2B6; --dx-aviso-tinta: #6B5B2A; --dx-alerta-fondo:#FDF2F2; } /* ── Cabecera ─────────────────────────────────────────────────────────── */ .skin-dale-claro .main-header .navbar { background-color: var(--dx-blanco); border-bottom: 1px solid var(--dx-linea); box-shadow: 0 1px 2px rgba(42, 46, 62, .04); } .skin-dale-claro .main-header .logo { background-color: var(--dx-blanco); color: var(--dx-azul); border-bottom: 1px solid var(--dx-linea); border-right: 1px solid var(--dx-linea); font-weight: 700; } .skin-dale-claro .main-header .logo:hover { background-color: #FBFBFD; } .skin-dale-claro .main-header .navbar .sidebar-toggle, .skin-dale-claro .main-header .navbar .nav > li > a { color: var(--dx-tinta-2); } .skin-dale-claro .main-header .navbar .sidebar-toggle:hover, .skin-dale-claro .main-header .navbar .nav > li > a:hover, .skin-dale-claro .main-header .navbar .nav > .active > a, .skin-dale-claro .main-header .navbar .nav .open > a, .skin-dale-claro .main-header .navbar .nav .open > a:focus { background-color: var(--dx-azul-suave); color: var(--dx-azul); } /* El nombre del usuario arriba a la derecha */ .skin-dale-claro .main-header .navbar .navbar-custom-menu .user-menu > a > span, .skin-dale-claro .main-header .navbar .user-menu .user-image + span { color: var(--dx-tinta); } /* ── Barra lateral ────────────────────────────────────────────────────── */ .skin-dale-claro .main-sidebar, .skin-dale-claro .left-side, .skin-dale-claro .wrapper { background-color: var(--dx-blanco); } .skin-dale-claro .main-sidebar { border-right: 1px solid var(--dx-linea); } .skin-dale-claro .sidebar a { color: var(--dx-tinta-2); } .skin-dale-claro .sidebar-menu > li > a { border-left: 3px solid transparent; font-weight: 500; } .skin-dale-claro .sidebar-menu > li:hover > a, .skin-dale-claro .sidebar-menu > li.active > a, .skin-dale-claro .sidebar-menu > li.menu-open > a { background-color: var(--dx-azul-suave); color: var(--dx-azul); } /* La seccion donde estas: unico sitio con naranja. */ .skin-dale-claro .sidebar-menu > li.active > a { border-left-color: var(--dx-naranja); font-weight: 600; } .skin-dale-claro .sidebar-menu > li > a > .fa, .skin-dale-claro .sidebar-menu > li > a > .glyphicon, .skin-dale-claro .sidebar-menu > li > a > .ion { color: inherit; opacity: .9; } /* Encabezados de grupo dentro del menu */ .skin-dale-claro .sidebar-menu > li.header { color: var(--dx-tinta-3); background-color: var(--dx-blanco); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } /* Submenus */ /* El selector lleva "li >" a proposito. AdminLTE trae esta regla: .skin-blue .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41} que pesa (0,3,1). Un selector de solo clases pesa (0,3,0) y pierde, asi que el submenu desplegado se quedaba con el azul oscuro de AdminLTE encima de la barra blanca: por eso se veia como un bloque pesado y pegado. Con "li >" empatamos en peso y ganamos por ir despues. Ademas cubre los submenus anidados, que "> li >" dejaria fuera. */ .skin-dale-claro .sidebar-menu li > .treeview-menu { background-color: #FAFBFD; } .skin-dale-claro .sidebar-menu .treeview-menu > li > a { color: var(--dx-tinta-2); } .skin-dale-claro .sidebar-menu .treeview-menu > li.active > a, .skin-dale-claro .sidebar-menu .treeview-menu > li > a:hover { color: var(--dx-azul); } .skin-dale-claro .sidebar-menu .treeview-menu > li.active > a { font-weight: 600; } /* Buscador del menu, si lo hay */ .skin-dale-claro .sidebar-form { border: 1px solid var(--dx-linea); border-radius: 6px; background: #FAFBFD; } .skin-dale-claro .sidebar-form input[type="text"], .skin-dale-claro .sidebar-form .btn { background-color: transparent; border: 0; color: var(--dx-tinta-2); box-shadow: none; } /* Bloque del usuario en el menu (si esta activo) */ .skin-dale-claro .user-panel > .info, .skin-dale-claro .user-panel > .info > a { color: var(--dx-tinta); } /* ── Menu plegado: el desplegable del raton ───────────────────────────── */ /* Con fondo oscuro AdminLTE pinta estos paneles en negro. Sobre blanco hay que rehacerlos o el texto queda ilegible. */ .skin-dale-claro.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span:not(.pull-right-container), .skin-dale-claro.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { background-color: var(--dx-azul); color: #fff; border-radius: 0 10px 10px 0; box-shadow: 0 16px 34px -14px rgba(42, 46, 62, .45), 0 3px 8px -3px rgba(42, 46, 62, .12); } .skin-dale-claro.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { border-radius: 0 0 10px 0; } .skin-dale-claro.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu > li > a { color: #DCE0F5; } .skin-dale-claro.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu > li > a:hover { color: #fff; } /* El circulito del contador tiene que separarse del fondo blanco, no del negro */ .skin-dale-claro.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right-container > .label { box-shadow: 0 0 0 2px var(--dx-blanco); } /* ── Lienzo ───────────────────────────────────────────────────────────── */ .skin-dale-claro .content-wrapper, .skin-dale-claro .main-footer { background-color: var(--dx-fondo); } .skin-dale-claro .main-footer { border-top: 1px solid var(--dx-linea); color: var(--dx-tinta-2); } .skin-dale-claro .content-header > h1 { color: var(--dx-tinta); font-weight: 600; } .skin-dale-claro .content-header > .breadcrumb > li > a { color: var(--dx-azul); } /* ── Cajas ────────────────────────────────────────────────────────────── */ .skin-dale-claro .box { border-radius: 8px; border-top-width: 3px; box-shadow: 0 1px 2px rgba(42, 46, 62, .05); } .skin-dale-claro .box.box-primary { border-top-color: var(--dx-azul); } .skin-dale-claro .box-header .box-title { color: var(--dx-tinta); font-weight: 600; } /* ── Botones ──────────────────────────────────────────────────────────── */ .skin-dale-claro .btn-primary { background-color: var(--dx-azul); border-color: var(--dx-azul-hondo); } .skin-dale-claro .btn-primary:hover, .skin-dale-claro .btn-primary:focus, .skin-dale-claro .btn-primary:active, .skin-dale-claro .btn-primary.active { background-color: var(--dx-azul-hondo); border-color: var(--dx-azul-hondo); } /* El :not(.btn) es obligatorio. Sin el, esta regla pesa mas que el .btn-primary de Bootstrap y le pinta el texto a TODOS los botones que son enlaces: 63 en el panel. En el boton azul quedaba azul sobre azul, invisible; en los verdes y rojos, ilegible. Los botones se quedan con el color que les pone Bootstrap. */ .skin-dale-claro a:not(.btn) { color: var(--dx-azul); } .skin-dale-claro a:not(.btn):hover, .skin-dale-claro a:not(.btn):focus { color: var(--dx-azul-hondo); } /* Foco visible: sin esto, con fondo claro no se sabe donde esta el teclado. */ .skin-dale-claro a:focus-visible, .skin-dale-claro button:focus-visible, .skin-dale-claro .btn:focus-visible { outline: 2px solid var(--dx-naranja); outline-offset: 2px; } /* ── Lo que NO se toca ────────────────────────────────────────────────── */ /* Los colores de estado (bg-green, bg-aqua, bg-yellow, bg-red y las cajas small-box / info-box) se dejan tal cual: ahi el color es informacion, no estilo, y cambiarlos debilitaria los avisos del tablero. */ /* ── Pantalla de acceso ───────────────────────────────────────────────── */ .skin-dale-claro.login-page, .skin-dale-claro .login-page { background-color: var(--dx-fondo); } /* ── Lo que faltaba de skin-blue ──────────────────────────────────────── */ /* Repasadas una a una todas las reglas de skin-blue.min.css. Estas seis asumen fondo oscuro y, sin corregirlas, dejan texto blanco sobre blanco. */ /* Desplegables de la cabecera (usuario, avisos): AdminLTE los pinta en blanco sobre azul; aqui el panel es blanco, asi que el texto tiene que ser oscuro. */ .skin-dale-claro .main-header .navbar .dropdown-menu li a { color: var(--dx-tinta-2); } .skin-dale-claro .main-header .navbar .dropdown-menu li a:hover { background-color: var(--dx-azul-suave); color: var(--dx-azul); } .skin-dale-claro .main-header .navbar .dropdown-menu li.divider { background-color: var(--dx-linea); } /* La franja de arriba del desplegable del usuario si se queda en azul de marca: es un bloque pequeno y ayuda a separarlo del fondo blanco. */ .skin-dale-claro .main-header li.user-header { background-color: var(--dx-azul); color: #fff; } .skin-dale-claro .main-header li.user-header p, .skin-dale-claro .main-header li.user-header small { color: rgba(255,255,255,.85); } /* Enlaces de la barra al pasar por encima */ .skin-dale-claro .sidebar a:hover { color: var(--dx-azul); } /* Buscador del menu con el foco puesto */ .skin-dale-claro .sidebar-form input[type="text"]:focus, .skin-dale-claro .sidebar-form input[type="text"]:focus + .input-group-btn .btn { background-color: var(--dx-blanco); color: var(--dx-tinta); border-color: var(--dx-linea); } /* Franja del titulo de cada pantalla */ .skin-dale-claro .content-header { background: transparent; } /* ════════════════════════════════════════════════════════════════════════════ BLOQUE COMUN A LAS DOS PIELES ---------------------------------------------------------------------------- Las dos hojas se cargan siempre a la vez; lo unico que cambia es la clase del . Por eso estas reglas van SIN prefijo de piel: los colores salen de var(--dx-*), que cada piel define con sus propios valores, de modo que una sola regla sirve para el modo claro y para el oscuro. Cada var() lleva un valor de reserva por si alguna vez faltara la clase del body. ══════════════════════════════════════════════════════════════════════════ */ /* ── Isotipo de la cabecera ─────────────────────────────────────────────── El ala del avion de la marca, trazada como poligono SVG de 6 vertices desde el logo original. El naranja se mantiene igual en las dos pieles porque se lee bien sobre blanco y sobre oscuro; lo que cambia es el texto. No se toca el display de .logo-mini / .logo-lg: de eso se encarga AdminLTE segun este el menu plegado o desplegado, y pisarlo los rompe. */ .main-header .logo .dx-ala { height: 20px; width: auto; display: inline-block; vertical-align: -4px; fill: var(--dx-naranja, #EB6B14); } .main-header .logo .dx-marca { display: inline-block; vertical-align: middle; margin-left: 9px; font-size: 14px; font-weight: 700; letter-spacing: .07em; color: var(--dx-azul, #2E3B8E); } /* La segunda palabra, mas ligera: separa "DALE" de "XPLORER" con jerarquia de peso en vez de meter un segundo color. */ .main-header .logo .dx-marca > span { margin-left: .34em; font-weight: 400; opacity: .85; } /* ── Submenu desplegado ─────────────────────────────────────────────────── Antes era un bloque cuadrado pegado a los bordes. Ahora tiene aire, esquinas redondeadas y una guia vertical que cae justo bajo el icono del padre: eso es lo que hace que se lea como "esto cuelga de aquello" y no como otra lista suelta puesta debajo. */ .skin-dale-claro .sidebar-menu li > .treeview-menu, .skin-dale-oscuro .sidebar-menu li > .treeview-menu { position: relative; margin: 1px 8px 6px 13px; padding: 5px 0 6px; border-radius: 8px; } .skin-dale-claro .sidebar-menu li > .treeview-menu::before, .skin-dale-oscuro .sidebar-menu li > .treeview-menu::before { content: ""; position: absolute; left: 12px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--dx-linea, #E5E7EE); } .sidebar-menu .treeview-menu > li > a { margin: 1px 5px; padding: 7px 10px 7px 30px; border-radius: 6px; font-size: 13.5px; line-height: 1.35; } .sidebar-menu .treeview-menu > li > a > .fa { width: 16px; margin-right: 3px; text-align: center; } /* La flecha del padre gira en vez de saltar de golpe. */ .sidebar-menu > li > a > .pull-right-container > .fa-angle-left { transition: transform .18s ease; } /* ── Menu plegado ───────────────────────────────────────────────────────── El panel flotante es ese mismo .treeview-menu, pero colocado en absoluto al lado del icono. Aqui hay que devolverle los margenes a cero y apagar la guia, o se descoloca respecto al icono del que cuelga. */ .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span:not(.pull-right-container) { padding: 12px 20px 12px 14px; font-weight: 600; } .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu { margin: 0; padding: 6px 0 7px; } .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu::before { display: none; } .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu > li > a { margin: 0 5px; padding: 7px 20px 7px 16px; } /* Cuando el item tiene submenu, la etiqueta de arriba y la lista de abajo son dos cajas pegadas. Si las dos redondean la esquina que se tocan queda una muesca en medio; la etiqueta solo debe redondear arriba. Lleva las dos pieles delante a proposito: asi pesa mas que la regla de cualquiera de las dos hojas y da igual cual se cargue despues. */ .skin-dale-claro.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview > a > span:not(.pull-right-container), .skin-dale-oscuro.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview > a > span:not(.pull-right-container) { border-radius: 0 10px 0 0; }