/* * CAMADA 6 — COMPONENTES · TOOLTIP * * Conteúdo permitido: o gatilho (.help-link) e o balão global montado por * js/component.tooltip.js a partir de templates/tooltip.handlebars. * * O balão é anexado ao e posicionado por JS, por isso não tem * ancestral de módulo: todas as variantes dele moram aqui. */ /* ========================================================================== 1. GATILHO ========================================================================== */ .help-link { caret-color: var(--color-transparent); user-select: none; cursor: pointer; } .help-link:focus:not(:focus-visible) { outline: none; box-shadow: none; } .help-link-in-title { font-size: 9pt !important; } /* ========================================================================== 2. BALÃO ========================================================================== */ .mafmine-global-tooltip { position: fixed; z-index: 1000000; box-sizing: border-box; color: var(--color-primary); font-size: 13px; line-height: 1.5; pointer-events: auto; } .mafmine-tooltip-content { max-height: calc(100vh - 20px); overflow: auto; background: var(--color-white); border: var(--border-thin); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } /* ========================================================================== 3. POSICIONAMENTO E SETA ========================================================================== */ .mafmine-global-tooltip.top { transform: translateY(-100%); animation: mafmine-tooltip-fade-in-top 0.2s ease-out; } .mafmine-global-tooltip.bottom { animation: mafmine-tooltip-fade-in-bottom 0.2s ease-out; } .mafmine-global-tooltip.left { animation: mafmine-tooltip-fade-in-left 0.2s ease-out; } .mafmine-global-tooltip::after { content: ''; position: absolute; border: var(--border-transparent-6); } .mafmine-global-tooltip.top::after { top: 100%; left: var(--position-tooltip-arrow-x); margin-left: -6px; border-top-color: var(--color-white); } .mafmine-global-tooltip.bottom::after { bottom: 100%; left: var(--position-tooltip-arrow-x); margin-left: -6px; border-bottom-color: var(--color-white); } .mafmine-global-tooltip.left::after { top: var(--position-tooltip-arrow-y); left: 100%; margin-top: -6px; border-left-color: var(--color-white); } @keyframes mafmine-tooltip-fade-in-top { from { opacity: 0; transform: translateY(-90%); } to { opacity: 1; transform: translateY(-100%); } } @keyframes mafmine-tooltip-fade-in-bottom { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes mafmine-tooltip-fade-in-left { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } /* ========================================================================== 4. CONTEÚDO ========================================================================== */ .mafmine-tooltip-title { padding: 10px 14px 5px; border-bottom: var(--border-thin); font-size: 14px; font-weight: 700; } .mafmine-tooltip-text { padding: 5px 14px; } .mafmine-tooltip-text + .mafmine-tooltip-text { padding-top: 0; } .mafmine-tooltip-text p { margin: 0 0 8px; } .mafmine-tooltip-text p:last-child { margin-bottom: 0; } .mafmine-tooltip-list-wrapper { padding: 5px 14px; } .mafmine-tooltip-list-title { margin-bottom: 4px; font-size: 12px; font-weight: 700; } .mafmine-tooltip-list { margin: 0; padding-left: 20px; } .mafmine-tooltip-list li { margin-bottom: 2px; } .mafmine-tooltip-table { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 10px; margin: 5px 14px; padding: 8px; background: var(--color-surface-muted); border-radius: var(--radius-sm); font-size: 12px; } .mafmine-tooltip-code { margin: 5px 0; padding: 8px 14px; background: var(--color-surface-muted); font-family: monospace; font-size: 12px; white-space: pre-wrap; } .mafmine-tooltip-image-container { display: flex; justify-content: center; padding: 8px 14px; } .mafmine-tooltip-image-container img { display: block; max-width: 100%; height: auto; } .mafmine-tooltip-footer { padding: 8px 14px; border-top: var(--border-thin); background: var(--color-surface-muted); font-size: 11px; font-style: italic; opacity: 0.8; text-align: right; } .mafmine-tooltip-link { font-style: normal; } .mafmine-tooltip-link a { font-weight: 600; } /* ========================================================================== 5. MOBILE E ACESSIBILIDADE ========================================================================== */ @media (max-width: 991px) { .mafmine-global-tooltip { max-width: calc(100vw - 16px); } .mafmine-tooltip-table { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .mafmine-global-tooltip { animation: none !important; } }