Teste scripts: mudanças entre as edições

De Farmland
Ir para navegação Ir para pesquisar
← Edição anteriorEdição posterior →
Adm.mayuka (discussão | contribs)
Burocratas, Administradores da interface, Administradores
5 356 edições
VisualWikitexto
Sem resumo de edição
Sem resumo de edição
Linha 7: Linha 7:
<div class="everlight-top-links">
<div class="everlight-top-links">
    
    
   <a href="https://everlightgames.com.br/?to=inicio" class="top-link btn-border-effect">
/* =========================
    <span class="link-icon">🌐</span>
  EVERLIGHT TOP LINKS - TEMA BRANCO MEDIAWIKI
    <span class="link-text">Site Oficial</span>
  ========================= */
   </a>
 
/* Container principal - Fundo branco */
.everlight-top-links-white {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  margin: 20px auto;
  max-width: 1200px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
   overflow: hidden;
}
 
/* Linha decorativa no topo */
.everlight-top-links-white::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #8B5CF6 0%,
    #3B82F6 25%,
    #10B981 50%,
    #F59E0B 75%,
    #EC4899 100%);
  border-radius: 12px 12px 0 0;
}
 
/* Links individuais - Estilo limpo */
.wiki-top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  color: #374151;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  min-width: 110px;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}
 
/* Efeito do Botão 2 adaptado - bordas que crescem */
.wiki-top-link::before,
.wiki-top-link::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #8B5CF6, #3B82F6);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1px;
  z-index: 2;
}
 
.wiki-top-link::before {
  top: -1px;
}
 
.wiki-top-link::after {
  bottom: -1px;
}
 
/* Hover effect - Ativa o efeito do Botão 2 */
.wiki-top-link:hover {
  letter-spacing: 1px;
  background: white;
  border-color: #8B5CF6;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
  color: #1f2937;
}
 
.wiki-top-link:hover::before,
.wiki-top-link:hover::after {
  width: 85%;
}
 
/* Efeito de brilho interno no hover */
.wiki-top-link:hover::before {
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}
 
.wiki-top-link:hover::after {
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}
 
