MediaWiki:Vector-dark.css: Difference between revisions

← Older edit Newer edit →

@@ Line 489: / Line 489: @@
      }
 	/* Ensure mw-jsslideshow fits inside vector-body */
-	.vector-body .mw-jsslideshow {
+.vector-body .mw-jsslideshow {
-	    width: 100%;
+    padding: 0;
-	    max-width: 100%;
+    margin: 0 auto;
-	    margin: 10px auto;
+    overflow: hidden;
-	    padding: 10px;
+    background-color: #002B5C;
-	    background-color: #002B5C;
+    border: 2px solid #FF851B;
-	    border: 2px solid #FF851B;
+    border-radius: 8px;
-	    border-radius: 8px;
+}
-	    overflow: hidden; /* No floating garbage */
-	    box-sizing: border-box;
+.vector-body .mw-jsslideshow .slideshow {
-	    position: relative; /* Keep it in normal page flow */
+    display: flex;
-	}
+    flex-wrap: nowrap;
+    justify-content: center;
-	.vector-body .mw-jsslideshow .slideshow {
+    align-items: center;
-	    display: flex;
+}
-	    flex-wrap: nowrap;
-	    width: 100% !important; /* Force full width */
+.vector-body .mw-jsslideshow .slideshow div {
-	    height: auto !important; /* Let content define height */
+    padding: 0;
-	    overflow: hidden;
+    margin: 0;
-	    position: relative; /* Keep it within mw-jsslideshow */
+    box-sizing: border-box;
-	    justify-content: center; /* Center slides */
+    display: flex;
-	    align-items: center;
+    justify-content: center;
-	}
+    align-items: center;
+}
-	/* Each slide container */
-	.vector-body .mw-jsslideshow .slideshow > div {
+.vector-body .mw-jsslideshow .slideshow div img {
-	    flex: 0 0 100%; /* Each slide is full width */
+    display: block;
-	    display: flex;
+    max-width: 100%;
-	    justify-content: center;
+    height: auto;
-	    align-items: center;
+    object-fit: contain;
-	    overflow: hidden;
+    margin: 0; /* Kill any rogue margins */
-	    box-sizing: border-box;
+}
-	}
-	/* Images themselves */
-	.vector-body .mw-jsslideshow .slideshow img {
-	    width: 100%;
-	    height: auto;
-	    object-fit: contain;
-	    max-height: 90vh; /* Optional: keep tall images in check */
-	}
 	/* Optional mobile-friendly tweaks */