Fix live update of autoplay next video

[github/Chocobozzz/PeerTube.git] / client / src / app / +videos / video-list / overview / video-overview.component.scss

diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index ec73c628c2e7abdcbca79d324f62525332304a1a..5a789b66d564aa7aa72534f148b21b7116cd504e 100644 (file)
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -1,6 +1,6 @@
-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .section-title {
   // make the element span a full grid row within .videos grid
@@ -8,84 +8,49 @@
 }
 
 .margin-content {
-  @include grid-videos-miniature-layout;
+  @include grid-videos-miniature-layout-with-margins;
 }
 
 .section {
   &:first-child {
-    padding-top: 30px;
+    padding-top: 15px;
 
     .section-title {
-      border-top: none !important;
+      border-top: 0 !important;
     }
   }
 
   .section-title {
     font-size: 24px;
-    font-weight: $font-semibold;
-    padding-top: 15px;
-    margin-bottom: 15px;
-    display: flex;
-    justify-content: space-between;
+    padding-top: 20px;
+    margin-bottom: 30px;
 
     &:not(h2) {
       border-top: 1px solid $separator-border-color;
     }
 
-    a {
-      &:hover, &:focus:not(.focus-visible), &:active {
-        text-decoration: none;
-        outline: none;
-      }
-
-      color: pvar(--mainForegroundColor);
+    a > h2 {
+      margin-bottom: 0;
+      display: inline-block;
+      font-weight: $font-bold;
     }
-  }
-
-  &.channel {
-    .section-title {
-      a {
-        display: flex;
-        width: fit-content;
-        align-items: center;
-
-        img {
-          @include channel-avatar(28px);
 
-          margin-right: 8px;
-        }
-      }
+    my-actor-avatar {
+      @include margin-right(8px);
 
-      .followers {
-        color: pvar(--greyForegroundColor);
-        font-weight: normal;
-        font-size: 14px;
-        margin-left: 10px;
-        position: relative;
-        top: 2px;
-      }
+      position: relative;
+      top: -2px;
     }
   }
 
-  .show-more {
-    position: relative;
-    top: -5px;
-    display: inline-block;
-    font-size: 16px;
-    text-transform: uppercase;
-    color: pvar(--greyForegroundColor);
-    margin-bottom: 10px;
-    font-weight: $font-semibold;
-    text-decoration: none;
-  }
-
   @media screen and (max-width: $mobile-view) {
     max-height: initial;
     overflow: initial;
 
     .section-title {
+      @include margin-left(10px);
+
       font-size: 17px;
-      margin-left: 10px;
     }
   }
 }