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:
/* 1. Container Setup */
/* Ensure the table cell doesn't clip anything */
.wikitable td {
    overflow: visible !important;
}
 
/* The outer container */
.coverThumb {
.coverThumb {
  position: relative;
    position: relative;
  display: inline-block;
    display: inline-block;
    vertical-align: middle;
}
}


/* The wrapper that forces the 60x80 size */
.coverSmall {
.coverSmall {
  width: 60px;
    display: block;
  height: 80px;
    width: 60px;
  display: flex;
    height: 80px;
  align-items: center;
    overflow: visible;  
  justify-content: center;
  overflow: visible; /* Changed to visible to prevent clipping during transition */
}
}


/* 2. Image/Link Transition */
/* Target the image directly using the class from the template */
.coverSmall img,
.mw-parser-output .coverSmall img.zoom-img {
.coverSmall a {
    transition: transform 0.2s ease-in-out !important;
  transition: transform 150ms ease-in-out;
    transform-origin: center center;
  display: block;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
}


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


.coverThumb:hover .coverSmall img {
.coverThumb:hover .coverSmall img.zoom-img {
  position: absolute;
    transform: scale(4) !important; /* Zooms from center */
  top: 0;
    z-index: 10000 !important;
  left: 0;
    border: 1px solid #aaa !important;
  transform: translate(80px, -20px) scale(4); /* Slightly larger and offset */
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
  transform-origin: center center;
    background-color: #fff !important;
 
   
  /* Aesthetics */
    /* Override MediaWiki's hardcoded attributes */
  background-color: #fff;
    max-width: none !important;
  border: 1px solid #999;
    height: auto !important;
  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) */
/* Ensure the link doesn't interfere */
.wikitable td {
.coverSmall a {
  /* This prevents the table cell from cutting off the 'popup' */
    display: block;
  overflow: visible !important;
    overflow: visible;
}
 
/* 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:41, 29 January 2026

/* Ensure the table cell doesn't clip anything */
.wikitable td {
    overflow: visible !important;
}

/* The outer container */
.coverThumb {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* The wrapper that forces the 60x80 size */
.coverSmall {
    display: block;
    width: 60px;
    height: 80px;
    overflow: visible; 
}

/* Target the image directly using the class from the template */
.mw-parser-output .coverSmall img.zoom-img {
    transition: transform 0.2s ease-in-out !important;
    transform-origin: center center;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

/* The Hover Effect */
.coverThumb:hover {
    z-index: 9999 !important;
}

.coverThumb:hover .coverSmall img.zoom-img {
    transform: scale(4) !important; /* Zooms from center */
    z-index: 10000 !important;
    border: 1px solid #aaa !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    background-color: #fff !important;
    
    /* Override MediaWiki's hardcoded attributes */
    max-width: none !important;
    height: auto !important;
}

/* Ensure the link doesn't interfere */
.coverSmall a {
    display: block;
    overflow: visible;
}