Widget:Teste

<style> /* ====== LAYOUT: dá oxigênio pro sidebar e limita o content ====== */

root {

 --sb-width: 16.5rem;          /* largura real do #mw-panel */
 --content-max: 980px;         /* largura máx. do corpo da página */
 --content-gap: 24px;          /* respiro entre sidebar e content */

}

/* Largura do painel lateral (Vector legacy) */ body.skin-vector #mw-panel { width: var(--sb-width); }

/* Empurra o conteúdo principal pra não colidir com o novo sidebar */ body.skin-vector #content.mw-body {

 margin-left: calc(var(--sb-width) + var(--content-gap)) !important;
 max-width: var(--content-max);

}

/* Em telas menores, volta mais próximo do padrão */ @media (max-width: 1200px) {

 :root { --sb-width: 14rem; --content-gap: 18px; --content-max: 900px; }

}

/* ====== VISUAL: cards, headings, contraste e pills ====== */

root {

 --sb-bg: rgba(15, 16, 24, 0.82);
 --sb-bg-fallback: #161823;
 --sb-border: rgba(255,255,255,0.10);
 --sb-shadow: 0 8px 24px rgba(0,0,0,0.35);

 --sb-text: #E9ECF8;
 --sb-heading: #ffffff;
 --sb-link: #E5E9FF;          /* +claro que antes */
 --sb-link-hover: #ffffff;
 --sb-pill-hover: rgba(255,255,255,0.08);
 --sb-pill-active: rgba(255,255,255,0.14);

 --sb-radius: 14px;
 --sb-gap: 12px;
 --sb-pad-x: 12px;
 --sb-pad-y: 10px;

}

/* Cards dos portlets */

1. mw-panel .mw-portlet,
2. mw-panel.vector-legacy-sidebar .mw-portlet {

 background: var(--sb-bg-fallback);
 border: 1px solid var(--sb-border);
 border-radius: var(--sb-radius);
 box-shadow: var(--sb-shadow);
 margin: 0 var(--sb-pad-x) var(--sb-gap);
 padding: 0;
 overflow: hidden;

} @supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {

 #mw-panel .mw-portlet,
 #mw-panel.vector-legacy-sidebar .mw-portlet {
   background: var(--sb-bg);
   -webkit-backdrop-filter: blur(10px) saturate(120%);
   backdrop-filter: blur(10px) saturate(120%);
 }

}

/* Logo com respiro */

1. mw-panel #p-logo { margin: 0 var(--sb-pad-x) var(--sb-gap); }

/* Headings sem aquela linha padrão do Vector, com divisor sutil */

1. mw-panel .vector-menu-heading,
2. mw-panel.vector-legacy-sidebar .vector-menu-heading {

 color: var(--sb-heading);
 font-weight: 800;
 letter-spacing: .02em;
 padding: 10px var(--sb-pad-x) 8px;
 margin: 0;
 border: 0 !important;                           /* remove linha do skin */
 box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);/* divisor sutil */

}

/* Acento no topo do card */

1. mw-panel .mw-portlet::before,
2. mw-panel.vector-legacy-sidebar .mw-portlet::before {

 content: "";
 display: block;
 height: 2px;
 background: linear-gradient(90deg, #8D5CFF, #51E1FF 60%, transparent);

}

/* Conteúdo */

1. mw-panel .vector-menu-content,
2. mw-panel.vector-legacy-sidebar .vector-menu-content {

 padding: var(--sb-pad-y) var(--sb-pad-x) calc(var(--sb-pad-y) + 2px);
 color: var(--sb-text);

}

/* Lista e espaçamento */

1. mw-panel .vector-menu-content-list,
2. mw-panel.vector-legacy-sidebar .vector-menu-content-list {

 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 6px;

}

/* ====== Links com especificidade reforçada (vence o Vector) ====== */

1. mw-panel .mw-portlet .vector-menu-content-list a,
2. mw-panel .mw-portlet .vector-menu-content-list a:visited {

 display: block;
 padding: 8px 10px;
 border-radius: 10px;
 line-height: 1.25;
 color: var(--sb-link) !important;     /* garante contraste */
 text-decoration: none;
 transition: background .18s ease, color .18s ease, transform .06s ease;
 word-break: normal;
 overflow-wrap: break-word;            /* quebra só quando precisa */
 hyphens: auto;

}

/* Hover/active */

1. mw-panel .mw-portlet .vector-menu-content-list a:hover {

 background: var(--sb-pill-hover);
 color: var(--sb-link-hover) !important;

}

1. mw-panel .mw-portlet .vector-menu-content-list li.selected > a {

 background: var(--sb-pill-active);
 color: var(--sb-link-hover) !important;
 font-weight: 600;

}

/* Foco acessível */

1. mw-panel .mw-portlet .vector-menu-content-list a:focus-visible {

 outline: 2px solid #9DA2FF;
 outline-offset: 2px;

}

/* Ferramentas um tiquinho mais compactas */

1. p-tb .vector-menu-content-list a { padding: 7px 9px; }

/* Opcional: sidebar “grudado” no scroll */ @media (min-width: 1100px) {

 /* descomenta se teu skin não posiciona #mw-panel de forma absoluta */
 /* #mw-panel { position: sticky; top: 72px; } */

}

/* Caso o bg da wiki seja claríssimo, suba a opacidade do card: */ /* :root { --sb-bg: rgba(15,16,24,0.90); } */

</style>