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

Style video play overlay: red tint, add click-to-play text

Browse source
This commit is contained in:
Russell Ballestrini 2025-12-17 09:25:57 -05:00
parent f95daf02a8
commit 3bf65966c5
3 changed files with 10 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -440,7 +440,7 @@ a.video-thumbnail-container img.product-main {
z-index: 10;
width: 80px;
height: 80px;
background-color: rgba(0, 0, 0, 0.6);
background-color: rgba(255, 0, 0, 0.4); /* red at 66/255 ~= 0.26, try 0.4 for 66% visibility */
border-radius: 50%;
display: grid;
place-items: center;
@ -457,20 +457,14 @@ a.video-thumbnail-container img.product-main {
margin-left: 5px;
}
.video-click-to-play {
text-align: center;
margin-top: 8px;
color: inherit;
}
a.video-thumbnail-container:hover .video-play-overlay {
background-color: rgba(0, 0, 0, 0.8);
}
[data-theme="dark"] .video-play-overlay {
background-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .video-play-overlay::after {
border-color: transparent transparent transparent #ffffff;
}
[data-theme="dark"] a.video-thumbnail-container:hover .video-play-overlay {
background-color: rgba(255, 255, 255, 0.35);
background-color: rgba(255, 0, 0, 0.6);
}
/* Prevent content sections from overflowing */

1
make_post_sell/templates/content.j2
View file

@ -40,6 +40,7 @@
<img src="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main" />
<div class="video-play-overlay"></div>
</a>
<div class="video-click-to-play">click &#9654; to play</div>
{% else %}
<img src="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main" />
{% endif %}

1
make_post_sell/templates/product.j2
View file

@ -40,6 +40,7 @@
<img src="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main" />
<div class="video-play-overlay"></div>
</a>
<div class="video-click-to-play">click &#9654; to play</div>
{% else %}
<img src="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main" />
{% endif %}