MediaWiki:Vector-dark.css: Difference between revisions

← Older edit Newer edit →

@@ Line 500: / Line 500: @@
      }
-	/* The actual slideshow element */
+	/* Slideshow element */
 	.mw-jsslideshow slideshow {
+	    width: 100%;
 	    display: flex;
-	    flex-direction: row; /* Horizontal layout by default */
 	    flex-wrap: nowrap;
-	    width: 100%;
+	    overflow: hidden; /* No side scrolling */
-	    height: auto;
-	    aspect-ratio: 16 / 9; /* Standard slideshow aspect ratio */
 	}
-	/* Each slide (the <div> wrappers inside <slideshow>) */
+	/* Each slide */
 	.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;
+	    overflow: hidden; /* In case there's weird padding */
 	}
-	/* The actual images - these get swapped in by MediaWiki */
+	/* Images (these are swapped in from [[File:]] when rendered) */
 	.mw-jsslideshow slideshow div img {
 	    width: 100%;
-	    height: 100%;
+	    height: auto; /* Natural height! */
-	    object-fit: cover; /* Ensures images don't stretch */
 	    display: block;
+	    object-fit: contain; /* No cropping - show the whole image */
+	    max-height: 90vh; /* Optional, so slides don’t get too tall on desktop */
 	}
-	/* Responsive aspect ratios */
+	/* Optional mobile-friendly tweaks */
 	@media (max-width: 768px) {
-	    .mw-jsslideshow slideshow {
+	    .mw-jsslideshow slideshow div img {
-	        aspect-ratio: 4 / 3; /* More square on tablets */
+	        max-height: 70vh; /* Shorter slides on smaller screens */
-	    }
-	}
-	@media (max-width: 480px) {
-	    .mw-jsslideshow slideshow {
-	        aspect-ratio: 1 / 1; /* Square for mobile */
 	    }
 	}