MediaWiki:Common.css: mudanças entre as edições

De Sweet
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
/** o código CSS colocado aqui será aplicado a todos os temas */
/** =========================================================
/* Zoom de imagem ao passar o mouse */
*  Estilos globais (aplicam em todos os temas)
*  =======================================================*/
 
/* Zoom suave para qualquer imagem dentro de .btn-zoom */
.btn-zoom img {
.btn-zoom img {
   transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
   transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
   transform-origin: center center;
   transform-origin: center center;
}
}
.btn-zoom:hover img {
.btn-zoom:hover img {
   transform: scale(1.08);
   transform: scale(1.08);
Linha 11: Linha 13:
   filter: saturate(1.05);
   filter: saturate(1.05);
}
}
/* Remove bordas e fundo de imagens sobrepostas */
 
.overlay-btn img {
/* ===== Botão sobreposto (imagem sobre imagem) ===== */
   border: none !important;
 
   background: transparent !important;
/* Container opcional (caso queira usar em vez de inline style) */
  box-shadow: none !important;
.overlay-wrapper {
   position: relative;
   display: inline-block;
}
}
/* Botão sobreposto sem borda e com zoom */
 
/* Reset visual da imagem-botão + mesmo zoom do .btn-zoom */
.overlay-btn img {
.overlay-btn img {
  display: block;
   border: none !important;
   border: none !important;
   background: transparent !important;
   background: transparent !important;
Linha 24: Linha 30:
   transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
   transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
   transform-origin: center center;
   transform-origin: center center;
  cursor: pointer;
}
}
.overlay-btn:hover img {
.overlay-btn:hover img {
   transform: scale(1.08);
   transform: scale(1.08);
   box-shadow: 0 6px 18px rgba(0,0,0,.25);
   box-shadow: 0 6px 18px rgba(0,0,0,.25);
   filter: saturate(1.05);
   filter: saturate(1.05);
}
/* Efeito de “pressionado” ao clicar */
.overlay-btn:active img {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
}

Edição das 13h57min de 7 de setembro de 2025

/** =========================================================
 *  Estilos globais (aplicam em todos os temas)
 *  =======================================================*/

/* Zoom suave para qualquer imagem dentro de .btn-zoom */
.btn-zoom img {
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  transform-origin: center center;
}
.btn-zoom:hover img {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  filter: saturate(1.05);
}

/* ===== Botão sobreposto (imagem sobre imagem) ===== */

/* Container opcional (caso queira usar em vez de inline style) */
.overlay-wrapper {
  position: relative;
  display: inline-block;
}

/* Reset visual da imagem-botão + mesmo zoom do .btn-zoom */
.overlay-btn img {
  display: block;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  transform-origin: center center;
  cursor: pointer;
}
.overlay-btn:hover img {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  filter: saturate(1.05);
}
/* Efeito de “pressionado” ao clicar */
.overlay-btn:active img {
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}