MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* 1. The Normal State */ | |||
/* 1. The Normal State | |||
.mw-parser-output .coverThumb .coverSmall a img, | .mw-parser-output .coverThumb .coverSmall a img, | ||
.mw-parser-output .coverThumb .coverSmall img { | .mw-parser-output .coverThumb .coverSmall img { | ||
width: 60px !important; | width: 60px !important; | ||
height: 80px !important; | height: 80px !important; | ||
object-fit: contain !important; | object-fit: contain !important; | ||
display: block !important; | display: block !important; | ||
transition: transform | transition: transform 150ms ease-in-out !important; | ||
pointer-events: auto; /* The small image detects the mouse */ | |||
} | } | ||
/* 2. The Hover State | /* 2. The Hover State */ | ||
.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: 300px !important; | width: 300px !important; | ||
height: auto !important; | height: auto !important; | ||
transform: translate(70px, -20px) !important; | |||
/* THE FLICKER FIX: */ | |||
pointer-events: none; /* Mouse 'ignores' the big image so it doesn't trigger un-hover */ | |||
z-index: 10000 !important; | z-index: 10000 !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; | ||
| Line 29: | Line 29: | ||
} | } | ||
/* 3. | /* 3. Force the parent to stay active */ | ||
.mw-parser-output .coverThumb:hover { | |||
cursor: pointer; | |||
} | |||
/* 4. Layout Fixes */ | |||
.mw-parser-output .wikitable td { | .mw-parser-output .wikitable td { | ||
overflow: visible !important; | overflow: visible !important; | ||
Revision as of 09:53, 29 January 2026
/* 1. The Normal State */
.mw-parser-output .coverThumb .coverSmall a img,
.mw-parser-output .coverThumb .coverSmall img {
width: 60px !important;
height: 80px !important;
object-fit: contain !important;
display: block !important;
transition: transform 150ms ease-in-out !important;
pointer-events: auto; /* The small image detects the mouse */
}
/* 2. The Hover State */
.mw-parser-output .coverThumb:hover .coverSmall img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 300px !important;
height: auto !important;
transform: translate(70px, -20px) !important;
/* THE FLICKER FIX: */
pointer-events: none; /* Mouse 'ignores' the big image so it doesn't trigger un-hover */
z-index: 10000 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
border: 1px solid #888 !important;
background: #fff !important;
max-width: none !important;
}
/* 3. Force the parent to stay active */
.mw-parser-output .coverThumb:hover {
cursor: pointer;
}
/* 4. Layout Fixes */
.mw-parser-output .wikitable td {
overflow: visible !important;
}
.mw-parser-output .coverThumb:hover .coverSmall {
overflow: visible !important;
}