MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* Force the table to allow the breakout */ | ||
.mw-parser-output .wikitable td { | |||
overflow: visible !important; | |||
} | |||
/* The Container */ | |||
.mw-parser-output .coverSmall { | |||
display: block !important; | |||
width: 60px !important; | |||
height: 80px !important; | |||
overflow: hidden !important; /* This is what creates the 'window' */ | |||
position: relative !important; | |||
border: 1px solid #ddd; | |||
} | |||
/* The Image in NORMAL view */ | |||
.mw-parser-output .coverSmall img.zoom-img { | .mw-parser-output .coverSmall img.zoom-img { | ||
width: | width: 60px !important; /* Force it to shrink to the box width */ | ||
height: | height: 80px !important; /* Force it to shrink to the box height */ | ||
object-fit: contain; | object-fit: contain !important; /* Ensure the WHOLE image fits */ | ||
display: block; | display: block !important; | ||
position: static !important; /* Keep it inside the box for now */ | |||
transform: none !important; | |||
} | } | ||
/* | /* The Image on HOVER */ | ||
.coverThumb:hover .coverSmall { | .mw-parser-output .coverThumb:hover .coverSmall { | ||
overflow: visible; | overflow: visible !important; | ||
} | } | ||
.coverThumb:hover .coverSmall img.zoom-img { | .mw-parser-output .coverThumb:hover .coverSmall img.zoom-img { | ||
position: absolute; | position: absolute !important; | ||
top: 0; | top: 0 !important; | ||
left: 0; | left: 0 !important; | ||
width: 300px !important; /* Show it at the full resolution we requested */ | |||
height: auto !important; | height: auto !important; | ||
max-width: none !important; | |||
/* Move it to the right so it doesn't block the text */ | |||
/* Move it to the right */ | |||
transform: translate(70px, -20px) !important; | transform: translate(70px, -20px) !important; | ||
z-index: 10000 !important; | z-index: 10000 !important; | ||
box-shadow: 0 5px | background: #fff !important; | ||
border: 1px solid #888 !important; | |||
box-shadow: 0 5px 25px rgba(0,0,0,0.5) !important; | |||
} | } | ||
Revision as of 09:50, 29 January 2026
/* Force the table to allow the breakout */
.mw-parser-output .wikitable td {
overflow: visible !important;
}
/* The Container */
.mw-parser-output .coverSmall {
display: block !important;
width: 60px !important;
height: 80px !important;
overflow: hidden !important; /* This is what creates the 'window' */
position: relative !important;
border: 1px solid #ddd;
}
/* The Image in NORMAL view */
.mw-parser-output .coverSmall img.zoom-img {
width: 60px !important; /* Force it to shrink to the box width */
height: 80px !important; /* Force it to shrink to the box height */
object-fit: contain !important; /* Ensure the WHOLE image fits */
display: block !important;
position: static !important; /* Keep it inside the box for now */
transform: none !important;
}
/* The Image on HOVER */
.mw-parser-output .coverThumb:hover .coverSmall {
overflow: visible !important;
}
.mw-parser-output .coverThumb:hover .coverSmall img.zoom-img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 300px !important; /* Show it at the full resolution we requested */
height: auto !important;
max-width: none !important;
/* Move it to the right so it doesn't block the text */
transform: translate(70px, -20px) !important;
z-index: 10000 !important;
background: #fff !important;
border: 1px solid #888 !important;
box-shadow: 0 5px 25px rgba(0,0,0,0.5) !important;
}