Refactor actor avatar display

[github/Chocobozzz/PeerTube.git] / client / src / sass / include / _mixins.scss

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 73606f9403b6347e06b71e09fcd71066b020b1b6..dc6ab8076c4d87adabf69a30ef6b46f9498c8c95 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -539,21 +539,12 @@
   }
 }
 
-@mixin avatar ($size) {
-  object-fit: cover;
-  border-radius: 50%;
-  width: $size;
-  height: $size;
-  min-width: $size;
-  min-height: $size;
-}
-
-@mixin channel-avatar ($size) {
+@mixin actor-avatar-size ($size) {
+  display: inline-block;
   width: $size;
   height: $size;
   min-width: $size;
   min-height: $size;
-  border-radius: 5px;
 }
 
 @mixin chevron ($size, $border-width) {
@@ -595,26 +586,6 @@
   margin-bottom: 10px;
 }
 
-@mixin actor-owner {
-  @include disable-default-a-behaviour;
-
-  font-size: 13px;
-  margin-top: 4px;
-  color: pvar(--mainForegroundColor);
-
-  span:hover {
-    opacity: 0.8;
-  }
-
-  img {
-    @include avatar(18px);
-
-    margin-left: 7px;
-    position: relative;
-    top: -2px;
-  }
-}
-
 @mixin create-button {
   @include peertube-button-link;
   @include orange-button;
@@ -830,17 +801,9 @@
     --chip-padding: .2rem .3rem;
   }
 
-  .avatar {
+  ::ng-deep .avatar {
     margin-left: -.4rem;
     margin-right: .2rem;
-    height: $avatar-height;
-    width: $avatar-height;
-
-    border-radius: 50%;
-    display: inline-block;
-    line-height: 1.25;
-    position: relative;
-    vertical-align: middle;
   }
 
   &.two-lines {
@@ -914,7 +877,7 @@
     padding-bottom: 15px;
     margin-bottom: $sub-menu-margin-bottom;
 
-    my-global-icon {
+    > my-global-icon {
       margin-right: 10px;
       vertical-align: bottom;
       width: 24px;