@@ Linha 21: / Linha 21: @@
              <div class="gla-conquistas-toolbar">
-                 <div class="gla-conquistas-tabs">
+                <!-- Wrapper com scroll horizontal — evita que as abas quebrem linha e fiquem flutuando -->
-                     <span class="gla-conquistas-tab is-active" data-tab="geral">Geral</span>
+                 <div class="gla-conquistas-tabs-scroll">
-                    <span class="gla-conquistas-tab" data-tab="personagens">Personagens</span>
+                     <div class="gla-conquistas-tabs">
-                    <span class="gla-conquistas-tab" data-tab="missao">Missão</span>
+                        <span class="gla-conquistas-tab is-active" data-tab="geral">Geral</span>
-                    <span class="gla-conquistas-tab" data-tab="bau">Baú</span>
+                        <span class="gla-conquistas-tab" data-tab="personagens">Personagens</span>
-                    <span class="gla-conquistas-tab" data-tab="navegacao">Navegação</span>
+                        <span class="gla-conquistas-tab" data-tab="missao">Missão</span>
-                    <span class="gla-conquistas-tab" data-tab="pvp">PvP</span>
+                        <span class="gla-conquistas-tab" data-tab="bau">Baú</span>
-                    <span class="gla-conquistas-tab" data-tab="pve">PvE</span>
+                        <span class="gla-conquistas-tab" data-tab="navegacao">Navegação</span>
-                    <span class="gla-conquistas-tab" data-tab="coliseu">Coliseu</span>
+                        <span class="gla-conquistas-tab" data-tab="pvp">PvP</span>
-                    <span class="gla-conquistas-tab" data-tab="poneglyph">Poneglyph</span>
+                        <span class="gla-conquistas-tab" data-tab="pve">PvE</span>
-                    <span class="gla-conquistas-tab" data-tab="indicacao">Indicação</span>
+                        <span class="gla-conquistas-tab" data-tab="coliseu">Coliseu</span>
-                    <span class="gla-conquistas-tab" data-tab="celular">Celular</span>
+                        <span class="gla-conquistas-tab" data-tab="poneglyph">Poneglyph</span>
-                    <span class="gla-conquistas-tab" data-tab="bossrush">Boss Rush</span>
+                        <span class="gla-conquistas-tab" data-tab="indicacao">Indicação</span>
+                        <span class="gla-conquistas-tab" data-tab="celular">Celular</span>
+                        <span class="gla-conquistas-tab" data-tab="bossrush">Boss Rush</span>
+                    </div>
                  </div>
@@ Linha 101: / Linha 104: @@
      <style>
