]>
Commit | Line | Data |
---|---|---|
1 | @use '_variables' as *; | |
2 | @use '_mixins' as *; | |
3 | ||
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 | $sizes: '18', '25', '28', '32', '34', '35', '36', '40', '48', '75', '80', '100', '120'; | |
24 | ||
25 | @each $size in $sizes { | |
26 | .avatar-#{$size} { | |
27 | --avatarSize: #{$size}px; | |
28 | } | |
29 | } | |
30 | ||
31 | .avatar-18 { | |
32 | --initialFontSize: 13px; | |
33 | } | |
34 | ||
35 | .avatar-100 { | |
36 | --initialFontSize: 40px; | |
37 | } | |
38 | ||
39 | .avatar-120 { | |
40 | --initialFontSize: 46px; | |
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; | |
53 | font-size: var(--initialFontSize); | |
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 | } |