MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
.mw-parser-output .cover-preview .cover-large { | /* Container - size to small thumb only */ | ||
.mw-parser-output .cover-preview { | |||
position: relative !important; | |||
display: inline-block !important; | |||
width: 80px !important; | |||
height: auto !important; | |||
line-height: 1 !important; | |||
margin: 0 !important; | |||
} | |||
/* Small thumb - always visible initially */ | |||
.mw-parser-output .cover-preview .cover-small, | |||
.mw-parser-output .cover-preview img[style*="width: 80"] { /* targets small thumb by size */ | |||
display: block !important; | |||
margin: 0 auto !important; | |||
width: 80px !important; | |||
height: auto !important; | |||
opacity: 1 !important; | |||
visibility: visible !important; | |||
} | |||
/* Large preview - hidden by default, absolute positioned */ | |||
.mw-parser-output .cover-preview .cover-large, | |||
.mw-parser-output .cover-preview .cover-large img { | |||
position: absolute !important; | position: absolute !important; | ||
top: - | top: -30px !important; /* nudge up more if needed */ | ||
left: 90px !important; | left: 90px !important; /* adjust right nudge for your table */ | ||
z-index: | z-index: 999 !important; | ||
opacity: 0 !important; | opacity: 0 !important; | ||
visibility: hidden !important; | visibility: hidden !important; | ||
pointer-events: none !important; | pointer-events: none !important; | ||
transition: opacity 0.25s ease !important; | transition: opacity 0.25s ease !important; | ||
background: #fff; | background: #fff !important; | ||
border: 1px solid # | border: 1px solid #888 !important; | ||
box-shadow: 0 10px 30px rgba(0,0,0,0.6); | box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important; | ||
padding: 4px; | padding: 4px !important; | ||
width: 250px !important; /* enforce size if inline fights */ | |||
height: auto !important; | |||
} | } | ||
.mw-parser-output .cover-preview:hover .cover-large { | /* On hover: show large, hide small */ | ||
.mw-parser-output .cover-preview:hover .cover-large, | |||
.mw-parser-output .cover-preview:hover .cover-large img { | |||
opacity: 1 !important; | opacity: 1 !important; | ||
visibility: visible !important; | visibility: visible !important; | ||
pointer-events: auto !important; /* optional: allow clicking preview if linked */ | |||
} | } | ||
.mw-parser-output .cover-preview:hover .cover-small { | .mw-parser-output .cover-preview:hover .cover-small, | ||
.mw-parser-output .cover-preview:hover img[style*="width: 80"] { | |||
opacity: 0 !important; | opacity: 0 !important; | ||
visibility: hidden !important; /* | visibility: hidden !important; | ||
} | |||
/* Cell must allow overflow */ | |||
.mw-parser-output .wikitable td:first-child, | |||
.mw-parser-output .wikitable th:first-child { | |||
overflow: visible !important; | |||
position: relative !important; /* stacking context fix */ | |||
text-align: center !important; | |||
padding: 6px 8px !important; /* compact vertical space */ | |||
} | } | ||
/* | /* Optional: prevent reduced-motion from killing transitions */ | ||
.mw-parser-output .cover-preview | @media (prefers-reduced-motion: reduce) { | ||
.mw-parser-output .cover-preview * { | |||
transition-duration: 0.01ms !important; /* tiny duration instead of 0 */ | |||
} | |||
} | } | ||
Revision as of 12:11, 29 January 2026
/* Container - size to small thumb only */
.mw-parser-output .cover-preview {
position: relative !important;
display: inline-block !important;
width: 80px !important;
height: auto !important;
line-height: 1 !important;
margin: 0 !important;
}
/* Small thumb - always visible initially */
.mw-parser-output .cover-preview .cover-small,
.mw-parser-output .cover-preview img[style*="width: 80"] { /* targets small thumb by size */
display: block !important;
margin: 0 auto !important;
width: 80px !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Large preview - hidden by default, absolute positioned */
.mw-parser-output .cover-preview .cover-large,
.mw-parser-output .cover-preview .cover-large img {
position: absolute !important;
top: -30px !important; /* nudge up more if needed */
left: 90px !important; /* adjust right nudge for your table */
z-index: 999 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.25s ease !important;
background: #fff !important;
border: 1px solid #888 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
padding: 4px !important;
width: 250px !important; /* enforce size if inline fights */
height: auto !important;
}
/* On hover: show large, hide small */
.mw-parser-output .cover-preview:hover .cover-large,
.mw-parser-output .cover-preview:hover .cover-large img {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important; /* optional: allow clicking preview if linked */
}
.mw-parser-output .cover-preview:hover .cover-small,
.mw-parser-output .cover-preview:hover img[style*="width: 80"] {
opacity: 0 !important;
visibility: hidden !important;
}
/* Cell must allow overflow */
.mw-parser-output .wikitable td:first-child,
.mw-parser-output .wikitable th:first-child {
overflow: visible !important;
position: relative !important; /* stacking context fix */
text-align: center !important;
padding: 6px 8px !important; /* compact vertical space */
}
/* Optional: prevent reduced-motion from killing transitions */
@media (prefers-reduced-motion: reduce) {
.mw-parser-output .cover-preview * {
transition-duration: 0.01ms !important; /* tiny duration instead of 0 */
}
}