Wiki Gla - Contribuições do usuário [pt-br]

Predefinição:BossLayout/styles.css

2026-04-27T19:19:54Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
border-radius: 12px;
padding: 20px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 10px;
}

.home-title-WorldBoss{
text-align: center;
display: block;
font-size: 1.8em;
font-weight: bold;
background: linear-gradient(to bottom, #459cca, #5684c8);
color: white;
border-radius: 8px 8px 0 0;
margin: 0;
position: relative;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {
0% {
opacity: 0;
filter: brightness(2);
transform: scale(0.98); /* Leve redução para dar sensação de recuo */
}
40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */
opacity: 0;
filter: brightness(2);
}
100% {
opacity: 1;
filter: brightness(1);
transform: scale(1);
}
}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {
background: transparent !important;
border: none !important;
/* Adicionamos backwards para ele garantir que comece invisível */
animation: clearAndIn 0.6s ease-in-out forwards !important;
}

/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {
display: none !important;
}
/* Estilo para as abas de Tier (Tabber Interno) */
.tabber__panel .tabber__tabs {
justify-content: flex-start !important; /* Alinha os botões à esquerda */
gap: 8px !important;
margin-bottom: 15px !important;
border-bottom: 2px solid #eee !important;
padding-bottom: 5px !important;
}

.tabber__panel .tabber__tab {
font-size: 12px !important;
padding: 6px 12px !important;
border-radius: 4px 4px 0 0 !important; /* Estilo de pasta */
background: #f8f9fa !important;
border: 1px solid #ddd !important;
border-bottom: none !important;
}

/* Cor especial para quando o Tier estiver selecionado */
.tabber__panel .tabber__tab[aria-selected="true"] {
background: #459cca !important;
color: white !important;
border-color: #459cca !important;
}

Teste-boss-world

2026-04-23T21:18:08Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey; border-radius: 12px;">
<div style="width: 175px; height: 175px; display: flex; align-items: center; justify-content: center; border: 2px solid #333;">[[Arquivo:Mihawk Avatar.png|150px]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; width: 100%; max-width: 800px; margin-bottom:0;">
<div class="home-title-WorldBoss" style="">Informações Importantes</div>
<div style="max-height: 250px; overflow-y: auto; padding: 10px; background: #fff;">
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="padding:5px 0; border-bottom:1px dashed #eee;">• Primeira frase importante sobre o boss.</li>
<li style="padding:5px 0; border-bottom:1px dashed #eee;">• Segunda frase com uma dica de combate.</li>
</ul>
</div>
</div>
<div style="style="flex:1; margin-bottom:0;">
<div class="home-title-WorldBoss" style="">Localização</div>
<div style="width: 300px; height: 200px; display: flex; align-items: center; justify-content: center; border: 2px solid #333; background: white;">[[Arquivo:Mihawklocalização.png|300px]]</div>
</div>
</div>
</div>

<tabber>
Habilidades=
<div class="home-card" style="margin-top:15px;">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>

|-|
Fases=
<div class="boss-grid" style="margin-top:15px;">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>

|-|
Rank e Tiers=
<div class="home-card" style="margin-top:15px; padding:20px;">
Aqui entram as informações de Rank...
</div>

|-|
Personagens=
<div class="boss-grid" style="margin-top:15px;">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 1.5em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto; text-align: center;">
[[Arquivo:Card-jinbe.png|300px]]
[[Arquivo:Card-kid.png|300px]]
</div>
</div>
<div class="boss-card">
<div class="home-title" style="background:#e74c3c; font-size: 1.5em;">Recomendados: DPS</div>
<div style="padding:10px; height:300px; overflow-y:auto; text-align: center;">
[[Arquivo:Card-mihawk.png|300px]]
[[Arquivo:Card-zoro.png|300px]]
</div>
</div>

<div class="boss-card">
<div class="home-title" style="background:#2ecc71; font-size: 1.5em;">Recomendados: Suporte</div>
<div style="padding:10px; height:300px; overflow-y:auto; text-align: center;">
[[Arquivo:Card-chopper.png|300px]]
[[Arquivo:Card-bonney.png|300px]]
</div>
</div>
</div>
</tabber>

</div>

Teste-boss-world

2026-04-23T21:11:46Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey; border-radius: 12px;">
<div style="width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; border: 2px solid #333;">[[Arquivo:Mihawk Avatar.png|200px]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; width: 100%; max-width: 800px; margin-bottom:0;">
<div class="home-title-WorldBoss" style="">Informações Importantes</div>
<div style="max-height: 250px; overflow-y: auto; padding: 10px; background: #fff;">
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="padding:5px 0; border-bottom:1px dashed #eee;">• Primeira frase importante sobre o boss.</li>
<li style="padding:5px 0; border-bottom:1px dashed #eee;">• Segunda frase com uma dica de combate.</li>
</ul>
</div>
</div>
<div style="style="flex:1; margin-bottom:0;">
<div class="home-title-WorldBoss" style="">Localização</div>
<div style="width: 300px; height: 200px; display: flex; align-items: center; justify-content: center; border: 2px solid #333; background: white;">[[Arquivo:Mihawklocalização.png|300px]]</div>
</div>
</div>
</div>

<tabber>
Habilidades=
<div class="home-card" style="margin-top:15px;">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>

|-|
Fases=
<div class="boss-grid" style="margin-top:15px;">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>

|-|
Rank e Tiers=
<div class="home-card" style="margin-top:15px; padding:20px;">
Aqui entram as informações de Rank...
</div>

|-|
Personagens=
<div class="boss-grid" style="margin-top:15px;">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 1.5em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto; text-align: center;">
[[Arquivo:Card-jinbe.png|300px]]
[[Arquivo:Card-kid.png|300px]]
</div>
</div>
<div class="boss-card">
<div class="home-title" style="background:#e74c3c; font-size: 1.5em;">Recomendados: DPS</div>
<div style="padding:10px; height:300px; overflow-y:auto; text-align: center;">
[[Arquivo:Card-mihawk.png|300px]]
[[Arquivo:Card-zoro.png|300px]]
</div>
</div>

<div class="boss-card">
<div class="home-title" style="background:#2ecc71; font-size: 1.5em;">Recomendados: Suporte</div>
<div style="padding:10px; height:300px; overflow-y:auto; text-align: center;">
[[Arquivo:Card-chopper.png|300px]]
[[Arquivo:Card-bonney.png|300px]]
</div>
</div>
</div>
</tabber>

</div>

Predefinição:BossLayout/styles.css

2026-04-23T21:03:57Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
border-radius: 12px;
padding: 20px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 10px;
}

.home-title-WorldBoss{
text-align: center;
display: block;
font-size: 1.8em;
font-weight: bold;
background: linear-gradient(to bottom, #459cca, #5684c8);
color: white;
border-radius: 8px 8px 0 0;
margin: 0;
position: relative;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {

0% {

opacity: 0;

filter: brightness(2);

transform: scale(0.98); /* Leve redução para dar sensação de recuo */

}

40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */

opacity: 0;

filter: brightness(2);

}

100% {

opacity: 1;

filter: brightness(1);

transform: scale(1);

}

}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {

background: transparent !important;

border: none !important;

/* Adicionamos backwards para ele garantir que comece invisível */

animation: clearAndIn 0.6s ease-in-out forwards !important;

}
/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {

display: none !important;

}

Predefinição:BossLayout/styles.css

2026-04-23T21:03:11Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
border-radius: 12px;
padding: 20px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 10px;
}

.home-title-WorldBoss{
text-align: center;
display: block;
font-size: 1.9em;
font-weight: bold;
background: linear-gradient(to bottom, #459cca, #5684c8);
color: white;
border-radius: 8px 8px 0 0;
margin: 0;
position: relative;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {

0% {

opacity: 0;

filter: brightness(2);

transform: scale(0.98); /* Leve redução para dar sensação de recuo */

}

40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */

opacity: 0;

filter: brightness(2);

}

100% {

opacity: 1;

filter: brightness(1);

transform: scale(1);

}

}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {

background: transparent !important;

border: none !important;

/* Adicionamos backwards para ele garantir que comece invisível */

animation: clearAndIn 0.6s ease-in-out forwards !important;

}
/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {

display: none !important;

}

Teste-boss-world

2026-04-23T20:43:35Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey; border-radius: 12px;">
<div style="width: 250px; height: 250px; background: white; display: flex; align-items: center; justify-content: center; border: 2px solid #333;">[[Arquivo:Mihawk-sprite.png]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; width: 100%; max-width: 800px; margin-bottom:0;">
<div class="home-title-WorldBoss" style="">Informações Importantes</div>
<div style="max-height: 250px; overflow-y: auto; padding: 10px; background: #fff;">
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="padding:5px 0; border-bottom:1px dashed #eee;">• Primeira frase importante sobre o boss.</li>
<li style="padding:5px 0; border-bottom:1px dashed #eee;">• Segunda frase com uma dica de combate.</li>
</ul>
</div>
</div>
<div style="style="flex:1; margin-bottom:0;">
<div class="home-title-WorldBoss" style="">Localização</div>
<div style="width: 300px; height: 200px; display: flex; align-items: center; justify-content: center; border: 2px solid #333; background: white;">[[Arquivo:Mihawklocalização.png|300px]]</div>
</div>
</div>
</div>

<tabber>
Habilidades=
<div class="home-card" style="margin-top:15px;">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>

|-|
Fases=
<div class="boss-grid" style="margin-top:15px;">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>

|-|
Rank e Tiers=
<div class="home-card" style="margin-top:15px; padding:20px;">
Aqui entram as informações de Rank...
</div>

|-|
Personagens=
<div class="boss-grid" style="margin-top:15px;">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</tabber>

</div>

Predefinição:BossLayout/styles.css

2026-04-23T20:43:09Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
border-radius: 12px;
padding: 20px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-title-WorldBoss{
text-align: center;
display: block;
font-size: 1.9em;
font-weight: bold;
background: linear-gradient(to bottom, #459cca, #5684c8);
color: white;
border-radius: 8px 8px 0 0;
margin: 0;
position: relative;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {

0% {

opacity: 0;

filter: brightness(2);

transform: scale(0.98); /* Leve redução para dar sensação de recuo */

}

40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */

opacity: 0;

filter: brightness(2);

}

100% {

opacity: 1;

filter: brightness(1);

transform: scale(1);

}

}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {

background: transparent !important;

border: none !important;

/* Adicionamos backwards para ele garantir que comece invisível */

animation: clearAndIn 0.6s ease-in-out forwards !important;

}
/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {

display: none !important;

}

Predefinição:BossLayout/styles.css

2026-04-23T20:42:24Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-title-WorldBoss{
text-align: center;
display: block;
font-size: 1.9em;
font-weight: bold;
background: linear-gradient(to bottom, #459cca, #5684c8);
color: white;
border-radius: 8px 8px 0 0;
margin: 0;
position: relative;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {

0% {

opacity: 0;

filter: brightness(2);

transform: scale(0.98); /* Leve redução para dar sensação de recuo */

}

40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */

opacity: 0;

filter: brightness(2);

}

100% {

opacity: 1;

filter: brightness(1);

transform: scale(1);

}

}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {

background: transparent !important;

border: none !important;

/* Adicionamos backwards para ele garantir que comece invisível */

animation: clearAndIn 0.6s ease-in-out forwards !important;

}
/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {

display: none !important;

}

Predefinição:BossLayout/styles.css

2026-04-23T20:40:12Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-title-WorldBoss{
text-align: center;
display: block;
font-size: 1.9em;
font-weight: bold;
background: linear-gradient(to bottom, #459cca, #5684c8);
color: white;
border-radius: 8px 8px 0 0;
margin: 0;
position: relative;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {

0% {

opacity: 0;

filter: brightness(2);

transform: scale(0.98); /* Leve redução para dar sensação de recuo */

}

40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */

opacity: 0;

filter: brightness(2);

}

100% {

opacity: 1;

filter: brightness(1);

transform: scale(1);

}

}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {

background: transparent !important;

border: none !important;

/* Adicionamos backwards para ele garantir que comece invisível */

animation: clearAndIn 0.6s ease-in-out forwards !important;

}
/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {

display: none !important;

}

Predefinição:BossLayout/styles.css

2026-04-23T20:30:23Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-title-WorldBoss{
text-align: center;
display: block;
font-size: 2em;
font-weight: bold;
background: linear-gradient(to bottom, #459cca, #5684c8);
color: white;
border-radius: 8px 8px 0 0;
margin: 0;
position: relative;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {

0% {

opacity: 0;

filter: brightness(2);

transform: scale(0.98); /* Leve redução para dar sensação de recuo */

}

40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */

opacity: 0;

filter: brightness(2);

}

100% {

opacity: 1;

filter: brightness(1);

transform: scale(1);

}

}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {

background: transparent !important;

border: none !important;

/* Adicionamos backwards para ele garantir que comece invisível */

animation: clearAndIn 0.6s ease-in-out forwards !important;

}
/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {

display: none !important;

}

Teste-boss-world

2026-04-23T20:30:04Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey; border-radius: 12px;">
<div style="width: 250px; height: 250px; background: white; display: flex; align-items: center; justify-content: center; border: 2px solid #333;">[[Arquivo:Mihawk-sprite.png]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; width: 100%; max-width: 800px; margin-bottom:0;">
<div class="home-title-WorldBoss" style="font-size: 1.1em;">Informações Importantes</div>
<div style="max-height: 250px; overflow-y: auto; padding: 10px; background: #fff;">
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="padding:5px 0; border-bottom:1px dashed #eee;">• Primeira frase importante sobre o boss.</li>
<li style="padding:5px 0; border-bottom:1px dashed #eee;">• Segunda frase com uma dica de combate.</li>
</ul>
</div>
</div>
<div style="style="flex:1; margin-bottom:0;">
<div class="home-title-WorldBoss" style="">Localização</div>
<div style="width: 300px; height: 200px; display: flex; align-items: center; justify-content: center; border: 2px solid #333; background: white;">[[Arquivo:Mihawklocalização.png|300px]]</div>
</div>
</div>
</div>

<tabber>
Habilidades=
<div class="home-card" style="margin-top:15px;">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>

|-|
Fases=
<div class="boss-grid" style="margin-top:15px;">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>

|-|
Rank e Tiers=
<div class="home-card" style="margin-top:15px; padding:20px;">
Aqui entram as informações de Rank...
</div>

|-|
Personagens=
<div class="boss-grid" style="margin-top:15px;">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</tabber>

</div>

Predefinição:BossLayout/styles.css

2026-04-23T20:14:55Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-title-WorldBoss{
text-align: center;
display: block;
font-size: 10em;
font-weight: bold;
background: linear-gradient(to bottom, #459cca, #5684c8);
color: white;
border-radius: 8px 8px 0 0;
margin: 0;
position: relative;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {

0% {

opacity: 0;

filter: brightness(2);

transform: scale(0.98); /* Leve redução para dar sensação de recuo */

}

40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */

opacity: 0;

filter: brightness(2);

}

100% {

opacity: 1;

filter: brightness(1);

transform: scale(1);

}

}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {

background: transparent !important;

border: none !important;

/* Adicionamos backwards para ele garantir que comece invisível */

animation: clearAndIn 0.6s ease-in-out forwards !important;

}
/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {

display: none !important;

}

Teste-boss-world

2026-04-23T20:13:26Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey; border-radius: 12px;">
<div style="width: 250px; height: 250px; background: white; display: flex; align-items: center; justify-content: center; border: 2px solid #333;">[[Arquivo:Mihawk-sprite.png]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; width: 100%; max-width: 800px; margin-bottom:0;">
<div class="home-title-WorldBoss" style="font-size: 1.1em;">Informações Importantes</div>
<div style="max-height: 250px; overflow-y: auto; padding: 10px; background: #fff;">
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="padding:5px 0; border-bottom:1px dashed #eee;">• Primeira frase importante sobre o boss.</li>
<li style="padding:5px 0; border-bottom:1px dashed #eee;">• Segunda frase com uma dica de combate.</li>
</ul>
</div>
</div>
<div style="style="flex:1; margin-bottom:0;">
<div class="home-title-WorldBoss" style="font-size: 1.1em;">Localização</div>
<div style="width: 300px; height: 200px; display: flex; align-items: center; justify-content: center; border: 2px solid #333; background: white;">[[Arquivo:Mihawklocalização.png|300px]]</div>
</div>
</div>
</div>

<tabber>
Habilidades=
<div class="home-card" style="margin-top:15px;">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>

|-|
Fases=
<div class="boss-grid" style="margin-top:15px;">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>

|-|
Rank e Tiers=
<div class="home-card" style="margin-top:15px; padding:20px;">
Aqui entram as informações de Rank...
</div>

|-|
Personagens=
<div class="boss-grid" style="margin-top:15px;">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</tabber>

</div>

Predefinição:BossLayout/styles.css

2026-04-23T20:13:11Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-title-WorldBoss{
text-align: center;
display: block;
font-size: 5em;
font-weight: bold;
background: linear-gradient(to bottom, #459cca, #5684c8);
color: white;
border-radius: 8px 8px 0 0;
margin: 0;
position: relative;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {

0% {

opacity: 0;

filter: brightness(2);

transform: scale(0.98); /* Leve redução para dar sensação de recuo */

}

40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */

opacity: 0;

filter: brightness(2);

}

100% {

opacity: 1;

filter: brightness(1);

transform: scale(1);

}

}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {

background: transparent !important;

border: none !important;

/* Adicionamos backwards para ele garantir que comece invisível */

animation: clearAndIn 0.6s ease-in-out forwards !important;

}
/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {

display: none !important;

}

Predefinição:BossLayout/styles.css

2026-04-23T20:12:31Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-title-WorldBoss{
text-align: center;
display: block;
font-size: 3em;
font-weight: bold;
background: linear-gradient(to bottom, #459cca, #5684c8);
color: white;
border-radius: 8px 8px 0 0;
margin: 0;
position: relative;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {

0% {

opacity: 0;

filter: brightness(2);

transform: scale(0.98); /* Leve redução para dar sensação de recuo */

}

40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */

opacity: 0;

filter: brightness(2);

}

100% {

opacity: 1;

filter: brightness(1);

transform: scale(1);

}

}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {

background: transparent !important;

border: none !important;

/* Adicionamos backwards para ele garantir que comece invisível */

animation: clearAndIn 0.6s ease-in-out forwards !important;

}
/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {

display: none !important;

}

Predefinição:BossLayout/styles.css

2026-04-23T20:11:43Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-title-WorldBoss{
text-align: center;
display: block;
font-size: 3em;
font-weight: bold;
color: white;
border-radius: 8px 8px 0 0;
margin: 0;
position: relative;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {

0% {

opacity: 0;

filter: brightness(2);

transform: scale(0.98); /* Leve redução para dar sensação de recuo */

}

40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */

opacity: 0;

filter: brightness(2);

}

100% {

opacity: 1;

filter: brightness(1);

transform: scale(1);

}

}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {

background: transparent !important;

border: none !important;

/* Adicionamos backwards para ele garantir que comece invisível */

animation: clearAndIn 0.6s ease-in-out forwards !important;

}
/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {

display: none !important;

}

Predefinição:BossLayout/styles.css

2026-04-23T20:10:07Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-title-WorldBoss{
text-align: center;
display: block;
font-size: 1.75em;
font-weight: bold;
color: white;
border-radius: 8px 8px 0 0;
margin: 0;
position: relative;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {

0% {

opacity: 0;

filter: brightness(2);

transform: scale(0.98); /* Leve redução para dar sensação de recuo */

}

40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */

opacity: 0;

filter: brightness(2);

}

100% {

opacity: 1;

filter: brightness(1);

transform: scale(1);

}

}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {

background: transparent !important;

border: none !important;

/* Adicionamos backwards para ele garantir que comece invisível */

animation: clearAndIn 0.6s ease-in-out forwards !important;

}
/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {

display: none !important;

}

Predefinição:BossLayout/styles.css

2026-04-23T20:03:46Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-title-WorldBoss{
text-align: center;
display: block;
font-size: 1.75em;
font-weight: bold;
background: linear-gradient(to bottom, #459cca, #5684c8);
color: white;
border-radius: 8px 8px 0 0;
margin: 0;
position: relative;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {

0% {

opacity: 0;

filter: brightness(2);

transform: scale(0.98); /* Leve redução para dar sensação de recuo */

}

40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */

opacity: 0;

filter: brightness(2);

}

100% {

opacity: 1;

filter: brightness(1);

transform: scale(1);

}

}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {

background: transparent !important;

border: none !important;

/* Adicionamos backwards para ele garantir que comece invisível */

animation: clearAndIn 0.6s ease-in-out forwards !important;

}
/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {

display: none !important;

}

Predefinição:BossLayout/styles.css

2026-04-21T21:17:12Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {

0% {

opacity: 0;

filter: brightness(2);

transform: scale(0.98); /* Leve redução para dar sensação de recuo */

}

40% { /* Aumentamos de 20% para 40% para segurar o "vazio" */

opacity: 0;

filter: brightness(2);

}

100% {

opacity: 1;

filter: brightness(1);

transform: scale(1);

}

}

/* Limpa o fundo e aplica a animação com prioridade */
.tabber__panel {

background: transparent !important;

border: none !important;

/* Adicionamos backwards para ele garantir que comece invisível */

animation: clearAndIn 0.6s ease-in-out forwards !important;

}
/* Garante que os painéis escondidos não interfiram */
.tabber__panel[hidden] {

display: none !important;

}

Teste-boss-world

2026-04-21T21:13:12Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey; border-radius: 12px;">
<div style="width: 250px; height: 250px; background: white; display: flex; align-items: center; justify-content: center; border: 2px solid #333;">[[Arquivo:Mihawk-sprite.png]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; width: 100%; max-width: 800px; margin-bottom:0;">
<div class="home-title" style="font-size: 1.1em;">Informações Importantes</div>
<div style="max-height: 250px; overflow-y: auto; padding: 10px; background: #fff;">
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="padding:5px 0; border-bottom:1px dashed #eee;">• Primeira frase importante sobre o boss.</li>
<li style="padding:5px 0; border-bottom:1px dashed #eee;">• Segunda frase com uma dica de combate.</li>
</ul>
</div>
</div>
<div style="width: 300px; height: 200px; padding: 5px; display: flex; align-items: center; justify-content: center; border: 2px solid #333; background: white;">[[Arquivo:Mihawklocalização.png|300px]]</div>
</div>
</div>

<tabber>
Habilidades=
<div class="home-card" style="margin-top:15px;">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>

|-|
Fases=
<div class="boss-grid" style="margin-top:15px;">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>

|-|
Rank e Tiers=
<div class="home-card" style="margin-top:15px; padding:20px;">
Aqui entram as informações de Rank...
</div>

|-|
Personagens=
<div class="boss-grid" style="margin-top:15px;">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</tabber>

</div>

Predefinição:BossLayout/styles.css

2026-04-21T21:12:50Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes clearAndIn {
0% {
opacity: 0;
filter: brightness(2); /* Dá um brilho no começo */
}
20% {
opacity: 0; /* Mantém invisível por um instante (o "vazio") */
}
100% {
opacity: 1;
filter: brightness(1);
}
}

/* Limpa o fundo do conteúdo do tabber */
.tabber__panel {
animation: clearAndIn 0.6s ease-in-out;
}

Predefinição:BossLayout/styles.css

2026-04-21T21:09:44Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Limpa o fundo do conteúdo do tabber */
.tabber__panel {
background: transparent !important;
border: none !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes crossFade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.tabber__panel {
/* O segredo está no tempo: 0.5s cria um efeito de 'calma' */
animation: crossFade 0.5s ease-in-out;
}

Predefinição:BossLayout/styles.css

2026-04-21T21:08:26Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Limpa o fundo do conteúdo do tabber */
.tabber__panel {
background: transparent !important;
border: none !important;
}

@keyframes crossFade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.tabber__panel {
/* O segredo está no tempo: 0.5s cria um efeito de 'calma' */
animation: crossFade 0.5s ease-in-out;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

Predefinição:BossLayout/styles.css

2026-04-21T20:50:58Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {
background: #f4f4f4;
padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Remove a borda padrão do tabber e centraliza os botões */
.tabber__tabs {
border-bottom: none !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 10px !important;
margin: 20px 0 !important;
}

/* Transforma os links do tabber em botões redondos (estilo Home) */
.tabber__tab {
background: #fff !important;
border: 1px solid #bbb !important;
border-radius: 8px !important;
padding: 10px 20px !important;
color: #0645AD !important;
font-weight: bold !important;
text-transform: uppercase !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Efeito de Hover (Igual aos cards da Home) */
.tabber__tab:hover {
transform: translateY(-2px) !important;
border-color: #007bff !important;
text-decoration: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilo do Botão Ativo (Selecionado) */
.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: #fff !important;
border-color: #007bff !important;
}

/* Limpa o fundo do conteúdo do tabber */
.tabber__panel {
background: transparent !important;
border: none !important;
}

/* Garante que os cards dentro do tabber usem o Grid */
.boss-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}

.boss-card {
background: #fff;
border: 1px solid #bbb;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s;
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

Widget:BossActions

2026-04-21T20:35:34Z

Edynhooo:

<noinclude>
Widget para controle de abas.
</noinclude>
<includeonly>
<script>
/*<![CDATA[*/
window.showBossSection = function(sectionId, btnElement) {
// 1. Esconde tudo o que for seção
var sections = document.getElementsByClassName('boss-section');
for (var i = 0; i < sections.length; i++) {
sections[i].style.setProperty('display', 'none', 'important');
sections[i].classList.remove('active');
}

// 2. Remove active dos botões
var buttons = btnElement.parentElement.getElementsByClassName('boss-nav-btn');
for (var j = 0; j < buttons.length; j++) {
buttons[j].classList.remove('active');
}

// 3. Mostra a seção clicada
var target = document.getElementById(sectionId);
if (target) {
target.style.setProperty('display', 'block', 'important');
target.classList.add('active');
}
btnElement.classList.add('active');
};
/*]]>*/
</script>
</includeonly>

<noinclude>
Widget genérico para estruturar páginas de Bosses.
Uso: {{#widget:BossActions}}
</noinclude>
<includeonly>
<style>
/* Reaproveitando o padrão da Home do GLA */
.boss-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 10px;
}

/* Estilo de Card idêntico ao da Home */
.boss-card-item {
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #bbb;
border-radius: 12px;
background: #fff;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.boss-card-item:hover {
transform: translateY(-3px);
border-color: #007bff;
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.boss-card-header {
height: 4px;
width: 100%;
}

.boss-card-title {
font-weight: bold;
padding: 10px;
text-align: center;
background: #f8f9fa;
color: #0645AD;
border-bottom: 1px solid #eee;
text-transform: uppercase;
}

/* Ajuste para o Tabber parecer botões */
.tabber__tabs {
display: flex !important;
justify-content: center !important;
gap: 10px !important;
border-bottom: none !important;
margin-bottom: 20px !important;
}

.tabber__tab {
background: #fff !important;
border: 1px solid #007bff !important;
border-radius: 8px !important;
padding: 8px 20px !important;
color: #007bff !important;
font-weight: bold !important;
transition: 0.3s !important;
}

.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: white !important;
}

/* Container de Scroll */
.boss-scroll-box {
max-height: 300px;
overflow-y: auto;
padding: 10px;
}
</style>
</includeonly>

Usuário:Edynhooo

2026-04-21T20:34:42Z

Edynhooo:

{{#widget:BossActions}}

<div class="boss-main-wrapper">
{{#widget:opendiv|class=d-flex flex-wrap gap-3}}
<div class="boss-card-item" style="width: 300px;">
<div class="boss-card-title">Boss</div>
<div style="padding: 10px; text-align: center;">[[Arquivo:Sprite-Boss.png|200px]]</div>
</div>

<div class="boss-card-item" style="flex: 1;">
<div class="boss-card-title">Informações</div>
<div class="boss-scroll-box">
* Dica 1: Use tal elemento.
* Dica 2: Cuidado com a fase 2.
</div>
</div>
{{#widget:closediv}}

<tabber>
Habilidades=
{{BossSkills|module=Mihawk}} |-|
Fases=
<div class="boss-grid-container">
<div class="boss-card-item">
<div class="boss-card-header" style="background: green;"></div>
<div class="boss-card-title">Fase 1</div>
<div style="padding: 15px;">Explicação da fase aqui...</div>
</div>

<div class="boss-card-item">
<div class="boss-card-header" style="background: orange;"></div>
<div class="boss-card-title">Fase 2</div>
<div style="padding: 15px;">Explicação da fase aqui...</div>
</div>
</div>

|-|
Personagens=
<div class="boss-grid-container">
<div class="boss-card-item">
<div class="boss-card-title">Tank Recomendado</div>
<div style="padding: 5px;">[[Arquivo:Card-Personagem.png|thumb|center|200px]]</div>
</div>
</div>
</tabber>
</div>

Widget:BossActions

2026-04-21T20:34:05Z

Edynhooo:

<noinclude>
Widget genérico para estruturar páginas de Bosses.
Uso: {{#widget:BossActions}}
</noinclude>
<includeonly>
<style>
/* Reaproveitando o padrão da Home do GLA */
.boss-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 10px;
}

/* Estilo de Card idêntico ao da Home */
.boss-card-item {
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #bbb;
border-radius: 12px;
background: #fff;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.boss-card-item:hover {
transform: translateY(-3px);
border-color: #007bff;
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.boss-card-header {
height: 4px;
width: 100%;
}

.boss-card-title {
font-weight: bold;
padding: 10px;
text-align: center;
background: #f8f9fa;
color: #0645AD;
border-bottom: 1px solid #eee;
text-transform: uppercase;
}

/* Ajuste para o Tabber parecer botões */
.tabber__tabs {
display: flex !important;
justify-content: center !important;
gap: 10px !important;
border-bottom: none !important;
margin-bottom: 20px !important;
}

.tabber__tab {
background: #fff !important;
border: 1px solid #007bff !important;
border-radius: 8px !important;
padding: 8px 20px !important;
color: #007bff !important;
font-weight: bold !important;
transition: 0.3s !important;
}

.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: white !important;
}

/* Container de Scroll */
.boss-scroll-box {
max-height: 300px;
overflow-y: auto;
padding: 10px;
}
</style>
</includeonly>

Widget:BossActions

2026-04-21T20:32:41Z

Edynhooo:

Widget:BossActions

2026-04-21T20:32:11Z

Edynhooo:

<noinclude>
Widget para controle de abas.
</noinclude>
<includeonly>
<script>
/*<![CDATA[*/
window.showBossSection = function(sectionId, btnElement) {
// 1. Esconde tudo o que for seção
var sections = document.getElementsByClassName('boss-section');
for (var i = 0; i < sections.length; i++) {
sections[i].style.setProperty('display', 'none', 'important');
sections[i].classList.remove('active');
}

// 2. Remove active dos botões
var buttons = btnElement.parentElement.getElementsByClassName('boss-nav-btn');
for (var j = 0; j < buttons.length; j++) {
buttons[j].classList.remove('active');
}

// 3. Mostra a seção clicada
var target = document.getElementById(sectionId);
if (target) {
target.style.setProperty('display', 'block', 'important');
target.classList.add('active');
}
btnElement.classList.add('active');
};
/*]]>*/
</script>
</includeonly>

<noinclude>
Widget genérico para estruturar páginas de Bosses.
Uso: {{#widget:BossLayout}}
</noinclude>
<includeonly>
<style>
/* Reaproveitando o padrão da Home do GLA */
.boss-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 10px;
}

/* Estilo de Card idêntico ao da Home */
.boss-card-item {
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #bbb;
border-radius: 12px;
background: #fff;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.boss-card-item:hover {
transform: translateY(-3px);
border-color: #007bff;
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.boss-card-header {
height: 4px;
width: 100%;
}

.boss-card-title {
font-weight: bold;
padding: 10px;
text-align: center;
background: #f8f9fa;
color: #0645AD;
border-bottom: 1px solid #eee;
text-transform: uppercase;
}

/* Ajuste para o Tabber parecer botões */
.tabber__tabs {
display: flex !important;
justify-content: center !important;
gap: 10px !important;
border-bottom: none !important;
margin-bottom: 20px !important;
}

.tabber__tab {
background: #fff !important;
border: 1px solid #007bff !important;
border-radius: 8px !important;
padding: 8px 20px !important;
color: #007bff !important;
font-weight: bold !important;
transition: 0.3s !important;
}

.tabber__tab[aria-selected="true"] {
background: #007bff !important;
color: white !important;
}

/* Container de Scroll */
.boss-scroll-box {
max-height: 300px;
overflow-y: auto;
padding: 10px;
}
</style>
</includeonly>

Widget:BossActions

2026-04-20T20:58:01Z

Edynhooo:

Widget:BossActions

2026-04-20T20:53:50Z

Edynhooo:

<noinclude>
Widget para controle de abas nas páginas de World Boss.
</noinclude>
<includeonly>
<script type="text/javascript">
(function() {
// Definimos a função no escopo global (window) para que o 'onclick' a encontre
window.showBossSection = function(sectionId, btnElement) {
// 1. Localiza todas as seções de boss na página
var sections = document.querySelectorAll('.boss-section');
for (var i = 0; i < sections.length; i++) {
sections[i].classList.remove('active');
sections[i].style.display = 'none';
}

// 2. Remove a classe 'active' dos botões irmãos
var buttons = btnElement.parentElement.querySelectorAll('.boss-nav-btn');
for (var j = 0; j < buttons.length; j++) {
buttons[j].classList.remove('active');
}

// 3. Ativa a seção alvo
var target = document.getElementById(sectionId);
if (target) {
target.classList.add('active');
target.style.display = 'block';
}

// 4. Ativa o botão clicado
btnElement.classList.add('active');
};
})();
</script>
</includeonly>

Widget:BossActions

2026-04-20T20:44:41Z

Edynhooo:

<noinclude>
Widget para controle de abas nas páginas de World Boss.
Uso: {{#widget:BossActions}}
</noinclude>
<script>
function showBossSection(sectionId, btnElement) {
// Esconde todas as seções
const sections = document.querySelectorAll('.boss-section');
sections.forEach(sec => {
sec.classList.remove('active');
sec.style.display = 'none';
});

// Remove classe active de todos os botões no mesmo menu
const buttons = btnElement.parentElement.querySelectorAll('.boss-nav-btn');
buttons.forEach(btn => {
btn.classList.remove('active');
});

// Ativa a seção e o botão corretos
const target = document.getElementById(sectionId);
if (target) {
target.classList.add('active');
target.style.display = 'block';
}
btnElement.classList.add('active');
}
</script>

Teste-boss-world

2026-04-20T20:41:53Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
{{#widget:BossActions}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey;">
<div style="width: 250px; height: 250px; background: white; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">[[Arquivo:Mihawk-sprite.png]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; width: 100%; max-width: 800px; margin-bottom:0;">
<div class="home-title" style="font-size: 1.1em;">Informações Importantes</div>
<div style="max-height: 250px; overflow-y: auto; padding: 10px; background: #fff;">
<ul style="list-style: none; padding: 0; margin: 0;">
<li>Primeira frase importante sobre o boss.</li>
<li>Segunda frase com uma dica de combate.</li>
<li>Terceira frase sobre as recompensas.</li>
</ul>
</div>
</div>
<div style="font-size: 1.1em;"></div>
<div style="width: 300px; height: 200px; padding: 5px; display: flex; align-items: center; justify-content: center; border: 2px solid #333;">[[Arquivo:Mihawklocalização.png|centro]]</div>
</div>
</div>

<div class="boss-navigation">
<div class="boss-nav-btn active" data-target="hab">Habilidades</div>
<div class="boss-nav-btn" data-target="fas">Fases</div>
<div class="boss-nav-btn" data-target="rec">Rank e Tiers</div>
<div class="boss-nav-btn" data-target="per">Personagens Recomendados</div>
</div>

<div id="hab" class="boss-section active">
<div class="home-card">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>
</div>

<div id="fas" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>
</div>

<div id="per" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</div>

</div>

Widget:BossActions

2026-04-20T20:41:35Z

Edynhooo:

Widget:BossActions

2026-04-20T20:37:31Z

Edynhooo:

Widget:BossActions

2026-04-20T20:37:05Z

Edynhooo: Criou página com '<script> /* Função para trocar de aba (seção) sectionId: O ID da div que deve aparecer buttonElement: O próprio botão clicado para mudar a classe 'active' */ functio...'

Teste-boss-world

2026-04-20T20:33:19Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey;">
<div style="width: 250px; height: 250px; background: white; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">[[Arquivo:Mihawk-sprite.png]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; width: 100%; max-width: 800px; margin-bottom:0;">
<div class="home-title" style="font-size: 1.1em;">Informações Importantes</div>
<div style="max-height: 250px; overflow-y: auto; padding: 10px; background: #fff;">
<ul style="list-style: none; padding: 0; margin: 0;">
<li>Primeira frase importante sobre o boss.</li>
<li>Segunda frase com uma dica de combate.</li>
<li>Terceira frase sobre as recompensas.</li>
</ul>
</div>
</div>
<div style="font-size: 1.1em;"></div>
<div style="width: 300px; height: 200px; padding: 5px; display: flex; align-items: center; justify-content: center; border: 2px solid #333;">[[Arquivo:Mihawklocalização.png|centro]]</div>
</div>
</div>

<div class="boss-navigation">
<div class="boss-nav-btn active" data-target="hab">Habilidades</div>
<div class="boss-nav-btn" data-target="fas">Fases</div>
<div class="boss-nav-btn" data-target="rec">Rank e Tiers</div>
<div class="boss-nav-btn" data-target="per">Personagens Recomendados</div>
</div>

<div id="hab" class="boss-section active">
<div class="home-card">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>
</div>

<div id="fas" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>
</div>

<div id="per" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</div>

</div>

<script>
document.querySelectorAll('.boss-nav-btn').forEach(button => {
button.addEventListener('click', () => {
const target = button.getAttribute('data-target');

// Remove 'active' de todos
document.querySelectorAll('.boss-nav-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.boss-section').forEach(sec => sec.classList.remove('active'));

// Adiciona 'active' no alvo
button.classList.add('active');
document.getElementById(target).classList.add('active');
});
});
</script>

Teste-boss-world

2026-04-20T20:26:03Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey;">
<div style="width: 250px; height: 250px; background: white; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">[[Arquivo:Mihawk-sprite.png]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; width: 100%; max-width: 800px; margin-bottom:0;">
<div class="home-title" style="font-size: 1.1em;">Informações Importantes</div>
<div style="max-height: 250px; overflow-y: auto; padding: 10px; background: #fff;">
<ul style="list-style: none; padding: 0; margin: 0;">
<li>Primeira frase importante sobre o boss.</li>
<li>Segunda frase com uma dica de combate.</li>
<li>Terceira frase sobre as recompensas.</li>
</ul>
</div>
</div>
<div style="width: 250px; height: 250px; padding: 5px; display: flex; background: blue; align-items: center; justify-content: center; border: 2px solid #333;">
[[Arquivo:Mihawklocalização.png|centro]]
</div>
</div>
</div>

<div class="boss-navigation">
<div class="boss-nav-btn active" data-target="hab">Habilidades</div>
<div class="boss-nav-btn" data-target="fas">Fases</div>
<div class="boss-nav-btn" data-target="rec">Rank e Tiers</div>
<div class="boss-nav-btn" data-target="per">Personagens Recomendados</div>
</div>

<div id="hab" class="boss-section active">
<div class="home-card">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>
</div>

<div id="fas" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>
</div>

<div id="per" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</div>

</div>

<script>
document.querySelectorAll('.boss-nav-btn').forEach(button => {
button.addEventListener('click', () => {
const target = button.getAttribute('data-target');

// Remove 'active' de todos
document.querySelectorAll('.boss-nav-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.boss-section').forEach(sec => sec.classList.remove('active'));

// Adiciona 'active' no alvo
button.classList.add('active');
document.getElementById(target).classList.add('active');
});
});
</script>

Teste-boss-world

2026-04-20T20:24:11Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey;">
<div style="width: 250px; height: 250px; background: white; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">[[Arquivo:Mihawk-sprite.png]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; width: 100%; max-width: 800px; margin-bottom:0;">
<div class="home-title" style="font-size: 1.1em;">Informações Importantes</div>
<div style="max-height: 250px; overflow-y: auto; padding: 10px; background: #fff;">
<ul style="list-style: none; padding: 0; margin: 0;">
<li>Primeira frase importante sobre o boss.</li>
<li>Segunda frase com uma dica de combate.</li>
<li>Terceira frase sobre as recompensas.</li>
</ul>
</div>
</div>
<div style="width: 250px; height: 250px; padding: 5px; display: flex; background: blue; align-items: center; justify-content: center; color: white; border: 2px solid #333;">
[[Arquivo:Mihawklocalização.png]]
</div>
</div>
</div>

<div class="boss-navigation">
<div class="boss-nav-btn active" data-target="hab">Habilidades</div>
<div class="boss-nav-btn" data-target="fas">Fases</div>
<div class="boss-nav-btn" data-target="rec">Rank e Tiers</div>
<div class="boss-nav-btn" data-target="per">Personagens Recomendados</div>
</div>

<div id="hab" class="boss-section active">
<div class="home-card">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>
</div>

<div id="fas" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>
</div>

<div id="per" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</div>

</div>

<script>
document.querySelectorAll('.boss-nav-btn').forEach(button => {
button.addEventListener('click', () => {
const target = button.getAttribute('data-target');

// Remove 'active' de todos
document.querySelectorAll('.boss-nav-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.boss-section').forEach(sec => sec.classList.remove('active'));

// Adiciona 'active' no alvo
button.classList.add('active');
document.getElementById(target).classList.add('active');
});
});
</script>

Teste-boss-world

2026-04-20T20:21:39Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey;">
<div style="width: 250px; height: 250px; background: white; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">[[Arquivo:Mihawk-sprite.png]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; width: 100%; max-width: 800px; margin-bottom:0;">
<div class="home-title" style="font-size: 1.1em;">Informações Importantes</div>
<div style="max-height: 250px; overflow-y: auto; padding: 10px; background: #fff;">
<ul style="list-style: none; padding: 0; margin: 0;">
<li>Primeira frase importante sobre o boss.</li>
<li>Segunda frase com uma dica de combate.</li>
<li>Terceira frase sobre as recompensas.</li>
</ul>
</div>
</div>
<div style="width: 250px; height: 250px; padding: 5px; background: blue; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">
[[Arquivo:KuraiganaBackground.png]]
</div>
</div>
</div>

<div class="boss-navigation">
<div class="boss-nav-btn active" data-target="hab">Habilidades</div>
<div class="boss-nav-btn" data-target="fas">Fases</div>
<div class="boss-nav-btn" data-target="rec">Rank e Tiers</div>
<div class="boss-nav-btn" data-target="per">Personagens Recomendados</div>
</div>

<div id="hab" class="boss-section active">
<div class="home-card">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>
</div>

<div id="fas" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>
</div>

<div id="per" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</div>

</div>

<script>
document.querySelectorAll('.boss-nav-btn').forEach(button => {
button.addEventListener('click', () => {
const target = button.getAttribute('data-target');

// Remove 'active' de todos
document.querySelectorAll('.boss-nav-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.boss-section').forEach(sec => sec.classList.remove('active'));

// Adiciona 'active' no alvo
button.classList.add('active');
document.getElementById(target).classList.add('active');
});
});
</script>

Predefinição:BossLayout/styles.css

2026-04-20T20:21:00Z

Edynhooo:

Predefinição:BossLayout/styles.css

2026-04-20T20:19:35Z

Edynhooo:

/* Container Principal */
.boss-main-wrapper {

padding: 20px;
border-radius: 12px;
border: 1px solid #ddd;
font-family: sans-serif;
background-color: grey;
}

.home-card-WorldBoss {
overflow: hidden;
margin-bottom: 20px;
}

.home-card-WorldBoss-list{
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
background: #fff;
}

/* Navegação por Botões ALINHADA À ESQUERDA */
.boss-navigation {
display: flex;
gap: 12px;
justify-content: flex-start; /* Botões para a esquerda */
margin: 20px 0;
flex-wrap: wrap;

}

/* Estilo dos Botões */
.boss-nav-btn {
padding: 10px 22px;
background: #fff;
border: 2px solid #459cca;
color: #459cca;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 15px;
}

.boss-nav-btn:hover {
background: #eef7ff;
transform: translateY(-2px);
}

.boss-nav-btn.active {
background: linear-gradient(to bottom, #459cca, #5684c8);
color: #fff;
border-color: #3b86ae;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Grid de Fases e Cards */
.boss-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.boss-card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Controle de Exibição */
.boss-section {
display: none;
}

.boss-section.active {
display: block;
animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

Teste-boss-world

2026-04-20T19:56:06Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey;">
<div style="width: 250px; height: 250px; background: #000; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">[[Arquivo:Mihawk-sprite.png]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; min-width: 50%; margin-bottom:0;">
<div class="home-title" style="font-size: 1.1em;">Informações Importantes</div>
<div style="padding:15px;">
Recomendado grupo de 6 jogadores.
O uso de controle de grupo (CC) é obrigatório.
</div>
</div>
<div style="width: 250px; height: 250px; padding: 10px; background: blue; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">

</div>
</div>
</div>

<div class="boss-navigation">
<div class="boss-nav-btn active" data-target="hab">Habilidades</div>
<div class="boss-nav-btn" data-target="fas">Fases</div>
<div class="boss-nav-btn" data-target="rec">Rank e Tiers</div>
<div class="boss-nav-btn" data-target="per">Personagens Recomendados</div>
</div>

<div id="hab" class="boss-section active">
<div class="home-card">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>
</div>

<div id="fas" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>
</div>

<div id="per" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</div>

</div>

<script>
document.querySelectorAll('.boss-nav-btn').forEach(button => {
button.addEventListener('click', () => {
const target = button.getAttribute('data-target');

// Remove 'active' de todos
document.querySelectorAll('.boss-nav-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.boss-section').forEach(sec => sec.classList.remove('active'));

// Adiciona 'active' no alvo
button.classList.add('active');
document.getElementById(target).classList.add('active');
});
});
</script>

Teste-boss-world

2026-04-20T19:46:23Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss" style="background: [[Arquivo:KuraiganaBackground.png]];">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey;">
<div style="width: 250px; height: 250px; background: #000; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">[[Arquivo:Mihawk_Boss.png|250px]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; min-width: 50%; margin-bottom:0;">
<div class="home-title" style="font-size: 1.1em;">Informações Importantes</div>
<div style="padding:15px;">
Recomendado grupo de 6 jogadores.
O uso de controle de grupo (CC) é obrigatório.
</div>
</div>
<div style="width: 250px; height: 250px; padding: 10px; background: blue;">
</div>
</div>
</div>

<div class="boss-navigation">
<div class="boss-nav-btn active" data-target="hab">Habilidades</div>
<div class="boss-nav-btn" data-target="fas">Fases</div>
<div class="boss-nav-btn" data-target="rec">Rank e Tiers</div>
<div class="boss-nav-btn" data-target="per">Personagens Recomendados</div>
</div>

<div id="hab" class="boss-section active">
<div class="home-card">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>
</div>

<div id="fas" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>
</div>

<div id="per" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</div>

</div>

<script>
document.querySelectorAll('.boss-nav-btn').forEach(button => {
button.addEventListener('click', () => {
const target = button.getAttribute('data-target');

// Remove 'active' de todos
document.querySelectorAll('.boss-nav-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.boss-section').forEach(sec => sec.classList.remove('active'));

// Adiciona 'active' no alvo
button.classList.add('active');
document.getElementById(target).classList.add('active');
});
});
</script>

Teste-boss-world

2026-04-20T19:45:30Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper" style="background: [[Arquivo:KuraiganaBackground.png]];">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey;">
<div style="width: 250px; height: 250px; background: #000; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">[[Arquivo:Mihawk_Boss.png|250px]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; min-width: 50%; margin-bottom:0;">
<div class="home-title" style="font-size: 1.1em;">Informações Importantes</div>
<div style="padding:15px;">
Recomendado grupo de 6 jogadores.
O uso de controle de grupo (CC) é obrigatório.
</div>
</div>
<div style="width: 250px; height: 250px; padding: 10px; background: blue;">
</div>
</div>
</div>

<div class="boss-navigation">
<div class="boss-nav-btn active" data-target="hab">Habilidades</div>
<div class="boss-nav-btn" data-target="fas">Fases</div>
<div class="boss-nav-btn" data-target="rec">Rank e Tiers</div>
<div class="boss-nav-btn" data-target="per">Personagens Recomendados</div>
</div>

<div id="hab" class="boss-section active">
<div class="home-card">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>
</div>

<div id="fas" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>
</div>

<div id="per" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</div>

</div>

<script>
document.querySelectorAll('.boss-nav-btn').forEach(button => {
button.addEventListener('click', () => {
const target = button.getAttribute('data-target');

// Remove 'active' de todos
document.querySelectorAll('.boss-nav-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.boss-section').forEach(sec => sec.classList.remove('active'));

// Adiciona 'active' no alvo
button.classList.add('active');
document.getElementById(target).classList.add('active');
});
});
</script>

Teste-boss-world

2026-04-20T19:43:36Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper" style="background: KuraiganaBackground.png;">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey;">
<div style="width: 250px; height: 250px; background: #000; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">[[Arquivo:Mihawk_Boss.png|250px]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; min-width: 50%; margin-bottom:0;">
<div class="home-title" style="font-size: 1.1em;">Informações Importantes</div>
<div style="padding:15px;">
Recomendado grupo de 6 jogadores.
O uso de controle de grupo (CC) é obrigatório.
</div>
</div>
<div style="width: 250px; height: 250px; padding: 10px; background: blue;">
</div>
</div>
</div>

<div class="boss-navigation">
<div class="boss-nav-btn active" data-target="hab">Habilidades</div>
<div class="boss-nav-btn" data-target="fas">Fases</div>
<div class="boss-nav-btn" data-target="rec">Rank e Tiers</div>
<div class="boss-nav-btn" data-target="per">Personagens Recomendados</div>
</div>

<div id="hab" class="boss-section active">
<div class="home-card">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>
</div>

<div id="fas" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>
</div>

<div id="per" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</div>

</div>

<script>
document.querySelectorAll('.boss-nav-btn').forEach(button => {
button.addEventListener('click', () => {
const target = button.getAttribute('data-target');

// Remove 'active' de todos
document.querySelectorAll('.boss-nav-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.boss-section').forEach(sec => sec.classList.remove('active'));

// Adiciona 'active' no alvo
button.classList.add('active');
document.getElementById(target).classList.add('active');
});
});
</script>

Predefinição:BossLayout/styles.css

2026-04-20T19:38:04Z

Edynhooo:

Teste-boss-world

2026-04-20T19:36:43Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey;">
<div style="width: 250px; height: 250px; background: #000; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">[[Arquivo:Mihawk_Boss.png|250px]]</div>
<div class="home-card-WorldBoss-list" style="flex:1; min-width:300px; margin-bottom:0;">
<div class="home-title" style="font-size: 1.1em;">Informações Importantes</div>
<div style="padding:15px;">
Recomendado grupo de 6 jogadores.
O uso de controle de grupo (CC) é obrigatório.
</div>
</div>
<div style="padding: 10px; background: blue;">
</div>
</div>
</div>

<div class="boss-navigation">
<div class="boss-nav-btn active" data-target="hab">Habilidades</div>
<div class="boss-nav-btn" data-target="fas">Fases</div>
<div class="boss-nav-btn" data-target="rec">Rank e Tiers</div>
<div class="boss-nav-btn" data-target="per">Personagens Recomendados</div>
</div>

<div id="hab" class="boss-section active">
<div class="home-card">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>
</div>

<div id="fas" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>
</div>

<div id="per" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</div>

</div>

<script>
document.querySelectorAll('.boss-nav-btn').forEach(button => {
button.addEventListener('click', () => {
const target = button.getAttribute('data-target');

// Remove 'active' de todos
document.querySelectorAll('.boss-nav-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.boss-section').forEach(sec => sec.classList.remove('active'));

// Adiciona 'active' no alvo
button.classList.add('active');
document.getElementById(target).classList.add('active');
});
});
</script>

Predefinição:BossLayout/styles.css

2026-04-20T19:36:32Z

Edynhooo:

Teste-boss-world

2026-04-20T19:29:28Z

Edynhooo:

{{#widget:Mainpageresponsive}}
{{#widget:TiraTitulo}}
<templatestyles src="Predefinição:BossLayout/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />

<div class="boss-main-wrapper">

<div class="home-card-WorldBoss">
<div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey;">
<div style="width: 250px; height: 250px; background: #000; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">[[Arquivo:Mihawk_Boss.png|250px]]</div>
<div class="home-card" style="flex:1; min-width:300px; margin-bottom:0;">
<div class="home-title" style="font-size: 1.1em;">Informações Importantes</div>
<div style="padding:15px;">
Recomendado grupo de 6 jogadores.
O uso de controle de grupo (CC) é obrigatório.
</div>
</div>
<div style="padding: 10px; background: blue;">
</div>
</div>
</div>

<div class="boss-navigation">
<div class="boss-nav-btn active" data-target="hab">Habilidades</div>
<div class="boss-nav-btn" data-target="fas">Fases</div>
<div class="boss-nav-btn" data-target="rec">Rank e Tiers</div>
<div class="boss-nav-btn" data-target="per">Personagens Recomendados</div>
</div>

<div id="hab" class="boss-section active">
<div class="home-card">
<div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
</div>
</div>

<div id="fas" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div style="height:4px; background:#46C001;"></div>
<div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
<div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
</div>
</div>
</div>

<div id="per" class="boss-section">
<div class="boss-grid">
<div class="boss-card">
<div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
<div style="padding:10px; height:300px; overflow-y:auto;">
[[Arquivo:Card-jinbe.png|250px]]
[[Arquivo:Card-kid.png|250px]]
</div>
</div>
</div>
</div>

</div>

<script>
document.querySelectorAll('.boss-nav-btn').forEach(button => {
button.addEventListener('click', () => {
const target = button.getAttribute('data-target');

// Remove 'active' de todos
document.querySelectorAll('.boss-nav-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.boss-section').forEach(sec => sec.classList.remove('active'));

// Adiciona 'active' no alvo
button.classList.add('active');
document.getElementById(target).classList.add('active');
});
});
</script>