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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
Linha 51: Linha 51:
         }
         }


         /* Categoria special_item (Módulo:Item.lua adiciona .item-wrapper-special) */
         /* Categoria special_item — destaque dourado (item especial no jogo) */
         .item-wrapper-special {
         .item-wrapper-special {
             filter: drop-shadow(0 0 4px rgba(232, 200, 74, 0.55));
             filter: drop-shadow(0 0 6px rgba(200, 150, 60, 0.45));
         }
         }


         .item-wrapper-special .item-tooltip-body {
         .item-wrapper-special .item-tooltip-body {
             border-color: rgba(232, 200, 74, 0.45);
             border-color: #9a7b4a;
             background: linear-gradient(180deg, #2d2a22 0%, #1e1c18 100%);
             background: linear-gradient(180deg, #2e2418 0%, #1c140e 100%);
            box-shadow:
                inset 0 1px 0 rgba(255, 210, 120, 0.12),
                0 4px 14px rgba(0, 0, 0, 0.5);
        }
 
        .item-wrapper-special .item-tooltip-name {
            color: #ffe08a;
         }
         }


         .item-wrapper-special .item-tooltip-cat {
         .item-wrapper-special .item-tooltip-cat {
             color: #d4b44a;
             color: #f5e6b8;
        }
 
        .item-wrapper-special .item-tooltip-sep {
            background: #7a6240;
         }
         }


Linha 95: Linha 106:
         }
         }


         /* ===== TOOLTIP ===== */
         /* ===== TOOLTIP (estilo marrom / ouro — próximo ao jogo) ===== */


         .item-tooltip {
         .item-tooltip {
             display: none;
             display: none;
             width: 230px;
             width: 280px;
            max-width: min(280px, calc(100vw - 16px));
             pointer-events: none;
             pointer-events: none;
             flex-direction: column;
             flex-direction: column;
             align-items: center;
             align-items: center;
             filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.55));
             filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.65));
         }
         }


Linha 116: Linha 128:
             flex-direction: column;
             flex-direction: column;
             width: 100%;
             width: 100%;
             background: linear-gradient(180deg, #2a2a3d 0%, #1e1e30 100%);
             background: linear-gradient(180deg, #241a14 0%, #1a110d 55%, #16100c 100%);
             border: 1px solid rgba(100, 100, 160, 0.3);
             border: 2px solid #6e4e37;
             border-radius: 8px;
             border-radius: 0;
             padding: 12px 16px;
             padding: 11px 14px 12px;
             box-sizing: border-box;
             box-sizing: border-box;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             font-family: Tahoma, "Segoe UI", Arial, sans-serif;
            box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.07);
         }
         }


         .item-tooltip-name {
         .item-tooltip-name {
             display: block;
             display: block;
             font-size: 14px;
             font-size: 15px;
             font-weight: 700;
             font-weight: 700;
             color: #ffffff;
             color: #f0d44d;
             text-align: center;
             text-align: center;
             line-height: 1.3;
             line-height: 1.25;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
         }
         }


         .item-tooltip-cat {
         .item-tooltip-cat {
             display: block;
             display: block;
             font-size: 10px;
             font-size: 11px;
             color: #7e7e9e;
             color: #ffffff;
             text-align: center;
             text-align: center;
             margin-top: 3px;
             margin-top: 4px;
             text-transform: uppercase;
             text-transform: none;
             letter-spacing: 0.8px;
             letter-spacing: 0.02em;
             font-weight: 600;
             font-weight: 700;
         }
         }


Linha 147: Linha 161:
             display: block;
             display: block;
             height: 1px;
             height: 1px;
             background: linear-gradient(90deg, transparent 0%, rgba(120, 120, 180, 0.35) 50%, transparent 100%);
             background: #5c4a31;
             margin: 9px 0;
             margin: 8px 0 10px;
             width: 100%;
             width: 100%;
            flex-shrink: 0;
         }
         }


