highlight2

gradio-web/test/test_ui_native_layout_contract.py

@@ -51,7 +51,12 @@ def test_native_ui_css_highlights_media_card_not_live_obs_transform(reload_modul
     css = ui_layout.CSS
 
     assert "#media_card::after" in css
+    assert "--media-card-radius: 8px;" in css
+    assert "#media_card #live_obs button" in css
+    assert "#media_card #live_obs img" in css
     assert "#media_card:has(#live_obs.live-obs-keypoint-waiting)::after" in css
+    assert "inset: 0;" in css
+    assert "border-radius: inherit;" in css
     assert "animation: media-card-keypoint-ring 1.2s ease-in-out infinite;" in css
     assert "@keyframes media-card-keypoint-ring" in css
     assert "#live_obs.live-obs-keypoint-waiting .image-frame" not in css

gradio-web/ui_layout.py

@@ -304,17 +304,31 @@ button#watch_demo_video_btn {{
 }}
 
 #media_card {{
+    --media-card-radius: 8px;
     position: relative;
-    border-radius: 24px;
+    border-radius: var(--media-card-radius);
     overflow: visible;
 }}
 
+#media_card > div,
+#media_card #action_phase_group,
+#media_card #video_phase_group,
+#media_card #live_obs,
+#media_card #live_obs button,
+#media_card #live_obs .image-frame,
+#media_card #live_obs img,
+#media_card #demo_video,
+#media_card #demo_video video {{
+    border-radius: var(--media-card-radius);
+}}
+
 #media_card::after {{
     content: "";
     position: absolute;
-    inset: -8px;
-    border-radius: 30px;
+    inset: 0;
+    border-radius: inherit;
     border: 3px solid rgba(225, 29, 72, 0.00);
+    box-sizing: border-box;
     box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.00);
     opacity: 0;
     pointer-events: none;