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. The Anchor/Box - This MUST stay the same size to prevent table jumping */ | ||
.mw-parser-output . | .mw-parser-output .coverSmall { | ||
.mw-parser-output | display: inline-block !important; | ||
width: 60px !important; | |||
height: 80px !important; | |||
vertical-align: middle; | |||
position: relative !important; /* This keeps the 'absolute' image anchored here */ | |||
overflow: visible !important; /* Allow the zoom to be seen */ | |||
} | |||
/* 2. The Image in its default state */ | |||
.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; | ||
transition: transform 0.1s ease-in-out !important; | |||
display: block !important; | display: block !important; | ||
} | } | ||
/* | /* 3. The Hover State - Absolute positioning prevents row-shrinking */ | ||
.mw-parser-output .coverThumb:hover .coverSmall img { | .mw-parser-output .coverThumb:hover .coverSmall img { | ||
position: absolute !important; | position: absolute !important; | ||
top: 0 !important; | top: 0 !important; | ||
left: 0 !important; | left: 0 !important; | ||
width: | |||
/* Zoom size */ | |||
width: 350px !important; | |||
height: auto !important; | height: auto !important; | ||
max-width: none !important; | |||
/* Move it so it doesn't block the cursor */ | |||
transform: translate(70px, -20px) !important; | transform: translate(70px, -20px) !important; | ||
/* | /* Anti-flicker */ | ||
pointer-events: none; | pointer-events: none !important; | ||
z-index: 10000 !important; | z-index: 10000 !important; | ||
| Line 26: | Line 39: | ||
border: 1px solid #888 !important; | border: 1px solid #888 !important; | ||
background: #fff !important; | background: #fff !important; | ||
} | } | ||
/* 4. | /* 4. Table protection */ | ||
.mw-parser-output .wikitable td { | .mw-parser-output .wikitable td { | ||
overflow: visible !important; | overflow: visible !important; | ||
height: 85px !important; /* Forces the row to stay at least this tall */ | |||
} | } | ||
Revision as of 09:55, 29 January 2026
/* 1. The Anchor/Box - This MUST stay the same size to prevent table jumping */
.mw-parser-output .coverSmall {
display: inline-block !important;
width: 60px !important;
height: 80px !important;
vertical-align: middle;
position: relative !important; /* This keeps the 'absolute' image anchored here */
overflow: visible !important; /* Allow the zoom to be seen */
}
/* 2. The Image in its default state */
.mw-parser-output .coverSmall img {
width: 60px !important;
height: 80px !important;
object-fit: contain !important;
transition: transform 0.1s ease-in-out !important;
display: block !important;
}
/* 3. The Hover State - Absolute positioning prevents row-shrinking */
.mw-parser-output .coverThumb:hover .coverSmall img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
/* Zoom size */
width: 350px !important;
height: auto !important;
max-width: none !important;
/* Move it so it doesn't block the cursor */
transform: translate(70px, -20px) !important;
/* Anti-flicker */
pointer-events: none !important;
z-index: 10000 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
border: 1px solid #888 !important;
background: #fff !important;
}
/* 4. Table protection */
.mw-parser-output .wikitable td {
overflow: visible !important;
height: 85px !important; /* Forces the row to stay at least this tall */
}