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

De Wiki Gla
Ir para navegação Ir para pesquisar
(Criou página com '<includeonly> <style> .reward-wrapper { display: inline-block; font-family: Arial, sans-serif; } .reward-title {...')
 
m
 
(9 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<includeonly>
<includeonly>
    <!--
      Tooltip: o HTML das passivas/descrição vem do Módulo:Item (Scribunto), função renderOne.
      Este widget só aplica estilos (.item-tooltip-passive-*) e o script de posição no hover.
      Se as passivas não aparecem, confira Módulo:ItemDB (dados) e Módulo:Item.lua na wiki.
    -->
     <style>
     <style>
         .reward-wrapper {
         .reward-wrapper {
Linha 32: Linha 37:
             display: block;
             display: block;
             margin: 0 auto;
             margin: 0 auto;
        }
        .item-icon-placeholder {
            display: inline-block;
            width: 28px;
            height: 28px;
            margin: 2px auto 0;
            border-radius: 4px;
            background: linear-gradient(135deg, #3a3a52 0%, #252536 100%);
            border: 1px solid rgba(120, 120, 180, 0.35);
            box-sizing: border-box;
            vertical-align: middle;
        }
        /* Categoria special_item — destaque dourado (item especial no jogo) */
        .item-wrapper-special {
            filter: drop-shadow(0 0 6px rgba(200, 150, 60, 0.45));
        }
        .item-wrapper-special .item-tooltip-body {
            border-color: #8a7352;
            background-color: #221910;
            box-shadow:
                inset 0 1px 0 rgba(255, 220, 180, 0.04),
                0 4px 14px rgba(0, 0, 0, 0.5);
        }
        .item-wrapper-special .item-tooltip-name {
            color: #c9b078;
        }
        .item-wrapper-special .item-tooltip-cat {
            color: rgba(255, 250, 240, 0.88);
        }
        .item-wrapper-special .item-tooltip-sep {
            background: rgba(92, 74, 49, 0.75);
         }
         }


Linha 57: Linha 99:
         }
         }


         .item-wrapper[data-tooltip]:hover::after {
         /* Reward dentro de wikitable:
             content: attr(data-tooltip);
          cria espaço para o badge de quantidade (que é absolute/bottom negativo)
            position: absolute;
          não sobrepor a linha horizontal da tabela. */
            bottom: calc(100% + 8px);
        .wikitable td .reward-items .item-wrapper {
            left: 50%;
             margin-bottom: 10px;
            transform: translateX(-50%);
        }
            background: #2c2c2c;
 
            color: #fff;
        /* ===== TOOLTIP (estilo marrom / ouro — próximo ao jogo) ===== */
            padding: 2px 5px;
 
            font-size: 13px;
        .item-tooltip {
             font-weight: bold;
             display: none;
             border-radius: 4px;
             width: 280px;
             white-space: pre-line;
             max-width: min(280px, calc(100vw - 16px));
            z-index: 9999;
             pointer-events: none;
             pointer-events: none;
            flex-direction: column;
            align-items: center;
            filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.65));
         }
         }


         .item-wrapper[data-tooltip]:hover::before {
         .item-tooltip.tooltip-visible {
             content: "";
            display: flex;
             position: absolute;
            position: fixed;
             bottom: 100%;
            z-index: 999999;
             left: 50%;
        }
             transform: translateX(-50%);
 
             border-width: 8px 8px 0 8px;
        .item-tooltip-body {
             border-style: solid;
            display: flex;
             border-color: #2c2c2c transparent transparent transparent;
            flex-direction: column;
             z-index: 9998;
            width: 100%;
             pointer-events: none;
            background-color: #1a110d;
            border: 2px solid #5c4838;
            border-radius: 0;
            padding: 11px 14px 12px;
            box-sizing: border-box;
             font-family: Tahoma, "Segoe UI", Arial, sans-serif;
            /* Brilho interno quase imperceptível (sem degradê no fundo) */
            box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.035);
        }
 
        .item-tooltip-name {
             display: block;
            font-size: 15px;
            font-weight: 700;
            color: #c4a96a;
            text-align: center;
            line-height: 1.25;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
        }
 
        .item-tooltip-cat {
            display: block;
            font-size: 11px;
            color: rgba(255, 252, 248, 0.82);
             text-align: center;
             margin-top: 4px;
             text-transform: none;
            letter-spacing: 0.02em;
            font-weight: 700;
        }
 
        .item-tooltip-sep {
            display: block;
            height: 1px;
            background: #5c4a31;
            /* Encosta nas bordas internas da caixa (ignora padding lateral) */
            margin: 8px -14px 10px;
            width: calc(100% + 28px);
             max-width: none;
            flex-shrink: 0;
        }
 
        .item-tooltip-desc {
            display: block;
            font-size: 12px;
            color: #92a8d4;
            line-height: 1.5;
            text-align: center;
            font-weight: 600;
            margin-top: 2px;
        }
 
        .item-tooltip-level {
            display: block;
            font-size: 12px;
            color: rgba(255, 252, 248, 0.9);
            text-align: left;
            margin-top: 0;
            font-weight: 700;
            width: 100%;
        }
 
        .item-tooltip-passives {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 8px;
            width: 100%;
        }
 
        .item-tooltip-passive-row {
            display: flex;
            align-items: center;
            gap: 8px;
            text-align: left;
        }
 
        .item-tooltip-passive-badge {
            flex-shrink: 0;
            width: 22px;
            height: 22px;
            box-sizing: border-box;
             border-radius: 50%;
            background: #2c2824;
            border: 1px solid #4a433c;
            color: #e8e4dc;
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
 
        .item-tooltip-passive-text {
            flex: 1;
            font-size: 11px;
            color: #9a9490;
            line-height: 1.45;
            font-weight: 600;
        }
 
        .item-tooltip-footer {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 14px;
            margin-top: 12px;
            padding-top: 10px;
             border-top: 1px solid transparent;
            width: 100%;
        }
 
        .item-tooltip-val {
            font-size: 12px;
            color: #b8a06e;
            font-weight: 700;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
        }
 
        .item-tooltip-lvl {
            font-size: 11px;
            color: rgba(255, 252, 248, 0.88);
            font-weight: 700;
        }
 
        /* Seta — cor sólida igual ao fundo */
        .item-tooltip-arrow {
            display: block;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
             border-top: 8px solid #1a110d;
            border-bottom: none;
            flex-shrink: 0;
        }
 
        .item-tooltip.tooltip-below {
            flex-direction: column-reverse;
        }
 
        .item-tooltip.tooltip-below .item-tooltip-arrow {
             border-top: none;
            border-bottom: 8px solid #1a110d;
        }
 
        /* Deslocamento horizontal */
        .item-tooltip.tooltip-shift-right {
            align-items: flex-start;
        }
 
        .item-tooltip.tooltip-shift-right .item-tooltip-arrow {
            margin-left: var(--arrow-offset, 12px);
        }
 
        .item-tooltip.tooltip-shift-left {
            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 = 280;
            var MARGIN = 8;
            var GAP = 6;
            var activeTip = null;
            var activeWrapper = null;
            function showTooltip(wrapper) {
                hideTooltip();
                var tip = wrapper.querySelector('.item-tooltip');
                if (!tip) return;
                activeWrapper = wrapper;
                activeTip = tip;
                document.body.appendChild(tip);
                tip.classList.add('tooltip-visible');
                tip.classList.remove('tooltip-below', 'tooltip-shift-right', 'tooltip-shift-left');
                tip.style.removeProperty('--arrow-offset');
                var rect = wrapper.getBoundingClientRect();
                var tipH = tip.offsetHeight;
                var tipW = tip.offsetWidth || TIP_WIDTH;
                var centerX = rect.left + rect.width / 2;
                var above = rect.top - tipH - GAP;
                var below = rect.bottom + GAP;
                var top;
                if (above >= MARGIN) {
                    top = above;
                } else if (below + tipH <= window.innerHeight - MARGIN) {
                    top = below;
                    tip.classList.add('tooltip-below');
                } else {
                    top = Math.max(MARGIN, Math.min(above, window.innerHeight - MARGIN - tipH));
                }
                var left = centerX - tipW / 2;
                if (left < MARGIN) {
                    left = Math.max(MARGIN, rect.left);
                    tip.classList.add('tooltip-shift-right');
                    tip.style.setProperty('--arrow-offset', Math.max(12, centerX - left) + 'px');
                } else if (left + tipW > window.innerWidth - MARGIN) {
                    left = Math.min(window.innerWidth - MARGIN - tipW, rect.right - tipW);
                    tip.classList.add('tooltip-shift-left');
                    tip.style.setProperty('--arrow-offset', Math.max(12, (left + tipW) - centerX) + 'px');
                }
                tip.style.top = top + 'px';
                tip.style.left = left + 'px';
            }
            function hideTooltip() {
                if (activeTip && activeWrapper) {
                    activeTip.classList.remove('tooltip-visible', 'tooltip-below', 'tooltip-shift-right', 'tooltip-shift-left');
                    activeTip.style.top = '';
                    activeTip.style.left = '';
                    activeTip.style.removeProperty('--arrow-offset');
                    activeWrapper.appendChild(activeTip);
                    activeTip = null;
                    activeWrapper = null;
                }
            }
            document.addEventListener('mouseover', function (e) {
                var el = e.target;
                var wrapper = el.closest ? el.closest('.item-wrapper') : null;
                if (wrapper && wrapper !== activeWrapper) {
                    showTooltip(wrapper);
                }
            });
            document.addEventListener('mouseout', function (e) {
                if (!activeWrapper) return;
                var wrapper = e.target.closest ? e.target.closest('.item-wrapper') : null;
                if (wrapper === activeWrapper && !activeWrapper.contains(e.relatedTarget)) {
                    hideTooltip();
                }
            });
        })();
    </script>
</includeonly>
</includeonly>

Edição atual tal como às 22h58min de 8 de abril de 2026

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