MediaWiki:Common.css: Difference between revisions

Revision as of 20:45, 11 August 2025

/* CSS placed here will be applied to all skins */
 /* Ironclad pressable buttons */
.ic-btn {
  --press-depth: 8px;     /* how far it moves down on press */
  --squash: 0.94;         /* vertical squish on press */
  position: relative;
  display: inline-block;
  border-radius: 10px;    /* match your tile corners */
  transition: transform 120ms ease, filter 120ms ease;
}

/* Make the image fill the button area cleanly */
.ic-btn > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  pointer-events: none; /* so clicks hit the anchor */
}

/* Bottom “shadow bar” that can slide down out of view */
.ic-btn::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  height: 12px;
  bottom: -8px;                 /* sits just below the tile */
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  filter: blur(0.5px);
  transition: transform 120ms ease, opacity 120ms ease;
}

/* Press state: move down, squish, and slide the shadow away */
.ic-btn:active,
.ic-btn.is-pressed {
  transform: translateY(var(--press-depth)) scaleY(var(--squash));
  transform-origin: top center; /* makes the top “scrunch” */
}

.ic-btn:active::after,
.ic-btn.is-pressed::after {
  transform: translateY(18px);  /* slides shadow out of view */
  opacity: 0;
}

/* Optional: hover lift for mouse users */
.ic-btn:hover { transform: translateY(-1px); }
.ic-btn:hover::after { opacity: 0.55; }

.ic-btn {
  position: relative;
  display: inline-block;
  border-radius: 10px;
  transition: transform 120ms ease, filter 120ms ease;
}

.ic-btn a,
.ic-btn img {
  display: block;
  border-radius: 10px;
}

.ic-btn img {
  width: 100%;
  height: auto;
  pointer-events: none; /* clicks go to the link */
}

/* keep your ::after shadow + pressed states as before */