direct_conversation_timeline_item.scss (3212B)
1 .direct-conversation-timeline-item {
2 &:hover .animated.avatar {
3 canvas {
4 display: none;
5 }
6 img {
7 visibility: visible;
8 }
9 }
10
11 display: flex;
12 flex-direction: row;
13
14 padding: 0.75em;
15 height: 4.85em;
16 overflow: hidden;
17 box-sizing: border-box;
18 cursor: pointer;
19
20 :focus {
21 outline: none;
22 }
23
24 &:hover {
25 background-color: var(--selectedPost, $fallback--lightBg);
26 box-shadow: 0 0px 3px 1px rgba(0, 0, 0, 0.1);
27 }
28
29 .direct-conversation-timeline-item-left {
30 margin-right: 1em;
31 }
32
33 .direct-conversation-timeline-item-center {
34 width: 100%;
35 box-sizing: border-box;
36 overflow: hidden;
37 word-wrap: break-word;
38
39 .direct-conversation-preview {
40 display: inline-flex;
41 overflow: hidden;
42 white-space: nowrap;
43 text-overflow: ellipsis;
44 margin: 0.35rem 0;
45 height: 16px;
46 color: $fallback--text;
47 color: var(--faintText, $fallback--text);
48 width: 100%;
49 justify-content: space-between;
50 line-height: 1em;
51
52 .unread-indicator-wrapper {
53 display: flex;
54 align-items: center;
55 margin-left: 10px;
56
57 .unread-indicator {
58 border-radius: 100%;
59 height: 8px;
60 width: 8px;
61 background-color: $fallback--link;
62 background-color: var(--link, $fallback--link);
63 }
64 }
65
66 .content {
67 white-space: nowrap;
68 text-overflow: ellipsis;
69 overflow: hidden;
70 flex: 1;
71 margin-right: 10px;
72 }
73
74 .faint-link {
75 color: var(--faintLink, $fallback--link);
76 text-decoration: none;
77 }
78
79 .account-name {
80 min-width: 1.6em;
81 margin-right: 0.2em;
82 white-space: nowrap;
83 overflow: hidden;
84 text-overflow: ellipsis;
85 color: var(--faintLink, $fallback--link);
86 }
87
88 .user-name {
89 margin-right: 0.4em;
90 flex-shrink: 1;
91 text-overflow: ellipsis;
92 white-space: nowrap;
93 font-size: 14px;
94 overflow: hidden;
95 flex-shrink: 0;
96 max-width: 55%;
97 font-weight: bold;
98
99 img {
100 width: 14px;
101 height: 14px;
102 vertical-align: middle;
103 object-fit: contain
104 }
105 }
106
107 a {
108 color: $fallback--link;
109 color: var(--faintLink, $fallback--link);
110 }
111
112 p {
113 margin: 0;
114 display: inline;
115 word-wrap: break-word;
116 white-space: nowrap;
117 text-overflow: ellipsis;
118 }
119
120 img, video {
121 max-width: 100%;
122 max-height: 400px;
123 vertical-align: middle;
124
125 &.emoji {
126 width: 1.125rem;
127 height: 1.125rem;
128 }
129 }
130 }
131
132 .heading {
133 width: 100%;
134 display: inline-flex;
135 justify-content: space-between;
136 line-height: 1em;
137
138 .heading-right {
139 white-space: nowrap;
140 }
141
142 .member-count {
143 color: $fallback--text;
144 color: var(--faintText, $fallback--text);
145 margin-right: 2px;
146 }
147
148 .name-and-account-name {
149 text-overflow: ellipsis;
150 white-space: nowrap;
151 overflow: hidden;
152 flex-shrink: 1;
153 }
154 }
155 }
156 }