MediaWiki:Vector-dark.css: Difference between revisions
Cdjensen94 (talk | contribs) No edit summary |
Cdjensen94 (talk | contribs) No edit summary |
||
| Line 488: | Line 488: | ||
color: #FFFFFF; /* White text */ | color: #FFFFFF; /* White text */ | ||
} | } | ||
/* Ensure mw-jsslideshow fits inside vector-body */ | |||
.vector-body .mw-jsslideshow { | |||
background-color: #002B5C; | |||
border: 2px solid #FF851B; | |||
border-radius: 8px; | |||
margin: 10px; | |||
padding: 10px; | |||
color: #FFFFFF; | |||
width: 100%; | width: 100%; | ||
max-width: 100%; | max-width: 100%; | ||
overflow: hidden; | overflow: hidden; | ||
position: relative; | position: relative; | ||
box-sizing: border-box; | |||
} | |||
/* | /* Tame the dynamically-generated slideshow div */ | ||
.vector-body .mw-jsslideshow .slideshow { | .vector-body .mw-jsslideshow .slideshow { | ||
width: 100% !important; | width: 100% !important; /* Kill the injected width */ | ||
height: auto !important; /* Kill the injected height */ | |||
display: flex !important; | display: flex !important; | ||
flex-wrap: nowrap !important; | flex-wrap: nowrap !important; | ||
overflow: hidden !important; /* No | overflow: hidden !important; /* No horizontal scroll */ | ||
box-sizing: border-box; | |||
} | } | ||
/* Each slide */ | /* Each dynamically generated slide (the divs inside slideshow) */ | ||
.mw-jsslideshow .slideshow div { | .vector-body .mw-jsslideshow .slideshow > div { | ||
flex: 0 0 100%; | |||
width: 100% !important; | width: 100% !important; | ||
height: auto !important; | height: auto !important; | ||
display: flex !important; | display: flex !important; | ||
justify-content: center !important; | justify-content: center !important; | ||
align-items: center !important; | align-items: center !important; | ||
overflow: hidden | overflow: hidden; | ||
box-sizing: border-box; | |||
} | } | ||
.mw-jsslideshow .slideshow div img { | |||
/* Images inside each slide */ | |||
.vector-body .mw-jsslideshow .slideshow > div img { | |||
width: 100% !important; | width: 100% !important; | ||
height: auto !important; | height: auto !important; | ||
object-fit: contain !important; | object-fit: contain !important; | ||
max-height: 90vh !important; | max-height: 90vh !important; | ||
} | } | ||
/* Optional mobile-friendly tweaks */ | /* Optional mobile-friendly tweaks */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.vector-body .mw-jsslideshow .slideshow div img { | .vector-body .mw-jsslideshow .slideshow > div img { | ||
max-height: 70vh | max-height: 70vh; | ||
} | } | ||
} | } | ||