/* ========================================= VARIANTES DE IMAGEN POR INSTALACION ========================================= El color, la tipografia y los grises se cambian redefiniendo las variables de :root (lo hace includes/tema.php, en linea en el ). Esto de aqui es lo otro: la DISPOSICION. Y es la parte que de verdad importa. Dos instalaciones con el mismo reparto de pantalla se reconocen al instante aunque una sea azul y otra verde: lo que delata a un programa es donde tiene el menu y cuanto respira, no su tono. Por eso se puede mover el menu a un lateral y apretar o soltar el espaciado. Todo cuelga de atributos data-* en el , que pone temaBodyAttrs(). Sin atributos —o con los valores de siempre— este archivo no hace nada y el ERP se ve como se ha visto hasta hoy. ========================================= */ /* ========================================= MENU LATERAL ========================================= Solo de 769px para arriba: por debajo manda el responsive de style.css, que ya convierte la barra en una tira horizontal desplazable. Una columna fija de 220px en un movil se comeria la pantalla entera. ========================================= */ @media (min-width: 769px) { /* El hueco lo abre el body y no un margen del contenido: asi los overlays a pantalla completa (el panel de ayuda) siguen tapandolo todo. */ body[data-nav="lateral"] { padding-left: 220px; } body[data-nav="lateral"] .navbar { position: fixed; top: 0; left: 0; bottom: 0; width: 220px; height: 100vh; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; padding: 16px 12px; border-bottom: 0; border-right: 1px solid var(--gray-200); overflow-y: auto; overflow-x: hidden; } body[data-nav="lateral"] .navbar-brand { padding: 0 8px 12px; border-bottom: 1px solid var(--gray-100); } body[data-nav="lateral"] .navbar-menu { flex-direction: column; align-items: stretch; gap: 2px; margin: 12px 0 0; padding: 0; } body[data-nav="lateral"] .nav-link { justify-content: flex-start; padding: 9px 10px; } /* La rayita bajo el elemento activo es de una barra horizontal. En vertical se sustituye por una marca a la izquierda. */ body[data-nav="lateral"] .nav-link.active::after { bottom: auto; top: 50%; left: 0; transform: translateY(-50%); width: 3px; height: 18px; } /* Los desplegables ya no pueden caer hacia abajo: se abren al lado. */ body[data-nav="lateral"] .nav-dropdown-menu { top: 0; left: 100%; margin-left: 6px; } /* Sede, ayuda y usuario, al fondo de la columna. */ body[data-nav="lateral"] .navbar-end { margin-top: auto; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 12px; border-top: 1px solid var(--gray-100); } body[data-nav="lateral"] .navbar-end .user-dropdown { bottom: 100%; top: auto; right: auto; left: 0; } } /* ========================================= DENSIDAD ========================================= Cuanto respira la pantalla. Cambia la sensacion del programa tanto como el color: la misma tabla apretada parece una herramienta de gestion y suelta parece un panel moderno. ========================================= */ /* -- Compacta: cabe mas en pantalla, util en recepcion -- */ body[data-densidad="compacta"] { font-size: 13px; } body[data-densidad="compacta"] .main-content { padding: 14px; } body[data-densidad="compacta"] .table th, body[data-densidad="compacta"] .table td { padding: 7px 10px; } body[data-densidad="compacta"] .nav-link { padding: 5px 10px; } body[data-densidad="compacta"] .card-body { padding: 12px; } body[data-densidad="compacta"] .page-header { margin-bottom: 12px; } /* -- Amplia: menos cosas a la vista, mas aire -- */ body[data-densidad="amplia"] { font-size: 15px; } body[data-densidad="amplia"] .main-content { padding: 36px; } body[data-densidad="amplia"] .table th, body[data-densidad="amplia"] .table td { padding: 16px 20px; } body[data-densidad="amplia"] .nav-link { padding: 10px 18px; } body[data-densidad="amplia"] .card-body { padding: 28px; } /* ========================================= ESQUINAS ========================================= --radius y --radius-lg ya los redefine tema.php y con eso viaja casi todo. Aqui solo los sitios que llevan su propio radio escrito a mano y que, si no, seguirian redondeados en un tema de esquinas rectas. ========================================= */ body[data-radio="recto"] .btn, body[data-radio="recto"] .card, body[data-radio="recto"] .badge, body[data-radio="recto"] input, body[data-radio="recto"] select, body[data-radio="recto"] textarea { border-radius: 2px; } body[data-radio="recto"] .user-avatar, body[data-radio="recto"] .brand-logo img { border-radius: 3px; } body[data-radio="redondeado"] .btn, body[data-radio="redondeado"] input, body[data-radio="redondeado"] select { border-radius: 999px; } body[data-radio="redondeado"] .card, body[data-radio="redondeado"] .main-content .table { border-radius: 18px; } /* ========================================= LOGO SUBIDO ========================================= Cuando hay logo propio sustituye al rombo dibujado a mano. Se limita la altura para que un archivo grande no descuadre la barra. ========================================= */ .brand-logo img { height: 28px; width: auto; max-width: 150px; object-fit: contain; display: block; } body[data-nav="lateral"] .brand-logo img { height: 34px; max-width: 100%; }