Merge pull request #503 from Adez017/Broadcast_UI

Broadcast Page UI Changed

Author: sanjay-kv

src/pages/broadcasts/index.css

@@ -221,12 +221,43 @@ h1 {
 .details-card {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 2rem;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-  border-radius: 12px;
-  background: var(--ifm-background-surface-color);
+  padding: 3rem;
+  box-shadow: 
+    0 10px 30px rgba(0, 0, 0, 0.1),
+    0 4px 12px rgba(0, 0, 0, 0.05);
+  border-radius: 24px;
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
   width: 100%;
   box-sizing: border-box;
+  border: 1px solid rgba(226, 232, 240, 0.6);
+  position: relative;
+  backdrop-filter: blur(10px);
+}
+
+.details-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.03) 0%, transparent 40%),
+              radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.02) 0%, transparent 45%);
+  border-radius: 24px;
+  z-index: -1;
+}
+
+[data-theme='dark'] .details-card {
+  background: linear-gradient(145deg, var(--dark-card-bg) 0%, #0c1117 100%);
+  border-color: var(--dark-border);
+  box-shadow: 
+    0 10px 30px rgba(0, 0, 0, 0.3),
+    0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme='dark'] .details-card::before {
+  background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.06) 0%, transparent 40%),
+              radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.04) 0%, transparent 45%);
 }
 
 .video-container {
@@ -522,3 +553,11 @@ h1 {
 .pagination span {
   font-weight: bold;
 }
+.video-info .video-title {
+  color: #333 !important;
+  font-weight: 600;
+}
+
+[data-theme='dark'] .video-info .video-title {
+  color: #fff !important;
+}

src/pages/broadcasts/index.tsx

@@ -155,7 +155,7 @@ const VideoCard: React.FC<{
     >
       <div className="video-content">
         <div className="video-info">
-          <div className="video-title">{title}</div>
+          <div className="video-title"style={{ color: '#333', fontWeight: '600' }}>{title}</div>
           <div className="video-type">
 
           </div>
@@ -167,6 +167,7 @@ const VideoCard: React.FC<{
                 src={thumbnailUrl}
                 alt={title}
                 className="thumbnail-img"
+                style={{ objectFit: 'cover' }}
                 loading="lazy"
                 onError={(e) => {
                   const img = e.target as HTMLImageElement;