diff --git a/frontend-prep/src/components/ProductCard.css b/frontend-prep/src/components/ProductCard.css index d0f543ea..4dbe3ae0 100644 --- a/frontend-prep/src/components/ProductCard.css +++ b/frontend-prep/src/components/ProductCard.css @@ -382,11 +382,14 @@ div[data-category="gros&semi"] .success-message { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); border-radius: 50%; - width: 40px; - height: 40px; + width: 48px; + height: 48px; + min-width: 48px; + min-height: 48px; display: flex; align-items: center; justify-content: center; + overflow: visible; z-index: 3; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; @@ -406,8 +409,11 @@ div[data-category="gros&semi"] .success-message { .media-indicator svg { color: #ffffff; - width: 18px; - height: 18px; + width: 24px; + height: 24px; + min-width: 24px; + min-height: 24px; + flex-shrink: 0; animation: cameraPulse 2s ease-in-out infinite; } @@ -601,12 +607,15 @@ div[data-category="gros&semi"] .details-button:hover { backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, 0.3); color: white; - width: 40px; - height: 40px; + width: 48px; + height: 48px; + min-width: 48px; + min-height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; + overflow: visible; cursor: pointer; z-index: 10; transition: all 0.3s ease; @@ -623,8 +632,11 @@ div[data-category="gros&semi"] .details-button:hover { } .video-close-btn svg { - width: 18px; - height: 18px; + width: 24px; + height: 24px; + min-width: 24px; + min-height: 24px; + flex-shrink: 0; } .video-player { @@ -668,13 +680,17 @@ div[data-category="gros&semi"] .details-button:hover { .video-close-btn { top: 10px; right: 10px; - width: 36px; - height: 36px; + width: 44px; + height: 44px; + min-width: 44px; + min-height: 44px; } .video-close-btn svg { - width: 16px; - height: 16px; + width: 20px; + height: 20px; + min-width: 20px; + min-height: 20px; } .video-player { @@ -699,15 +715,19 @@ div[data-category="gros&semi"] .details-button:hover { } .media-indicator { - width: 36px; - height: 49px; + width: 44px; + height: 44px; + min-width: 44px; + min-height: 44px; top: 10px; right: 10px; } .media-indicator svg { - width: 16px; - height: 16px; + width: 20px; + height: 20px; + min-width: 20px; + min-height: 20px; } }