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:
.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: -20px !important;
     top: -30px !important;       /* nudge up more if needed */
     left: 90px !important;
     left: 90px !important;       /* adjust right nudge for your table */
     z-index: 100 !important;
     z-index: 999 !important;
     opacity: 0 !important;
     opacity: 0 !important;
     visibility: hidden !important;   /* extra layer of hiding */
     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 #999;
     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;  /* helps if opacity alone fails */
     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 */
}
}


/* Ensure small thumb stays visible normally */
/* Optional: prevent reduced-motion from killing transitions */
.mw-parser-output .cover-preview .cover-small {
@media (prefers-reduced-motion: reduce) {
    opacity: 1 !important;
    .mw-parser-output .cover-preview * {
    visibility: visible !important;
        transition-duration: 0.01ms !important; /* tiny duration instead of 0 */
     display: block !important;
     }
}
}

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 */
    }
}