|
2 | 2 | // naming scheme; it's completely unclear where or how they're being used |
3 | 3 | // --Matthew |
4 | 4 |
|
5 | | -.mx_UserPill, |
6 | | -.mx_RoomPill, |
7 | | -.mx_AtRoomPill { |
8 | | - display: inline-flex; |
9 | | - align-items: center; |
10 | | - vertical-align: middle; |
11 | | - border-radius: $font-16px; |
12 | | - line-height: $font-15px; |
13 | | - padding-left: 0; |
14 | | -} |
15 | | - |
16 | | -a.mx_Pill { |
17 | | - text-overflow: ellipsis; |
18 | | - white-space: nowrap; |
19 | | - overflow: hidden; |
20 | | - max-width: 100%; |
21 | | -} |
22 | | - |
23 | | -.mx_Pill { |
24 | | - padding: $font-1px; |
25 | | - padding-right: 0.4em; |
26 | | - vertical-align: text-top; |
27 | | - line-height: $font-17px; |
28 | | -} |
29 | | - |
30 | | -/* More specific to override `.markdown-body a` text-decoration */ |
31 | | -.mx_EventTile_content .markdown-body a.mx_Pill { |
32 | | - text-decoration: none; |
33 | | -} |
34 | | - |
35 | | -/* More specific to override `.markdown-body a` color */ |
36 | | -.mx_EventTile_content .markdown-body a.mx_UserPill, |
37 | | -.mx_UserPill { |
38 | | - color: $primary-content; |
39 | | - background-color: $other-user-pill-bg-color; |
40 | | -} |
41 | | - |
42 | | -.mx_UserPill_selected { |
43 | | - background-color: $accent !important; |
44 | | -} |
45 | | - |
46 | | -/* More specific to override `.markdown-body a` color */ |
47 | | -.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, |
48 | | -.mx_EventTile_content .markdown-body a.mx_AtRoomPill, |
49 | | -.mx_EventTile_content .mx_AtRoomPill, |
50 | | -.mx_MessageComposer_input .mx_AtRoomPill { |
51 | | - color: $accent-fg-color; |
52 | | - background-color: $alert; |
53 | | -} |
54 | | - |
55 | | -/* More specific to override `.markdown-body a` color */ |
56 | | -.mx_EventTile_content .markdown-body a.mx_RoomPill, |
57 | | -.mx_RoomPill { |
58 | | - color: $accent-fg-color; |
59 | | - background-color: $rte-room-pill-color; |
60 | | -} |
61 | | - |
62 | | -.mx_EventTile_body .mx_UserPill, |
63 | | -.mx_EventTile_body .mx_RoomPill { |
64 | | - cursor: pointer; |
65 | | -} |
66 | | - |
67 | | -.mx_UserPill .mx_BaseAvatar, |
68 | | -.mx_RoomPill .mx_BaseAvatar, |
69 | | -.mx_AtRoomPill .mx_BaseAvatar { |
70 | | - position: relative; |
71 | | - display: inline-flex; |
72 | | - align-items: center; |
73 | | - border-radius: 10rem; |
74 | | - margin-right: 0.24rem; |
75 | | - pointer-events: none; |
76 | | -} |
77 | | - |
78 | | -.mx_Emoji { |
79 | | - // Should be 1.8rem for our default 1.4rem message bodies, |
80 | | - // and scale with the size of the surrounding text |
81 | | - font-size: calc(18 / 14 * 1em); |
82 | | - vertical-align: bottom; |
83 | | -} |
84 | | - |
85 | 5 | .mx_Markdown_BOLD { |
86 | 6 | font-weight: bold; |
87 | 7 | } |
@@ -115,3 +35,10 @@ a.mx_Pill { |
115 | 35 | .mx_Markdown_STRIKETHROUGH { |
116 | 36 | text-decoration: line-through; |
117 | 37 | } |
| 38 | + |
| 39 | +.mx_Emoji { |
| 40 | + // Should be 1.8rem for our default message bodies, and scale with the |
| 41 | + // surrounding text |
| 42 | + font-size: max($font-18px, 1em); |
| 43 | + vertical-align: bottom; |
| 44 | +} |
0 commit comments