Mudanças entre as edições de "Widget:Item"

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
Linha 27: Linha 27:
             text-align: center;
             text-align: center;
             overflow: visible;
             overflow: visible;
        }
        .item-wrapper:hover {
            z-index: 99999;
         }
         }


Linha 57: Linha 61:
         }
         }


         .item-wrapper[data-tooltip]:hover::after {
        /* ===== TOOLTIP ===== */
             content: attr(data-tooltip);
 
         .item-tooltip {
             display: none;
             position: absolute;
             position: absolute;
             bottom: calc(100% + 10px);
             bottom: calc(100% + 12px);
             left: 50%;
             left: 50%;
             transform: translateX(-50%);
             transform: translateX(-50%);
             width: 260px;
             width: 230px;
             min-width: 200px;
             z-index: 99999;
             max-width: 280px;
            pointer-events: none;
            flex-direction: column;
            align-items: center;
            filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.55));
        }
 
        .item-wrapper:hover .item-tooltip {
            display: flex;
        }
 
        .item-tooltip-body {
            display: flex;
            flex-direction: column;
            width: 100%;
             background: linear-gradient(180deg, #2a2a3d 0%, #1e1e30 100%);
            border: 1px solid rgba(100, 100, 160, 0.3);
            border-radius: 8px;
            padding: 12px 16px;
             box-sizing: border-box;
             box-sizing: border-box;
             background: #2c2c2c;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             color: #e8e8e8;
        }
             padding: 10px 14px;
 
             font-size: 13px;
        .item-tooltip-name {
            display: block;
            font-size: 14px;
            font-weight: 700;
             color: #ffffff;
             text-align: center;
            line-height: 1.3;
        }
 
        .item-tooltip-cat {
            display: block;
             font-size: 10px;
            color: #7e7e9e;
            text-align: center;
            margin-top: 3px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
             font-weight: 600;
             font-weight: 600;
             line-height: 1.45;
        }
 
        .item-tooltip-sep {
            display: block;
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(120, 120, 180, 0.35) 50%, transparent 100%);
            margin: 9px 0;
            width: 100%;
        }
 
        .item-tooltip-desc {
            display: block;
            font-size: 12px;
            color: #b0b0cc;
             line-height: 1.5;
             text-align: center;
             text-align: center;
            border-radius: 8px;
            white-space: pre-line;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
            z-index: 9999;
            pointer-events: none;
         }
         }


         .item-wrapper[data-tooltip]:hover::before {
         .item-tooltip-footer {
             content: "";
            display: flex;
             position: absolute;
            justify-content: center;
             bottom: calc(100% + 2px);
            gap: 14px;
             left: 50%;
             margin-top: 10px;
             transform: translateX(-50%);
             padding-top: 8px;
             border-width: 8px 8px 0 8px;
             border-top: 1px solid rgba(120, 120, 180, 0.18);
             border-style: solid;
        }
             border-color: #2c2c2c transparent transparent transparent;
 
             z-index: 9998;
        .item-tooltip-val {
             pointer-events: none;
            font-size: 11px;
             color: #e8c84a;
             font-weight: 600;
        }
 
        .item-tooltip-lvl {
            font-size: 11px;
            color: #6ab4ff;
             font-weight: 600;
        }
 
        .item-tooltip-arrow {
            display: block;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
             border-right: 8px solid transparent;
             border-top: 8px solid #1e1e30;
            flex-shrink: 0;
        }
 
        /* Deslocamento inteligente: tooltip empurrado para a direita */
        .item-tooltip.tooltip-shift-right {
            left: 0;
            transform: none;
             align-items: flex-start;
        }
 
        .item-tooltip.tooltip-shift-right .item-tooltip-arrow {
             margin-left: var(--arrow-offset, 12px);
        }
 
        /* Deslocamento inteligente: tooltip empurrado para a esquerda */
        .item-tooltip.tooltip-shift-left {
            left: auto;
            right: 0;
            transform: none;
            align-items: flex-end;
        }
 
        .item-tooltip.tooltip-shift-left .item-tooltip-arrow {
            margin-right: var(--arrow-offset, 12px);
         }
         }
     </style>
     </style>
    <script>
        (function () {
            var TIP_WIDTH = 230;
            var EDGE_MARGIN = 10;
            function positionTooltip(wrapper) {
                var tip = wrapper.querySelector('.item-tooltip');
                if (!tip) return;
                tip.classList.remove('tooltip-shift-right', 'tooltip-shift-left');
                tip.style.removeProperty('--arrow-offset');
                var rect = wrapper.getBoundingClientRect();
                var centerX = rect.left + rect.width / 2;
                var halfTip = TIP_WIDTH / 2;
                var arrowCenter = Math.max(12, Math.min(TIP_WIDTH - 12, rect.width / 2));
                if (centerX - halfTip < EDGE_MARGIN) {
                    tip.classList.add('tooltip-shift-right');
                    tip.style.setProperty('--arrow-offset', arrowCenter + 'px');
                } else if (centerX + halfTip > window.innerWidth - EDGE_MARGIN) {
                    tip.classList.add('tooltip-shift-left');
                    tip.style.setProperty('--arrow-offset', arrowCenter + 'px');
                }
            }
            document.addEventListener('mouseover', function (e) {
                var wrapper = e.target.closest
                    ? e.target.closest('.item-wrapper')
                    : null;
                if (wrapper) positionTooltip(wrapper);
            });
        })();
    </script>
</includeonly>
</includeonly>

Edição das 22h40min de 16 de março de 2026

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Item&oldid=44951”