File manager

File manager - Edit - /var/www/html/portal/public/pmar/css/servicos/escolasClimatizadas.css

Back
/* =================================================== Escolas Climatizadas — layout app-like (full screen) =================================================== / / --- Top bar --- / #escolas-barra-topo { flex-shrink: 0; height: 52px; background: #ffffff; border-bottom: 1px solid #ebebeb; display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; z-index: 1001; padding: 0 16px; } #escolas-barra-topo img { height: 1.9rem; width: auto; } .escolas-barra-separador { width: 1px; height: 28px; background: #e0e0e0; flex-shrink: 0; } .escolas-barra-titulo { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: #1a3a6e; text-transform: uppercase; white-space: nowrap; } / --- Layout base --- / html:has(body.escolas-climatizadas-app), body.escolas-climatizadas-app { width: 100%; height: 100%; overflow: hidden; } body.escolas-climatizadas-app { display: flex; flex-direction: column; } .escolas-climatizadas-main { flex: 1; overflow: hidden; min-height: 0; } #mapa-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); background: #e8ecef; } .escolas-climatizadas-map { flex: 1; min-height: 0; z-index: 1; touch-action: pan-x pan-y pinch-zoom; } / --- Chip superior --- / #status-chip { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 850; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 24px; padding: 8px 14px; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12); display: flex; align-items: center; gap: 8px; font-size: 12px; color: #333; white-space: nowrap; pointer-events: none; max-width: calc(100% - 120px); } #status-chip i { color: #0d6efd; font-size: 13px; flex-shrink: 0; } / --- Barra inferior de ações --- / #barra-acoes { position: fixed; bottom: 0; left: 0; right: 0; height: calc(72px + env(safe-area-inset-bottom, 0px)); background: #ffffff; border-top: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-around; padding: 0 8px env(safe-area-inset-bottom, 0px); z-index: 900; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.07); touch-action: manipulation; } .acao-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: none; background: transparent; cursor: pointer; border-radius: 14px; color: #555; font-size: 20px; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .acao-btn:hover { background: #f0f5ff; color: #0d6efd; } .acao-btn:active { transform: scale(0.90); } .acao-btn--destaque { width: 56px; height: 56px; background: #0d6efd; color: #ffffff; font-size: 22px; border-radius: 18px; box-shadow: 0 4px 20px rgba(13, 110, 253, 0.30); } .acao-btn--destaque:hover { background: #0b5ed7; color: #ffffff; } / --- Legenda Leaflet --- / .escolas-climatizadas-legend { border-radius: 0.75rem; } .escolas-climatizadas-legend .card-body { line-height: 1.2; } .escolas-climatizadas-legend-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .escolas-climatizadas-legend-dot i { font-size: 0.65rem; color: #ffffff; } / --- Marcadores no mapa --- / .escolas-climatizadas-marker .escolas-climatizadas-marker-pin { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 3px solid #ffffff; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28); } .escolas-climatizadas-marker .escolas-climatizadas-marker-pin i { color: #ffffff; font-size: 1rem; line-height: 1; } .escolas-climatizadas-marker-pin-user i { font-size: 1.05rem; } / Climatizada → verde / .marker-climatizada .escolas-climatizadas-marker-pin, .escolas-climatizadas-legend-dot.marker-climatizada { background: #198754; } / Em andamento → azul / .marker-andamento .escolas-climatizadas-marker-pin, .escolas-climatizadas-legend-dot.marker-andamento { background: #0d6efd; } / Pendente → amarelo (ícone escuro para contraste) / .marker-nao .escolas-climatizadas-marker-pin, .escolas-climatizadas-legend-dot.marker-nao { background: #ffc107; } .marker-nao .escolas-climatizadas-marker-pin i, .escolas-climatizadas-legend-dot.marker-nao i { color: #333333; } / Usuário → azul primário / .marker-user .escolas-climatizadas-marker-pin { position: relative; background: #0d6efd; } .escolas-climatizadas-popup .badge { font-weight: 600; } / --- Pulso do marcador do usuário --- / .escolas-climatizadas-location-pulse { position: absolute; width: 36px; height: 36px; border-radius: 999px; background: rgba(13, 110, 253, 0.12); box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4); animation: escolas-pulse 1.8s ease-out infinite; transform: translate(-50%, -50%); top: 50%; left: 50%; z-index: 1; } .escolas-climatizadas-marker-pin-user i { position: relative; z-index: 2; } @keyframes escolas-pulse { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.5); } 70% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; box-shadow: 0 0 0 12px rgba(13, 110, 253, 0); } 100% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); } } / =================================================== Painel de lista de escolas =================================================== */ #escolas-lista-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 940; opacity: 0; transition: opacity 0.25s ease; } #escolas-lista-backdrop.escolas-lista-backdrop--visivel { opacity: 1; } #escolas-lista-painel { position: fixed; bottom: 0; left: 0; right: 0; max-height: 78vh; background: #ffffff; border-radius: 20px 20px 0 0; box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.18); z-index: 950; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); padding-bottom: env(safe-area-inset-bottom, 0px); } #escolas-lista-painel.escolas-lista-painel--aberto { transform: translateY(0); } #escolas-lista-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; } .escolas-lista-titulo { font-size: 1rem; font-weight: 700; color: #1a1a2e; display: flex; align-items: center; gap: 8px; } .escolas-lista-titulo i { color: #0d6efd; } #btn-fechar-lista { background: none; border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #666; font-size: 1rem; transition: background 0.15s; flex-shrink: 0; } #btn-fechar-lista:hover { background: #f0f0f0; color: #333; } #escolas-lista-busca-wrap { padding: 10px 16px; flex-shrink: 0; border-bottom: 1px solid #f5f5f5; } #escolas-lista-busca { width: 100%; padding: 8px 14px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 0.875rem; outline: none; background: #f8f9fa; transition: border-color 0.15s; } #escolas-lista-busca:focus { border-color: #0d6efd; background: #fff; } #escolas-lista-items { list-style: none; margin: 0; padding: 0 0 8px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; } .escolas-lista-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f5f5f5; } .escolas-lista-item:last-child { border-bottom: none; } .escolas-lista-item-icone { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); font-size: 1rem; color: #fff; } .escolas-lista-item-icone.marker-climatizada { background: #198754; } .escolas-lista-item-icone.marker-andamento { background: #0d6efd; } .escolas-lista-item-icone.marker-nao { background: #ffc107; color: #333333; } .escolas-lista-item-info { flex: 1; min-width: 0; } .escolas-lista-item-nome { font-size: 0.875rem; font-weight: 600; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .escolas-lista-item-bairro { font-size: 0.75rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .escolas-lista-item-acoes { display: flex; gap: 6px; flex-shrink: 0; } .escolas-lista-vazio { padding: 32px 16px; text-align: center; color: #888; font-size: 0.875rem; }

| ver. 1.4 | Github | . | PHP 8.3.28 | Generation time: 0.02 | proxy | phpinfo | Settings