]>
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 | ||
23 | .avatar-18 { | |
24 | --avatarSize: 18px; | |
25 | --initialFontSize: 13px; | |
26 | } | |
27 | ||
fbdcd4ec | 28 | .avatar-25 { |
746018f6 | 29 | --avatarSize: 25px; |
fbdcd4ec | 30 | } |
31 | ||
09790754 | 32 | .avatar-32 { |
931d3430 | 33 | --avatarSize: 32px; |
09790754 | 34 | } |
35 | ||
fbdcd4ec | 36 | .avatar-34 { |
931d3430 | 37 | --avatarSize: 34px; |
fbdcd4ec | 38 | } |
39 | ||
40 | .avatar-36 { | |
931d3430 | 41 | --avatarSize: 36px; |
fbdcd4ec | 42 | } |
43 | ||
44 | .avatar-40 { | |
931d3430 | 45 | --avatarSize: 40px; |
fbdcd4ec | 46 | } |
47 | ||
746018f6 C |
48 | .avatar-100 { |
49 | --avatarSize: 100px; | |
50 | --initialFontSize: 40px; | |
931d3430 | 51 | } |
09790754 | 52 | |
746018f6 | 53 | .avatar-120 { |
931d3430 C |
54 | --avatarSize: 120px; |
55 | --initialFontSize: 46px; | |
09790754 | 56 | } |
57 | ||
58 | a:hover { | |
59 | text-decoration: none; | |
60 | } | |
61 | ||
62 | .initial { | |
63 | background-color: #3C2109; | |
64 | color: #fff; | |
65 | display: flex; | |
66 | align-items: center; | |
67 | justify-content: center; | |
746018f6 | 68 | font-size: var(--initialFontSize); |
09790754 | 69 | |
70 | &.blue { | |
71 | background-color: #009FD4; | |
72 | } | |
73 | ||
74 | &.green { | |
75 | background-color: #00AA55; | |
76 | } | |
77 | ||
78 | &.purple { | |
79 | background-color: #B381B3; | |
80 | } | |
81 | ||
82 | &.gray { | |
83 | background-color: #939393; | |
84 | } | |
85 | ||
86 | &.yellow { | |
87 | background-color: #AA8F00; | |
88 | } | |
89 | ||
90 | &.orange { | |
91 | background-color: #D47500; | |
92 | } | |
93 | ||
94 | &.red { | |
95 | background-color: #E76E3C; | |
96 | } | |
97 | ||
98 | &.dark-blue { | |
99 | background-color: #0A3055; | |
100 | } | |
101 | } |