+        /* ─── Variáveis — light mode ─────────────────────────────────────────── */
+        /* Paleta azul/branca consistente, independente do skin da wiki.
+           Os valores são fechados no .gla-conquistas-root pra não vazar
+           pra outros widgets da página. */
          .gla-conquistas-root {
-             --gla-ink: #1a1a1a;
+            /* Texto */
-             --gla-ink-2: #3a3a3a;
+             --gla-ink: #0f172a;
-             --gla-dim: #8a8378;
+            /* slate-900 — texto principal */
-             --gla-dim-2: #b8b0a0;
+             --gla-ink-2: #475569;
-             --gla-gold: #b8923f;
+            /* slate-600 — texto secundário */
-             --gla-gold-soft: #d9b96b;
+             --gla-dim: #94a3b8;
-             --gla-gold-bg: #f4ead0;
+            /* slate-400 — placeholder/desabilitado */
-             --gla-paper: #f8f5ed;
+             --gla-dim-2: #cbd5e1;
-             --gla-paper-2: #efeadc;
+            /* slate-300 — bordas sutis */
-             --gla-rule: #c9c0ad;
-             --gla-spoiler-bg: #fdfaf2;
+            /* Superfícies */
-             --gla-shadow: 3px 3px 0 var(--gla-ink);
+             --gla-paper: #f8fafc;
+            /* slate-50 — fundo de tabs inativas */
+             --gla-paper-2: #f1f5f9;
+            /* slate-100 — hover */
+            --gla-rule: #e2e8f0;
+            /* slate-200 — divisores */
+             --gla-spoiler-bg: #f8fafc;
+            /* Accent azul */
+             --gla-accent: #3b82f6;
+            /* blue-500 */
+             --gla-accent-soft: #93c5fd;
+            /* blue-300 */
+             --gla-accent-bg: #eff6ff;
+            /* blue-50 — fundo do bloco de reward */
+            /* Controles */
+             --gla-ctrl-bg: #ffffff;
+            --gla-ctrl-border: #e2e8f0;
+            /* borda neutra clara */
+             --gla-shadow: 0 1px 3px rgba(15, 23, 42, 0.06),
+1px 2px rgba(15, 23, 42, 0.04);
+        }
+        /* ─── Variáveis — dark mode ──────────────────────────────────────────── */
+        /* Adapta automaticamente quando o sistema/skin tá em dark.
+           Usar prefers-color-scheme cobre OS dark mode; muitos skins de wiki
+           (Vector 2022 night mode, Cosmos dark) também herdam isso. */
+        @media (prefers-color-scheme: dark) {
+            .gla-conquistas-root {
+                --gla-ink: #f1f5f9;
+                /* slate-100 */
+                --gla-ink-2: #cbd5e1;
+                /* slate-300 */
+                --gla-dim: #64748b;
+                /* slate-500 */
+                --gla-dim-2: #475569;
+                /* slate-600 */
+                --gla-paper: #1e293b;
+                /* slate-800 */
+                --gla-paper-2: #334155;
+                /* slate-700 — hover */
+                --gla-rule: #334155;
+                --gla-spoiler-bg: #0f172a;
+                /* slate-900 */
+                --gla-accent: #60a5fa;
+                /* blue-400 */
+                --gla-accent-soft: #3b82f6;
+                /* blue-500 */
+                --gla-accent-bg: #172554;
+                /* blue-950 */
+                --gla-ctrl-bg: #1e293b;
+                --gla-ctrl-border: #334155;
+                --gla-shadow: 0 1px 3px rgba(0, 0, 0, 0.35),
+1px 2px rgba(0, 0, 0, 0.25);
+            }
          }
+        /* ─── Layout principal ───────────────────────────────────────────────── */
          .gla-conquistas-headerbox {
              margin: 0 0 20px;
@@ Linha 121: / Linha 187: @@
              background: transparent;
              border: none;
-            border-radius: 0;
          }
@@ Linha 128: / Linha 193: @@
          }
+        /* ─── Toolbar unificado (tabs + controls) ────────────────────────────── */
+        /* É o "card" branco que envolve tabs + busca + filtros. Tem o fundo,
+           a borda e a sombra — assim os filhos podem ser transparentes e o
+           skin da wiki não passa por trás. */
          .gla-conquistas-toolbar {
              display: block;
              width: 100%;
+            background: var(--gla-ctrl-bg);
+            border: 1px solid var(--gla-ctrl-border);
+            border-radius: 14px;
+            box-shadow: var(--gla-shadow);
+        }
+        /* ─── Wrapper de scroll das abas ─────────────────────────────────────── */
+        /* overflow-x: auto ativa scroll horizontal em telas estreitas, evitando
+           que as abas quebrem linha e fiquem "flutuando". A border-bottom faz
+           o divisor entre as tabs e a área de busca/filtros. */
+        .gla-conquistas-tabs-scroll {
+            position: relative;
+            z-index: 2;
+            overflow-x: auto;
+            padding: 6px 10px 0;
+            background: transparent;
+            border: none;
+            border-bottom: 1px solid var(--gla-ctrl-border);
+            border-radius: 14px 14px 0 0;
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+            -webkit-overflow-scrolling: touch;
+        }
+        .gla-conquistas-tabs-scroll::-webkit-scrollbar {
+            display: none;
          }
