MediaWiki:Common.css: Difference between revisions

Revision as of 12:44, 29 January 2026

/* =============================================
   COVER PREVIEW (hover zoom/enlarge)
   Works for both pamphlet table and games table
   ============================================= */

/* Container - sized to small thumbnail only */
.mw-parser-output .cover-preview {
    position: relative !important;
    display: inline-block !important;
    width: 80px !important;
    height: auto !important;
    line-height: 0 !important;          /* removes tiny vertical gaps */
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Small thumbnail - always visible, perfectly centered */
.mw-parser-output .cover-preview .cover-small,
.mw-parser-output .cover-preview img[style*="width: 80"],
.mw-parser-output .cover-preview a.image,
.mw-parser-output .cover-preview .image {
    display: block !important;
    margin: 0 auto !important;
    margin-left: 0 !important;
    padding: 0 !important;
    border: none !important;
    vertical-align: middle !important;
}

/* Large preview - hidden by default */
.mw-parser-output .cover-preview .cover-large,
.mw-parser-output .cover-preview .cover-large-img,
.mw-parser-output .cover-preview .cover-large a.image,
.mw-parser-output .cover-preview .cover-large .image {
    position: absolute !important;
    top: -30px !important;               /* adjust up/down as needed */
    left: 80px !important;               /* tweak: 70–90px depending on cell width */
    z-index: 100 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
    background: #fff !important;
    border: 1px solid #aaa !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
    padding: 4px !important;
    margin-left: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;         /* clips any stray left margin */
}

/* On hover: show large, hide small */
.mw-parser-output .cover-preview:hover .cover-large,
.mw-parser-output .cover-preview:hover .cover-large-img,
.mw-parser-output .cover-preview:hover .cover-large a.image {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;     /* optional: allow clicking if linked */
}

.mw-parser-output .cover-preview:hover .cover-small,
.mw-parser-output .cover-preview:hover a.image {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Table cell must allow the popup to escape */
.mw-parser-output .wikitable td:first-child,
.mw-parser-output .wikitable th:first-child {
    overflow: visible !important;
    position: relative !important;
    text-align: center !important;
    padding: 4px 6px !important;         /* compact vertical space */
    vertical-align: middle !important;
}

/* Optional: slightly tighter rows overall */
.mw-parser-output .wikitable tr {
    line-height: 1.2 !important;
}

/* Handle reduced-motion preference gracefully */
@media (prefers-reduced-motion: reduce) {
    .mw-parser-output .cover-preview * {
        transition-duration: 0.01ms !important;
    }
}