engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Fix video play overlay visibility and positioning

Browse source
This commit is contained in:
Russell Ballestrini 2025-12-17 09:21:38 -05:00
parent f3a23ef2cf
commit f95daf02a8
1 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

17
make_post_sell/static/css/common.css
View file

@ -419,14 +419,17 @@ div.product-images img.product-main {
}
/* Video play button overlay for hero thumbnails */
.video-thumbnail-container {
a.video-thumbnail-container {
position: relative;
display: inline-block;
display: block;
cursor: pointer;
text-decoration: none;
}
.video-thumbnail-container img.product-main {
a.video-thumbnail-container img.product-main {
display: block;
width: 100%;
height: auto;
}
.video-play-overlay {
@ -434,13 +437,14 @@ div.product-images img.product-main {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 80px;
height: 80px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: grid;
place-items: center;
transition: background-color 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.video-play-overlay::after {
@ -453,9 +457,8 @@ div.product-images img.product-main {
margin-left: 5px;
}
.video-thumbnail-container:hover .video-play-overlay {
a.video-thumbnail-container:hover .video-play-overlay {
background-color: rgba(0, 0, 0, 0.8);
transform: translate(-50%, -50%) scale(1.1);
}
[data-theme="dark"] .video-play-overlay {
@ -466,7 +469,7 @@ div.product-images img.product-main {
border-color: transparent transparent transparent #ffffff;
}
[data-theme="dark"] .video-thumbnail-container:hover .video-play-overlay {
[data-theme="dark"] a.video-thumbnail-container:hover .video-play-overlay {
background-color: rgba(255, 255, 255, 0.35);
}