/* ========================================================================== Smart Tooltip — motor "Leve" (sem Tippy.js) Um único elemento .st-lite reaproveitado para todas as tooltips da página, posicionado com coordenadas fixas pelo pwa-tooltip-lite.js. Quando o navegador suporta a Popover API ele vai para a top layer (fica acima de qualquer z-index); senão, fica no fim do com z-index alto. As cores vêm das mesmas variáveis --st-* do motor completo, lidas do elemento que tem a tooltip e copiadas para o estilo inline. ========================================================================== */ .st-lite { position: fixed; /* Reset do UA para [popover]: inset:0 + margin:auto centralizariam na tela. */ inset: auto; margin: 0; padding: 0; border: 0; overflow: visible; box-sizing: border-box; z-index: var(--st-z-index, 99999); max-width: var(--st-max-width, 350px); background: var(--st-bg-color, #333); color: var(--st-text-color, #fff); font-family: var(--st-font-family, inherit); font-weight: var(--st-font-weight, inherit); font-size: var(--st-font-size, 14px); line-height: var(--st-line-height, 1.4); text-align: var(--st-text-align, left); border-radius: var(--st-border-radius, 4px); box-shadow: var(--st-shadow, 0 4px 15px rgba(0, 0, 0, .2)); opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; pointer-events: none; word-wrap: break-word; } .st-lite.is-on { opacity: 1; transform: none; pointer-events: auto; } /* Sem o suporte a popover o elemento fica escondido por display; com ele, o próprio navegador cuida do display quando showPopover() é chamado. */ .st-lite:not([popover]) { display: none; } .st-lite:not([popover]).is-open { display: block; } .st-lite__content { padding: var(--st-padding, 8px 12px); } .st-lite__content > :first-child { margin-top: 0; } .st-lite__content > :last-child { margin-bottom: 0; } .st-lite .st-tooltip-link { color: inherit; text-decoration: underline; } .st-lite .st-tooltip-link--after { display: block; margin-top: 6px; } /* Seta: um quadrado girado, na cor do fundo (ou --st-arrow-color) */ .st-lite__arrow { position: absolute; width: 10px; height: 10px; background: var(--st-arrow-color, var(--st-bg-color, #333)); transform: rotate(45deg); } .st-lite[data-pos="top"] .st-lite__arrow { bottom: -5px; } .st-lite[data-pos="bottom"] .st-lite__arrow { top: -5px; } .st-lite[data-pos="left"] .st-lite__arrow { right: -5px; } .st-lite[data-pos="right"] .st-lite__arrow { left: -5px; } .st-lite.no-arrow .st-lite__arrow { display: none; } @media (prefers-reduced-motion: reduce) { .st-lite { transition: none; } }