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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(11 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<div class="news-container">
<div class="widget-changelog">
  <!-- Card 1: Fist of Love -->
<div class="notice-item" style="--notice-color: #D9F2D9;">
  <div class="news-card">
<div class="notice-content">
    <img src="URL_IMG_FIST_OF_LOVE" class="news-image">
<a href="https://discord.com/channels/390234650590576650/390234763623137280/1359277599414554795"
    <div class="news-info">
target="_blank" class="notice-title">Fist of Love</a>
      <span class="news-date">08/04/2025 - Evento</span>
<div class="notice-date">até 24/04</div>
      <h2 class="news-title">Fist of Love</h2>
<p class="notice-desc">
      <p class="news-desc">
Evento disponível por tempo limitado. Complete pra receber recompensas diárias.
        Participe deste evento temporário de 11 a 24 de abril
</p>
        e enfrente um poderoso herói da Marinha!
</div>
      </p>
<img src="https://wiki.gla.com.br/images/a/a5/Bigexppot.png" class="notice-icon">
      <a href="LINK_DO_DISCORD_OU_WIKI" class="news-link" target="_blank">Confira detalhes</a>
</div>
    </div>
 
  </div>
<div class="notice-item" style="--notice-color: #FFF2B3;">
 
<div class="notice-content">
  <!-- Card 2: Ranqueada -->
<a href="https://discord.com/channels/390234650590576650/390234763623137280/1359277599414554795"
  <div class="news-card">
class="notice-title">Informativos</a>
    <img src="URL_IMG_RANQUEADA" class="news-image">
<div class="notice-date">08/04/2025</div>
    <div class="news-info">
<p class="notice-desc">
      <span class="news-date">09/04/2025 - Ranqueada</span>
Skins do passe anterior entram na rotação da loja, temporada de records será encerrada e uso de poções
      <h2 class="news-title">Nova Temporada</h2>
de XP foi ajustado.
      <p class="news-desc">
</p>
        Temporada inicia em 10/04, conquiste medalhas de diamante
</div>
        e um ícone de perfil exclusivo!
</div>
      </p>
 
      <a href="LINK_DO_DISCORD_OU_WIKI" class="news-link" target="_blank">Veja mais</a>
<div class="notice-item" style="--notice-color: #F4CCCC;">
    </div>
<div class="notice-content">
  </div>
<a href="https://discord.com/channels/390234650590576650/442456286521458708/1359206650212253886"
 
target="_blank" class="notice-title">Ranqueada</a>
  <!-- Card 3: Informativos (se quiser) -->
<div class="notice-date">08/04/2025</div>
  <div class="news-card">
<p class="notice-desc">
    <img src="URL_IMG_INFORMATIVOS" class="news-image">
Confira os ícones exclusivos da nova temporada ranqueada que começa dia 10/04!
    <div class="news-info">
</p>
      <span class="news-date">09/04/2025 - Informativos</span>
</div>
      <h2 class="news-title">Ajustes gerais</h2>
<img src="https://wiki.gla.com.br/images/8/82/Medalha_de_campeao.png" class="notice-icon">
      <p class="news-desc">
</div>
        Saiba sobre a reta final da temporada de records,
        novas skins, e mudanças de poções de EXP.
      </p>
      <a href="LINK_DO_DISCORD_OU_WIKI" class="news-link" target="_blank">Leia mais</a>
    </div>
  </div>
</div>
</div>


<style>
<style>
.news-container {
.widget-changelog {
  display: flex;
max-height: 240px;
  flex-wrap: wrap;
overflow-y: auto;
  gap: 10px; /* Espaço entre cards */
padding-right: 5px;
box-sizing: border-box;
}
}
.news-card {
 
  flex: 1 1 300px;  
.notice-item {
  max-width: 300px;  
display: flex;
  background: #fff;  
align-items: flex-start;
  border: 1px solid #ddd;  
background: #fff;
  border-radius: 8px;  
border: 1px solid #ddd;
  overflow: hidden;  
border-radius: 6px;
  display: flex;  
margin-bottom: 10px;
  flex-direction: column;  
padding: 8px 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
box-sizing: border-box;
border-left: 5px solid var(--notice-color, #f5b700);
}
}
.news-image {
 
  width: 100%;
.notice-content {
  height: auto;
flex: 1;
  display: block;
}
}
.news-info {
 
  padding: 10px;
.notice-title {
display: block;
font-size: 1.3em;
font-weight: bold;
color: #333;
text-decoration: none;
margin: 0;
}
}
.news-date {
 
  font-size: 80%;
.notice-title:hover {
  color: #888;
text-decoration: underline;
}
}
.news-title {
 
  font-size: 100%;
.notice-date {
  font-weight: bold;
font-size: 0.9em;
  margin: 5px 0;
color: #888;
  color: #333;
margin: -5px 0;
}
}
.news-desc {
 
  font-size: 90%;
.notice-desc {
  color: #555;
color: #555;
  margin-bottom: 8px;
line-height: 1.3;
  /* Se quiser truncar texto:
margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  */
}
}
.news-link {
 
  font-size: 90%;
.notice-icon {
  color: #007bff;
object-fit: contain;
  text-decoration: none;
flex-shrink: 0;
  font-weight: bold;
}
.news-link:hover {
  text-decoration: underline;
}
}
</style>
</style>

Edição atual tal como às 08h48min de 24 de abril de 2025

<a href="https://discord.com/channels/390234650590576650/390234763623137280/1359277599414554795" target="_blank" class="notice-title">Fist of Love</a>

até 24/04

Evento disponível por tempo limitado. Complete pra receber recompensas diárias.

<img src="https://wiki.gla.com.br/images/a/a5/Bigexppot.png" class="notice-icon">

<a href="https://discord.com/channels/390234650590576650/390234763623137280/1359277599414554795" class="notice-title">Informativos</a>

08/04/2025

Skins do passe anterior entram na rotação da loja, temporada de records será encerrada e uso de poções de XP foi ajustado.

<a href="https://discord.com/channels/390234650590576650/442456286521458708/1359206650212253886" target="_blank" class="notice-title">Ranqueada</a>

08/04/2025

Confira os ícones exclusivos da nova temporada ranqueada que começa dia 10/04!

<img src="https://wiki.gla.com.br/images/8/82/Medalha_de_campeao.png" class="notice-icon">

<style> .widget-changelog { max-height: 240px; overflow-y: auto; padding-right: 5px; box-sizing: border-box; }

.notice-item { display: flex; align-items: flex-start; background: #fff; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 10px; padding: 8px 10px; box-sizing: border-box; border-left: 5px solid var(--notice-color, #f5b700); }

.notice-content { flex: 1; }

.notice-title { display: block; font-size: 1.3em; font-weight: bold; color: #333; text-decoration: none; margin: 0; }

.notice-title:hover { text-decoration: underline; }

.notice-date { font-size: 0.9em; color: #888; margin: -5px 0; }

.notice-desc { color: #555; line-height: 1.3; margin: 0; }

.notice-icon { object-fit: contain; flex-shrink: 0; } </style>