/* Cores específicas para cada link no hover */
.wiki-top-link:nth-child(1):hover { border-color: #3B82F6; } /* Site Oficial - Azul */
.wiki-top-link:nth-child(3):hover { border-color: #10B981; } /* Informações - Verde */
.wiki-top-link:nth-child(5):hover { border-color: #F59E0B; } /* Registro - Amarelo */
.wiki-top-link:nth-child(7):hover { border-color: #EF4444; } /* Download - Vermelho */
.wiki-top-link:nth-child(9):hover { border-color: #8B5CF6; } /* Mercado - Roxo */
.wiki-top-link:nth-child(11):hover { border-color: #06B6D4; } /* Discord - Ciano */
.wiki-top-link:nth-child(13):hover { border-color: #EC4899; } /* Atualizações - Rosa */
 
/* Ícones */
.wiki-link-icon {
  font-size: 16px;
  transition: all 0.3s ease;
  display: inline-block;
}
 
.wiki-top-link:hover .wiki-link-icon {
  transform: scale(1.15);
  animation: iconBounce 0.5s ease;
}
 
@keyframes iconBounce {
  0%, 100% { transform: scale(1.15); }
  50% { transform: scale(1.3); }
}
 
/* Texto */
.wiki-link-text {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}
 
.wiki-top-link:hover .wiki-link-text {
  background: linear-gradient(90deg, #8B5CF6, #3B82F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
 
/* Separadores */
.wiki-link-separator {
  color: #d1d5db;
  font-size: 16px;
  font-weight: 300;
  margin: 0 5px;
  transition: all 0.3s ease;
  padding: 0 2px;
}
 
.wiki-top-link:hover + .wiki-link-separator,
.wiki-link-separator:hover {
  color: #8B5CF6;
  transform: scale(1.2);
  font-weight: bold;
}
 
/* Estado ativo (página atual) */
.wiki-top-link.active {
  background: linear-gradient(135deg, #8B5CF6, #3B82F6);
  color: white;
  letter-spacing: 1px;
  box-shadow: 0 5px 20px rgba(139, 92, 246, 0.25);
  border-color: #8B5CF6;
}
 
.wiki-top-link.active .wiki-link-text {
  color: white;
  -webkit-text-fill-color: white;
  background: none;
}
 
.wiki-top-link.active::before,
.wiki-top-link.active::after {
  width: 85%;
  background: white;
}
 
/* Efeito de onda ao clicar */
.wiki-top-link:active {
  transform: translateY(-1px);
   transition: transform 0.1s;
}
 
/* Responsividade */
@media (max-width: 1024px) {
  .everlight-top-links-white {
    padding: 15px;
    gap: 3px;
  }
    
    
   <span class="link-separator">•</span>
   .wiki-top-link {
    padding: 8px 14px;
    font-size: 13px;
    min-width: 95px;
  }
}
 
@media (max-width: 768px) {
  .everlight-top-links-white {
    flex-direction: column;
    gap: 8px;
    padding: 15px;
  }
    
    
   <a href="/wiki/Informações_do_Servidor" class="top-link btn-border-effect">
   .wiki-top-link {
     <span class="link-icon">ℹ️</span>
     width: 100%;
    <span class="link-text">Informações</span>
     max-width: 220px;
  </a>
     justify-content: center;
 
   }
  <span class="link-separator">•</span>
 
  <a href="https://everlightgames.com.br/?to=registro" class="top-link btn-border-effect">
    <span class="link-icon">📝</span>
     <span class="link-text">Registro</span>
  </a>
 
  <span class="link-separator">•</span>
 
  <a href="https://everlightgames.com.br/?to=downloads" class="top-link btn-border-effect">
    <span class="link-icon">⬇️</span>
    <span class="link-text">Download</span>
  </a>
 
  <span class="link-separator">•</span>
 
  <a href="/wiki/Mercado" class="top-link btn-border-effect">
    <span class="link-icon">💰</span>
     <span class="link-text">Mercado</span>
  </a>
 
  <span class="link-separator">•</span>
 
  <a href="https://discord.gg/aRpbZP5yx9" class="top-link btn-border-effect">
    <span class="link-icon">💬</span>
    <span class="link-text">Discord</span>
  </a>
 
  <span class="link-separator">•</span>
 
  <a href="/wiki/Atualizações" class="top-link btn-border-effect">
    <span class="link-icon">🔄</span>
    <span class="link-text">Atualizações</span>
   </a>
    
    
  .wiki-link-separator {
    display: none;
  }
}
/* Animação de entrada */
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.wiki-top-link {
  animation: fadeInSlide 0.5s ease-out forwards;
  animation-delay: calc(var(--link-index, 0) * 0.05s);
  opacity: 0;
}
/* Badge para links externos */
.wiki-top-link[href^="http"]::after {
  content: '↗';
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.wiki-top-link[href^="http"]:hover::after {
  opacity: 1;
}
/* Contador visual */
.everlight-top-links-white::after {
  content: '7 links disponíveis';
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
}
/* Efeito de brilho sutil no container */
.everlight-top-links-white:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}
</div>
</div>


Edição das 10h11min de 30 de janeiro de 2026


/* ========================= 

  EVERLIGHT TOP LINKS - TEMA BRANCO MEDIAWIKI
  ========================= */

/* Container principal - Fundo branco */ .everlight-top-links-white { 

 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 gap: 5px;
 padding: 20px;
 background: #ffffff;
 border-radius: 12px;
 margin: 20px auto;
 max-width: 1200px;
 border: 1px solid #e0e0e0;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 position: relative;
 overflow: hidden;

}

/* Linha decorativa no topo */ .everlight-top-links-white::before { 

 content: ;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: linear-gradient(90deg, 
   #8B5CF6 0%, 
   #3B82F6 25%, 
   #10B981 50%, 
   #F59E0B 75%, 
   #EC4899 100%);
 border-radius: 12px 12px 0 0;

}

/* Links individuais - Estilo limpo */ .wiki-top-link { 

 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 10px 18px;
 color: #374151;
 text-decoration: none;
 font-weight: 600;
 font-size: 14px;
 letter-spacing: 0;
 position: relative;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 border-radius: 8px;
 background: #f9fafb;
 border: 1px solid #e5e7eb;
 min-width: 110px;
 justify-content: center;
 overflow: hidden;
 z-index: 1;

}

/* Efeito do Botão 2 adaptado - bordas que crescem */ .wiki-top-link::before, .wiki-top-link::after { 

 content: ;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 height: 2px;
 width: 0;
 background: linear-gradient(90deg, #8B5CF6, #3B82F6);
 transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 border-radius: 1px;
 z-index: 2;

}

.wiki-top-link::before { 

 top: -1px;

}

.wiki-top-link::after { 

 bottom: -1px;

}

/* Hover effect - Ativa o efeito do Botão 2 */ .wiki-top-link:hover { 

 letter-spacing: 1px;
 background: white;
 border-color: #8B5CF6;
 transform: translateY(-2px);
 box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
 color: #1f2937;

}

.wiki-top-link:hover::before, .wiki-top-link:hover::after { 

 width: 85%;

}

/* Efeito de brilho interno no hover */ .wiki-top-link:hover::before { 

 box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);

}

.wiki-top-link:hover::after { 

 box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);

}

/* Cores específicas para cada link no hover */ .wiki-top-link:nth-child(1):hover { border-color: #3B82F6; } /* Site Oficial - Azul */ .wiki-top-link:nth-child(3):hover { border-color: #10B981; } /* Informações - Verde */ .wiki-top-link:nth-child(5):hover { border-color: #F59E0B; } /* Registro - Amarelo */ .wiki-top-link:nth-child(7):hover { border-color: #EF4444; } /* Download - Vermelho */ .wiki-top-link:nth-child(9):hover { border-color: #8B5CF6; } /* Mercado - Roxo */ .wiki-top-link:nth-child(11):hover { border-color: #06B6D4; } /* Discord - Ciano */ .wiki-top-link:nth-child(13):hover { border-color: #EC4899; } /* Atualizações - Rosa */

/* Ícones */ .wiki-link-icon { 

 font-size: 16px;
 transition: all 0.3s ease;
 display: inline-block;

}

.wiki-top-link:hover .wiki-link-icon { 

 transform: scale(1.15);
 animation: iconBounce 0.5s ease;

}

@keyframes iconBounce { 

 0%, 100% { transform: scale(1.15); }
 50% { transform: scale(1.3); }

}

/* Texto */ .wiki-link-text { 

 position: relative;
 z-index: 1;
 transition: color 0.3s ease;

}

.wiki-top-link:hover .wiki-link-text { 

 background: linear-gradient(90deg, #8B5CF6, #3B82F6);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;

}

/* Separadores */ .wiki-link-separator { 

 color: #d1d5db;
 font-size: 16px;
 font-weight: 300;
 margin: 0 5px;
 transition: all 0.3s ease;
 padding: 0 2px;

}

.wiki-top-link:hover + .wiki-link-separator, .wiki-link-separator:hover { 

 color: #8B5CF6;
 transform: scale(1.2);
 font-weight: bold;

}

/* Estado ativo (página atual) */ .wiki-top-link.active { 

 background: linear-gradient(135deg, #8B5CF6, #3B82F6);
 color: white;
 letter-spacing: 1px;
 box-shadow: 0 5px 20px rgba(139, 92, 246, 0.25);
 border-color: #8B5CF6;

}

.wiki-top-link.active .wiki-link-text { 

 color: white;
 -webkit-text-fill-color: white;
 background: none;

}

.wiki-top-link.active::before, .wiki-top-link.active::after { 

 width: 85%;
 background: white;

}

/* Efeito de onda ao clicar */ .wiki-top-link:active { 

 transform: translateY(-1px);
 transition: transform 0.1s;

}

/* Responsividade */ @media (max-width: 1024px) { 

 .everlight-top-links-white {
   padding: 15px;
   gap: 3px;
 }
 
 .wiki-top-link {
   padding: 8px 14px;
   font-size: 13px;
   min-width: 95px;
 }

}

@media (max-width: 768px) { 

 .everlight-top-links-white {
   flex-direction: column;
   gap: 8px;
   padding: 15px;
 }
 
 .wiki-top-link {
   width: 100%;
   max-width: 220px;
   justify-content: center;
 }
 
 .wiki-link-separator {
   display: none;
 }

}

/* Animação de entrada */ @keyframes fadeInSlide { 

 from {
   opacity: 0;
   transform: translateY(15px);
 }
 to {
   opacity: 1;
   transform: translateY(0);
 }

}

.wiki-top-link { 

 animation: fadeInSlide 0.5s ease-out forwards;
 animation-delay: calc(var(--link-index, 0) * 0.05s);
 opacity: 0;

}

/* Badge para links externos */ .wiki-top-link[href^="http"]::after { 

 content: '↗';
 font-size: 10px;
 margin-left: 4px;
 opacity: 0.6;
 transition: opacity 0.3s;

}

.wiki-top-link[href^="http"]:hover::after { 

 opacity: 1;

}

/* Contador visual */ .everlight-top-links-white::after { 

 content: '7 links disponíveis';
 position: absolute;
 bottom: 8px;
 right: 12px;
 font-size: 11px;
 color: #9ca3af;
 font-weight: 500;

}

/* Efeito de brilho sutil no container */ .everlight-top-links-white:hover { 

 box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);

}



GUIAS 

 <button class="filter-btn active" data-filter="all">
   🌐 Todos
 </button>
 <button class="filter-btn" data-filter="progression">
   ⚔️ Progressão
 </button>
 <button class="filter-btn" data-filter="systems">
   ⚙️ Sistemas
 </button>
 <button class="filter-btn" data-filter="economy">
   💰 Econômico
 </button>
 <button class="filter-btn" data-filter="content">
   🎯 Conteúdo
 </button>
 <button class="filter-btn" data-filter="popular">
   🔥 Populares
 </button>
 <button class="filter-btn" data-filter="updated">
   🔄 Atualizados
 </button>

   <input type="text" class="search-input" placeholder="🔍 Buscar guia específico...">
   <button class="search-clear" title="Limpar busca">✕</button>

   30 guias disponíveis

 📈
 <a href="/wiki/Guia_de_UP" class="guide-link">Guia de UP</a>
 🔥

 💰
 <a href="/wiki/Comércio" class="guide-link">Comércio</a>

 🏪
 <a href="/wiki/Loja_de_Presença" class="guide-link">Loja de Presença</a>

 ✨
 <a href="/wiki/Encantamentos" class="guide-link">Encantamentos</a>

 🗳️
 <a href="/wiki/Pontos_de_Voto" class="guide-link">Pontos de Voto</a>

 👑
 <a href="/wiki/Sistema_VIP" class="guide-link">Sistema VIP</a>
 🔥

 👹
 <a href="/wiki/Pontos_MVP" class="guide-link">Pontos MVP</a>

 🤖
 <a href="/wiki/Eventos_Automáticos" class="guide-link">Eventos Automáticos</a>

 🏰
 <a href="/wiki/Instâncias" class="guide-link">Instâncias</a>

 🌿
 <a href="/wiki/Grupo_do_Éden" class="guide-link">Grupo do Éden</a>

 🎲
 <a href="/wiki/Random_Options" class="guide-link">Random Options</a>

 🔥
 <a href="/wiki/Monstros_Infernais" class="guide-link">Monstros Infernais</a>

 ⌨️
 <a href="/wiki/Comandos" class="guide-link">Comandos</a>
 🔄

 🐾
 <a href="/wiki/Sistema_de_PET" class="guide-link">Sistema de PET</a>

 🛡️
 <a href="/wiki/Passe_de_Batalha" class="guide-link">Passe de Batalha</a>

 🏰
 <a href="/wiki/Instâncias" class="guide-link">Instâncias</a>

 🌊
 <a href="/wiki/Maré_Infernal" class="guide-link">Maré Infernal</a>
 🔥

 👑
 <a href="/wiki/MVPs" class="guide-link">MVPs</a>

 ⚔️
 <a href="/wiki/Progressão_de_Dano" class="guide-link">Progressão de Dano</a>

 🔧
 <a href="/wiki/Refinamento_e_Grade" class="guide-link">Refinamento e Grade</a>

 🎰
 <a href="/wiki/Roleta_da_Sorte" class="guide-link">Roleta da Sorte</a>

 💎
 <a href="/wiki/Sistema_RMT" class="guide-link">Sistema RMT</a>

 👑
 <a href="/wiki/Sistema_VIP" class="guide-link">Sistema VIP</a>

 🔄
 <a href="/wiki/Renascimento" class="guide-link">Renascimento</a>

 📊
 <a href="/wiki/Trait_Status" class="guide-link">Trait Status</a>

 👼
 <a href="/wiki/Bençao_de_Lilith" class="guide-link">Bençao de Lilith</a>

 👨‍🍳
 <a href="/wiki/Chefenia" class="guide-link">Chefenia</a>

 📚
 <a href="/wiki/Colecionador" class="guide-link">Colecionador</a>

 📈
 <a href="/wiki/Guia_de_UP" class="guide-link">Guia de UP</a>

 👥
 <a href="/wiki/Horda" class="guide-link">Horda</a>

 <button class="control-btn" id="shuffleGuides" title="Embaralhar ordem">
   🎲 Embaralhar
 </button>
 <button class="control-btn" id="expandAll" title="Expandir todos">
   📖 Expandir Tudo
 </button>
 <button class="control-btn" id="collapseAll" title="Recolher todos">
   📕 Recolher Tudo
 </button>
 <button class="control-btn" id="showPopular" title="Mostrar populares">
   🔥 Populares
 </button>
 <button class="control-btn" id="toggleIcons" title="Mostrar/ocultar ícones">
   👁️ Ícones
 </button>

 <button class="page-btn prev-btn" disabled>
   ← Anterior
 </button>

   <button class="page-number active">1</button>
   <button class="page-number">2</button>
   <button class="page-number">3</button>

 <button class="page-btn next-btn">
   Próxima →
 </button>
Destaques

Conteúdos Exclusivos
‹

›

EverLight Games • Wiki Oficial
Informações do Servidor • Regras • Sistema VIP • Comandos • Doações
🌐 https://everlightgames.com.br • 💬 Discord Oficial

© 2025 EverLight Games. Todos os direitos reservados.
Ragnarok Online é marca registrada da Gravity Co., Ltd.

Disponível em “http://farmland.net.br/wiki/index.php?title=Teste_scripts&oldid=2830”