Widget:Teste

<style> /* =========================

  TEMA GLA — VECTOR (LEGACY)
  ========================= */

/* ---------- 1) CONTRATO DE LAYOUT (organizado) ---------- */ /* Tuning centralizado: mexa só aqui pra ajustar tudo junto */

root {

 --rail-left: 17rem;   /* largura do #mw-panel */
 --rail-gap: 24px;     /* gap entre sidebar e content */
 --content-max: 1000px;/* largura máx. do conteúdo */

}

/* Largura real do painel lateral */ body.skin-vector #mw-panel { width: var(--rail-left); }

/* A MESMA margem-esquerda em todas as áreas que o Vector posiciona

  com base no sidebar. Isso evita desalinhamento de tabs e footer. */

body.skin-vector #mw-head-base, body.skin-vector #mw-head, body.skin-vector .mw-body, body.skin-vector #footer {

 margin-left: calc(var(--rail-left) + var(--rail-gap)) !important;

}

/* Largura máxima do corpo + respiro */ body.skin-vector .mw-body {

 max-width: var(--content-max);

}

/* Telas menores: encolhe o rail e solta a largura máx. do content */ @media (max-width: 1200px) {

 :root { --rail-left: 14rem; --rail-gap: 18px; --content-max: 900px; }

} @media (max-width: 992px) {

 :root { --rail-left: 12.5rem; --rail-gap: 16px; --content-max: none; }

}

/* (Opcional) Se o teu skin tiver o #mw-panel em posição absoluta e você quiser “grudar” no scroll:

  #mw-panel { position: sticky; top: 72px; }

• /

/* ---------- 2) VISUAL DO SIDEBAR (cards + 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;
 --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 a linha do Vector + 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;
 box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);

}

/* 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 spacing */

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/visited) */

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;
 text-decoration: none;
 transition: background .18s ease, color .18s ease, transform .06s ease;
 overflow-wrap: break-word;
 hyphens: auto;

}

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;

}

/* Ferramentas um pouco mais compactas */

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

/* Acessibilidade foco */

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

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

}

/* Se o wallpaper for muito claro, suba a opacidade:

root { --sb-bg: rgba(15,16,24,0.90); }

• /

</style>