Widget:Teste

<style> /* === Sidebar "Vampire Survivors vibe" ===================================== */ /* Tokens (mexe aqui pra ajustar o tema) */

root {

 --sb-bg: rgba(15, 16, 24, 0.78);     /* vidro/fumaça sobre bg claro/imagético */
 --sb-bg-fallback: #161823;           /* fallback sólido se o blur não colar */
 --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: #DDE1FF;
 --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;

}

/* Empacota cada portlet como "card" */

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; /* a gente controla o padding dos filhos */
 overflow: hidden; /* arredondado real */

} @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 dá um respiro */

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

/* Cabeçalhos */

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;
 text-transform: none;
 padding: 10px var(--sb-pad-x);
 margin: 0;
 position: relative;

}

/* filete/acento no topo do card (sutil e gamer) */

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 do portlet */

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);

}

/* Zera estilos default e cria "pills" nos links */

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;

}

1. mw-panel .vector-menu-content-list .mw-list-item a,
2. mw-panel .vector-menu-content-list li a,
3. mw-panel.vector-legacy-sidebar .vector-menu-content-list .mw-list-item a,
4. mw-panel.vector-legacy-sidebar .vector-menu-content-list li a {

 display: block;
 padding: 8px 10px;
 border-radius: 10px;
 line-height: 1.25;
 color: var(--sb-link);
 text-decoration: none;
 transition: background .18s ease, color .18s ease, transform .06s ease;

}

/* Hover/active/selecionado = pill destacada */

1. mw-panel .vector-menu-content-list li a:hover,
2. mw-panel.vector-legacy-sidebar .vector-menu-content-list li a:hover {

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

}

1. mw-panel .vector-menu-content-list li.selected > a,
2. mw-panel.vector-legacy-sidebar .vector-menu-content-list li.selected > a {

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

}

/* Acessibilidade: foco visível sem ficar brega */

1. mw-panel .vector-menu-content-list li a:focus-visible,
2. mw-panel.vector-legacy-sidebar .vector-menu-content-list li a:focus-visible {

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

}

/* Compacta a densidade do "Ferramentas" que costuma ser longuinho */

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

/* Opcional: deixa o sidebar "grudado" enquanto a página rola (bom em telas largas) */ @media (min-width: 1100px) {

 /* só habilite se o seu #mw-panel não for absolutamente posicionado pelo skin */
 /* #mw-panel { position: sticky; top: 72px; } */

}

/* Se o seu background é MUITO claro e quiser mais contraste:

  descomenta a linha abaixo pra subir a opacidade dos cards. */
/* :root { --sb-bg: rgba(15,16,24,0.88); } */

</style>