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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
 
(6 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<style>
<style>
   .widget-changelog{
   .widget-changelog {
     max-height: 280px;
     max-height: 280px;
     overflow-y: auto;
     overflow-y: auto;
Linha 7: Linha 7:
   }
   }


   .notice-item{
   .notice-item {
     display:flex;
     display: flex;
     align-items:flex-start;
     align-items: flex-start;
     position:relative; /* allow absolute-positioned icon */
     position: relative;
     gap:0;
     gap: 0;
     background:#fff;
     background: #fff;
     border:1px solid #ddd; /* borda padrão */
     border: 1px solid #ddd;
     border-radius:6px;
     border-left: 4px solid var(--notice-color, #999);
    margin-bottom:10px;
     padding: 5px 10px;
     padding:8px 10px;
     border-radius: 6px;
     box-sizing:border-box;
     margin: 0 0 8px 0;
    --notice-color: var(--notice-color, #f5b700);
     border-left:5px solid var(--notice-color);
   }
   }


   .notice-content{ flex:1; display:flex; flex-direction:column; gap:0; position:relative; z-index:2; padding-right:0; }
   .notice-content { flex: 1; min-width: 0; }


   .notice-title, .notice-title a{
   .notice-header {
     display:block;
     display: flex;
     font-size:1.05rem; /* slightly smaller */
     align-items: center;
     font-weight:700;
     justify-content: space-between;
     color:#333;
     gap: 8px;
    text-decoration:none;
     margin-bottom: 6px;
     margin:0;
    line-height:1.1;
   }
   }
  .notice-title a:hover{ text-decoration: underline; }


  /* layout the text vertically and control spacing consistently */
   .notice-header-left {
  /* header: inline row with optional inline icon, title and date */
    display: inline-flex;
   .notice-header{ display:flex; align-items:center; gap:8px; justify-content:space-between; }
    align-items: center;
  .notice-header-left{ display:flex; align-items:center; gap:0; }
    gap: 1px;
   .notice-header-right{ white-space:nowrap; }
    min-width: 0;
   }


   .notice-date{ font-size:.85em; color:#888; margin:0 0 0 8px; }
   .notice-title {
  .notice-desc{ color:#555; line-height:1.35; margin:2px 0 0 0 !important; display:block; }
    font-weight: 700;
  /* icon: fixed size, responsive and separated from content */
    font-size: 14px;
  .notice-icon{
    line-height: 1.2;
  width:32px;
    display: inline-flex;
  height:32px;
     align-items: center;
     object-fit:contain;
     gap: 6px;
     flex-shrink:0;
     white-space: nowrap;
     border-radius:4px;
     overflow: hidden;
     background:transparent;
    text-overflow: ellipsis;
  /* align icon visually with the top of the card/content */
    max-width: 100%;
  margin-top:6px;
  position:absolute;
  right:8px;
  bottom:8px;
  opacity:0.28; /* increased opacity */
  z-index:1; /* behind content */
   }
   }


  /* overlay-specific class (visual only) */
   .notice-title a {
   .notice-icon--overlay{ pointer-events:none; }
    text-decoration: none;
  }


  /* inline icon: hidden on desktop, shown on small screens and participates in layout */
   .notice-date {
   .notice-icon--inline{ display:none; width:20px; height:20px; margin-right:6px; position:static; opacity:0.9; }
    font-size: 12px;
    color: #666;
    white-space: nowrap;
  }


  /* mobile: show inline icon, hide overlay so it doesn't block layout */
   .notice-desc {
  @media (max-width:800px){
     margin: 0;
   .notice-icon--inline{ display:inline-block; }
     font-size: 13px;
  .notice-icon--overlay{ display:none !important; }
     color: #333;
  /* place inline icon at the left edge of the card on small screens */
  .notice-icon--inline{
     display:block !important;
    position:absolute;
    left:8px;
     top:50%;
    transform:translateY(-50%);
    width:28px;
     height:28px;
    z-index:3;
    pointer-events:none;
   }
   }
   /* give the whole card padding so text doesn't sit under the icon */
 
   .notice-item{ padding-left:44px; }
   /* Ícones — sem margin-right */
  .notice-content{ padding-right:16px; padding-left:0; }
   .notice-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
    background: transparent;
    margin-right: 0 !important; /* zera */
    margin-top: 2px;
    position: static;
    opacity: 0.9;
   }
   }
    
 
  /* ensure content sits above the icon and has space on the right */
   .notice-icon--inline {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 0 !important; /* zera */
    position: static;
    opacity: 0.9;
  }
 
  .notice-icon--overlay { display: none !important; }
</style>
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const root = document.querySelector('.widget-changelog');
  if (!root) return;
  root.querySelectorAll('.notice-item').forEach(function (item) {
    const linkEl  = item.querySelector('.notice-link');
    const titleEl = item.querySelector('.notice-title');
    if (!linkEl || !titleEl) return;
    let url = (linkEl.getAttribute('data-url') || '')
      .replace(/[\r\n\t]/g, '')
      .trim();
    if (!url) return;
    if (!titleEl.querySelector('a')) {
      const textSpan = titleEl.querySelector('.notice-title-text');
      const text = (textSpan ? textSpan.textContent : titleEl.textContent).trim();
      titleEl.innerHTML = '';
      const a = document.createElement('a');
      a.href = url;
      a.target = '_blank';
      a.rel = 'noopener noreferrer';
      a.textContent = text || url;
      titleEl.appendChild(a);
    }
    // remove o marcador para não sobrar lixo no DOM
    linkEl.remove();
  });
  // blindagem: qualquer link abre em nova aba
  root.querySelectorAll('a').forEach(function (a) {
    a.setAttribute('target', '_blank');
    a.setAttribute('rel', 'noopener noreferrer');
  });
});
</script>

Edição atual tal como às 14h28min de 10 de setembro de 2025

<style>

 .widget-changelog {
   max-height: 280px;
   overflow-y: auto;
   padding-right: 5px;
   box-sizing: border-box;
 }
 .notice-item {
   display: flex;
   align-items: flex-start;
   position: relative;
   gap: 0;
   background: #fff;
   border: 1px solid #ddd;
   border-left: 4px solid var(--notice-color, #999);
   padding: 5px 10px;
   border-radius: 6px;
   margin: 0 0 8px 0;
 }
 .notice-content { flex: 1; min-width: 0; }
 .notice-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   margin-bottom: 6px;
 }
 .notice-header-left {
   display: inline-flex;
   align-items: center;
   gap: 1px;
   min-width: 0;
 }
 .notice-title {
   font-weight: 700;
   font-size: 14px;
   line-height: 1.2;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
 }
 .notice-title a {
   text-decoration: none;
 }
 .notice-date {
   font-size: 12px;
   color: #666;
   white-space: nowrap;
 }
 .notice-desc {
   margin: 0;
   font-size: 13px;
   color: #333;
 }
 /* Ícones — sem margin-right */
 .notice-icon {
   width: 32px;
   height: 32px;
   object-fit: contain;
   flex-shrink: 0;
   border-radius: 4px;
   background: transparent;
   margin-right: 0 !important; /* zera */
   margin-top: 2px;
   position: static;
   opacity: 0.9;
 }
 .notice-icon--inline {
   display: inline-block;
   width: 32px;
   height: 32px;
   margin-right: 0 !important; /* zera */
   position: static;
   opacity: 0.9;
 }
 .notice-icon--overlay { display: none !important; }

</style>

<script> document.addEventListener('DOMContentLoaded', function () {

 const root = document.querySelector('.widget-changelog');
 if (!root) return;
 root.querySelectorAll('.notice-item').forEach(function (item) {
   const linkEl  = item.querySelector('.notice-link');
   const titleEl = item.querySelector('.notice-title');
   if (!linkEl || !titleEl) return;
   let url = (linkEl.getAttribute('data-url') || )
     .replace(/[\r\n\t]/g, )
     .trim();
   if (!url) return;
   if (!titleEl.querySelector('a')) {
     const textSpan = titleEl.querySelector('.notice-title-text');
     const text = (textSpan ? textSpan.textContent : titleEl.textContent).trim();
     titleEl.innerHTML = ;
     const a = document.createElement('a');
     a.href = url;
     a.target = '_blank';
     a.rel = 'noopener noreferrer';
     a.textContent = text || url;
     titleEl.appendChild(a);
   }
   // remove o marcador para não sobrar lixo no DOM
   linkEl.remove();
 });
 // blindagem: qualquer link abre em nova aba
 root.querySelectorAll('a').forEach(function (a) {
   a.setAttribute('target', '_blank');
   a.setAttribute('rel', 'noopener noreferrer');
 });

}); </script>