MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* 1. TABLE | /* 1. TABLE & ROW STABILITY */ | ||
.mw-parser-output .wikitable td { | .mw-parser-output .wikitable td { | ||
height: 85px !important; | height: 85px !important; | ||
padding: 10px 15px !important; /* 15px space from | padding: 10px 15px !important; /* 15px space from borders */ | ||
vertical-align: middle !important; | vertical-align: middle !important; | ||
overflow: visible !important; | overflow: visible !important; /* CRITICAL: Allows the zoom to be seen */ | ||
} | } | ||
| Line 14: | Line 14: | ||
margin: 0 auto; | margin: 0 auto; | ||
position: relative !important; | position: relative !important; | ||
overflow: visible !important; /* Prevents the scrollbar */ | |||
} | } | ||
/* 3. THE SPACER ( | /* 3. THE SPACER (The first image) */ | ||
.mw-parser-output .coverSmall img.spacer-img { | .mw-parser-output .coverSmall img.spacer-img { | ||
width: 60px !important; | width: 60px !important; | ||
| Line 22: | Line 23: | ||
object-fit: contain !important; | object-fit: contain !important; | ||
display: block !important; | display: block !important; | ||
} | } | ||
/* 4. THE ZOOM (Hidden | /* 4. THE ZOOM (The second image - Hidden and Floating) */ | ||
.mw-parser-output .coverSmall img.zoom-img { | .mw-parser-output .coverSmall img.zoom-img { | ||
position: absolute !important; | position: absolute !important; /* Removes it from the 'stack' to fix scrollbar */ | ||
top: 0; | top: 0; | ||
left: 0; | left: 0; | ||
width: 60px !important; | width: 60px !important; | ||
height: 80px !important; | height: 80px !important; | ||
opacity: 0; /* | opacity: 0 !important; /* Invisible until hover */ | ||
pointer-events: none; | pointer-events: none !important; | ||
} | } | ||
/* 5. THE HOVER | /* 5. THE HOVER TRIGGER */ | ||
.mw-parser-output .coverThumb:hover | /* We trigger this when the mouse enters the main span */ | ||
.mw-parser-output .coverThumb:hover .zoom-img { | |||
opacity: 1 !important; | opacity: 1 !important; | ||
width: 350px !important; | width: 350px !important; | ||
| Line 43: | Line 44: | ||
max-width: none !important; | max-width: none !important; | ||
/* | /* Moves it right to clear the thumb and the 15px cell padding */ | ||
transform: translate( | transform: translate(105px, -20px) !important; | ||
z-index: 10000 !important; | z-index: 10000 !important; | ||
Revision as of 11:02, 29 January 2026
/* 1. TABLE & ROW STABILITY */
.mw-parser-output .wikitable td {
height: 85px !important;
padding: 10px 15px !important; /* 15px space from borders */
vertical-align: middle !important;
overflow: visible !important; /* CRITICAL: Allows the zoom to be seen */
}
/* 2. THE CONTAINER */
.mw-parser-output .coverSmall {
display: block !important;
width: 60px !important;
height: 80px !important;
margin: 0 auto;
position: relative !important;
overflow: visible !important; /* Prevents the scrollbar */
}
/* 3. THE SPACER (The first image) */
.mw-parser-output .coverSmall img.spacer-img {
width: 60px !important;
height: 80px !important;
object-fit: contain !important;
display: block !important;
}
/* 4. THE ZOOM (The second image - Hidden and Floating) */
.mw-parser-output .coverSmall img.zoom-img {
position: absolute !important; /* Removes it from the 'stack' to fix scrollbar */
top: 0;
left: 0;
width: 60px !important;
height: 80px !important;
opacity: 0 !important; /* Invisible until hover */
pointer-events: none !important;
}
/* 5. THE HOVER TRIGGER */
/* We trigger this when the mouse enters the main span */
.mw-parser-output .coverThumb:hover .zoom-img {
opacity: 1 !important;
width: 350px !important;
height: auto !important;
max-width: none !important;
/* Moves it right to clear the thumb and the 15px cell padding */
transform: translate(105px, -20px) !important;
z-index: 10000 !important;
background: #fff;
border: 1px solid #888;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}