1 | .str-chat__channel-preview-messenger {
|
2 | display: flex;
|
3 | width: 100%;
|
4 | border: none;
|
5 | padding: var(--xs-p);
|
6 | align-items: center;
|
7 | background: transparent;
|
8 | box-shadow: 0 1px 0 0 var(--border);
|
9 | text-align: left;
|
10 | margin: var(--xs-m) 0;
|
11 | color: var(--black);
|
12 |
|
13 | &:hover {
|
14 | cursor: pointer;
|
15 | }
|
16 |
|
17 | &--active {
|
18 | border: none;
|
19 | border-radius: var(--border-radius-md);
|
20 | background: var(--white-snow);
|
21 | box-shadow: 0 1px 5px 0 var(--border);
|
22 | }
|
23 |
|
24 | .str-chat__channel-preview-messenger--right {
|
25 | width: 100%;
|
26 | overflow: hidden;
|
27 |
|
28 | .str-chat__channel-preview-end-first-row {
|
29 | display: flex;
|
30 | align-items: center;
|
31 | width: 100%;
|
32 |
|
33 | .str-chat__channel-preview-messenger--name {
|
34 | width: 100%;
|
35 | }
|
36 |
|
37 | .str-chat__channel-preview-unread-badge {
|
38 | padding: 8px;
|
39 | font-size: 0.75rem;
|
40 | line-height: 0.44rem;
|
41 | border-radius: var(--border-radius-round);
|
42 | color: var(--unread-badge-color);
|
43 | background-color: var(--accent_red);
|
44 | font-weight: 700;
|
45 | }
|
46 | }
|
47 | }
|
48 |
|
49 | &--last-message p {
|
50 | font-size: var(--sm-font);
|
51 | margin: 0;
|
52 | line-height: 14px;
|
53 | max-width: 150px;
|
54 | text-overflow: ellipsis;
|
55 | overflow: hidden;
|
56 | white-space: nowrap;
|
57 | }
|
58 |
|
59 | &--last-message {
|
60 | font-size: var(--sm-font);
|
61 | line-height: 14px;
|
62 | opacity: 0.5;
|
63 | max-width: 150px;
|
64 | text-overflow: ellipsis;
|
65 | overflow: hidden;
|
66 | white-space: nowrap;
|
67 | }
|
68 |
|
69 | &--name {
|
70 | font-size: var(--md-font);
|
71 | line-height: 17px;
|
72 | font-weight: var(--font-weight-semi-bold);
|
73 | margin-bottom: calc(var(--xxs-m) / 2);
|
74 | max-width: 250px;
|
75 |
|
76 | span {
|
77 | display: block;
|
78 | overflow: hidden;
|
79 | white-space: nowrap;
|
80 | text-overflow: ellipsis;
|
81 | }
|
82 | }
|
83 |
|
84 | &--unread {
|
85 | .str-chat__channel-preview-messenger--last-message p {
|
86 | opacity: 1;
|
87 | font-weight: var(--font-weight-semi-bold);
|
88 | max-width: 150px;
|
89 | white-space: nowrap;
|
90 | overflow: hidden;
|
91 | text-overflow: ellipsis;
|
92 | }
|
93 |
|
94 | .str-chat__channel-preview-messenger--last-message {
|
95 | opacity: 1;
|
96 | font-weight: var(--font-weight-semi-bold);
|
97 | max-width: 150px;
|
98 | white-space: nowrap;
|
99 | overflow: hidden;
|
100 | text-overflow: ellipsis;
|
101 | }
|
102 | }
|
103 | }
|
104 |
|
105 | .dark.str-chat {
|
106 | .str-chat__channel-preview-messenger {
|
107 | &--active {
|
108 | background: var(--white5);
|
109 | box-shadow: 0 1px 5px 0 var(--black10);
|
110 | }
|
111 |
|
112 | &--last-message p {
|
113 | color: var(--white);
|
114 | margin: 0;
|
115 | max-width: 150px;
|
116 | text-overflow: ellipsis;
|
117 | overflow: hidden;
|
118 | white-space: nowrap;
|
119 | }
|
120 |
|
121 | &--last-message {
|
122 | color: var(--white);
|
123 | max-width: 150px;
|
124 | text-overflow: ellipsis;
|
125 | overflow: hidden;
|
126 | white-space: nowrap;
|
127 | }
|
128 |
|
129 | &--name {
|
130 | color: var(--white);
|
131 | }
|
132 | }
|
133 | }
|