]>
Commit | Line | Data |
---|---|---|
8cbc40b2 C |
1 | @use '_variables' as *; |
2 | @use '_mixins' as *; | |
fbdcd4ec | 3 | |
746018f6 C |
4 | .avatar { |
5 | --avatarSize: 100%; | |
6 | --initialFontSize: 22px; | |
7 | ||
8 | width: var(--avatarSize); | |
9 | height: var(--avatarSize); | |
10 | min-width: var(--avatarSize); | |
11 | min-height: var(--avatarSize); | |
12 | ||
13 | &.account { | |
14 | object-fit: cover; | |
15 | border-radius: 50%; | |
16 | } | |
17 | ||
18 | &.channel { | |
19 | border-radius: 5px; | |
20 | } | |
21 | } | |
22 | ||
d0800f76 | 23 | $sizes: '18', '25', '28', '32', '34', '35', '36', '40', '48', '75', '80', '100', '120'; |
746018f6 | 24 | |
d0800f76 | 25 | @each $size in $sizes { |
26 | .avatar-#{$size} { | |
27 | --avatarSize: #{$size}px; | |
28 | } | |
fbdcd4ec | 29 | } |
30 | ||
d0800f76 | 31 | .avatar-18 { |
32 | --initialFontSize: 13px; | |
fbdcd4ec | 33 | } |
34 | ||
746018f6 | 35 | .avatar-100 { |
746018f6 | 36 | --initialFontSize: 40px; |
931d3430 | 37 | } |
09790754 | 38 | |
746018f6 | 39 | .avatar-120 { |
931d3430 | 40 | --initialFontSize: 46px; |
09790754 | 41 | } |
42 | ||
43 | a:hover { | |
44 | text-decoration: none; | |
45 | } | |
46 | ||
47 | .initial { | |
48 | background-color: #3C2109; | |
49 | color: #fff; | |
50 | display: flex; | |
51 | align-items: center; | |
52 | justify-content: center; | |
746018f6 | 53 | font-size: var(--initialFontSize); |
09790754 | 54 | |
55 | &.blue { | |
56 | background-color: #009FD4; | |
57 | } | |
58 | ||
59 | &.green { | |
60 | background-color: #00AA55; | |
61 | } | |
62 | ||
63 | &.purple { | |
64 | background-color: #B381B3; | |
65 | } | |
66 | ||
67 | &.gray { | |
68 | background-color: #939393; | |
69 | } | |
70 | ||
71 | &.yellow { | |
72 | background-color: #AA8F00; | |
73 | } | |
74 | ||
75 | &.orange { | |
76 | background-color: #D47500; | |
77 | } | |
78 | ||
79 | &.red { | |
80 | background-color: #E76E3C; | |
81 | } | |
82 | ||
83 | &.dark-blue { | |
84 | background-color: #0A3055; | |
85 | } | |
86 | } |