MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* 1. | /* 1. THE "ENDS OF THE WORLD" PADDING */ | ||
.mw-parser-output .wikitable td, | .mw-parser-output .wikitable td, | ||
.mw-parser-output .wikitable th { | .mw-parser-output .wikitable th { | ||
padding: 10px 15px !important; | padding: 10px 15px !important; /* 15px space from the borders */ | ||
vertical-align: middle !important; | vertical-align: middle !important; | ||
text-align: left !important; | text-align: left !important; | ||
} | } | ||
/* 2. | /* 2. NORMAL VIEW: Shrink the 300px image */ | ||
.mw-parser-output .coverSmall img { | |||
.mw-parser-output .coverSmall | |||
width: 60px !important; | width: 60px !important; | ||
height: 80px !important; | height: 80px !important; | ||
object-fit: contain !important; /* | object-fit: contain !important; /* Shows full image, no cropping */ | ||
display: block !important; | display: block !important; | ||
margin: 0 auto !important; | margin: 0 auto !important; | ||
} | } | ||
/* 3. | /* 3. HOVER VIEW: Magnify and move */ | ||
/* Target the div's image when the outer span is hovered */ | |||
.mw-parser-output .coverThumb:hover .coverSmall img { | .mw-parser-output .coverThumb:hover .coverSmall img { | ||
position: absolute !important; | position: absolute !important; | ||
| Line 42: | Line 26: | ||
max-width: none !important; | max-width: none !important; | ||
/* | /* Moves right to clear the 60px image + padding */ | ||
transform: translate(95px, -20px) !important; | transform: translate(95px, -20px) !important; | ||
| Line 50: | Line 34: | ||
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 CONTAINER */ | |||
.mw-parser-output .coverSmall { | |||
display: inline-block !important; /* Allows it to sit in the table cell */ | |||
width: 60px !important; | |||
height: 80px !important; | |||
position: relative !important; | |||
} | } | ||
Revision as of 10:47, 29 January 2026
/* 1. THE "ENDS OF THE WORLD" PADDING */
.mw-parser-output .wikitable td,
.mw-parser-output .wikitable th {
padding: 10px 15px !important; /* 15px space from the borders */
vertical-align: middle !important;
text-align: left !important;
}
/* 2. NORMAL VIEW: Shrink the 300px image */
.mw-parser-output .coverSmall img {
width: 60px !important;
height: 80px !important;
object-fit: contain !important; /* Shows full image, no cropping */
display: block !important;
margin: 0 auto !important;
}
/* 3. HOVER VIEW: Magnify and move */
/* Target the div's image when the outer span is hovered */
.mw-parser-output .coverThumb:hover .coverSmall img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 350px !important;
height: auto !important;
max-width: none !important;
/* Moves right to clear the 60px image + padding */
transform: translate(95px, -20px) !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 CONTAINER */
.mw-parser-output .coverSmall {
display: inline-block !important; /* Allows it to sit in the table cell */
width: 60px !important;
height: 80px !important;
position: relative !important;
}