MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* 1. The | /* 1. Force all table cells in the 'Cover' column to stay 80px tall */ | ||
.wikitable td { | |||
height: 85px !important; | |||
min-height: 85px !important; | |||
max-height: 85px !important; | |||
overflow: visible !important; | |||
vertical-align: middle !important; | |||
padding: 5px !important; | |||
} | |||
/* 2. The Container - This acts as the anchor */ | |||
.mw-parser-output .coverSmall { | .mw-parser-output .coverSmall { | ||
display: | display: block !important; | ||
width: 60px !important; | width: 60px !important; | ||
height: 80px !important; | height: 80px !important; | ||
position: relative !important; | |||
position: relative !important; | margin: 0 auto; | ||
} | } | ||
/* | /* 3. The Image (Normal View) */ | ||
.mw-parser-output .coverSmall img { | .mw-parser-output .coverSmall img { | ||
width: 60px !important; | width: 60px !important; | ||
height: 80px !important; | height: 80px !important; | ||
object-fit: contain !important; | object-fit: contain !important; /* Shows full pamphlet shrunken down */ | ||
display: block !important; | display: block !important; | ||
transition: none !important; /* Removing transition helps stop the flicker */ | |||
} | } | ||
/* | /* 4. The Magnified View (Hover) */ | ||
.mw-parser-output .coverThumb:hover .coverSmall img { | .mw-parser-output .coverThumb:hover .coverSmall img { | ||
position: absolute !important; | position: absolute !important; | ||
top: | top: -10px !important; /* Centers the zoom slightly better */ | ||
left: 0 !important; | left: 0 !important; | ||
/* | /* Magnification Size */ | ||
width: 350px !important; | width: 350px !important; | ||
height: auto !important; | height: auto !important; | ||
max-width: none !important; | max-width: none !important; | ||
/* Move it so it doesn't | /* Move it right so it doesn't hide the name */ | ||
transform: translate(70px, | transform: translate(70px, 0) !important; | ||
/* | /* Critical Fixes */ | ||
pointer-events: none !important; | pointer-events: none !important; /* Cursor 'ignores' the big image */ | ||
z-index: 10000 !important; | |||
/* Aesthetics */ | |||
background: #fff !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; | ||
} | } | ||
/* | /* 5. Ensure the row stays on top while hovering */ | ||
.wikitable tr:hover { | |||
position: relative; | |||
z-index: 999; | |||
} | } | ||
Revision as of 09:57, 29 January 2026
/* 1. Force all table cells in the 'Cover' column to stay 80px tall */
.wikitable td {
height: 85px !important;
min-height: 85px !important;
max-height: 85px !important;
overflow: visible !important;
vertical-align: middle !important;
padding: 5px !important;
}
/* 2. The Container - This acts as the anchor */
.mw-parser-output .coverSmall {
display: block !important;
width: 60px !important;
height: 80px !important;
position: relative !important;
margin: 0 auto;
}
/* 3. The Image (Normal View) */
.mw-parser-output .coverSmall img {
width: 60px !important;
height: 80px !important;
object-fit: contain !important; /* Shows full pamphlet shrunken down */
display: block !important;
transition: none !important; /* Removing transition helps stop the flicker */
}
/* 4. The Magnified View (Hover) */
.mw-parser-output .coverThumb:hover .coverSmall img {
position: absolute !important;
top: -10px !important; /* Centers the zoom slightly better */
left: 0 !important;
/* Magnification Size */
width: 350px !important;
height: auto !important;
max-width: none !important;
/* Move it right so it doesn't hide the name */
transform: translate(70px, 0) !important;
/* Critical Fixes */
pointer-events: none !important; /* Cursor 'ignores' the big image */
z-index: 10000 !important;
/* Aesthetics */
background: #fff !important;
border: 1px solid #888 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
/* 5. Ensure the row stays on top while hovering */
.wikitable tr:hover {
position: relative;
z-index: 999;
}