MediaWiki:Common.css: Difference between revisions

From Ironclad Wiki
Jump to navigation Jump to search
← Older editNewer edit →
No edit summary
No edit summary
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 */
/* Ironclad pressable buttons */
.ic-btn {
.ic-btn {
  --press-depth: 8px;    /* how far it moves down on press */
  --squash: 0.94;        /* vertical squish on press */
  position: relative;
   display: inline-block;
   display: inline-block;
   border-radius: 10px;    /* match your tile corners */
  overflow: hidden;      /* clips the bottom edge when pressed */
   transition: transform 120ms ease, filter 120ms ease;
   border-radius: 10px;    /* match button art corners */
   line-height: 0;         /* removes unwanted gap around inline images */
}
}


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


/* Bottom “shadow bar” that can slide down out of view */
.ic-btn img {
.ic-btn::after {
   width: 100%;
   content: "";
   height: auto;
  position: absolute;
   pointer-events: none; /* clicks go to the link, not the image */
  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 */
/* Animation target is the link itself */
.ic-btn:active,
.ic-btn > a {
.ic-btn.is-pressed {
   transition: transform 120ms ease;
   transform: translateY(var(--press-depth)) scaleY(var(--squash));
   transform-origin: top center;
   transform-origin: top center; /* makes the top “scrunch” */
}
}


.ic-btn:active::after,
/* Pressed state — moves down and squashes slightly from the top */
.ic-btn.is-pressed::after {
.ic-btn:active > a,
   transform: translateY(18px);  /* slides shadow out of view */
.ic-btn.is-pressed > a {
  opacity: 0;
   transform: translateY(8px) scaleY(0.94);
}
}


/* Optional: hover lift for mouse users */
/* No hover effect at all */
.ic-btn:hover { transform: translateY(-1px); }
.ic-btn:hover,
.ic-btn:hover::after { opacity: 0.55; }
.ic-btn:hover > a {
 
   /* intentionally empty to prevent hover animations */
.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 */

Revision as of 21:20, 11 August 2025

/* CSS placed here will be applied to all skins */
/* Ironclad pressable buttons */
.ic-btn {
  display: inline-block;
  overflow: hidden;       /* clips the bottom edge when pressed */
  border-radius: 10px;    /* match button art corners */
  line-height: 0;         /* removes unwanted gap around inline images */
}

/* Link and image inside the button */
.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, not the image */
}

/* Animation target is the link itself */
.ic-btn > a {
  transition: transform 120ms ease;
  transform-origin: top center;
}

/* Pressed state — moves down and squashes slightly from the top */
.ic-btn:active > a,
.ic-btn.is-pressed > a {
  transform: translateY(8px) scaleY(0.94);
}

/* No hover effect at all */
.ic-btn:hover,
.ic-btn:hover > a {
  /* intentionally empty to prevent hover animations */
}
Retrieved from "https://wiki.ironcladnetwork.us/index.php?title=MediaWiki:Common.css&oldid=27"