MediaWiki:Common.css: Difference between revisions

From 3DO World
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
/* Hover cover preview (zoom the existing thumb) */
/* 1. Container Setup */
.coverThumb{
.coverThumb {
   position: relative;
   position: relative;
   display: inline-block;
   display: inline-block;
  z-index: 1;
}
}


.coverSmall{
.coverSmall {
   width: 60px;
   width: 60px;
   height: 80px;
   height: 80px;
  overflow: hidden;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
  overflow: visible; /* Changed to visible to prevent clipping during transition */
}
}


/* smooth zoom */
/* 2. Image/Link Transition */
.coverSmall img{
.coverSmall img,
   transition: transform 120ms ease;
.coverSmall a {
   transform-origin: top left;
   transition: transform 150ms ease-in-out;
   display: block;
}
}


/* allow zoom to escape the box */
/* 3. The Hover Effect */
.coverThumb:hover .coverSmall{
.coverThumb:hover {
  overflow: visible;
   z-index: 9999; /* Higher than any other table row */
   z-index: 99999;
}
}


/* zoom + move to the right like a popup */
.coverThumb:hover .coverSmall img {
.coverThumb:hover .coverSmall img{
  position: absolute;
   transform: translate(70px,-10px) scale(3);
  top: 0;
   background: #fff;
  left: 0;
   border: 1px solid #aaa;
   transform: translate(80px, -20px) scale(4); /* Slightly larger and offset */
   box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  transform-origin: center center;
 
  /* Aesthetics */
   background-color: #fff;
   border: 1px solid #999;
   box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  max-width: none !important; /* Overrides MediaWiki image constraints */
  z-index: 10000;
}
 
/* 4. Table Fix (Crucial for Wikitables) */
.wikitable td {
  /* This prevents the table cell from cutting off the 'popup' */
  overflow: visible !important;
}
 
/* Ensures the row you are hovering over stays on top of the ones below it */
.wikitable tr:hover {
  position: relative;
  z-index: 10;
}
}

Revision as of 09:36, 29 January 2026

/* 1. Container Setup */
.coverThumb {
  position: relative;
  display: inline-block;
}

.coverSmall {
  width: 60px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* Changed to visible to prevent clipping during transition */
}

/* 2. Image/Link Transition */
.coverSmall img, 
.coverSmall a {
  transition: transform 150ms ease-in-out;
  display: block;
}

/* 3. The Hover Effect */
.coverThumb:hover {
  z-index: 9999; /* Higher than any other table row */
}

.coverThumb:hover .coverSmall img {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(80px, -20px) scale(4); /* Slightly larger and offset */
  transform-origin: center center;
  
  /* Aesthetics */
  background-color: #fff;
  border: 1px solid #999;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  max-width: none !important; /* Overrides MediaWiki image constraints */
  z-index: 10000;
}

/* 4. Table Fix (Crucial for Wikitables) */
.wikitable td {
  /* This prevents the table cell from cutting off the 'popup' */
  overflow: visible !important; 
}

/* Ensures the row you are hovering over stays on top of the ones below it */
.wikitable tr:hover {
  position: relative;
  z-index: 10;
}