Fixed broadcast tittle block

Author: Adez017

src/pages/broadcasts/video.css

@@ -14,32 +14,24 @@
   right: 0;
   bottom: 0;
   background:
-    radial-gradient(
-      circle at 20% 30%,
+    radial-gradient(circle at 20% 30%,
       rgba(99, 102, 241, 0.05) 0%,
-      transparent 40%
-    ),
-    radial-gradient(
-      circle at 80% 70%,
+      transparent 40%),
+    radial-gradient(circle at 80% 70%,
       rgba(168, 85, 247, 0.04) 0%,
-      transparent 45%
-    );
+      transparent 45%);
   pointer-events: none;
   z-index: -1;
 }
 
 [data-theme="dark"] .video-container::before {
   background:
-    radial-gradient(
-      circle at 20% 30%,
+    radial-gradient(circle at 20% 30%,
       rgba(99, 102, 241, 0.08) 0%,
-      transparent 40%
-    ),
-    radial-gradient(
-      circle at 80% 70%,
+      transparent 40%),
+    radial-gradient(circle at 80% 70%,
       rgba(168, 85, 247, 0.06) 0%,
-      transparent 45%
-    );
+      transparent 45%);
 }
 
 /* Header and title styling */
@@ -91,11 +83,9 @@
   position: relative;
   font-weight: 700;
   text-align: center;
-  background: linear-gradient(
-    135deg,
-    var(--ifm-color-primary) 0%,
-    var(--ifm-color-primary-light) 100%
-  );
+  background: linear-gradient(135deg,
+      var(--ifm-color-primary) 0%,
+      var(--ifm-color-primary-light) 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -110,11 +100,9 @@
   transform: translateX(-50%);
   width: 80px;
   height: 4px;
-  background: linear-gradient(
-    135deg,
-    var(--ifm-color-primary) 0%,
-    var(--ifm-color-primary-light) 100%
-  );
+  background: linear-gradient(135deg,
+      var(--ifm-color-primary) 0%,
+      var(--ifm-color-primary-light) 100%);
   border-radius: 2px;
 }
 
@@ -150,12 +138,10 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.02) 0%,
-    rgba(168, 85, 247, 0.02) 50%,
-    rgba(59, 130, 246, 0.02) 100%
-  );
+  background: linear-gradient(135deg,
+      rgba(99, 102, 241, 0.02) 0%,
+      rgba(168, 85, 247, 0.02) 50%,
+      rgba(59, 130, 246, 0.02) 100%);
   border-radius: 24px;
   z-index: -1;
   opacity: 0;
