MediaWiki:Vector-2022.css: mudanças entre as edições

De Grimopedia
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
/* Ajustes de cabeçalho Vector 2022 */
/***** LATERAL (Vector 2022) – cartão escuro como no site de referência *****/
.skin-vector-2022 .vector-header .mw-logo a { display: flex; align-items: center; gap: 8px; }
body.skin-vector-2022 .vector-sidebar { padding: 12px; }
.skin-vector-2022 .mw-logo-icon { width: 28px; height: 28px; }  /* ícone à esquerda do wordmark */
.skin-vector-2022 .mw-logo-wordmark { height: 28px; }            /* altura do wordmark */
.skin-vector-2022 .vector-header { padding-top: 6px; padding-bottom: 6px; }


/* Esconde título e barra do topo só na Página principal */
/* Cada “portal” do painel lateral */
.page-Página_principal .mw-first-heading,
body.skin-vector-2022 .vector-sidebar .vector-menu {
.page-Página_principal .vector-page-titlebar { display:none; }
   background: #1c2c36;
 
   border: 1px solid rgba(255,255,255,.06);
/* Dá um respiro no topo do conteúdo quando o título some */
.page-Página_principal .mw-body,
.page-Página_principal .vector-body { padding-top: 8px; }
/* Cartão escuro no sidebar (Vector 2022) */
.skin-vector-2022 .vector-sidebar-container { background: transparent; }
.skin-vector-2022 .vector-sidebar { padding: 8px; }
.skin-vector-2022 .vector-menu-portal {
   background: #243543;         /* azul bem escuro */
   border: 1px solid #2e4a5a;
   border-radius: 14px;
   border-radius: 14px;
   box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
   box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
   margin: 10px 0;
   margin: 14px 8px;
   padding: 10px 12px;
   overflow: hidden;
}
}
.skin-vector-2022 .vector-menu-portal .vector-menu-heading {
 
   color: #a8d0e6;
/* Cabeçalho do portal */
body.skin-vector-2022 .vector-sidebar .vector-menu-heading {
  background: linear-gradient(180deg, #223642, #1d2e38);
   color: #d7ecf6;
  font-weight: 700;
  letter-spacing: .06em;
   text-transform: uppercase;
   text-transform: uppercase;
   letter-spacing: .06em;
   padding: 12px 14px;
  font-weight: 700;
   border-bottom: 1px solid rgba(255,255,255,.06);
   border-bottom: 1px solid rgba(168,208,230,.25);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
}
.skin-vector-2022 .vector-menu-portal .vector-menu-content-list li a {
 
   background: #2a4252;
/* Lista e itens */
   border: 1px solid #35566a;
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list { padding: 8px 10px 10px; }
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list li { margin: 6px 0; }
 
/* Links */
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list a {
   display: block;
   padding: 10px 12px;
   border-radius: 10px;
   border-radius: 10px;
  padding: 8px 10px;
   color: #e6f4fb;
  margin: 6px 0;
  display: block;
   color: #e8f1f6 !important;
   text-decoration: none !important;
   text-decoration: none !important;
   transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
   transition: all .2s ease;
}
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list a:hover {
  color: #a8d0e6;
  border-color: rgba(168,208,230,.45);
  background: rgba(168,208,230,.08);
  transform: translateX(2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list a:focus {
  outline: 2px solid #6ba3b8;
  outline-offset: 2px;
}
}
.skin-vector-2022 .vector-menu-portal .vector-menu-content-list li a:hover {
 
   transform: translateX(3px);
/* Card do logo (opcional) */
body.skin-vector-2022 .vector-sidebar .mw-logo {
  background: linear-gradient(180deg, #223642, #1d2e38);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  margin: 10px 8px 6px;
  padding: 10px 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
 
/***** BUSCA – arredondada com leve glow *****/
body.skin-vector-2022 .vector-search-box .cdx-text-input__input {
  border-radius: 999px !important;
  border: 1px solid rgba(168,208,230,.35);
   background: rgba(255,255,255,.9);
  transition: box-shadow .2s, border-color .2s;
}
body.skin-vector-2022 .vector-search-box .cdx-text-input__input:focus {
   border-color: #6ba3b8;
   border-color: #6ba3b8;
   box-shadow: 0 4px 12px rgba(107,163,184,.2);
   box-shadow: 0 0 0 3px rgba(107,163,184,.25);
   color: #ffffff !important;
}
 
/***** CONTEÚDO – moldura clara arredondada *****/
body.skin-vector-2022 .mw-page-container { background: #f6fbfe; }
body.skin-vector-2022 .mw-content-container .mw-content {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
   border: 1px solid #e7edf1;
}
}

Edição das 09h32min de 16 de outubro de 2025

/***** LATERAL (Vector 2022) – cartão escuro como no site de referência *****/
body.skin-vector-2022 .vector-sidebar { padding: 12px; }

/* Cada “portal” do painel lateral */
body.skin-vector-2022 .vector-sidebar .vector-menu {
  background: #1c2c36;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  margin: 14px 8px;
  overflow: hidden;
}

/* Cabeçalho do portal */
body.skin-vector-2022 .vector-sidebar .vector-menu-heading {
  background: linear-gradient(180deg, #223642, #1d2e38);
  color: #d7ecf6;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Lista e itens */
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list { padding: 8px 10px 10px; }
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list li { margin: 6px 0; }

/* Links */
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #e6f4fb;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  transition: all .2s ease;
}
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list a:hover {
  color: #a8d0e6;
  border-color: rgba(168,208,230,.45);
  background: rgba(168,208,230,.08);
  transform: translateX(2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
body.skin-vector-2022 .vector-sidebar .vector-menu-content-list a:focus {
  outline: 2px solid #6ba3b8;
  outline-offset: 2px;
}

/* Card do logo (opcional) */
body.skin-vector-2022 .vector-sidebar .mw-logo {
  background: linear-gradient(180deg, #223642, #1d2e38);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  margin: 10px 8px 6px;
  padding: 10px 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}

/***** BUSCA – arredondada com leve glow *****/
body.skin-vector-2022 .vector-search-box .cdx-text-input__input {
  border-radius: 999px !important;
  border: 1px solid rgba(168,208,230,.35);
  background: rgba(255,255,255,.9);
  transition: box-shadow .2s, border-color .2s;
}
body.skin-vector-2022 .vector-search-box .cdx-text-input__input:focus {
  border-color: #6ba3b8;
  box-shadow: 0 0 0 3px rgba(107,163,184,.25);
}

/***** CONTEÚDO – moldura clara arredondada *****/
body.skin-vector-2022 .mw-page-container { background: #f6fbfe; }
body.skin-vector-2022 .mw-content-container .mw-content {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  border: 1px solid #e7edf1;
}