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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(Uma revisão intermediária pelo mesmo usuário não está sendo mostrada)
Linha 72: Linha 72:
}
}


/* PAINEL */
.gla-conquistas-panel {
.gla-conquistas-panel {
   max-width: 1100px;
   max-width: 1100px;
   margin: 20px auto 0;
   margin: 20px auto 0;
  display: none;
}
}


.gla-conquistas-panel.is-active {
  display: block;
}
/* LISTA */
.gla-list {
.gla-list {
   display: flex;
   display: flex;
Linha 83: Linha 90:
}
}


/* ITEM */
.gla-item {
.gla-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
   padding: 12px 14px;
   padding: 12px 14px;
   border-radius: 10px;
   border-radius: 12px;
   border: 1px solid #e5e7eb;
   border: 1px solid #e5e7eb;
   background: #f8fafc;
   background: #f8fafc;
}
}


/* LADO ESQUERDO */
.gla-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* ICONE */
.gla-item-icon img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  /* REMOVE BORDA DO MEDIAWIKI */
  border: none !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* fallback extra */
.thumbimage {
  border: none !important;
  padding: 0 !important;
  background: none !important;
}
/* TEXTO */
.gla-item-title {
.gla-item-title {
   font-weight: 700;
   font-weight: 700;
Linha 101: Linha 141:
   margin-top: 2px;
   margin-top: 2px;
}
}
.novaborda {
 
   border: none !important;
/* RECOMPENSA */
  padding: 0 !important;
.gla-item-reward {
   margin: 0 !important;
   font-size: 13px;
   background: none !important;
   color: #2563eb;
   font-weight: 600;
}
}
</style>
</style>
Linha 114: Linha 155:
   var panels = document.querySelectorAll(".gla-conquistas-panel");
   var panels = document.querySelectorAll(".gla-conquistas-panel");


   function abrirAba(nomeAba) {
   function abrirAba(nome) {
     tabs.forEach(function(tab) {
     tabs.forEach(function(t) {
       tab.classList.remove("is-active");
       t.classList.remove("is-active");
     });
     });


     panels.forEach(function(panel) {
     panels.forEach(function(p) {
       panel.style.display = "none";
       p.classList.remove("is-active");
     });
     });


     var abaAtiva = document.querySelector('.gla-conquistas-tab[data-tab="' + nomeAba + '"]');
     var tab = document.querySelector('.gla-conquistas-tab[data-tab="' + nome + '"]');
     var painelAtivo = document.querySelector('.gla-conquistas-panel[data-tab-content="' + nomeAba + '"]');
     var panel = document.querySelector('.gla-conquistas-panel[data-tab-content="' + nome + '"]');
 
    if (abaAtiva) {
      abaAtiva.classList.add("is-active");
    }


     if (painelAtivo) {
     if (tab) tab.classList.add("is-active");
      painelAtivo.style.display = "block";
     if (panel) panel.classList.add("is-active");
     }
   }
   }



Edição atual tal como às 21h58min de 29 de abril de 2026

Conquistas

Acompanhe as conquistas disponíveis no Grand Line Adventures.

   Geral
   Personagens
   Missão
   Baú
   Navegação
   PvP
   PvE
   Coliseu
   Poneglyph
   Indicação
   Celular
   Boss Rush

<style> .gla-conquistas-headerbox {

 max-width: 1100px;
 margin: 0 auto 20px;
 padding: 20px;
 border-radius: 16px;
 background: #ffffff;
 border: 1px solid #e5e7eb;

}

.gla-conquistas-header h2 {

 margin: 0;
 font-size: 26px;
 font-weight: 700;
 color: #020617;

}

.gla-conquistas-header p {

 margin: 4px 0 16px;
 color: #64748b;
 font-size: 14px;

}

.gla-conquistas-tabs {

 display: flex;
 flex-wrap: wrap;
 gap: 8px;

}

.gla-conquistas-tab {

 display: inline-block;
 padding: 8px 14px;
 border-radius: 999px;
 border: 1px solid #cbd5e1;
 background: #f8fafc;
 cursor: pointer;
 font-size: 13px;
 font-weight: 600;
 color: #0f172a;

}

.gla-conquistas-tab:hover {

 background: #e2e8f0;

}

.gla-conquistas-tab.is-active {

 background: #0f172a;
 color: #ffffff;
 border-color: #0f172a;

}

/* PAINEL */ .gla-conquistas-panel {

 max-width: 1100px;
 margin: 20px auto 0;
 display: none;

}

.gla-conquistas-panel.is-active {

 display: block;

}

/* LISTA */ .gla-list {

 display: flex;
 flex-direction: column;
 gap: 10px;

}

/* ITEM */ .gla-item {

 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 12px 14px;
 border-radius: 12px;
 border: 1px solid #e5e7eb;
 background: #f8fafc;

}

/* LADO ESQUERDO */ .gla-item-left {

 display: flex;
 align-items: center;
 gap: 12px;

}

/* ICONE */ .gla-item-icon img {

 width: 56px;
 height: 56px;
 object-fit: cover;
 /* REMOVE BORDA DO MEDIAWIKI */
 border: none !important;
 padding: 0 !important;
 background: none !important;
 box-shadow: none !important;

}

/* fallback extra */ .thumbimage {

 border: none !important;
 padding: 0 !important;
 background: none !important;

}

/* TEXTO */ .gla-item-title {

 font-weight: 700;
 font-size: 15px;
 color: #0f172a;

}

.gla-item-desc {

 font-size: 13px;
 color: #64748b;
 margin-top: 2px;

}

/* RECOMPENSA */ .gla-item-reward {

 font-size: 13px;
 color: #2563eb;
 font-weight: 600;

} </style>

<script> document.addEventListener("DOMContentLoaded", function () {

 var tabs = document.querySelectorAll(".gla-conquistas-tab");
 var panels = document.querySelectorAll(".gla-conquistas-panel");
 function abrirAba(nome) {
   tabs.forEach(function(t) {
     t.classList.remove("is-active");
   });
   panels.forEach(function(p) {
     p.classList.remove("is-active");
   });
   var tab = document.querySelector('.gla-conquistas-tab[data-tab="' + nome + '"]');
   var panel = document.querySelector('.gla-conquistas-panel[data-tab-content="' + nome + '"]');
   if (tab) tab.classList.add("is-active");
   if (panel) panel.classList.add("is-active");
 }
 tabs.forEach(function(tab) {
   tab.addEventListener("click", function() {
     abrirAba(tab.getAttribute("data-tab"));
   });
 });
 abrirAba("geral");

}); </script>