X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Baccounts%2Faccount-video-channels%2Faccount-video-channels.component.scss;h=832ddf973ab91851902db0cdfeee69bbe646e9b4;hb=5b0ec7cddb1ae6dbd2057f067382866f846b882c;hp=7e88802f323027e5e1e712c57652e49d50b23063;hpb=4024c44f9027a32809931de0692d40d001df721c;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 7e88802f3..832ddf973 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -1,6 +1,7 @@
-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .margin-content {
   @include grid-videos-miniature-margins;
@@ -27,17 +28,16 @@
   grid-template-columns: auto auto 1fr;
   grid-template-rows: auto 1fr;
 
-  .avatar-link {
+  my-actor-avatar {
+    @include margin-right(15px);
+
     grid-column: 1;
     grid-row: 1 / 3;
-    margin-right: 30px;
-  }
-
-  img {
-    @include channel-avatar(75px);
   }
 
   a {
+    @include peertube-word-wrap;
+
     color: pvar(--mainForegroundColor);
   }
 
@@ -51,29 +51,20 @@
   }
 
   .actor-counters {
+    @include margin-left(15px);
+    @include actor-counters;
+
     grid-row: 1;
     grid-column: 3;
-    color: pvar(--greyForegroundColor);
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    margin-left: 15px;
-  }
-
-  .actor-counters > *:not(:last-child)::after {
-    content: '•';
-    margin: 0 10px;
-    color: pvar(--mainColor);
   }
 
   .description-html {
+    @include fade-text(30px, pvar(--channelBackgroundColor));
+
     grid-column: 2 / 4;
     grid-row: 2;
 
     max-height: 80px;
-    font-size: 16px;
-
-    @include fade-text(30px, pvar(--channelBackgroundColor));
   }
 }
 
@@ -92,7 +83,8 @@ my-subscribe-button {
   overflow: hidden;
 
   my-video-miniature {
-    margin-right: 15px;
+    @include margin-right(15px);
+
     min-width: $video-thumbnail-medium-width;
     max-width: $video-thumbnail-medium-width;
   }
@@ -107,12 +99,11 @@ my-subscribe-button {
   position: absolute;
   right: 0;
   background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
-  padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px;
+  padding: (math.div($video-thumbnail-medium-height, 2) - 10px) 15px 0 60px;
   z-index: z(miniature) + 1;
 
   a {
     color: pvar(--mainColor);
-    font-size: 16px;
     font-weight: $font-semibold;
   }
 }
@@ -133,10 +124,6 @@ my-subscribe-button {
       grid-row: 1 / 4;
     }
 
-    h2 {
-      font-size: 16px;
-    }
-
     .actor-counters {
       margin: 0;
       font-size: 13px;