Linha 155: Linha 170:
             display: block;
             display: block;
             font-size: 12px;
             font-size: 12px;
             color: #b0b0cc;
             color: #a0c4ff;
             line-height: 1.5;
             line-height: 1.5;
             text-align: center;
             text-align: center;
            font-weight: 600;
            margin-top: 2px;
         }
         }


         .item-tooltip-level {
         .item-tooltip-level {
             display: block;
             display: block;
             font-size: 11px;
             font-size: 12px;
             color: #c8c8e0;
             color: #ffffff;
             text-align: center;
             text-align: left;
             margin-top: 6px;
             margin-top: 0;
             font-weight: 600;
             font-weight: 700;
            width: 100%;
         }
         }


Linha 180: Linha 198:
             display: flex;
             display: flex;
             align-items: center;
             align-items: center;
             gap: 10px;
             gap: 8px;
             text-align: left;
             text-align: left;
         }
         }
Linha 190: Linha 208:
             box-sizing: border-box;
             box-sizing: border-box;
             border-radius: 50%;
             border-radius: 50%;
             background: rgba(80, 120, 200, 0.35);
             background: #2c2824;
             border: 1px solid rgba(120, 160, 240, 0.5);
             border: 1px solid #4a433c;
             color: #b8d4ff;
             color: #e8e4dc;
             font-size: 11px;
             font-size: 11px;
             font-weight: 700;
             font-weight: 700;
Linha 204: Linha 222:
             flex: 1;
             flex: 1;
             font-size: 11px;
             font-size: 11px;
             color: #b0b0cc;
             color: #9a9490;
             line-height: 1.45;
             line-height: 1.45;
            font-weight: 600;
         }
         }


         .item-tooltip-footer {
         .item-tooltip-footer {
             display: flex;
             display: flex;
             justify-content: center;
             justify-content: flex-end;
            align-items: center;
             gap: 14px;
             gap: 14px;
             margin-top: 10px;
             margin-top: 12px;
             padding-top: 8px;
             padding-top: 10px;
             border-top: 1px solid rgba(120, 120, 180, 0.18);
             border-top: 1px solid #5c4a31;
            width: 100%;
         }
         }


         .item-tooltip-val {
         .item-tooltip-val {
             font-size: 11px;
             font-size: 12px;
             color: #e8c84a;
             color: #f0d44d;
             font-weight: 600;
             font-weight: 700;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
         }
         }


         .item-tooltip-lvl {
         .item-tooltip-lvl {
             font-size: 11px;
             font-size: 11px;
             color: #6ab4ff;
             color: #ffffff;
             font-weight: 600;
             font-weight: 700;
         }
         }


         /* Seta padrão: aponta para baixo (tooltip acima do item) */
         /* Seta — mesma cor da base do painel */
         .item-tooltip-arrow {
         .item-tooltip-arrow {
             display: block;
             display: block;
Linha 236: Linha 258:
             border-left: 8px solid transparent;
             border-left: 8px solid transparent;
             border-right: 8px solid transparent;
             border-right: 8px solid transparent;
             border-top: 8px solid #1e1e30;
             border-top: 8px solid #16100c;
             border-bottom: none;
             border-bottom: none;
             flex-shrink: 0;
             flex-shrink: 0;
         }
         }


        /* Tooltip abaixo do item: inverte a ordem e a seta */
         .item-tooltip.tooltip-below {
         .item-tooltip.tooltip-below {
             flex-direction: column-reverse;
             flex-direction: column-reverse;
Linha 248: Linha 269:
         .item-tooltip.tooltip-below .item-tooltip-arrow {
         .item-tooltip.tooltip-below .item-tooltip-arrow {
             border-top: none;
             border-top: none;
             border-bottom: 8px solid #2a2a3d;
             border-bottom: 8px solid #241a14;
         }
         }


Linha 271: Linha 292:
     <script>
     <script>
         (function () {
         (function () {
             var TIP_WIDTH = 230;
             var TIP_WIDTH = 280;
             var MARGIN = 8;
             var MARGIN = 8;
             var GAP = 6;
             var GAP = 6;

Edição das 22h53min de 8 de abril de 2026

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