+        /* ─── Container das abas ─────────────────────────────────────────────── */
          .gla-conquistas-tabs {
              display: flex;
-             flex-wrap: wrap;
+             flex-wrap: nowrap;
-             gap: 0;
+             gap: 4px;
-             padding: 0 6px;
+             padding: 0;
-             position: relative;
+             /* width:100% + min-width:max-content: em telas largas, as abas
-             z-index: 2;
+               preenchem todo o container igualmente. Em telas estreitas, o
-             margin-bottom: 0;
+               container ultrapassa a viewport e o wrapper faz scroll
+               horizontal — sem quebrar linha. */
+            width: 100%;
+             min-width: max-content;
+             box-sizing: border-box;
          }
+        /* ─── Aba individual ─────────────────────────────────────────────────── */
+        /* font-weight é o MESMO no ativo e no inativo. Antes a inativa era 600
+           e a ativa 700, o que mudava a largura do texto e causava o "tick"
+           (leve deslocamento) das abas vizinhas ao clicar.
+           margin-bottom: -1px faz a tab sobrepor à border-bottom do scroll;
+           só a tab ativa "apaga" essa borda com border-bottom-color branco. */
          .gla-conquistas-tab {
+            flex: 1 1 0;
+            min-width: 80px;
+            text-align: center;
+            white-space: nowrap;
              font-size: 13px;
-             font-weight: 600;
+             font-weight: 700;
-             padding: 8px 16px 10px;
+             padding: 9px 14px 10px;
-             border: 2px solid var(--gla-ink);
+             border: 1px solid transparent;
-             border-bottom: none;
+             border-bottom: 1px solid transparent;
-             border-radius: 10px 10px 0 0;
+             border-radius: 8px 8px 0 0;
              background: var(--gla-paper-2);
-             color: var(--gla-dim);
+             color: var(--gla-ink-2);
-            margin: 0 -2px 0 0;
              position: relative;
-            top: 2px;
              cursor: pointer;
-             transition: background 0.15s, color 0.15s;
+            box-sizing: border-box;
+            margin-bottom: -1px;
+             transition: background 0.15s, color 0.15s, border-color 0.15s;
          }
@@ Linha 165: / Linha 275: @@
          .gla-conquistas-tab.is-active {
-             background: #fff;
+             background: var(--gla-ctrl-bg);
-             color: var(--gla-ink);
+             color: var(--gla-accent);
-             z-index: 2;
+             z-index: 3;
-             font-weight: 700;
+            border-color: var(--gla-ctrl-border);
-             box-shadow: inset 0 -3px 0 var(--gla-gold);
+             /* mesma cor do fundo do toolbar — "apaga" o divisor nesse ponto. */
+            border-bottom-color: var(--gla-ctrl-bg);
+            /* linha azul no topo via inset shadow — não altera dimensões,
+               então clicar não causa deslocamento. */
+             box-shadow: inset 0 3px 0 var(--gla-accent);
          }
+        /* ─── Box de controles (busca + filtros) ─────────────────────────────── */
+        /* Sem fundo/borda próprios — herda do .gla-conquistas-toolbar. */
          .gla-conquistas-controls {
              display: flex;
@@ Linha 177: / Linha 293: @@
              gap: 10px;
              flex-wrap: wrap;
-            margin-top: 0;
              width: 100%;
              box-sizing: border-box;
-             background: #fff;
+             background: transparent;
-             border: 2px solid var(--gla-ink);
+             border: none;
-             border-radius: 0 12px 12px 12px;
+             border-radius: 0 0 14px 14px;
-            box-shadow: var(--gla-shadow);
+             padding: 14px 18px;
-             padding: 14px 18px 16px;
              position: relative;
              z-index: 1;
          }
