MediaWiki:Vector-dark.css: Difference between revisions

← Older edit Newer edit →

@@ Line 493: / Line 493: @@
 	    border: 2px solid #FF851B;
 	    border-radius: 8px;
-	    margin: 10px auto;
+	    margin: 10px auto; /* Auto centers horizontally */
 	    padding: 10px;
 	    color: #FFFFFF;
+	    width: 100%; /* Or max-width if you want */
 	    max-width: 100%;
 	    overflow: hidden;
 	    position: relative;
 	    box-sizing: border-box;
-	    display: block;
+	    display: flex;
+	    justify-content: center;
+	    align-items: center;
 	}
@@ Line 507: / Line 511: @@
 	/* Tame the dynamically-generated slideshow div */
 	.vector-body .mw-jsslideshow .slideshow {
-	    width: 100% !important; /* Kill the injected width */
+	    width: 100% !important;
-	    height: auto !important; /* Kill the injected height */
+	    height: auto !important;
 	    display: flex !important;
-	    flex-wrap: nowrap !important;
+	    justify-content: center; /* Center horizontally */
-	    overflow: hidden !important; /* No horizontal scroll */
+	    align-items: center; /* Center vertically */
+	    overflow: hidden !important;
 	    box-sizing: border-box;
 	}
 	/* Each dynamically generated slide (the divs inside slideshow) */
 	.vector-body .mw-jsslideshow .slideshow > div {
-	    flex: 0 0 100%;
+	    flex: 0 0 auto;
+	    display: flex;
+	    justify-content: center;
+	    align-items: center;
 	    width: 100% !important;
 	    height: auto !important;
-	    display: flex !important;
-	    justify-content: center !important;
-	    align-items: center !important;
 	    overflow: hidden;
 	    box-sizing: border-box;
+	    text-align: center;
 	}
 	/* Images inside each slide */
 	.vector-body .mw-jsslideshow .slideshow > div img {
-	    width: 100% !important;
+	    display: block;
-	    height: auto !important;
+	    max-width: 100%;
-	    object-fit: contain !important;
+	    height: auto;
-	    max-height: 90vh !important;
+	    object-fit: contain;
+	    margin: 0 auto;
 	}
 	/* Optional mobile-friendly tweaks */