Jump to content

MediaWiki:Vector-dark.css: Difference between revisions

← Older editNewer edit →
No edit summary
No edit summary
Line 493: Line 493:
         border-radius: 8px;
         border-radius: 8px;
         padding: 10px;
         padding: 10px;
    width: 100%; /* Full-width unless constrained by a parent */
    aspect-ratio: 16 / 9;      /* Maintain 16:9 ratio - change if needed */
    max-width: 100%; /* No overflow */
    height: auto; /* Maintain aspect ratio based on content */
    overflow: hidden;          /* Just in case */
    position: relative;        /* Allows overlays/captions if you want */
    display: block;
         color: #FFFFFF;
         color: #FFFFFF;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
     }
     }
   
/* Images inside the slideshow */
/* The actual slideshow element */
.mw-jsslideshow img {
.mw-jsslideshow slideshow {
    width: 100%;             /* Images scale with container */
    display: flex;
    height: 100%;             /* Fill the height fully (optional) */
    flex-direction: row; /* Horizontal layout by default */
    object-fit: cover;       /* Crop nicely */
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Standard slideshow aspect ratio */
}
/* Each slide (the <div> wrappers inside <slideshow>) */
.mw-jsslideshow slideshow div {
    flex: 0 0 100%; /* Each slide takes full width */
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/* The actual images - these get swapped in by MediaWiki */
.mw-jsslideshow slideshow div img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images don't stretch */
    display: block;
    display: block;
}
}
/* Optional: Responsive tweaks for smaller screens */
/* Responsive aspect ratios */
@media (max-width: 768px) {
@media (max-width: 768px) {
    .mw-jsslideshow {
    .mw-jsslideshow slideshow {
        aspect-ratio: 4 / 3; /* More square-like for phones */
        aspect-ratio: 4 / 3; /* More square on tablets */
    }
    }
}
}
/* Even smaller screens — tall and narrow */
@media (max-width: 480px) {
@media (max-width: 480px) {
    .mw-jsslideshow {
    .mw-jsslideshow slideshow {
        aspect-ratio: 1 / 1; /* Perfect square for the smallest screens */
        aspect-ratio: 1 / 1; /* Square for mobile */
    }
    }
}
}
     /* ===== Table of Contents (TOC) ===== */
     /* ===== Table of Contents (TOC) ===== */
Retrieved from "https://continuum-universes.com/wiki/MediaWiki:Vector-dark.css"