diff options
author | kontrollanten <6680299+kontrollanten@users.noreply.github.com> | 2021-04-27 16:08:10 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-27 16:08:10 +0200 |
commit | 0979075453b380fa8e3694db3f460e822f046c35 (patch) | |
tree | 93efe74fe8fb76c39a5acfe0722243ccdfd045b5 /client/src/app/shared/shared-account-avatar/account-avatar.component.scss | |
parent | 75d749596205511e012cecbdd39123277244f462 (diff) | |
download | PeerTube-0979075453b380fa8e3694db3f460e822f046c35.tar.gz PeerTube-0979075453b380fa8e3694db3f460e822f046c35.tar.zst PeerTube-0979075453b380fa8e3694db3f460e822f046c35.zip |
Use account initial as default avatar (#4002)
* client: use account initial as default avatar
* fix UI in user list
Avatars was cutted in the top and bottom
Diffstat (limited to 'client/src/app/shared/shared-account-avatar/account-avatar.component.scss')
-rw-r--r-- | client/src/app/shared/shared-account-avatar/account-avatar.component.scss | 56 |
1 files changed, 55 insertions, 1 deletions
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.scss b/client/src/app/shared/shared-account-avatar/account-avatar.component.scss index bb941d712..75a4cbf86 100644 --- a/client/src/app/shared/shared-account-avatar/account-avatar.component.scss +++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.scss | |||
@@ -5,6 +5,10 @@ | |||
5 | @include avatar(25px); | 5 | @include avatar(25px); |
6 | } | 6 | } |
7 | 7 | ||
8 | .avatar-32 { | ||
9 | @include avatar(32px); | ||
10 | } | ||
11 | |||
8 | .avatar-34 { | 12 | .avatar-34 { |
9 | @include avatar(34px); | 13 | @include avatar(34px); |
10 | } | 14 | } |
@@ -19,4 +23,54 @@ | |||
19 | 23 | ||
20 | .avatar-120 { | 24 | .avatar-120 { |
21 | @include avatar(120px); | 25 | @include avatar(120px); |
22 | } \ No newline at end of file | 26 | |
27 | &.initial { | ||
28 | font-size: 46px; | ||
29 | } | ||
30 | } | ||
31 | |||
32 | a:hover { | ||
33 | text-decoration: none; | ||
34 | } | ||
35 | |||
36 | .initial { | ||
37 | background-color: #3C2109; | ||
38 | color: #fff; | ||
39 | display: flex; | ||
40 | align-items: center; | ||
41 | justify-content: center; | ||
42 | font-size: 22px; | ||
43 | border-radius: 50%; | ||
44 | |||
45 | &.blue { | ||
46 | background-color: #009FD4; | ||
47 | } | ||
48 | |||
49 | &.green { | ||
50 | background-color: #00AA55; | ||
51 | } | ||
52 | |||
53 | &.purple { | ||
54 | background-color: #B381B3; | ||
55 | } | ||
56 | |||
57 | &.gray { | ||
58 | background-color: #939393; | ||
59 | } | ||
60 | |||
61 | &.yellow { | ||
62 | background-color: #AA8F00; | ||
63 | } | ||
64 | |||
65 | &.orange { | ||
66 | background-color: #D47500; | ||
67 | } | ||
68 | |||
69 | &.red { | ||
70 | background-color: #E76E3C; | ||
71 | } | ||
72 | |||
73 | &.dark-blue { | ||
74 | background-color: #0A3055; | ||
75 | } | ||
76 | } | ||