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

De Sweet
Criou página com '* o código CSS colocado aqui será aplicado a todos os temas: Zoom de imagem ao passar o mouse: .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); }'
 
Sem resumo de edição
 
(3 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
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 {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  filter: saturate(1.05);
}
}


.btn-zoom:hover img {
/* ===== 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);
   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);
}
/* Wrapper da sobreposição */
.overlay-wrapper {
  position: relative;
  display: inline-block;
}
/* Posição do botão sobre a arte */
.overlay-wrapper .overlay-btn {
  position: absolute;
  left: 50%;
  bottom: 22px;          /* ajuste fino à vontade */
  transform: translateX(-50%);
}
/* Remove qualquer fundo/borda/padding que o MediaWiki aplique */
.overlay-wrapper .overlay-btn a.image,
.overlay-wrapper .overlay-btn img {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
}

Edição atual tal como às 14h04min 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);
}
/* Wrapper da sobreposição */
.overlay-wrapper {
  position: relative;
  display: inline-block;
}

/* Posição do botão sobre a arte */
.overlay-wrapper .overlay-btn {
  position: absolute;
  left: 50%;
  bottom: 22px;           /* ajuste fino à vontade */
  transform: translateX(-50%);
}

/* Remove qualquer fundo/borda/padding que o MediaWiki aplique */
.overlay-wrapper .overlay-btn a.image,
.overlay-wrapper .overlay-btn img {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}