@@ -175,12 +161,10 @@
 }
 
 [data-theme="dark"] .video-card::before {
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.08) 0%,
-    rgba(168, 85, 247, 0.06) 50%,
-    rgba(59, 130, 246, 0.08) 100%
-  );
+  background: linear-gradient(135deg,
+      rgba(99, 102, 241, 0.08) 0%,
+      rgba(168, 85, 247, 0.06) 50%,
+      rgba(59, 130, 246, 0.08) 100%);
 }
 
 .video-card:hover {
@@ -221,38 +205,33 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.03) 0%,
-    rgba(168, 85, 247, 0.02) 100%
-  );
+  background: linear-gradient(135deg,
+      rgba(99, 102, 241, 0.03) 0%,
+      rgba(168, 85, 247, 0.02) 100%);
   border-radius: 20px;
   z-index: -1;
 }
 
 [data-theme="dark"] .video-info {
-  background: linear-gradient(
-    145deg,
-    var(--dark-bg-secondary) 0%,
-    #0f1419 100%
-  );
+  background: linear-gradient(145deg,
+      var(--dark-bg-secondary) 0%,
+      #0f1419 100%);
   border-color: var(--dark-border);
 }
 
 [data-theme="dark"] .video-info::before {
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.06) 0%,
-    rgba(168, 85, 247, 0.04) 100%
-  );
+  background: linear-gradient(135deg,
+      rgba(99, 102, 241, 0.06) 0%,
+      rgba(168, 85, 247, 0.04) 100%);
 }
 
 .video-title {
-  margin: 0 0 1rem 0;
+  margin: 0 auto 1rem auto;
   font-size: 1.25rem;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
+  text-align: center;
   -webkit-box-orient: vertical;
   overflow: hidden;
   line-height: 1.5;
@@ -403,11 +382,13 @@
 }
 
 @keyframes pulse {
+
   0%,
   100% {
     opacity: 0.7;
     transform: scale(1);
   }
+
   50% {
     opacity: 1;
     transform: scale(1.1);
@@ -429,7 +410,8 @@
   width: 100%;
   margin: 1rem 0;
   position: relative;
-  padding-top: 56.25%; /* 16:9 Aspect Ratio */
+  padding-top: 56.25%;
+  /* 16:9 Aspect Ratio */
 }
 
 .video-embed-large iframe {
@@ -447,11 +429,9 @@
   gap: 1.5rem;
   margin-bottom: 3rem;
   padding: 0.5rem;
-  background: linear-gradient(
-    145deg,
-    rgba(255, 255, 255, 0.8) 0%,
-    rgba(248, 250, 252, 0.8) 100%
-  );
+  background: linear-gradient(145deg,
+      rgba(255, 255, 255, 0.8) 0%,
+      rgba(248, 250, 252, 0.8) 100%);
   border-radius: 20px;
   backdrop-filter: blur(10px);
   border: 1px solid rgba(226, 232, 240, 0.6);
@@ -463,11 +443,9 @@
 }
 
 [data-theme="dark"] .video-tabs {
-  background: linear-gradient(
-    145deg,
-    rgba(17, 24, 39, 0.8) 0%,
-    rgba(15, 23, 42, 0.8) 100%
-  );
+  background: linear-gradient(145deg,
+      rgba(17, 24, 39, 0.8) 0%,
+      rgba(15, 23, 42, 0.8) 100%);
   border-color: var(--dark-border);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
@@ -494,11 +472,9 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.1) 0%,
-    rgba(168, 85, 247, 0.1) 100%
-  );
+  background: linear-gradient(135deg,
+      rgba(99, 102, 241, 0.1) 0%,
+      rgba(168, 85, 247, 0.1) 100%);
   opacity: 0;
   transition: opacity 0.3s ease;
   border-radius: 16px;
@@ -522,11 +498,9 @@
 }
 
 .tab-button.active {
-  background: linear-gradient(
-    135deg,
-    var(--ifm-color-primary) 0%,
-    var(--ifm-color-primary-light) 100%
-  );
+  background: linear-gradient(135deg,
+      var(--ifm-color-primary) 0%,
+      var(--ifm-color-primary-light) 100%);
   color: white;
   transform: translateY(-2px);
   box-shadow:
@@ -626,11 +600,9 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(
-    135deg,
-    rgba(99, 102, 241, 0.1) 0%,
-    rgba(168, 85, 247, 0.1) 100%
-  );
+  background: linear-gradient(135deg,
+      rgba(99, 102, 241, 0.1) 0%,
+      rgba(168, 85, 247, 0.1) 100%);
   opacity: 0;
   transition: opacity 0.3s ease;
 }
@@ -663,23 +635,19 @@
   font-weight: 600;
   color: var(--ifm-color-emphasis-700);
   padding: 0.75rem 1rem;
-  background: linear-gradient(
-    145deg,
-    rgba(99, 102, 241, 0.1) 0%,
-    rgba(168, 85, 247, 0.1) 100%
-  );
+  background: linear-gradient(145deg,
+      rgba(99, 102, 241, 0.1) 0%,
+      rgba(168, 85, 247, 0.1) 100%);
   border-radius: 12px;
   border: 1px solid rgba(99, 102, 241, 0.2);
   min-width: 120px;
   text-align: center;
 }
 
 [data-theme="dark"] .pagination button {
-  background: linear-gradient(
-    145deg,
-    var(--dark-bg-secondary) 0%,
-    #0f172a 100%
-  );
+  background: linear-gradient(145deg,
+      var(--dark-bg-secondary) 0%,
+      #0f172a 100%);
   color: var(--dark-text-primary);
   border-color: var(--dark-border);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
@@ -699,10 +667,8 @@
 
 [data-theme="dark"] .pagination span {
   color: var(--dark-text-primary);
-  background: linear-gradient(
-    145deg,
-    rgba(59, 130, 246, 0.1) 0%,
-    rgba(168, 85, 247, 0.1) 100%
-  );
+  background: linear-gradient(145deg,
+      rgba(59, 130, 246, 0.1) 0%,
+      rgba(168, 85, 247, 0.1) 100%);
   border-color: rgba(59, 130, 246, 0.3);
-}
+}