diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index 148e322..a21f2fd 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -412,7 +412,7 @@ img.product-thumbnail { } .product-main { - max-height: 33vh; + max-height: 42vh; } .product-images { @@ -422,7 +422,7 @@ img.product-thumbnail { .product-images img.product-main, div.product-images img.product-main { max-width: 100%; - max-height: 33vh; + max-height: 42vh; width: auto; height: auto; } @@ -438,7 +438,7 @@ div.product-images img.product-main { .video-thumbnail-container img.product-main { display: block; max-width: 100%; - max-height: 33vh; + max-height: 42vh; height: auto; } @@ -1391,7 +1391,7 @@ textarea.markup-editor-textarea { .product-images img.product-main { max-width: 100%; - max-height: 33vh; + max-height: 42vh; width: auto; height: auto; } @@ -2595,7 +2595,7 @@ textarea { .watch-video-container video.product-main { max-width: 100%; - max-height: 33vh; + max-height: 42vh; width: auto; height: auto; } @@ -2692,7 +2692,7 @@ textarea { } .watch-audio-container .audio-cover { - max-height: 33vh; + max-height: 42vh; width: auto; max-width: 100%; display: block; @@ -2703,59 +2703,76 @@ textarea { margin-top: 8px; } -/* Watch countdown overlay */ +/* Watch countdown overlay — compact bottom bar with frosted glass */ .watch-countdown { position: absolute; - top: 0; + bottom: 0; left: 0; right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.85); + background: rgba(255, 255, 255, 0.75); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); display: grid; - grid-template-columns: 120px 1fr; - grid-template-rows: 1fr auto; - gap: 12px; - padding: 20px; + grid-template-columns: 60px 1fr auto auto; + gap: 10px; + padding: 10px 14px; align-items: center; z-index: 30; + border-top: 1px solid var(--border-color, #dee2e6); +} + +[data-theme="dark"] .watch-countdown { + background: rgba(13, 17, 23, 0.80); + border-top: 1px solid var(--border-color, #7ab9ff); } .countdown-thumb { - grid-row: 1; grid-column: 1; - width: 120px; + width: 60px; height: auto; border-radius: 4px; } .countdown-text { - grid-row: 1; grid-column: 2; - color: white; + color: var(--text-primary, #333); display: grid; - gap: 8px; + gap: 2px; } #countdown-title { - font-size: 1rem; + font-size: 0.85rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } #countdown-number { - font-size: 2.5rem; + font-size: 1.5rem; font-weight: bold; + color: var(--blue-color, #98b6fa); } .watch-countdown .mps-button { - grid-row: 2; - justify-self: start; + padding: 6px 14px; + font-size: 0.85rem; } #countdown-play-now { - grid-column: 1; + grid-column: 3; } #countdown-cancel { - grid-column: 2; + grid-column: 4; +} + +/* Static content countdown: flows in-place, not overlaid */ +.watch-countdown-static { + position: relative; + border-top: none; + border: 1px solid var(--border-color, #dee2e6); + border-radius: 6px; + margin-top: 8px; } /* Queue UI */