+        /* ─── Campo de busca ─────────────────────────────────────────────────── */
          .gla-conquistas-search {
              flex: 1 1 auto;
              min-width: 160px;
              padding: 8px 16px;
-             border: 1.5px solid var(--gla-ink);
+             border: 1px solid var(--gla-ctrl-border);
              border-radius: 999px;
              font-size: 13px;
-             background: #fff;
+             background: var(--gla-paper);
              color: var(--gla-ink);
              outline: none;
              font-family: inherit;
-             transition: box-shadow 0.15s;
+             transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
+        }
+        .gla-conquistas-search::placeholder {
+            color: var(--gla-dim);
          }
          .gla-conquistas-search:focus {
-             box-shadow: 0 0 0 3px var(--gla-gold-bg);
+             box-shadow: 0 0 0 3px var(--gla-accent-bg);
-             border-color: var(--gla-gold);
+             border-color: var(--gla-accent);
+            background: var(--gla-ctrl-bg);
          }
+        /* ─── Filtros (pills) ────────────────────────────────────────────────── */
          .gla-conquistas-filters {
              display: flex;
@@ Linha 215: / Linha 336: @@
          .gla-conquistas-filter {
-             padding: 5px 14px;
+             padding: 6px 14px;
-             border: 1.5px solid var(--gla-ink);
+             border: 1px solid var(--gla-ctrl-border);
              border-radius: 999px;
-             background: #fff;
+             background: var(--gla-paper);
              font-size: 12px;
              font-weight: 600;
-             color: var(--gla-ink);
+             color: var(--gla-ink-2);
              cursor: pointer;
-             transition: all 0.15s;
+             transition: background 0.15s, color 0.15s, border-color 0.15s;
          }
          .gla-conquistas-filter:hover {
              background: var(--gla-paper-2);
+            color: var(--gla-ink);
          }
          .gla-conquistas-filter.is-active {
-             background: var(--gla-gold);
+             background: var(--gla-accent);
-             color: #fff;
+             color: #ffffff;
-             border-color: var(--gla-ink);
+             border-color: var(--gla-accent);
          }
+        /* ─── Painéis de conteúdo ────────────────────────────────────────────── */
          .gla-conquistas-panel {
              margin: 14px 0 0;
@@ Linha 255: / Linha 378: @@
          }
+        /* ─── Card de conquista ───────────────────────────────────────────────── */
+        /* Visual minimalista: borda fina, sombra suave, hover sutil sem
+           translate (causava reflow). Esquema branco + azul-claro. */
          .gla-item {
              display: flex;
              flex-direction: column;
-             background: #fff;
+             background: var(--gla-ctrl-bg);
-             border: 2px solid var(--gla-ink);
+             border: 1px solid var(--gla-accent-soft);
-             border-radius: 14px;
+             border-radius: 12px;
              box-shadow: var(--gla-shadow);
-             transition: box-shadow 0.15s, transform 0.15s;
+             transition: border-color 0.15s, box-shadow 0.15s;
          }
          .gla-item.has-spoiler:hover {
-             box-shadow: 4px 4px 0 var(--gla-gold);
+             border-color: var(--gla-accent);
-             transform: translate(-1px, -1px);
+             box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.2);
          }
@@ Linha 273: / Linha 399: @@
              display: flex;
              align-items: center;
-             gap: 18px;
+             gap: 16px;
-             padding: 18px 16px 18px 20px;
+             padding: 14px 18px;
-             min-height: 88px;
+             min-height: 76px;
          }
@@ Linha 281: / Linha 407: @@
              display: flex;
              align-items: center;
-             gap: 16px;
+             gap: 14px;
              flex: 1;
              min-width: 0;
-             padding-right: 14px;
+             /* sem divisor vertical — minimalista */
-            border-right: 1.5px dashed var(--gla-rule);
          }
          .gla-item-icon {
-             flex: 0 0 80px;
+             flex: 0 0 auto;
              display: flex;
              align-items: center;
@@ Linha 295: / Linha 420: @@
          }
