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

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


     <style>
     <style>
        .gla-conquistas-root {
            --gla-ink: #1a1a1a;
            --gla-ink-2: #3a3a3a;
            --gla-dim: #8a8378;
            --gla-dim-2: #b8b0a0;
            --gla-gold: #b8923f;
            --gla-gold-soft: #d9b96b;
            --gla-gold-bg: #f4ead0;
            --gla-paper: #f8f5ed;
            --gla-paper-2: #efeadc;
            --gla-rule: #c9c0ad;
            --gla-spoiler-bg: #fdfaf2;
            --gla-shadow: 3px 3px 0 var(--gla-ink);
        }
         .gla-conquistas-headerbox {
         .gla-conquistas-headerbox {
             margin: 0 0 20px;
             margin: 0 0 20px;
             padding: 20px 24px;
             padding: 0;
             border-radius: 16px;
             background: transparent;
             background: #ffffff;
             border: none;
             border: 1px solid #e5e7eb;
             border-radius: 0;
         }
         }


         .gla-conquistas-header h2 {
         .gla-conquistas-header {
             margin: 0;
             display: none;
            font-size: 26px;
            font-weight: 700;
            color: #020617;
        }
 
        .gla-conquistas-header p {
            margin: 4px 0 16px;
            color: #64748b;
            font-size: 14px;
         }
         }


        /* Largura acompanha a fileira de abas (não estica na caixa inteira) */
         .gla-conquistas-toolbar {
         .gla-conquistas-toolbar {
             display: inline-block;
             display: block;
             max-width: 100%;
             width: 100%;
            vertical-align: top;
         }
         }


