/* Panel de Apps (waffle) — estilos del markup que inyecta js/apps.js. Fuente de verdad: spec/css/apps.min.css (CSS original del sitio vivo) + spec/raw-apps-panel.json. Métricas y clases de color copiadas tal cual. Iconos: FontAwesome 4.7 real (mismo que el sitio). */ /* FontAwesome se sirve LOCAL vía assets/fontawesome/fa-local.css, enlazado en el de cada página ANTES de este archivo. Sin dependencia de CDN: los iconos no pueden desaparecer si la red de la sala falla. */ .apps-overlay, #site-apps-container, #site-apps-container * { box-sizing: content-box; /* el CSS original asume content-box (width:642 + padding:18) */ } /* Overlay transparente: solo captura el click fuera para cerrar (contrato) */ .apps-overlay { position: fixed; inset: 0; background: transparent; visibility: hidden; z-index: 1400; } .apps-overlay.is-open { visibility: visible; } /* Anclado por JS al centro-inferior del #waffle */ #site-apps-container { position: fixed; visibility: hidden; z-index: 1401; font-family: var(--font, "Interlight", "Segoe UI", system-ui, sans-serif); } #site-apps-container.is-open { visibility: visible; } /* == copiado de spec/css/apps.min.css ========================== */ #site-apps-triangle { position: absolute; top: 0; left: -20px; z-index: 100; height: 0; width: 0; border-style: solid; border-width: 0 20px 20px 20px; border-color: transparent transparent #ededed transparent; } #site-apps-content { position: absolute; z-index: 99; top: 20px; padding: 18px; width: 642px; background: var(--page-bg, #ededed); box-shadow: rgba(0, 0, 0, .4) 0 0 10px; overflow-y: auto; /* alto máx. lo fija JS: la lista es más alta que el viewport */ opacity: 0; transform: translateY(-8px); transition: opacity .15s ease, transform .15s ease; } .is-open #site-apps-content { opacity: 1; transform: none; } #site-apps-content .site-apps-group-title { font-size: 23px; color: var(--text, #444444); } #site-apps-content .site-apps-group { font-size: 0; padding: 12px; } #site-apps-content .site-apps-group .app-container { display: inline-block; margin: 8px; width: 100px; height: 100px; overflow: hidden; text-align: center; vertical-align: top; } #site-apps-content .site-apps-group .app-container .app-link { display: block; padding: 12px 3px; cursor: pointer; text-decoration: none; } #site-apps-content .site-apps-group .app-container .app-icon { font-size: 32px; color: #fff; margin-bottom: 12px; } #site-apps-content .site-apps-group .app-container .app-title { max-height: 33px; overflow: hidden; font-size: 13px; color: #fff; } #site-apps-content .site-apps-group .app-container.violet { background: var(--ceu-violet, #755b77); } #site-apps-content .site-apps-group .app-container.green { background: var(--ceu-green, #52a095); } #site-apps-content .site-apps-group .app-container.lightblue { background: var(--ceu-lightblue, #188ff1); } #site-apps-content .site-apps-group .app-container.blue { background: var(--ceu-blue, #003ca3); } #site-apps-content .site-apps-group .app-container.gray { background: var(--ceu-gray-tile, #969696); } #site-apps-content .site-apps-group .app-container.red { background: var(--ceu-navy, #070850); } @media screen and (max-width: 800px) { #site-apps-content { width: 525px; } } @media screen and (max-width: 640px) { #site-apps-content { width: 410px; } } @media screen and (max-width: 520px) { #site-apps-content { width: 342px; padding: 18px 12px; margin-left: -50px; } #site-apps-content .site-apps-group { padding: 12px 0; } #site-apps-content .site-apps-group .app-container { margin: 3px; } } /* == fin copia ================================================= */ /* Hover: leve oscurecido (el original no lo define; mejora la respuesta visual) */ #site-apps-content .site-apps-group .app-container:hover { filter: brightness(.93); } /* Recibe foco programático al abrir (Escape cierra desde ahí); sin anillo visible */ #site-apps-content:focus { outline: none; }