+        /* Ícone respeita o tamanho do arquivo da wiki (recomendado: 52×52).
+           Sem dimensões fixas no CSS. */
          .gla-item-icon img {
-            width: 80px;
-            height: 80px;
              object-fit: contain;
              border: none !important;
@@ Linha 307: / Linha 432: @@
          .gla-item-title {
-             font-size: 20px;
+             font-size: 15px;
              font-weight: 700;
-             color: var(--gla-ink);
+             color: var(--gla-accent-soft);
-             line-height: 1.15;
+             line-height: 1.2;
+        }
+        .gla-conquistas-root .gla-item-title {
+            color: #1d4ed8;
+            /* blue-700 — título da conquista forte */
+        }
+        @media (prefers-color-scheme: dark) {
+            .gla-conquistas-root .gla-item-title {
+                color: #60a5fa;
+                /* blue-400 no dark */
+            }
          }
          .gla-item-desc {
-             font-size: 14px;
+             font-size: 13px;
              color: var(--gla-ink-2);
-             margin-top: 4px;
+             margin-top: 2px;
              line-height: 1.4;
          }
+        /* ─── Box de recompensa ──────────────────────────────────────────────── */
+        /* Coluna fixa centralizada. margin-top negativo + align-self start
+           sobe o conjunto pra compensar o badge .qty (do Widget:Item) que sai
+           ~3px pra baixo do ícone — sem isso, o bloco parece "puxado pra baixo"
+           mesmo estando tecnicamente centralizado. */
          .gla-item-reward {
              flex-shrink: 0;
@@ Linha 325: / Linha 467: @@
              flex-direction: column;
              align-items: center;
-             gap: 6px;
+             gap: 4px;
-             padding: 10px 14px;
+             padding: 8px 14px 10px;
-             background: var(--gla-gold-bg);
+             background: var(--gla-accent-bg);
-             border: 1.5px dashed var(--gla-gold);
+             border: 1px solid var(--gla-accent-soft);
-             border-radius: 14px;
+             border-radius: 10px;
+            min-width: 180px;
              max-width: 260px;
-             min-width: 170px;
+             align-self: center;
+            margin-top: -4px;
          }
@@ Linha 337: / Linha 481: @@
              font-size: 11px;
              font-weight: 700;
-             letter-spacing: 0.18em;
+             letter-spacing: 0.14em;
              text-transform: uppercase;
-             color: var(--gla-gold);
+             color: var(--gla-accent);
              white-space: nowrap;
          }
+        /* ─── Botão spoiler ──────────────────────────────────────────────────── */
          .gla-item-spoiler-toggle {
              display: inline-flex;
@@ Linha 348: / Linha 493: @@
              gap: 6px;
              margin-left: auto;
-             border: 1.5px solid var(--gla-ink);
+            align-self: center;
-             background: #fff;
+             border: 1px solid var(--gla-accent-soft);
+             background: var(--gla-accent-bg);
              border-radius: 999px;
-             padding: 6px 10px;
+             padding: 6px 12px;
              font: inherit;
-             color: var(--gla-ink);
+             color: var(--gla-accent);
              cursor: pointer;
-             transition: background 0.15s;
+             transition: background 0.15s, border-color 0.15s;
          }
          .gla-item-spoiler-toggle:hover {
-             background: var(--gla-paper-2);
+             background: var(--gla-accent);
+            border-color: var(--gla-accent);
+            color: #ffffff;
+        }
+        .gla-item-spoiler-toggle:hover .gla-item-chevron {
+            color: #ffffff;
          }
          .gla-item-spoiler-text {
-             font-size: 12px;
+             font-size: 11px;
              font-weight: 700;
-             letter-spacing: 0.04em;
+             letter-spacing: 0.08em;
              text-transform: uppercase;
          }
          .gla-item-chevron {
-             font-size: 20px;
+             font-size: 18px;
-             color: var(--gla-gold);
+             color: var(--gla-accent);
              line-height: 1;
              flex-shrink: 0;
-             transition: transform 0.2s ease;
+             transition: transform 0.2s ease, color 0.15s;
              user-select: none;
          }
