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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
Linha 45: Linha 45:
   /* icon: fixed size, responsive and separated from content */
   /* icon: fixed size, responsive and separated from content */
   .notice-icon{
   .notice-icon{
  width:32px;
    width:20px;
  height:32px;
    height:20px;
     object-fit:contain;
     object-fit:contain;
     flex-shrink:0;
     flex-shrink:0;
     border-radius:4px;
     border-radius:4px;
     background:transparent;
     background:transparent;
  /* align icon visually with the top of the card/content */
    /* inline, left of title */
  margin-top:6px;
    margin-right:8px;
  position:absolute;
    margin-top:2px;
  right:8px;
     position:static;
  bottom:8px;
    opacity:0.9;
  opacity:0.28; /* increased opacity */
  z-index:1; /* behind content */
  }
 
  /* overlay-specific class (visual only) */
  .notice-icon--overlay{ pointer-events:none; }
 
  /* inline icon: hidden on desktop, shown on small screens and participates in layout */
  .notice-icon--inline{ display:none; width:20px; height:20px; margin-right:6px; position:static; opacity:0.9; }
 
  /* mobile: show inline icon, hide overlay so it doesn't block layout */
  @media (max-width:800px){
     /* show inline icon in normal flow on small screens (no absolute left positioning) */
    .notice-icon--inline{
      display:inline-block;
      position:static;
      width:20px;
      height:20px;
      margin-right:6px;
      opacity:0.9;
    }
    /* keep overlay hidden on small screens to avoid duplication */
    .notice-icon--overlay{ display:none !important; }
  }
  /* ensure content sits above the icon and has space on the right */
  /* hide overlay icon on very wide screens */
  @media (min-width:1100px){
    .notice-icon--overlay{ display:none !important; }
   }
   }
 
  /* keep only inline/icon styling — no mobile repositioning or overlay logic */
  .notice-icon--inline{ display:inline-block; width:20px; height:20px; margin-right:8px; position:static; opacity:0.9; }
  .notice-icon--overlay{ display:none !important; }
</style>
</style>

Edição das 21h20min de 2 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; /* allow absolute-positioned icon */
   gap:0;
   background:#fff;
   border:1px solid #ddd; /* borda padrão */
   border-radius:6px;
   margin-bottom:10px;
   padding:8px 10px;
   box-sizing:border-box;
   --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-title, .notice-title a{
   display:block;
   font-size:1.05rem; /* slightly smaller */
   font-weight:700;
   color:#333;
   text-decoration:none;
   margin:0;
   line-height:1.1;
 }
 .notice-title a:hover{ text-decoration: underline; }
 /* layout the text vertically and control spacing consistently */
 /* header: inline row with optional inline icon, title and date */
 .notice-header{ display:flex; align-items:center; gap:8px; justify-content:space-between; }
 .notice-header-left{ display:flex; align-items:center; gap:0; }
 .notice-header-right{ white-space:nowrap; }
 .notice-date{ font-size:.85em; color:#888; margin:0 0 0 8px; }
 .notice-desc{ color:#555; line-height:1.35; margin:2px 0 0 0 !important; display:block; }
 /* icon: fixed size, responsive and separated from content */
 .notice-icon{
   width:20px;
   height:20px;
   object-fit:contain;
   flex-shrink:0;
   border-radius:4px;
   background:transparent;
   /* inline, left of title */
   margin-right:8px;
   margin-top:2px;
   position:static;
   opacity:0.9;
 }
 
 /* keep only inline/icon styling — no mobile repositioning or overlay logic */
 .notice-icon--inline{ display:inline-block; width:20px; height:20px; margin-right:8px; position:static; opacity:0.9; }
 .notice-icon--overlay{ display:none !important; }

</style>