Fix live image aspect ratio in theatre mode

[github/Chocobozzz/PeerTube.git] / client / src / app / +videos / +video-watch / video-avatar-channel.component.scss

diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
index 4998e85faa77e120832676298df550e2e0077843..20e32240cdbde340d21bfbc3e5518f1eb3acb59b 100644 (file)
--- a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
@@ -1,44 +1,42 @@
 @import '_mixins';
 
+@mixin main {
+  @include actor-avatar-size(35px);
+}
+
+@mixin secondary {
+  height: 60%;
+  width: 60%;
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  background-color: rgba(0, 0, 0, 0);
+}
+
 .wrapper {
-  $avatar-size: 35px;
+  @include actor-avatar-size(35px);
 
-  width: $avatar-size;
-  height: $avatar-size;
   position: relative;
   margin-right: 5px;
   margin-bottom: 5px;
 
-  &.avatar-sm {
-    width: 28px;
-    height: 28px;
-    margin-bottom: 3px;
-  }
+  &.generic-channel {
+    .account {
+      @include main();
+    }
 
-  a {
-    @include disable-outline;
+    .channel {
+      display: none !important;
+    }
   }
 
-  a img {
-    height: 100%;
-    object-fit: cover;
-    position: absolute;
-    top:50%;
-    left:50%;
-    transform: translate(-50%,-50%);
-    border-radius: 5px;
-
-    &:not(.channel-avatar) {
-      border-radius: 50%;
+  &:not(.generic-channel) {
+    .account {
+      @include secondary();
     }
-  }
 
-  a:nth-of-type(2) img {
-    height: 60%;
-    width: 60%;
-    border: 2px solid pvar(--mainBackgroundColor);
-    transform: translateX(15%);
-    position: relative;
-    background-color: pvar(--mainBackgroundColor);
+    .channel {
+      @include main();
+    }
   }
 }