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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
Etiqueta: Revertido
m (Limpou toda a página)
Etiquetas: Reversão manual anulando
 
(2 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<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" */
#mw-panel .mw-portlet,
#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 */
#mw-panel #p-logo { margin: 0 var(--sb-pad-x) var(--sb-gap); }
/* Cabeçalhos */
#mw-panel .vector-menu-heading,
#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) */
#mw-panel .mw-portlet::before,
#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 */
#mw-panel .vector-menu-content,
#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 */
#mw-panel .vector-menu-content-list,
#mw-panel.vector-legacy-sidebar .vector-menu-content-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#mw-panel .vector-menu-content-list .mw-list-item a,
#mw-panel .vector-menu-content-list li a,
#mw-panel.vector-legacy-sidebar .vector-menu-content-list .mw-list-item a,
#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 */
#mw-panel .vector-menu-content-list li a:hover,
#mw-panel.vector-legacy-sidebar .vector-menu-content-list li a:hover {
  background: var(--sb-pill-hover);
  color: var(--sb-link-hover);
}
#mw-panel .vector-menu-content-list li.selected > a,
#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 */
#mw-panel .vector-menu-content-list li a:focus-visible,
#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 */
#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>

Edição atual tal como às 19h10min de 12 de setembro de 2025

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Teste&oldid=39086”