MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* 1. | /* 1. TABLE PADDING & STABILITY */ | ||
.mw-parser-output .wikitable td { | .mw-parser-output .wikitable td { | ||
height: 85px !important; | height: 85px !important; | ||
padding: 10px 15px !important; /* | padding: 10px 15px !important; /* 15px space from first/last letters */ | ||
vertical-align: middle !important; | vertical-align: middle !important; | ||
overflow: visible !important; | overflow: visible !important; | ||
} | } | ||
/* 2. | /* 2. THE CONTAINER */ | ||
.mw-parser-output .coverSmall { | .mw-parser-output .coverSmall { | ||
display: block !important; | display: block !important; | ||
| Line 16: | Line 16: | ||
} | } | ||
/* 3. | /* 3. THE SPACER (Always visible, holds the row open) */ | ||
.mw-parser-output .coverSmall img.spacer-img { | .mw-parser-output .coverSmall img.spacer-img { | ||
width: 60px !important; | width: 60px !important; | ||
height: 80px !important; | height: 80px !important; | ||
object-fit: | object-fit: contain !important; | ||
display: block !important; | display: block !important; | ||
visibility: visible !important; | visibility: visible !important; | ||
} | } | ||
/* 4. | /* 4. THE ZOOM (Hidden by default) */ | ||
.mw-parser-output .coverSmall img.zoom-img { | .mw-parser-output .coverSmall img.zoom-img { | ||
position: absolute !important; | position: absolute !important; | ||
top: 0; | top: 0; | ||
left: 0; | left: 0; | ||
opacity: 0; /* | width: 60px !important; | ||
height: 80px !important; | |||
opacity: 0; /* Makes it invisible */ | |||
pointer-events: none; /* Stops it from blocking clicks on the spacer */ | |||
} | } | ||
/* 5. | /* 5. THE HOVER (Show the zoom) */ | ||
.mw-parser-output .coverThumb:hover .coverSmall img.zoom-img { | .mw-parser-output .coverThumb:hover .coverSmall img.zoom-img { | ||
opacity: 1 !important; | opacity: 1 !important; | ||
| Line 42: | Line 42: | ||
height: auto !important; | height: auto !important; | ||
max-width: none !important; | max-width: none !important; | ||
/* | /* Pushes it right to clear the thumb and table padding */ | ||
transform: translate(100px, -20px) !important; | transform: translate(100px, -20px) !important; | ||
z-index: 10000 !important; | z-index: 10000 !important; | ||
background: #fff; | background: #fff; | ||
border: 1px solid #888; | border: 1px solid #888; | ||
box-shadow: 0 10px 30px rgba(0,0,0,0.5); | box-shadow: 0 10px 30px rgba(0,0,0,0.5); | ||
} | } | ||
Revision as of 11:01, 29 January 2026
/* 1. TABLE PADDING & STABILITY */
.mw-parser-output .wikitable td {
height: 85px !important;
padding: 10px 15px !important; /* 15px space from first/last letters */
vertical-align: middle !important;
overflow: visible !important;
}
/* 2. THE CONTAINER */
.mw-parser-output .coverSmall {
display: block !important;
width: 60px !important;
height: 80px !important;
margin: 0 auto;
position: relative !important;
}
/* 3. THE SPACER (Always visible, holds the row open) */
.mw-parser-output .coverSmall img.spacer-img {
width: 60px !important;
height: 80px !important;
object-fit: contain !important;
display: block !important;
visibility: visible !important;
}
/* 4. THE ZOOM (Hidden by default) */
.mw-parser-output .coverSmall img.zoom-img {
position: absolute !important;
top: 0;
left: 0;
width: 60px !important;
height: 80px !important;
opacity: 0; /* Makes it invisible */
pointer-events: none; /* Stops it from blocking clicks on the spacer */
}
/* 5. THE HOVER (Show the zoom) */
.mw-parser-output .coverThumb:hover .coverSmall img.zoom-img {
opacity: 1 !important;
width: 350px !important;
height: auto !important;
max-width: none !important;
/* Pushes it right to clear the thumb and table padding */
transform: translate(100px, -20px) !important;
z-index: 10000 !important;
background: #fff;
border: 1px solid #888;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}