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 & TEXT SPACING FIX */ | ||
.mw-parser-output .wikitable { | .mw-parser-output .wikitable { | ||
width: 100% !important; | width: 100% !important; | ||
table-layout: auto !important; | table-layout: auto !important; | ||
} | } | ||
.mw-parser-output .wikitable td, | .mw-parser-output .wikitable td, | ||
.mw-parser-output .wikitable th { | .mw-parser-output .wikitable th { | ||
padding: 12px 15px !important; /* | padding: 12px 15px !important; /* Fixes text hitting edges */ | ||
vertical-align: middle !important; | vertical-align: middle !important; | ||
overflow: visible !important; | overflow: visible !important; | ||
} | } | ||
/* 2. | /* 2. THE IMAGE SIZE FIX (Normal View) */ | ||
.mw-parser-output . | /* We target the image inside the span and the link to be safe */ | ||
.mw-parser-output .coverSmall img, | |||
.mw-parser-output .coverSmall a img { | |||
width: 60px !important; /* Forces 300px down to 60px */ | |||
height: 80px !important; /* Forces 300px down to 80px */ | |||
object-fit: contain !important; | |||
.mw-parser-output .coverSmall { | |||
width: 60px !important; | |||
height: 80px !important; | |||
/* | |||
object-fit: contain !important; | |||
display: block !important; | display: block !important; | ||
margin: 0 auto !important; | |||
} | } | ||
/* | /* 3. THE HOVER FIX (Zoomed View) */ | ||
.mw-parser-output .coverThumb:hover .coverSmall | .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: 400px !important; /* | width: 400px !important; /* Now it uses the full 300px+ quality */ | ||
height: auto !important; | height: auto !important; | ||
max-width: none !important; | max-width: none !important; | ||
/* | /* Pushes it right to clear your new text padding */ | ||
transform: translate( | transform: translate(110px, -20px) !important; | ||
z-index: 10000 !important; | z-index: 10000 !important; | ||
pointer-events: none !important; | pointer-events: none !important; | ||
background: #fff; | background: #fff !important; | ||
border: 1px solid #888; | border: 1px solid #888 !important; | ||
box-shadow: 0 10px 30px rgba(0,0,0,0.5); | box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; | ||
} | |||
/* 4. Ensure the container doesn't crop the zoom */ | |||
.mw-parser-output .coverSmall { | |||
display: block !important; | |||
width: 60px !important; | |||
height: 80px !important; | |||
position: relative !important; | |||
overflow: visible !important; | |||
} | } | ||
Revision as of 10:30, 29 January 2026
/* 1. TABLE & TEXT SPACING FIX */
.mw-parser-output .wikitable {
width: 100% !important;
table-layout: auto !important;
}
.mw-parser-output .wikitable td,
.mw-parser-output .wikitable th {
padding: 12px 15px !important; /* Fixes text hitting edges */
vertical-align: middle !important;
overflow: visible !important;
}
/* 2. THE IMAGE SIZE FIX (Normal View) */
/* We target the image inside the span and the link to be safe */
.mw-parser-output .coverSmall img,
.mw-parser-output .coverSmall a img {
width: 60px !important; /* Forces 300px down to 60px */
height: 80px !important; /* Forces 300px down to 80px */
object-fit: contain !important;
display: block !important;
margin: 0 auto !important;
}
/* 3. THE HOVER FIX (Zoomed View) */
.mw-parser-output .coverThumb:hover .coverSmall img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 400px !important; /* Now it uses the full 300px+ quality */
height: auto !important;
max-width: none !important;
/* Pushes it right to clear your new text padding */
transform: translate(110px, -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. Ensure the container doesn't crop the zoom */
.mw-parser-output .coverSmall {
display: block !important;
width: 60px !important;
height: 80px !important;
position: relative !important;
overflow: visible !important;
}