MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* 1. | /* 1. TABLE PADDING (The space from the 'ends of the world') */ | ||
.mw-parser-output .wikitable td | .mw-parser-output .wikitable td { | ||
padding: 10px 15px !important; /* Creates the 15px gap from borders */ | |||
padding: 10px 15px !important; | |||
vertical-align: middle !important; | vertical-align: middle !important; | ||
overflow: visible !important; | |||
} | } | ||
/* 2. NORMAL VIEW: | /* 2. NORMAL VIEW: Force the 300px image to shrink to 60px */ | ||
/* This | /* This targets the 300px width attribute directly */ | ||
.mw-parser-output | .mw-parser-output .coverThumb img, | ||
.mw-parser-output | .mw-parser-output .coverThumb a img, | ||
.mw-parser-output img[width="300"] { | |||
width: 60px !important; | width: 60px !important; | ||
height: 80px !important; | height: 80px !important; | ||
object-fit: contain !important; /* | object-fit: contain !important; /* THE FIX: Shows full image, not just top-left */ | ||
display: block !important; | display: block !important; | ||
margin: 0 auto !important; | margin: 0 auto !important; | ||
| Line 19: | Line 19: | ||
} | } | ||
/* 3. THE | /* 3. THE HOVER ZOOM (Magnified) */ | ||
.mw-parser-output . | .mw-parser-output .coverThumb:hover img, | ||
.mw-parser-output .coverThumb:hover a img { | |||
.mw-parser-output .coverThumb:hover | |||
position: absolute !important; | position: absolute !important; | ||
top: | top: -20px !important; | ||
left: 0 !important; | left: 0 !important; | ||
width: 350px !important; | width: 350px !important; /* Quality zoom */ | ||
height: auto !important; | height: auto !important; | ||
max-width: none !important; | max-width: none !important; | ||
/* | /* Move right to clear the thumb and the 15px padding */ | ||
transform: translate( | transform: translate(95px, 0) !important; | ||
z-index: 10000 !important; | z-index: 10000 !important; | ||
| Line 45: | Line 37: | ||
border: 1px solid #888 !important; | border: 1px solid #888 !important; | ||
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; | box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; | ||
} | |||
/* 4. THE ANCHOR */ | |||
.mw-parser-output .coverThumb { | |||
display: inline-block !important; | |||
width: 60px !important; | |||
height: 80px !important; | |||
position: relative !important; | |||
} | } | ||
Revision as of 10:52, 29 January 2026
/* 1. TABLE PADDING (The space from the 'ends of the world') */
.mw-parser-output .wikitable td {
padding: 10px 15px !important; /* Creates the 15px gap from borders */
vertical-align: middle !important;
overflow: visible !important;
}
/* 2. NORMAL VIEW: Force the 300px image to shrink to 60px */
/* This targets the 300px width attribute directly */
.mw-parser-output .coverThumb img,
.mw-parser-output .coverThumb a img,
.mw-parser-output img[width="300"] {
width: 60px !important;
height: 80px !important;
object-fit: contain !important; /* THE FIX: Shows full image, not just top-left */
display: block !important;
margin: 0 auto !important;
position: static !important;
}
/* 3. THE HOVER ZOOM (Magnified) */
.mw-parser-output .coverThumb:hover img,
.mw-parser-output .coverThumb:hover a img {
position: absolute !important;
top: -20px !important;
left: 0 !important;
width: 350px !important; /* Quality zoom */
height: auto !important;
max-width: none !important;
/* Move right to clear the thumb and the 15px padding */
transform: translate(95px, 0) !important;
z-index: 10000 !important;
pointer-events: none !important;
background: #fff !important;
border: 1px solid #888 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
/* 4. THE ANCHOR */
.mw-parser-output .coverThumb {
display: inline-block !important;
width: 60px !important;
height: 80px !important;
position: relative !important;
}