While working on transforming the MonoBook Skin into a DarkMode version, I encountered an issue with the gallery overlay css.
The Overlay displays a semi-translucent white box with text at the bottom by default, overlaying the image. I made adjustments to the color, size, and text of the box.
Here is the current code snippet:
ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper,
ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper,
ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper {
position: absolute;
background: #fff;
background: rgba( 128, 128, 128, 0.6 );
padding: 3px 3px 3px 3px;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: 100%;
max-height: 20%;
max-width: 100%;
overflow: hidden;
font-weight: bold;
margin: 2px;
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
color: #fff;
font-size: 14px;
}
&:hover {
overflow: visible;
height: auto;
width: 100%;
max-height: 20%;
max-width: 100%;
p {
text-overflow: clip;
white-space: normal;
overflow: visible;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
font-size: 14px;
}
}
}
Currently, it appears like this: Overlayed Box not aligned centered
The problem lies in the alignment of the Overlay Box over the full width of the Image Box. It seems to be aligned to the left, leaving a gap on the right side.
I attempted adding align: center;, but it did not resolve the issue. Does anyone have any insights or experience with this particular problem?
The end goal is to have the Overlay Box centered inside the Image Box.