Linha 132: Linha 136:
             display: flex;
             display: flex;
             flex-wrap: wrap;
             flex-wrap: wrap;
             gap: 6px;
             gap: 0;
            padding: 0 6px;
            position: relative;
            z-index: 2;
            margin-bottom: 0;
         }
         }


         .gla-conquistas-tab {
         .gla-conquistas-tab {
             display: inline-block;
             font-size: 13px;
             padding: 9px 16px;
            font-weight: 600;
             border-radius: 8px;
             padding: 8px 16px 10px;
             border: 1px solid #e2e8f0;
            border: 2px solid var(--gla-ink);
             background: #ffffff;
             border-bottom: none;
             border-radius: 10px 10px 0 0;
             background: var(--gla-paper-2);
            color: var(--gla-dim);
            margin: 0 -2px 0 0;
            position: relative;
            top: 2px;
             cursor: pointer;
             cursor: pointer;
             font-size: 13px;
             transition: background 0.15s, color 0.15s;
            font-weight: 700;
            color: #334155;
            transition: all .15s ease;
         }
         }


         .gla-conquistas-tab:hover {
         .gla-conquistas-tab:hover {
             background: #eff6ff;
             background: var(--gla-paper);
            border-color: #93c5fd;
             color: var(--gla-ink);
             color: #1d4ed8;
         }
         }


         .gla-conquistas-tab.is-active {
         .gla-conquistas-tab.is-active {
             background: linear-gradient(135deg, #1e3a8a, #0f172a);
             background: #fff;
            color: #ffffff;
             color: var(--gla-ink);
             border-color: #0f172a;
             z-index: 2;
            box-shadow: 0 4px 12px -3px rgba(15, 23, 42, 0.45);
             font-weight: 700;
            transform: translateY(-1px);
             box-shadow: inset 0 -3px 0 var(--gla-gold);
        }
 
        /* PAINEL */
        .gla-conquistas-panel {
            margin: 20px 0 0;
            display: none;
        }
 
        .gla-conquistas-panel.is-active {
            display: block;
        }
 
        /* CONTAINER ORIGEM (cards do #invoke antes do JS realocar)
          Fica escondido pra evitar flash; depois o JS remove esse div. */
        .gla-conquistas-source {
             display: none;
        }
 
        /* LISTA */
        .gla-list {
            display: flex;
             flex-direction: column;
             gap: 10px;
        }
 
        /* ITEM — normal = acento azul */
        .gla-item {
            display: flex;
            flex-direction: column;
            border-radius: 12px;
            border: 2px solid #93c5fd;
            background: #f0f7ff;
        }
 
        .gla-item-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 14px;
            min-height: 72px;
        }
 
        /* SPOILER */
        .gla-item-spoiler {
            display: none;
            border-top: 1px solid #bfdbfe;
            padding: 14px 16px;
            gap: 16px;
            flex-direction: row;
            align-items: flex-start;
        }
 
        .gla-item.is-open .gla-item-spoiler {
            display: flex;
        }
 
        .gla-item.is-hidden .gla-item-spoiler,
        .gla-item[data-hidden="true"] .gla-item-spoiler {
            border-top-color: #e2e8f0;
         }
         }


        .gla-item-spoiler-info {
            flex: 1;
            font-size: 13px;
            color: #475569;
            line-height: 1.6;
            min-width: 0;
        }
        .gla-item-spoiler-media {
            flex-shrink: 0;
            max-width: 400px;
        }
        .gla-item-spoiler-media img,
        .gla-item-spoiler-media video {
            max-width: 100%;
            border-radius: 8px;
            border: none !important;
        }
        /* Chevron indicador de expansão */
        .gla-item-chevron {
            font-size: 20px;
            color: #93c5fd;
            line-height: 1;
            flex-shrink: 0;
            display: inline-block;
            transition: transform .2s;
            user-select: none;
        }
        .gla-item.is-hidden .gla-item-chevron,
        .gla-item[data-hidden="true"] .gla-item-chevron {
            color: #cbd5e1;
        }
        .gla-item.has-spoiler {
            cursor: pointer;
        }
        .gla-item.has-spoiler.is-open .gla-item-chevron {
            transform: rotate(90deg);
        }
        /* CONTROLES — busca + filtros (mesma largura das abas) */
         .gla-conquistas-controls {
         .gla-conquistas-controls {
             display: flex;
             display: flex;
Linha 272: Linha 177:
             gap: 10px;
             gap: 10px;
             flex-wrap: wrap;
             flex-wrap: wrap;
             margin-top: 14px;
             margin-top: 0;
             width: 100%;
             width: 100%;
             box-sizing: border-box;
             box-sizing: border-box;
            background: #fff;
            border: 2px solid var(--gla-ink);
            border-radius: 0 12px 12px 12px;
            box-shadow: var(--gla-shadow);
            padding: 14px 18px 16px;
            position: relative;
            z-index: 1;
         }
         }


         .gla-conquistas-search {
         .gla-conquistas-search {
             flex: 1 1 auto;
             flex: 1 1 auto;
            width: auto;
             min-width: 160px;
             min-width: 120px;
             padding: 8px 16px;
            max-width: 100%;
             border: 1.5px solid var(--gla-ink);
             padding: 7px 14px;
             border: 1px solid #cbd5e1;
             border-radius: 999px;
             border-radius: 999px;
             font-size: 13px;
             font-size: 13px;
            background: #fff;
            color: var(--gla-ink);
             outline: none;
             outline: none;
            color: #0f172a;
            background: #f8fafc;
             font-family: inherit;
             font-family: inherit;
            transition: box-shadow 0.15s;
         }
         }


         .gla-conquistas-search:focus {
         .gla-conquistas-search:focus {
             border-color: #93c5fd;
             box-shadow: 0 0 0 3px var(--gla-gold-bg);
             background: #fff;
             border-color: var(--gla-gold);
         }
         }


