MediaWiki:Common.css: Difference between revisions

From Ironclad Wiki
Jump to navigation Jump to search
Created page with "→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%;..."
 
Tag: Replaced
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* 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; }

Latest revision as of 22:24, 11 August 2025

/* CSS placed here will be applied to all skins */
Retrieved from "https://wiki.ironcladnetwork.us/index.php?title=MediaWiki:Common.css&oldid=32"