]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
Square channel avatar consistency
[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-main / account / actor-avatar-info.component.scss
CommitLineData
52d9f792
C
1@import '_variables';
2@import '_mixins';
3
4.actor {
5 display: flex;
6
7 img {
52d9f792 8 margin-right: 15px;
deb8b9cd
C
9
10 &:not(.channel) {
11 @include avatar(100px);
12 }
13
14 &.channel {
15 @include channel-avatar(100px);
16 }
52d9f792
C
17 }
18
df8914c9
RK
19 .actor-img-edit-container {
20 position: relative;
21 width: 0;
22
23 .actor-img-edit-button {
24 @include peertube-button-file(21px);
25 @include button-with-icon(19px);
6c808af9 26 @include orange-button;
deb8b9cd 27
df8914c9
RK
28 margin-top: 10px;
29 margin-bottom: 5px;
30 border-radius: 50%;
31 top: 55px;
32 right: 45px;
33 cursor: pointer;
34
35 input {
36 width: 30px;
37 height: 30px;
38 }
39
40 my-global-icon {
41 right: 7px;
42 }
43 }
44 }
45
52d9f792 46 .actor-info {
df8914c9
RK
47 justify-content: center;
48 display: inline-flex;
49 flex-direction: column;
50
52d9f792
C
51 .actor-info-names {
52 display: flex;
53 align-items: center;
54
55 .actor-info-display-name {
56 font-size: 20px;
57 font-weight: $font-bold;
2c3abc4f
C
58
59 @media screen and (max-width: $small-view) {
60 font-size: 16px;
61 }
52d9f792
C
62 }
63
64 .actor-info-username {
65 margin-left: 7px;
66 position: relative;
67 top: 2px;
68 font-size: 14px;
22a16e36 69 color: $grey-actor-name;
52d9f792
C
70 }
71 }
72
73 .actor-info-followers {
74 font-size: 15px;
df8914c9 75 padding-bottom: .5rem;
52d9f792
C
76 }
77 }
78}
1ea7da81
RK
79
80.actor-img-edit-container ::ng-deep .popover-avatar-info .popover-body {
81 padding: 0;
82
83 .dropdown-item {
84 padding: 6px 10px;
85 border-radius: 4px;
86
87 &:first-child {
88 @include peertube-file;
89 display: block;
90 }
91 }
92}