MediaWiki:Common.css: Difference between revisions

From 3DO World
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
/* =============================================
/* COVER PREVIEW - FINAL AGGRESSIVE VERSION
  COVER PREVIEW (hover zoom/enlarge)
   Targets .image wrapper margins, forces centering, eliminates left blank space */
  Works for both pamphlet table and games table
   ============================================= */


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


/* Small thumbnail - always visible, perfectly centered */
/* Zero out EVERYTHING on wrappers/images (targets .image from MW) */
.mw-parser-output .cover-preview .image,
.mw-parser-output .cover-preview a.image,
.mw-parser-output .cover-preview img,
.mw-parser-output .cover-preview .cover-small,
.mw-parser-output .cover-preview .cover-small,
.mw-parser-output .cover-preview img[style*="width: 80"],
.mw-parser-output .cover-preview .cover-large-img {
.mw-parser-output .cover-preview a.image,
     margin: 0 !important;
.mw-parser-output .cover-preview .image {
    display: block !important;
     margin: 0 auto !important;
     margin-left: 0 !important;
     margin-left: 0 !important;
     padding: 0 !important;
     padding: 0 !important;
     border: none !important;
     border: 0 !important;
     vertical-align: middle !important;
     vertical-align: middle !important;
    display: block !important;
}
}


/* Large preview - hidden by default */
/* Extra centering for small (block + auto margin defeats inline quirks) */
.mw-parser-output .cover-preview .cover-large,
.mw-parser-output .cover-preview .cover-small {
.mw-parser-output .cover-preview .cover-large-img,
    margin: 0 auto !important;
.mw-parser-output .cover-preview .cover-large a.image,
}
.mw-parser-output .cover-preview .cover-large .image {
 
/* Large preview container - hidden, no left gap */
.mw-parser-output .cover-preview .cover-large {
     position: absolute !important;
     position: absolute !important;
     top: -30px !important;               /* adjust up/down as needed */
     top: -30px !important;
     left: 80px !important;              /* tweak: 70–90px depending on cell width */
     left: 75px !important;              /* reduced from 80/90 — pull tighter to cover gap; test 70px if needed */
     z-index: 100 !important;
     z-index: 100 !important;
     opacity: 0 !important;
     opacity: 0 !important;
Line 45: Line 45:
     box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
     box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
     padding: 4px !important;
     padding: 4px !important;
    margin: 0 !important;
    margin-left: 0 !important;
    overflow: hidden !important;        /* clips any residual shift */
}
/* Override left shift on large preview's wrapper/img */
.mw-parser-output .cover-preview .cover-large .image,
.mw-parser-output .cover-preview .cover-large a.image,
.mw-parser-output .cover-preview .cover-large img {
     margin-left: 0 !important;
     margin-left: 0 !important;
    padding-left: 0 !important;
     margin: 0 !important;
     margin: 0 !important;
    overflow: hidden !important;        /* clips any stray left margin */
}
}


/* On hover: show large, hide small */
/* Hover: show large, hide small */
.mw-parser-output .cover-preview:hover .cover-large,
.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;
     opacity: 1 !important;
     visibility: visible !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 .cover-small {
.mw-parser-output .cover-preview:hover a.image {
     opacity: 0 !important;
     opacity: 0 !important;
     visibility: hidden !important;
     visibility: hidden !important;
}
}


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


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


/* Handle reduced-motion preference gracefully */
/* Reduced-motion safe */
@media (prefers-reduced-motion: reduce) {
@media (prefers-reduced-motion: reduce) {
     .mw-parser-output .cover-preview * {
     .mw-parser-output .cover-preview * {

Revision as of 12:46, 29 January 2026

/* COVER PREVIEW - FINAL AGGRESSIVE VERSION
   Targets .image wrapper margins, forces centering, eliminates left blank space */

.mw-parser-output .cover-preview {
    position: relative !important;
    display: inline-block !important;
    width: 80px !important;
    height: auto !important;
    line-height: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Zero out EVERYTHING on wrappers/images (targets .image from MW) */
.mw-parser-output .cover-preview .image,
.mw-parser-output .cover-preview a.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: 0 !important;
    vertical-align: middle !important;
    display: block !important;
}

/* Extra centering for small (block + auto margin defeats inline quirks) */
.mw-parser-output .cover-preview .cover-small {
    margin: 0 auto !important;
}

/* Large preview container - hidden, no left gap */
.mw-parser-output .cover-preview .cover-large {
    position: absolute !important;
    top: -30px !important;
    left: 75px !important;               /* reduced from 80/90 — pull tighter to cover gap; test 70px if needed */
    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: 0 !important;
    margin-left: 0 !important;
    overflow: hidden !important;         /* clips any residual shift */
}

/* Override left shift on large preview's wrapper/img */
.mw-parser-output .cover-preview .cover-large .image,
.mw-parser-output .cover-preview .cover-large a.image,
.mw-parser-output .cover-preview .cover-large img {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* Hover: show large, hide small */
.mw-parser-output .cover-preview:hover .cover-large {
    opacity: 1 !important;
    visibility: visible !important;
}

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

/* Cell: allow escape + compact + center */
.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;
}

/* Tighter rows */
.mw-parser-output .wikitable tr {
    line-height: 1.2 !important;
}

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