styling fixes to youtube box

1 files changed, 112 insertions, 110 deletions

diff --git a/src/client/apis/youtube/YoutubeBox.scss b/src/client/apis/youtube/YoutubeBox.scss
index 1fc91a9ae..eabdbb1ac 100644
--- a/src/client/apis/youtube/YoutubeBox.scss
+++ b/src/client/apis/youtube/YoutubeBox.scss
@@ -1,124 +1,126 @@
-ul {
-    list-style-type: none;
-    padding-inline-start: 10px;
-}
-
-
-li {
-    margin: 4px;
-    display: inline-flex;
-}
-
-li:hover {
-    cursor: pointer;
-    opacity: 0.8;
-}
-
-.search_wrapper {
-    width: 100%;
-    display: inline-flex;
-    height: 175px;
-
-    .video_duration {
-        // margin: 0;
-        // padding: 0;
-        border: 0;
-        background: transparent;
-        display: inline-block;
-        position: relative;
-        bottom: 25px;
-        left: 85%;
+.youtubeBox-cont {
+    ul {
+        list-style-type: none;
+        padding-inline-start: 10px;
+    }
+
+
+    li {
         margin: 4px;
-        color: #FFFFFF;
-        background-color: rgba(0, 0, 0, 0.80);
-        padding: 2px 4px;
-        border-radius: 2px;
-        letter-spacing: .5px;
-        font-size: 1.2rem;
-        font-weight: 500;
-        line-height: 1.2rem;
+        display: inline-flex;
+    }
 
+    li:hover {
+        cursor: pointer;
+        opacity: 0.8;
     }
 
-    .textual_info {
-        font-family: Arial, Helvetica, sans-serif;
-
-        .videoTitle {
-            margin-left: 4px;
-            // display: inline-block;
-            color: #0D0D0D;
-            -webkit-line-clamp: 2;
-            display: block;
-            max-height: 4.8rem;
-            overflow: hidden;
-            font-size: 1.8rem;
-            font-weight: 400;
-            line-height: 2.4rem;
-            -webkit-box-orient: vertical;
-            text-overflow: ellipsis;
-            white-space: normal;
-            display: -webkit-box;
-        }
+    .search_wrapper {
+        width: 100%;
+        display: inline-flex;
+        height: 175px;
 
-        .channelName {
-            color:#606060;
-            margin-left: 4px;
-            font-size: 1.3rem;
-            font-weight: 400;
-            line-height: 1.8rem;
-            text-transform: none;
-            margin-top: 0px;
+        .video_duration {
+            // margin: 0;
+            // padding: 0;
+            border: 0;
+            background: transparent;
             display: inline-block;
-        }
+            position: relative;
+            bottom: 25px;
+            left: 85%;
+            margin: 4px;
+            color: #FFFFFF;
+            background-color: rgba(0, 0, 0, 0.80);
+            padding: 2px 4px;
+            border-radius: 2px;
+            letter-spacing: .5px;
+            font-size: 1.2rem;
+            font-weight: 500;
+            line-height: 1.2rem;
 
-        .video_description {
-            margin-left: 4px;
-            // font-size: 12px;
-            color: #606060;
-            padding-top: 8px;
-            margin-bottom: 8px;
-            display: block;
-            line-height: 1.8rem;
-            max-height: 4.2rem;
-            overflow: hidden;
-            font-size: 1.3rem;
-            font-weight: 400;
-            text-transform: none;
         }
 
-        .publish_time {
-            //display: inline-block;
-            margin-left: 8px;
-            padding: 0;
-            border: 0;
-            background: transparent;
-            color: #606060;
-            max-width: 100%;
-            line-height: 1.8rem;
-            max-height: 3.6rem;
-            overflow: hidden;
-            font-size: 1.3rem;
-            font-weight: 400;
-            text-transform: none;
-        }
+        .textual_info {
+            font-family: Arial, Helvetica, sans-serif;
+
+            .videoTitle {
+                margin-left: 4px;
+                // display: inline-block;
+                color: #0D0D0D;
+                -webkit-line-clamp: 2;
+                display: block;
+                max-height: 4.8rem;
+                overflow: hidden;
+                font-size: 1.8rem;
+                font-weight: 400;
+                line-height: 2.4rem;
+                -webkit-box-orient: vertical;
+                text-overflow: ellipsis;
+                white-space: normal;
+                display: -webkit-box;
+            }
+
+            .channelName {
+                color: #606060;
+                margin-left: 4px;
+                font-size: 1.3rem;
+                font-weight: 400;
+                line-height: 1.8rem;
+                text-transform: none;
+                margin-top: 0px;
+                display: inline-block;
+            }
+
+            .video_description {
+                margin-left: 4px;
+                // font-size: 12px;
+                color: #606060;
+                padding-top: 8px;
+                margin-bottom: 8px;
+                display: block;
+                line-height: 1.8rem;
+                max-height: 4.2rem;
+                overflow: hidden;
+                font-size: 1.3rem;
+                font-weight: 400;
+                text-transform: none;
+            }
+
+            .publish_time {
+                //display: inline-block;
+                margin-left: 8px;
+                padding: 0;
+                border: 0;
+                background: transparent;
+                color: #606060;
+                max-width: 100%;
+                line-height: 1.8rem;
+                max-height: 3.6rem;
+                overflow: hidden;
+                font-size: 1.3rem;
+                font-weight: 400;
+                text-transform: none;
+            }
+
+            .viewCount {
+
+                margin-left: 8px;
+                padding: 0;
+                border: 0;
+                background: transparent;
+                color: #606060;
+                max-width: 100%;
+                line-height: 1.8rem;
+                max-height: 3.6rem;
+                overflow: hidden;
+                font-size: 1.3rem;
+                font-weight: 400;
+                text-transform: none;
+            }
+
 
-        .viewCount {
 
-            margin-left: 8px;
-            padding: 0;
-            border: 0;
-            background: transparent;
-            color: #606060;
-            max-width: 100%;
-            line-height: 1.8rem;
-            max-height: 3.6rem;
-            overflow: hidden;
-            font-size: 1.3rem;
-            font-weight: 400;
-            text-transform: none;
         }
-        
-            
-        
     }
 }
\ No newline at end of file