MediaWiki:Common.css: Difference between revisions

/* CSS placed here will be applied to all skins */
/* --- Sticky Footer for Timeless Skin --- */

/* Make the content's direct wrapper a flex container that's at least as tall as the screen */
#mw-content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Allow the main content area to grow and fill available space */
#content {
    flex: 1 0 auto;
}


/* --- Gallery Item Hover Effect --- */

/* Target each individual box within the gallery */
.gallerybox {
  /* This makes the animation smooth. It will take 0.2 seconds to transition the transform property. */
  transition: transform 0.2s ease-in-out;
}

/* This is the magic: when you hover over a gallery box with your mouse... */
.gallerybox:hover {
  /* ...it will scale up to 110% of its original size. */
  transform: scale(1.05);

  /* This is also important. It brings the hovered item to the front layer,
     so it doesn't get awkwardly covered by the items next to it. */
  z-index: 10;
}


/* --- Make the entire gallery box clickable --- */

/* First, establish the gallery box as a positioning container */
.gallerybox {
  position: relative;
}

/* Now, find the link inside the thumbnail and create a pseudo-element.
  This pseudo-element is an invisible layer that we will stretch.
*/
.gallerybox .thumb a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}