MediaWiki:Common.css: Difference between revisions

Latest revision as of 12:48, 29 January 2026

/* ================================================================
   COVER PREVIEW SYSTEM - COMPLETE VERSION (July 2025 style)
   For both pamphlets table and games table
   Uses {{CoverThumb}} with frameless
   ================================================================ */

/* 1. Container - exactly fits the small 80px thumb */
.mw-parser-output .cover-preview {
    position: relative;
    display: inline-block;
    width: 80px;
    height: auto;
    line-height: 0;
    margin: 0 auto;
    text-align: center;
}

/* 2. Kill all default MW/Vector margins/padding on wrappers & images */
.mw-parser-output .cover-preview a.image,
.mw-parser-output .cover-preview .image,
.mw-parser-output .cover-preview img,
.mw-parser-output .cover-preview .cover-small,
.mw-parser-output .cover-preview .cover-large-img {
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    border: none !important;
    vertical-align: middle !important;
    display: block !important;
}

/* 3. Small thumbnail - forced center */
.mw-parser-output .cover-preview .cover-small {
    display: block;
    margin: 0 auto;
}

/* 4. Large preview - starts hidden, no left gap */
.mw-parser-output .cover-preview .cover-large {
    position: absolute;
    top: -25px;                    /* nudge up a bit */
    left: 75px;                    /* start close to cell edge – try 70px or 80px if needed */
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease;
    background: #ffffff;
    border: 1px solid #cccccc;
    box-shadow: 0 8px 25px rgba(0,0,0,0.45);
    padding: 4px;
    overflow: hidden;
}

/* 5. Force large image to ignore any leftover left margin */
.mw-parser-output .cover-preview .cover-large a.image,
.mw-parser-output .cover-preview .cover-large img.cover-large-img {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* 6. Hover behavior */
.mw-parser-output .cover-preview:hover .cover-large {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mw-parser-output .cover-preview:hover .cover-small {
    opacity: 0;
    visibility: hidden;
}

/* 7. Table cell must not clip the popup */
.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;
    vertical-align: middle !important;
}

/* 8. Slightly tighter rows so table doesn't feel too tall */
.mw-parser-output .wikitable tr {
    line-height: 1.18;
}

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

/* ────────────────────────────────────────────────
   Optional debug helpers – remove after testing
   ──────────────────────────────────────────────── */
/*
.mw-parser-output .cover-preview { outline: 1px dashed lime !important; }          /* small container */
.mw-parser-output .cover-preview .cover-large { outline: 2px solid blue !important; } /* preview area */
*/