Mudanças entre as edições de "Widget:Teste2"
Linha 1: | Linha 1: | ||
<div class=" | <div class="changelog-widget"> | ||
<!-- Item 1 --> | |||
<div class="changelog-item"> | <div class="changelog-item"> | ||
<img src=" | <img src="URL_DO_ICONE" class="changelog-icon"> | ||
<div class="changelog-info"> | <div class="changelog-info"> | ||
<div class="changelog-header"> | <div class="changelog-header"> | ||
< | <!-- TÍTULO É UM LINK --> | ||
<a href="LINK_INFORMATIVOS" class="changelog-title">Informativos</a> | |||
<div class="changelog-date">21.04.2025</div> | <div class="changelog-date">21.04.2025</div> | ||
</div> | </div> | ||
Linha 14: | Linha 16: | ||
</div> | </div> | ||
<!-- Item 2 --> | |||
<div class="changelog-item"> | <div class="changelog-item"> | ||
<img src="URL_DO_ICONE" class="changelog-icon"> | <img src="URL_DO_ICONE" class="changelog-icon"> | ||
<div class="changelog-info"> | <div class="changelog-info"> | ||
<div class="changelog-header"> | <div class="changelog-header"> | ||
< | <a href="LINK_RANQUEADA" class="changelog-title">Ranqueada</a> | ||
<div class="changelog-date">20.04.2025</div> | <div class="changelog-date">20.04.2025</div> | ||
</div> | </div> | ||
Linha 27: | Linha 30: | ||
</div> | </div> | ||
<!-- Item 3 --> | |||
<div class="changelog-item"> | <div class="changelog-item"> | ||
<img src="URL_DO_ICONE" class="changelog-icon"> | <img src="URL_DO_ICONE" class="changelog-icon"> | ||
<div class="changelog-info"> | <div class="changelog-info"> | ||
<div class="changelog-header"> | <div class="changelog-header"> | ||
< | <a href="LINK_EVENTO" class="changelog-title">Evento Temporário</a> | ||
<div class="changelog-date">19.04.2025</div> | <div class="changelog-date">19.04.2025</div> | ||
</div> | </div> | ||
Linha 39: | Linha 43: | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
<style> | <style> | ||
. | .changelog-widget { | ||
font-family: sans-serif; | font-family: sans-serif; | ||
max-width: 600px; | max-width: 600px; | ||
Linha 54: | Linha 57: | ||
align-items: flex-start; | align-items: flex-start; | ||
padding: 8px 0; | padding: 8px 0; | ||
border- | box-sizing: border-box; | ||
} | } | ||
.changelog-item:last- | .changelog-item:not(:last-child) { | ||
border-bottom: | border-bottom: 1px solid #eee; | ||
} | } | ||
Linha 64: | Linha 67: | ||
width: 32px; | width: 32px; | ||
height: 32px; | height: 32px; | ||
margin-right: | margin-right: 8px; | ||
flex-shrink: 0; | flex-shrink: 0; | ||
} | } | ||
Linha 74: | Linha 77: | ||
.changelog-header { | .changelog-header { | ||
display: flex; | display: flex; | ||
justify-content: space-between; | justify-content: space-between; | ||
margin-bottom: 2px; | |||
} | } | ||
.changelog-title { | .changelog-title { | ||
font-size: | font-size: 1em; | ||
font-weight: bold; | font-weight: bold; | ||
color: #333; | color: #333; | ||
text-decoration: none; | |||
} | |||
.changelog-title:hover { | |||
text-decoration: underline; | |||
} | } | ||
Linha 88: | Linha 95: | ||
font-size: 0.9em; | font-size: 0.9em; | ||
color: #888; | color: #888; | ||
margin-left: | margin-left: 8px; | ||
} | } | ||
.changelog-desc { | .changelog-desc { | ||
margin: | margin: 0; | ||
font-size: 0.9em; | font-size: 0.9em; | ||
color: #555; | color: #555; | ||
line-height: 1. | line-height: 1.3; | ||
} | } | ||
</style> | </style> |
Edição das 02h22min de 13 de abril de 2025
<style> .changelog-widget { font-family: sans-serif; max-width: 600px; margin: 0 auto; box-sizing: border-box; }
.changelog-item { display: flex; align-items: flex-start; padding: 8px 0; box-sizing: border-box; }
.changelog-item:not(:last-child) { border-bottom: 1px solid #eee; }
.changelog-icon { width: 32px; height: 32px; margin-right: 8px; flex-shrink: 0; }
.changelog-info { flex: 1; }
.changelog-header { display: flex; justify-content: space-between; margin-bottom: 2px; }
.changelog-title { font-size: 1em; font-weight: bold; color: #333; text-decoration: none; }
.changelog-title:hover { text-decoration: underline; }
.changelog-date { font-size: 0.9em; color: #888; margin-left: 8px; }
.changelog-desc { margin: 0; font-size: 0.9em; color: #555; line-height: 1.3; } </style>