aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-28 11:49:34 +0200
committerChocobozzz <me@florianbigard.com>2021-04-28 11:49:34 +0200
commit746018f6b81b40e8858303662ac9ec5ce59ac6eb (patch)
tree7b115d12c1926e6283346072fe1c6adbf056abd7 /client/src/sass
parentec489ce2f74570f94dffb62266f4ed6f18621b3e (diff)
downloadPeerTube-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.scss12
-rw-r--r--client/src/sass/include/_mixins.scss33
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;