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:
/* Container - size to small thumb only */
/* Force perfect centering of small thumb in cell */
.mw-parser-output .cover-preview {
.mw-parser-output .wikitable td:first-child .cover-preview {
     position: relative !important;
     text-align: center !important;
     display: inline-block !important;
     display: block !important;       /* makes it block for centering */
    width: 80px !important;
     margin: 0 auto !important;
    height: auto !important;
    line-height: 1 !important;
     margin: 0 !important;
}
}


/* Small thumb - always visible initially */
/* Remove any left margin/padding on small/large images and wrappers */
.mw-parser-output .cover-preview img,
.mw-parser-output .cover-preview a.image,
.mw-parser-output .cover-preview .cover-small,
.mw-parser-output .cover-preview .cover-small,
.mw-parser-output .cover-preview img[style*="width: 80"] {  /* targets small thumb by size */
.mw-parser-output .cover-preview .cover-large-img {
    display: block !important;
     margin: 0 !important;
    margin: 0 auto !important;
     padding: 0 !important;
    width: 80px !important;
     border: none !important;
    height: auto !important;
     vertical-align: middle !important; /* fixes vertical off-center */
    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 */
/* Eliminate blank left space on large preview */
.mw-parser-output .cover-preview:hover .cover-large,
.mw-parser-output .cover-preview .cover-large {
.mw-parser-output .cover-preview:hover .cover-large img {
     left: 85px !important;           /* nudge left a bit if blank space persists — test 80-100px */
     opacity: 1 !important;
     margin-left: 0 !important;
     visibility: visible !important;
     padding-left: 0 !important;
     pointer-events: auto !important; /* optional: allow clicking preview if linked */
}
}


.mw-parser-output .cover-preview:hover .cover-small,
/* If blank box is from a wrapper, hide extra space */
.mw-parser-output .cover-preview:hover img[style*="width: 80"] {
.mw-parser-output .cover-preview .cover-large a,
    opacity: 0 !important;
.mw-parser-output .cover-preview .cover-large img {
    visibility: hidden !important;
     margin-left: 0 !important;
}
     display: block !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 */
/* Compact cell padding further if rows still feel tall */
@media (prefers-reduced-motion: reduce) {
.mw-parser-output .wikitable td:first-child {
    .mw-parser-output .cover-preview * {
    padding: 4px 6px !important;     /* tighter top/bottom */
        transition-duration: 0.01ms !important; /* tiny duration instead of 0 */
    }
}
}

Revision as of 12:40, 29 January 2026

/* Force perfect centering of small thumb in cell */
.mw-parser-output .wikitable td:first-child .cover-preview {
    text-align: center !important;
    display: block !important;       /* makes it block for centering */
    margin: 0 auto !important;
}

/* Remove any left margin/padding on small/large images and wrappers */
.mw-parser-output .cover-preview img,
.mw-parser-output .cover-preview a.image,
.mw-parser-output .cover-preview .cover-small,
.mw-parser-output .cover-preview .cover-large-img {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    vertical-align: middle !important;  /* fixes vertical off-center */
}

/* Eliminate blank left space on large preview */
.mw-parser-output .cover-preview .cover-large {
    left: 85px !important;           /* nudge left a bit if blank space persists — test 80-100px */
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* If blank box is from a wrapper, hide extra space */
.mw-parser-output .cover-preview .cover-large a,
.mw-parser-output .cover-preview .cover-large img {
    margin-left: 0 !important;
    display: block !important;
}

/* Compact cell padding further if rows still feel tall */
.mw-parser-output .wikitable td:first-child {
    padding: 4px 6px !important;     /* tighter top/bottom */
}