@@ Linha 382: / Linha 534: @@
          }
+        /* ─── Conteúdo spoiler ────────────────────────────────────────────────── */
          .gla-item-spoiler {
              display: none;
-             border-top: 1.5px dashed var(--gla-rule);
+             border-top: 1px solid var(--gla-accent-soft);
              background: var(--gla-spoiler-bg);
-             padding: 16px 20px 18px;
+             padding: 14px 18px;
              gap: 18px;
              flex-direction: row;
@@ Linha 428: / Linha 581: @@
              height: auto;
              border-radius: 8px;
-             border: 1.5px solid var(--gla-ink) !important;
+             border: 1.5px solid var(--gla-ctrl-border) !important;
              display: block;
          }
+        /* ─── Conquista oculta ────────────────────────────────────────────────── */
+        /* Cinza simples (sem padrão listrado) pra ficar visualmente leve.
+           Diferencia da normal só pela cor da borda + texto esmaecido. */
          .gla-item.is-hidden,
          .gla-item[data-hidden="true"] {
-             background: repeating-linear-gradient(45deg, #fafafa 0 8px, #f0ece2 8px 9px);
+             background: var(--gla-paper);
              border-color: var(--gla-dim-2);
-             box-shadow: 3px 3px 0 var(--gla-dim-2);
+             box-shadow: var(--gla-shadow);
          }
          .gla-item.is-hidden:hover,
          .gla-item[data-hidden="true"]:hover {
-             transform: none;
+             border-color: var(--gla-dim);
-             box-shadow: 3px 3px 0 var(--gla-dim-2);
+             box-shadow: var(--gla-shadow);
          }
-         .gla-item.is-hidden .gla-item-left,
+         .gla-conquistas-root .gla-item.is-hidden .gla-item-title,
-        .gla-item[data-hidden="true"] .gla-item-left {
+         .gla-conquistas-root .gla-item[data-hidden="true"] .gla-item-title {
-            border-right-color: var(--gla-dim-2);
+             color: var(--gla-ink-2);
-        }
-         .gla-item.is-hidden .gla-item-title,
-        .gla-item[data-hidden="true"] .gla-item-title {
-             color: var(--gla-dim);
              font-style: italic;
          }
@@ Linha 463: / Linha 614: @@
          .gla-item.is-hidden .gla-item-reward,
          .gla-item[data-hidden="true"] .gla-item-reward {
-             background: transparent;
+             background: var(--gla-paper-2);
              border-color: var(--gla-dim-2);
          }
@@ Linha 477: / Linha 628: @@
          }
+        /* ─── Reward items (Widget:Item) ─────────────────────────────────────── */
          .gla-item-reward .reward-wrapper {
              width: 100%;
@@ Linha 494: / Linha 646: @@
          }
+        /* ─── Responsivo mobile ──────────────────────────────────────────────── */
          @media (max-width: 720px) {
+            .gla-conquistas-tab {
+                font-size: 12px;
+                padding: 8px 12px 9px;
+                min-width: 68px;
+            }
              .gla-item-main {
                  flex-wrap: wrap;
@@ Linha 500: / Linha 659: @@
              .gla-item-left {
-                border-right: none;
                  padding-right: 0;
                  flex: 1 1 100%;
@@ Linha 510: / Linha 668: @@
                  justify-content: flex-start;
                  max-width: none;
+                margin-top: 0;
+                align-self: stretch;
              }

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

Edição das 18h43min de 19 de maio de 2026

Menu de navegação

Pesquisa