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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
Linha 449: Linha 449:
         .gla-item-reward-label {
         .gla-item-reward-label {
             font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
             font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
             font-size: 11px;
             font-size: 13px;
             font-weight: 700;
             font-weight: 700;
             letter-spacing: 0.16em;
             letter-spacing: 0.18em;
             text-transform: uppercase;
             text-transform: uppercase;
             color: var(--gla-accent);
             color: var(--gla-accent);
Linha 458: Linha 458:


         /* Chip de itens — agora é o .reward-wrapper (emitido pelo Lua/Widget:Item).
         /* Chip de itens — agora é o .reward-wrapper (emitido pelo Lua/Widget:Item).
           Encolhe com a quantidade (min-width pra 1 item, max-width pra caber
           padding-bottom maior porque cada .item-wrapper do Widget:Item tem
           5 + chip "+M" sem wrap). */
           um .item-count posicionado em bottom:-10px (badge "x999" pendurado
          abaixo do ícone). Sem espaço extra, o badge encosta na borda. */
         .gla-item-reward .reward-wrapper {
         .gla-item-reward .reward-wrapper {
             display: block;
             display: block;
Linha 465: Linha 466:
             border: 1px solid var(--gla-rule);
             border: 1px solid var(--gla-rule);
             border-radius: 10px;
             border-radius: 10px;
             padding: 7px 12px 9px;
             padding: 9px 8px 18px;
             min-width: 72px;
             min-width: 64px;
             /* 285 = espaço pra 4 ícones (4×48 + 3×4) + chip "+M" (48) + gaps + padding. */
             /* 4×(32 wrapper + 12 margin) + chip 32 = 220 + folga */
             max-width: 285px;
             max-width: 260px;
             width: fit-content;
             width: fit-content;
             box-sizing: border-box;
             box-sizing: border-box;
         }
         }


         /* ─── Botão spoiler (abinha no bottom-center) ────────────────────────── */
         /* Wrapper do texto — title + desc + (eventual) toggle de spoiler.
         /* Posicionado absolutamente no bottom-center do .gla-item-main.
          min-width:0 pra que o flex do .gla-item-left consiga truncar texto
          Pequeno e horizontalmente centralizado — fica no "corredor" central
          longo sem empurrar o botão pra direita. */
           livre entre o título/desc à esquerda e a recompensa à direita,
         .gla-item-text {
           sem aumentar a altura do card. */
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
 
        /* ─── Botão spoiler ──────────────────────────────────────────────────── */
        /* Fluir abaixo da descrição, alinhado com o início do texto (não
           com o ícone). Antes era absolute em left:84px fixo e o ícone real
           da wiki (que pode ser ~100px) cobria o botão. */
         .gla-item-spoiler-toggle {
         .gla-item-spoiler-toggle {
            position: absolute;
            /* main padding-left (18) + icon (52) + gap (14) = 84 → alinhado com o começo do título.
              A versão anterior usava left:50% (centrado), mas o chip da recompensa
              encavalava em telas mais apertadas. Ancorar à esquerda elimina a colisão. */
            left: 84px;
            bottom: 6px;
             display: inline-flex;
             display: inline-flex;
             align-items: center;
             align-items: center;
             gap: 6px;
             gap: 6px;
             margin: 0;
             margin: 8px 0 0;
             border: 1px solid var(--gla-rule);
             border: 1px solid var(--gla-rule);
             background: var(--gla-paper);
             background: var(--gla-paper);
Linha 496: Linha 500:
             color: var(--gla-ink-2);
             color: var(--gla-ink-2);
             cursor: pointer;
             cursor: pointer;
            z-index: 1;
             transition: background 0.15s, border-color 0.15s, color 0.15s;
             transition: background 0.15s, border-color 0.15s, color 0.15s;
            user-select: none;
            align-self: flex-start;
         }
         }


Linha 999: Linha 1 004:
             display: flex !important;
             display: flex !important;
             /* nowrap = trava a altura. O JS abaixo move itens excedentes pra
             /* nowrap = trava a altura. O JS abaixo move itens excedentes pra
               dentro do chip "+M" depois do 5º. */
               dentro do chip "+M" depois do MAX_VISIBLE-ésimo. */
             flex-wrap: nowrap !important;
             flex-wrap: nowrap !important;
             justify-content: center;
             justify-content: flex-start;
             gap: 4px;
            align-items: flex-start;
             gap: 0;
             width: 100%;
             width: 100%;
         }
         }


         /* ─── Chip "+M" (overflow) ─────────────────────────────────────────── */
         /* ─── Chip "+M" (overflow) ─────────────────────────────────────────── */
         /* Mesmo tamanho/forma do .item-wrapper pra alinhar visualmente com os
         /* MESMA dimensão e margem do .item-wrapper do Widget:Item (32×32 +
          ícones, mas com texto "+N" no centro. Click abre o popover com os
          margin 0 6px) pra alinhar exatamente na linha dos ícones. Antes
           itens escondidos. */
           era 48×48 e ficava deslocado. */
         .gla-item-reward .reward-more-chip {
         .gla-item-reward .reward-more-chip {
             display: inline-flex;
             display: inline-flex;
             align-items: center;
             align-items: center;
             justify-content: center;
             justify-content: center;
             width: 48px;
             width: 32px;
             height: 48px;
             height: 32px;
            margin: 0 6px;
             padding: 0;
             padding: 0;
             border: 1px solid var(--gla-rule);
             border: 1px solid var(--gla-rule);
             border-radius: 8px;
             border-radius: 6px;
             background: var(--gla-paper);
             background: var(--gla-paper);
             color: var(--gla-accent);
             color: var(--gla-accent);
             font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
             font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
             font-size: 18px;
             font-size: 13px;
             font-weight: 700;
             font-weight: 700;
             line-height: 1;
             line-height: 1;
Linha 1 028: Linha 1 035:
             cursor: pointer;
             cursor: pointer;
             flex-shrink: 0;
             flex-shrink: 0;
            box-sizing: border-box;
            vertical-align: top;
             transition: background 0.15s, border-color 0.15s, color 0.15s;
             transition: background 0.15s, border-color 0.15s, color 0.15s;
         }
         }
Linha 1 046: Linha 1 055:
             flex-wrap: wrap;
             flex-wrap: wrap;
             justify-content: flex-start;
             justify-content: flex-start;
             gap: 4px;
            align-items: flex-start;
             padding: 8px;
             gap: 0;
            /* padding-bottom extra pelo mesmo motivo do .reward-wrapper:
              .item-count fica em bottom:-10px e precisa de espaço. */
             padding: 10px 6px 18px;
             background: var(--gla-paper, #ffffff);
             background: var(--gla-paper, #ffffff);
             border: 1px solid var(--gla-rule, #e2e8f0);
             border: 1px solid var(--gla-rule, #e2e8f0);
Linha 1 054: Linha 1 066:
                 0 2px 6px -2px rgba(15, 23, 42, 0.08);
                 0 2px 6px -2px rgba(15, 23, 42, 0.08);
             z-index: 9999;
             z-index: 9999;
             max-width: 268px;
             max-width: 260px;
             animation: gla-popover-in 0.18s ease;
             animation: gla-popover-in 0.18s ease;
         }
         }
Linha 1 100: Linha 1 112:
             }
             }


             /* No mobile o stack vertical empurra o "bottom" do .gla-item-main
             /* No mobile o spoiler já flui dentro do .gla-item-text, só
               pra cima da recompensa — o spoiler absoluto colidiria com o chip.
               reduz o padding pra ficar levemente mais compacto. */
              Saindo do absoluto e deixando ele fluir como 3º item do flex-wrap. */
             .gla-item-spoiler-toggle {
             .gla-item-spoiler-toggle {
                position: static;
                transform: none;
                align-self: flex-start;
                margin: 4px 0 0;
                 padding: 2px 11px 3px;
                 padding: 2px 11px 3px;
             }
             }

Edição das 00h43min de 21 de maio de 2026

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