MediaWiki:Common.css
Aus exmediawiki
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
/* MediaWiki Slideshow Gallery - PAGE SPECIFIC ONLY */
/* Only applies when .slideshow-gallery-page class is present */
.slideshow-gallery-page * {
box-sizing: border-box;
}
/* Container for the slideshow gallery */
.slideshow-gallery-page .slideshow-container {
position: relative;
max-width: 98%;
}
/* Hide the slides by default */
.slideshow-gallery-page .mySlides {
display: none;
position: relative;
}
/* Show the active slide */
.slideshow-gallery-page .mySlides.active {
display: block;
}
/* Next & previous buttons - CIRCULAR with black border, positioned at bottom */
.slideshow-gallery-page .prev,
.slideshow-gallery-page .next {
cursor: pointer;
position: absolute;
bottom: 10px;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border: 2px solid #000;
border-radius: 50%;
color: #000;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-size: 20px;
user-select: none;
-webkit-user-select: none;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 1000;
text-decoration: none;
line-height: 1;
}
/* Position the "previous button" to the bottom-left corner */
.slideshow-gallery-page .prev {
left: 15px;
}
/* Position the "next button" to the bottom-right corner */
.slideshow-gallery-page .next {
right: 15px;
}
/* On hover, scale and brighten background */
.slideshow-gallery-page .prev:hover,
.slideshow-gallery-page .next:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.1);
}
/* Active state */
.slideshow-gallery-page .prev:active,
.slideshow-gallery-page .next:active {
transform: scale(0.95);
}
/* Responsive design - Mobile optimization */
@media (max-width: 768px) {
.slideshow-gallery-page .mySlides img {
height: 300px;
object-fit: cover; /* Add this for better image scaling */
}
.slideshow-gallery-page .prev,
.slideshow-gallery-page .next {
width: 35px;
height: 35px;
font-size: 16px;
left: 10px; /* For prev button */
}
.slideshow-gallery-page .next {
right: 10px;
}
}