Linha 304: Linha 215:


         .gla-conquistas-filter {
         .gla-conquistas-filter {
             display: inline-block;
             padding: 5px 14px;
             padding: 6px 13px;
             border: 1.5px solid var(--gla-ink);
             border-radius: 999px;
             border-radius: 999px;
            border: 1px solid #cbd5e1;
             background: #fff;
             background: #f8fafc;
            cursor: pointer;
             font-size: 12px;
             font-size: 12px;
             font-weight: 600;
             font-weight: 600;
             color: #0f172a;
             color: var(--gla-ink);
            cursor: pointer;
            transition: all 0.15s;
         }
         }


         .gla-conquistas-filter:hover {
         .gla-conquistas-filter:hover {
             background: #e2e8f0;
             background: var(--gla-paper-2);
         }
         }


         .gla-conquistas-filter.is-active {
         .gla-conquistas-filter.is-active {
             background: #3b82f6;
             background: var(--gla-gold);
             color: #fff;
             color: #fff;
             border-color: #3b82f6;
             border-color: var(--gla-ink);
        }
 
        .gla-conquistas-panel {
            margin: 14px 0 0;
            display: none;
        }
 
        .gla-conquistas-panel.is-active {
            display: block;
        }
 
        .gla-conquistas-source {
            display: none;
         }
         }


        /* OCULTAS — acento cinza */
         .gla-list {
         .gla-item.is-hidden,
            display: flex;
         .gla-item[data-hidden="true"] {
            flex-direction: column;
             border-color: #cbd5e1;
            gap: 12px;
             background: #f8fafc;
        }
 
         .gla-item {
             display: flex;
            flex-direction: column;
             background: #fff;
            border: 2px solid var(--gla-ink);
            border-radius: 14px;
            box-shadow: var(--gla-shadow);
            transition: box-shadow 0.15s, transform 0.15s;
         }
         }


         .gla-item.is-hidden .gla-item-title,
         .gla-item.has-spoiler:hover {
        .gla-item[data-hidden="true"] .gla-item-title {
            box-shadow: 4px 4px 0 var(--gla-gold);
             color: #475569;
             transform: translate(-1px, -1px);
         }
         }


         .gla-item.is-hidden .gla-item-desc,
         .gla-item-main {
        .gla-item[data-hidden="true"] .gla-item-desc {
            display: flex;
             color: #94a3b8;
            align-items: center;
            gap: 18px;
            padding: 18px 16px 18px 20px;
             min-height: 88px;
         }
         }


        /* LADO ESQUERDO */
         .gla-item-left {
         .gla-item-left {
             display: flex;
             display: flex;
             align-items: center;
             align-items: center;
             gap: 12px;
             gap: 16px;
             flex: 1;
             flex: 1;
             min-width: 0;
             min-width: 0;
            padding-right: 14px;
            border-right: 1.5px dashed var(--gla-rule);
        }
        .gla-item-icon {
            flex: 0 0 80px;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         }


        /* ICONE — sem tamanho fixo; respeita o tamanho do arquivo na wiki
          (recomendado: 52x52). Mantém só os resets de visual. */
         .gla-item-icon img {
         .gla-item-icon img {
             display: block;
             width: 80px;
            height: 80px;
             object-fit: contain;
             object-fit: contain;
             border: none !important;
             border: none !important;
Linha 360: Linha 303:
             background: none !important;
             background: none !important;
             box-shadow: none !important;
             box-shadow: none !important;
            display: block;
         }
         }


        /* fallback extra */
        .gla-item-icon .thumbimage,
        .gla-item-icon .thumb,
        .gla-item-icon a {
            border: none !important;
            padding: 0 !important;
            background: none !important;
            box-shadow: none !important;
        }
        /* TEXTO */
         .gla-item-title {
         .gla-item-title {
            font-size: 20px;
             font-weight: 700;
             font-weight: 700;
             font-size: 15px;
             color: var(--gla-ink);
             color: #1d4ed8;
             line-height: 1.15;
         }
         }


         .gla-item-desc {
         .gla-item-desc {
             font-size: 13px;
             font-size: 14px;
             color: #64748b;
             color: var(--gla-ink-2);
             margin-top: 2px;
             margin-top: 4px;
            line-height: 1.4;
         }
         }


        /* RECOMPENSA — alinhado ao sistema base de Item/Reward */
         .gla-item-reward {
         .gla-item-reward {
             flex-shrink: 0;
             flex-shrink: 0;
            max-width: 260px;
            min-width: 170px;
             display: flex;
             display: flex;
             flex-direction: column;
             flex-direction: column;
             align-items: center;
             align-items: center;
             gap: 6px;
             gap: 6px;
             padding: 0 14px;
             padding: 10px 14px;
            background: var(--gla-gold-bg);
            border: 1.5px dashed var(--gla-gold);
            border-radius: 14px;
            max-width: 260px;
            min-width: 170px;
         }
         }


         .gla-item-reward-label {
         .gla-item-reward-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--gla-gold);
            white-space: nowrap;
        }
        .gla-item-spoiler-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
            border: 1.5px solid var(--gla-ink);
            background: #fff;
            border-radius: 999px;
            padding: 6px 10px;
            font: inherit;
            color: var(--gla-ink);
            cursor: pointer;
            transition: background 0.15s;
        }
        .gla-item-spoiler-toggle:hover {
            background: var(--gla-paper-2);
        }
        .gla-item-spoiler-text {
             font-size: 12px;
             font-size: 12px;
             font-weight: 700;
             font-weight: 700;
             letter-spacing: .05em;
             letter-spacing: 0.04em;
             text-transform: uppercase;
             text-transform: uppercase;
            white-space: nowrap;
            text-align: center;
            width: 100%;
            color: #3b82f6;
         }
         }


         .gla-item.is-hidden .gla-item-reward-label,
         .gla-item-chevron {
         .gla-item[data-hidden="true"] .gla-item-reward-label {
            font-size: 20px;
             color: #94a3b8;
            color: var(--gla-gold);
            line-height: 1;
            flex-shrink: 0;
            transition: transform 0.2s ease;
            user-select: none;
        }
 
        .gla-item.has-spoiler.is-open .gla-item-chevron {
            transform: rotate(90deg);
        }
 
        .gla-item-spoiler {
            display: none;
            border-top: 1.5px dashed var(--gla-rule);
            background: var(--gla-spoiler-bg);
            padding: 16px 20px 18px;
            gap: 18px;
            flex-direction: row;
            align-items: flex-start;
            border-radius: 0 0 12px 12px;
        }
 
         .gla-item.is-open .gla-item-spoiler {
            display: flex;
            animation: gla-spoiler-in 0.25s ease-out;
        }
 
        @keyframes gla-spoiler-in {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }
 
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
 
        .gla-item-spoiler-info {
            flex: 1;
            font-size: 14px;
             color: var(--gla-ink-2);
            line-height: 1.55;
            min-width: 0;
        }
 
        .gla-item-spoiler-media {
            flex: 0 0 280px;
            max-width: 400px;
         }
         }


         .gla-item-reward .reward-wrapper {
         .gla-item-spoiler-media img,
        .gla-item-spoiler-media video {
             width: 100%;
             width: 100%;
            height: auto;
            border-radius: 8px;
            border: 1.5px solid var(--gla-ink) !important;
             display: block;
             display: block;
         }
         }


         /* Blindagem: em Conquistas, não aplicar destaque especial herdado
         .gla-item.is-hidden,
          de versões antigas do Widget:Item. */
        .gla-item[data-hidden="true"] {
         .gla-item-reward .item-wrapper-special {
            background: repeating-linear-gradient(45deg, #fafafa 0 8px, #f0ece2 8px 9px);
             filter: none !important;
            border-color: var(--gla-dim-2);
            box-shadow: 3px 3px 0 var(--gla-dim-2);
        }
 
        .gla-item.is-hidden:hover,
         .gla-item[data-hidden="true"]:hover {
            transform: none;
            box-shadow: 3px 3px 0 var(--gla-dim-2);
        }
 
        .gla-item.is-hidden .gla-item-left,
        .gla-item[data-hidden="true"] .gla-item-left {
            border-right-color: var(--gla-dim-2);
        }
 
        .gla-item.is-hidden .gla-item-title,
        .gla-item[data-hidden="true"] .gla-item-title {
            color: var(--gla-dim);
            font-style: italic;
        }
 
        .gla-item.is-hidden .gla-item-desc,
        .gla-item[data-hidden="true"] .gla-item-desc {
            color: var(--gla-dim);
        }
 
        .gla-item.is-hidden .gla-item-reward,
        .gla-item[data-hidden="true"] .gla-item-reward {
             background: transparent;
            border-color: var(--gla-dim-2);
         }
         }


         .gla-item-reward .item-wrapper-special .item-tooltip-body {
         .gla-item.is-hidden .gla-item-reward-label,
             border-color: #5c4838 !important;
        .gla-item[data-hidden="true"] .gla-item-reward-label {
            background-color: #1a110d !important;
             color: var(--gla-dim);
            box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.035) !important;
         }
         }


         .gla-item-reward .item-wrapper-special .item-tooltip-name {
         .gla-item.is-hidden .gla-item-chevron,
             color: #c4a96a !important;
        .gla-item[data-hidden="true"] .gla-item-chevron {
             color: var(--gla-dim);
         }
         }


         .gla-item-reward .item-wrapper-special .item-tooltip-cat {
         .gla-item-reward .reward-wrapper {
             color: rgba(255, 252, 248, 0.82) !important;
             width: 100%;
            display: block;
         }
         }


         .gla-item-reward .item-wrapper-special .item-tooltip-sep {
         .gla-item-reward .item-wrapper-special {
             background: #5c4a31 !important;
             filter: none !important;
         }
         }


        /* Mantém o comportamento base do Widget:Item, mas garante quebra
          para não perder recompensas em cards com muitos itens. */
         .gla-item-reward .reward-items {
         .gla-item-reward .reward-items {
             display: flex !important;
             display: flex !important;
Linha 450: Linha 492:
             gap: 4px;
             gap: 4px;
             width: 100%;
             width: 100%;
        }
        @media (max-width: 720px) {
            .gla-item-main {
                flex-wrap: wrap;
            }
            .gla-item-left {
                border-right: none;
                padding-right: 0;
                flex: 1 1 100%;
            }
            .gla-item-reward {
                flex: 1 1 100%;
                flex-direction: row;
                justify-content: flex-start;
                max-width: none;
            }
            .gla-item-spoiler-toggle {
                margin-left: 0;
            }
            .gla-item-spoiler {
                flex-direction: column;
            }
            .gla-item-spoiler-media {
                flex: 1 1 100%;
                max-width: 100%;
            }
         }
         }
     </style>
     </style>
