Page MenuHomePhabricator

"caption-container" CSS class is used by both TimedMediaHandler beta and GallerySlideshow.js, causing display issues
Closed, ResolvedPublic

Description

The caption-container CSS class is used by both the GallerySlideShow gadget and the VideoJS Player (part of TimedMediaHandler). Since the selectors are not specific enough, the rules cause display issues on Wikimedia Commons when both the gadget and the "New video player" beta feature are enabled.

The CSS rule for TimedMediaHandler is

.caption-container{position:fixed;width:100%;bottom:10vh}

and the CSS rules for GallerySlideshow are

div.loader,div.slideshow a.advance-link,.caption-container{width:100%}
div.caption-container{font-size:1.5em;width:20%;min-width:180px;max-width:320px;position:relative;display:inline-block;vertical-align:top}

Since GallerySlideshow is older and does not appear to be actively developed, I would suggest changing the class name and selector specificity in TimedMediaHandler. (In general, I think it would be best to make the TimedMediaHandler CSS class names less generic.)