Fix custom markup

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-custom-markup / peertube-custom-tags / channel-miniature-markup.component.scss

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 85018afe2b6d0ec5dc8bd3a4b6baef2d12479f1a..e8ef478d90179eb1d982b7f1dd33c38035d3c0bc 100644 (file)
--- 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
@@ -1,9 +1,57 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .channel {
-  border-radius: 15px;
-  padding: 10px;
-  width: min-content;
-  border: 1px solid pvar(--mainColor);
+  padding: 20px;
+  background-color: pvar(--channelBackgroundColor);
+  margin-bottom: 30px;
+  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 {
+    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;
 }