Linha 583: Linha 657:
             });
             });


             // Spoiler — abre/fecha ao clicar no card
             // Spoiler — abre/fecha só no botão "Spoiler"
             root.addEventListener("click", function (e) {
             root.addEventListener("click", function (e) {
                 var card = e.target.closest(".gla-item.has-spoiler");
                 var toggle = e.target.closest(".gla-item-spoiler-toggle");
                if (!toggle) return;
                if (e.target.closest(".item-wrapper")) return;
                var card = toggle.closest(".gla-item.has-spoiler");
                 if (!card) return;
                 if (!card) return;
                 if (e.target.closest(".gla-item-spoiler")) return;
                 e.preventDefault();
                if (e.target.closest(".item-wrapper")) return;
 
                 var isOpen = card.classList.contains("is-open");
                 var isOpen = card.classList.contains("is-open");
                 root.querySelectorAll(".gla-item.is-open").forEach(function (c) {
                 root.querySelectorAll(".gla-item.is-open").forEach(function (c) {
                     c.classList.remove("is-open");
                     c.classList.remove("is-open");
                 });
                 });
                 if (!isOpen) card.classList.add("is-open");
                root.querySelectorAll(".gla-item-spoiler-toggle").forEach(function (btn) {
                    btn.setAttribute("aria-expanded", "false");
                });
                 if (!isOpen) {
                    card.classList.add("is-open");
                    toggle.setAttribute("aria-expanded", "true");
                }
             });
             });


Edição das 16h57min de 19 de maio de 2026

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