diff options
author | Chocobozzz <me@florianbigard.com> | 2021-04-28 11:49:34 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-04-28 11:49:34 +0200 |
commit | 746018f6b81b40e8858303662ac9ec5ce59ac6eb (patch) | |
tree | 7b115d12c1926e6283346072fe1c6adbf056abd7 /client/src/sass | |
parent | ec489ce2f74570f94dffb62266f4ed6f18621b3e (diff) | |
download | PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.tar.gz PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.tar.zst PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.zip |
Refactor actor avatar display
Diffstat (limited to 'client/src/sass')
-rw-r--r-- | client/src/sass/include/_actor.scss | 12 | ||||
-rw-r--r-- | client/src/sass/include/_mixins.scss | 33 |
2 files changed, 6 insertions, 39 deletions
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss index a4798ce1d..ccfd73ecd 100644 --- a/client/src/sass/include/_actor.scss +++ b/client/src/sass/include/_actor.scss | |||
@@ -25,8 +25,8 @@ | |||
25 | grid-column: 1; | 25 | grid-column: 1; |
26 | margin-bottom: 30px; | 26 | margin-bottom: 30px; |
27 | 27 | ||
28 | .channel-avatar { | 28 | .main-avatar { |
29 | @include channel-avatar(120px); | 29 | @include actor-avatar-size(120px); |
30 | } | 30 | } |
31 | 31 | ||
32 | > div { | 32 | > div { |
@@ -77,12 +77,8 @@ | |||
77 | font-size: 22px; | 77 | font-size: 22px; |
78 | } | 78 | } |
79 | 79 | ||
80 | .channel-avatar { | 80 | .main-avatar { |
81 | @include channel-avatar(80px); | 81 | @include actor-avatar-size(80px); |
82 | } | ||
83 | |||
84 | .account-avatar { | ||
85 | @include avatar(120px); | ||
86 | } | 82 | } |
87 | } | 83 | } |
88 | } | 84 | } |
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 2c8ad1d57..dc6ab8076 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -539,21 +539,12 @@ | |||
539 | } | 539 | } |
540 | } | 540 | } |
541 | 541 | ||
542 | @mixin avatar ($size) { | 542 | @mixin actor-avatar-size ($size) { |
543 | object-fit: cover; | 543 | display: inline-block; |
544 | border-radius: 50%; | ||
545 | width: $size; | ||
546 | height: $size; | ||
547 | min-width: $size; | ||
548 | min-height: $size; | ||
549 | } | ||
550 | |||
551 | @mixin channel-avatar ($size) { | ||
552 | width: $size; | 544 | width: $size; |
553 | height: $size; | 545 | height: $size; |
554 | min-width: $size; | 546 | min-width: $size; |
555 | min-height: $size; | 547 | min-height: $size; |
556 | border-radius: 5px; | ||
557 | } | 548 | } |
558 | 549 | ||
559 | @mixin chevron ($size, $border-width) { | 550 | @mixin chevron ($size, $border-width) { |
@@ -595,26 +586,6 @@ | |||
595 | margin-bottom: 10px; | 586 | margin-bottom: 10px; |
596 | } | 587 | } |
597 | 588 | ||
598 | @mixin actor-owner { | ||
599 | @include disable-default-a-behaviour; | ||
600 | |||
601 | font-size: 13px; | ||
602 | margin-top: 4px; | ||
603 | color: pvar(--mainForegroundColor); | ||
604 | |||
605 | span:hover { | ||
606 | opacity: 0.8; | ||
607 | } | ||
608 | |||
609 | img { | ||
610 | @include avatar(18px); | ||
611 | |||
612 | margin-left: 7px; | ||
613 | position: relative; | ||
614 | top: -2px; | ||
615 | } | ||
616 | } | ||
617 | |||
618 | @mixin create-button { | 589 | @mixin create-button { |
619 | @include peertube-button-link; | 590 | @include peertube-button-link; |
620 | @include orange-button; | 591 | @include orange-button; |