/* =========================================================================== Halky Image Viewer™ — visualizador de imagem em TELA CHEIA (COMPARTILHADO) --------------------------------------------------------------------------- Overlay `.hie-view*` injetado no por assets/app/js/modules/image-viewer.js e reutilizado por Chat™/FlashCards™/Simulados™/Atlas™ e qualquer módulo futuro. Carregado GLOBALMENTE em views/partials/head.php: SEM esta folha o modal é inserido sem estilo e "vaza" no fim da página (renderiza desconfigurado no canto/fundo). Por isso vive fora de qualquer bundle de módulo — é a única fonte da verdade do visualizador. GPU-safe (só opacity/transform animam). =========================================================================== */ body.hie-view-open { overflow: hidden; } .hie-view { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: rgba(8, 10, 14, .94); backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s ease; } .hie-view.is-open { opacity: 1; } .hie-view__top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 16px; color: #fff; } .hie-view__title { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .hie-view__name { font-size: var(--fs-base); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hie-view__count { font-size: var(--fs-xs); color: rgba(255, 255, 255, .65); } .hie-view__tools { flex: 0 0 auto; display: flex; gap: 8px; } .hie-view__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); color: #fff; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .hie-view__icon:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .28); } .hie-view__icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .hie-view__stage { flex: 1 1 auto; position: relative; display: grid; place-items: center; overflow: hidden; padding: 4px 16px; touch-action: none; user-select: none; } .hie-view__img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; opacity: 0; transition: opacity .2s ease; will-change: transform; -webkit-user-drag: none; } .hie-view__img.is-zoom { cursor: grab; } .hie-view__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(20, 22, 28, .55); color: #fff; cursor: pointer; transition: background .15s ease, transform .15s ease; } .hie-view__nav:hover { background: rgba(40, 44, 54, .8); } .hie-view__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .hie-view__nav--prev { left: 14px; } .hie-view__nav--next { right: 14px; } .hie-view__capbar { flex: 0 0 auto; padding: 12px 18px 16px; color: #fff; text-align: center; } .hie-view__cap { font-size: var(--fs-sm); line-height: 1.4; } .hie-view__src { margin-top: 3px; font-size: var(--fs-xs); color: rgba(255, 255, 255, .6); } .hie-view__dots { flex: 0 0 auto; display: flex; justify-content: center; gap: 8px; padding: 0 16px 18px; } .hie-view__dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .3); cursor: pointer; transition: background .15s ease, transform .15s ease; } .hie-view__dot.is-on { background: #fff; transform: scale(1.3); } @media (max-width: 560px) { .hie-view__nav { width: 40px; height: 40px; } .hie-view__nav--prev { left: 8px; } .hie-view__nav--next { right: 8px; } } @media (prefers-reduced-motion: reduce) { .hie-view, .hie-view__img { transition: none; } }