Mudanças entre as edições de "Widget:Teste2"
Linha 1: | Linha 1: | ||
<div class=" | <div class="notices-box"> | ||
<div class=" | <div class="notices-title">Notices</div> | ||
<div class=" | |||
< | <div class="notices-list"> | ||
<div class=" | <div class="notice-item"> | ||
< | <div class="notice-content"> | ||
<div class="notice-header">CHANGELOG - 11.1</div> | |||
< | <div class="notice-sub">Glawiki</div> | ||
<div class="notice-date">08.11.2020</div> | |||
</div> | |||
<div class="notice-icon"> | |||
<img src="URL_DO_ICONE_1"> | |||
</div> | </div> | ||
</div> | </div> | ||
<div class=" | <div class="notice-item"> | ||
<div class=" | <div class="notice-content"> | ||
< | <div class="notice-header">CHANGELOG - 11.2</div> | ||
<div class=" | <div class="notice-sub">Glawiki</div> | ||
< | <div class="notice-date">16.11.2020</div> | ||
</div> | |||
< | <div class="notice-icon"> | ||
<img src="URL_DO_ICONE_2"> | |||
</div> | </div> | ||
</div> | </div> | ||
<div class=" | <div class="notice-item"> | ||
<div class=" | <div class="notice-content"> | ||
< | <div class="notice-header">CHANGELOG - 10.1</div> | ||
<div class=" | <div class="notice-sub">Glawiki</div> | ||
< | <div class="notice-date">27.10.2020</div> | ||
</div> | |||
</ | <div class="notice-icon"> | ||
<img src="URL_DO_ICONE_3"> | |||
</div> | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
<style> | <style> | ||
. | .notices-box { | ||
width: 280px; | |||
font-family: sans-serif; | font-family: sans-serif; | ||
max- | background: #fff; | ||
border-radius: 4px; | |||
box-sizing: border-box; | |||
border: 1px solid #ddd; | |||
overflow: hidden; | |||
} | |||
.notices-title { | |||
background: #f5f5f5; | |||
color: #2c3e50; | |||
font-size: 1.1em; | |||
font-weight: bold; | |||
padding: 8px 12px; | |||
border-bottom: 1px solid #ddd; | |||
} | |||
.notices-list { | |||
max-height: 400px; | |||
overflow-y: auto; | |||
padding: 8px; | |||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
. | .notice-item { | ||
display: flex; | display: flex; | ||
align-items: | align-items: center; | ||
position: relative; | |||
padding: | background: #fff; | ||
border- | border-left: 5px solid #f5b700; | ||
/* Barra colorida à esquerda */ | |||
border-radius: 4px; | |||
margin-bottom: 10px; | |||
padding: 8px; | |||
box-sizing: border-box; | |||
} | } | ||
. | .notice-item:last-of-type { | ||
margin-bottom: 0; | |||
} | } | ||
. | .notice-content { | ||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
flex: 1; | flex: 1; | ||
margin-right: 10px; | margin-right: 10px; | ||
} | } | ||
. | .notice-header { | ||
font-size: 1em; | |||
font-size: | |||
font-weight: bold; | font-weight: bold; | ||
color: #333; | color: #333; | ||
margin: 0 0 2px 0; | |||
margin: 0 | |||
} | } | ||
. | .notice-sub { | ||
font-size: 0.9em; | font-size: 0.9em; | ||
color: # | color: #666; | ||
margin: 4px 0; | margin: 0 0 4px 0; | ||
} | } | ||
. | .notice-date { | ||
font-size: 0.85em; | |||
color: #999; | |||
margin: 0; | margin: 0; | ||
} | } | ||
. | .notice-icon img { | ||
width: | width: 48px; | ||
height: | height: 48px; | ||
object-fit: contain; | |||
} | } | ||
</style> | </style> |
Edição das 04h39min de 13 de abril de 2025
<style> .notices-box { width: 280px; font-family: sans-serif; background: #fff; border-radius: 4px; box-sizing: border-box; border: 1px solid #ddd; overflow: hidden; }
.notices-title { background: #f5f5f5; color: #2c3e50; font-size: 1.1em; font-weight: bold; padding: 8px 12px; border-bottom: 1px solid #ddd; }
.notices-list { max-height: 400px; overflow-y: auto; padding: 8px; box-sizing: border-box; }
.notice-item { display: flex; align-items: center; position: relative; background: #fff; border-left: 5px solid #f5b700; /* Barra colorida à esquerda */ border-radius: 4px; margin-bottom: 10px; padding: 8px; box-sizing: border-box; }
.notice-item:last-of-type { margin-bottom: 0; }
.notice-content { display: flex; flex-direction: column; justify-content: center; flex: 1; margin-right: 10px; }
.notice-header { font-size: 1em; font-weight: bold; color: #333; margin: 0 0 2px 0; }
.notice-sub { font-size: 0.9em; color: #666; margin: 0 0 4px 0; }
.notice-date { font-size: 0.85em; color: #999; margin: 0; }
.notice-icon img { width: 48px; height: 48px; object-fit: contain; } </style>