direct_conversation_view.scss (4182B)
1 .direct-conversation-view {
2 display: flex;
3 // min-height: 100%;
4 height: calc(100vh - 60px);
5 width: 100%;
6
7 .direct-conversation-view-inner {
8 height: auto;
9 width: 100%;
10 overflow: visible;
11 display: flex;
12 margin-top: 0.5em;
13 margin-left: 0.5em;
14 margin-right: 0.5em;
15
16 .direct-conversation-view-body {
17 background-color: var(--directConversationBg, $fallback--bg);
18 display: flex;
19 flex-direction: column;
20 width: 100%;
21 overflow: visible;
22 border-radius: none;
23 min-height: 100%;
24 margin-left: 0;
25 margin-right: 0;
26 margin-bottom: 0em;
27 margin-top: 0em;
28 border-radius: 10px 10px 0 0;
29 border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ;
30
31 &.panel {
32 &::after {
33 border-radius: 0;
34 box-shadow: none;
35 }
36 }
37
38 .direct-conversation-view-heading {
39 align-items: center;
40 justify-content: space-between;
41 top: 50px;
42 display: flex;
43 z-index: 2;
44 border-radius: none;
45 position: -webkit-sticky;
46 position: sticky;
47
48 .go-back-button {
49 cursor: pointer;
50 margin-right: 0.7em;
51
52 i {
53 color: $fallback--link;
54 color: var(--panelLink, $fallback--link);
55 }
56 }
57
58 .title {
59 flex-shrink: 1;
60 margin-right: 0em;
61 overflow: hidden;
62 text-overflow: ellipsis;
63 line-height: 28px;
64
65 flex-shrink: 1;
66 margin-right: 0em;
67 text-overflow: ellipsis;
68 white-space: nowrap;
69 flex-shrink: 0;
70 max-width: 70%;
71 display: grid;
72 }
73 }
74
75 .scrollable {
76 padding: 0 10px;
77 height: 100%;
78 overflow-y: scroll;
79 overflow-x: hidden;
80 display: flex;
81 flex-direction: column;
82 }
83
84 .footer {
85 position: -webkit-sticky;
86 position: sticky;
87 bottom: 0px;
88 }
89 }
90 }
91 }
92
93 @media all and (max-width: 800px) {
94 .direct-conversation-view {
95 height: 100%;
96 overflow: hidden;
97
98 .direct-conversation-view-inner {
99 overflow: hidden;
100 height: 100%;
101 margin-top: 0;
102 margin-left: 0;
103 margin-right: 0;
104
105 .direct-conversation-view-body {
106 display: flex;
107 min-height: auto;
108 overflow: hidden;
109 height: 100%;
110 margin: 0;
111 border-radius: 0 !important;
112
113 .direct-conversation-view-heading {
114 position: static;
115 z-index: 9999;
116 top: 0;
117 margin-top: 0;
118 border-radius: 0;
119 }
120
121 .scrollable {
122 display: unset;
123 overflow-y: scroll;
124 overflow-x: hidden;
125 -webkit-overflow-scrolling: touch;
126 }
127
128 .footer {
129 position: relative;
130 bottom: auto;
131
132 .post-status-form form {
133 padding: 0;
134 }
135 }
136 }
137 }
138 }
139 }
140
141 .jump-to-bottom-button {
142 width: 2.5em;
143 height: 2.5em;
144 border-radius: 100%;
145 position: absolute;
146 position: absolute;
147 right: 1.3em;
148 top: -3.2em;
149 background-color: $fallback--fg;
150 background-color: var(--btn, $fallback--fg);
151 display: flex;
152 justify-content: center;
153 align-items: center;
154 box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3);
155 z-index: 10;
156
157 transition: 0.35s all;
158 transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
159
160 opacity: 0;
161 visibility: hidden;
162 cursor: pointer;
163
164 &.visible {
165 opacity: 1;
166 visibility: visible;
167 }
168
169 i {
170 font-size: 1em;
171 color: $fallback--text;
172 color: var(--text, $fallback--text);
173 }
174
175 .new-messages-alert-dot {
176 left: 50%;
177 transform: translate(-50%, 0);
178 border-radius: 100%;
179 height: 1.3em;
180 width: 1.3em;
181 position: absolute;
182 top: calc(50% - 8px);
183 text-align: center;
184 font-style: normal;;
185 font-weight: bolder;
186 margin-top: -1rem;
187 font-size: 0.8em;
188 background-color: $fallback--cRed;
189 background-color: var(--badgeNotification, $fallback--cRed);
190 color: white;
191 color: var(--badgeNotificationText, white);
192 }
193 }