Improve channel card custom markup

1 files changed, 54 insertions, 4 deletions

diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
index 85018afe2..80c36a58b 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
@@ -2,8 +2,58 @@
 @import '_mixins';
 
 .channel {
-  border-radius: 15px;
-  padding: 10px;
-  width: min-content;
-  border: 1px solid pvar(--mainColor);
+  padding: 20px;
+  background-color: pvar(--channelBackgroundColor);
+  margin: 0 30px 30px 0;
+  width: fit-content;
+}
+
+.channel-avatar-row,
+.video {
+  width: 280px;
+}
+
+.channel-avatar-row {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto 1fr;
+  column-gap: 15px;
+
+  a {
+    @include peertube-word-wrap;
+
+    color: pvar(--mainForegroundColor);
+  }
+
+  my-actor-avatar {
+    @include actor-avatar-size(75px);
+
+    grid-column: 1;
+    grid-row: 1 / 4;
+  }
+
+  h6 {
+    grid-column: 2;
+    margin: 0;
+  }
+
+  .actor-counters {
+    @include actor-counters(5px);
+
+    font-size: 13px;
+    grid-column: 2;
+  }
+
+  .description-html {
+    @include fade-text(30px, pvar(--channelBackgroundColor));
+
+    max-height: 60px;
+    grid-column: 2;
+  }
+}
+
+.video-label {
+  font-size: 12px;
+  color: pvar(--greyForegroundColor);
+  margin: 15px 0 5px;
 }