From 3bf65966c58eedf9bf64499d938dedb9d034d838 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell@unturf.com>
Date: Wed, 17 Dec 2025 09:25:57 -0500
Subject: [PATCH] Style video play overlay: red tint, add click-to-play text

---
 make_post_sell/static/css/common.css | 22 ++++++++--------------
 make_post_sell/templates/content.j2  |  1 +
 make_post_sell/templates/product.j2  |  1 +
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index 6f89c06..e30eeb9 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -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 */
diff --git a/make_post_sell/templates/content.j2 b/make_post_sell/templates/content.j2
index cfe9097..bf0de7a 100644
--- a/make_post_sell/templates/content.j2
+++ b/make_post_sell/templates/content.j2
@@ -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 %}
diff --git a/make_post_sell/templates/product.j2 b/make_post_sell/templates/product.j2
index 735dc8f..95bbdbb 100644
--- a/make_post_sell/templates/product.j2
+++ b/make_post_sell/templates/product.j2
@@ -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 %}