Mercurial Hosting > chat

comparison src/chat.css @ 60:3521166513b3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
finish invite
author Franklin Schmidt <fschmidt@gmail.com>
date Tue, 04 Mar 2025 20:31:00 -0700
parents 323ddacc1593
children afd5ab5b02a2
comparison
equal deleted inserted replaced
59:8270106644db 60:3521166513b3
5 left: 0; 5 left: 0;
6 right: 0; 6 right: 0;
7 } 7 }
8 8
9 div[chat_content] { 9 div[chat_content] {
10 margin-left: 3%;
11 margin-right: 3%;
12 display: flex; 10 display: flex;
13 height: calc(100% - 32px); 11 height: calc(100% - 32px);
14 }
15
16 div[chats] {
17 overflow-y: auto;
18 } 12 }
19 13
20 div[chats] > div { 14 div[chats] > div {
21 margin-top: 2px; 15 margin-top: 2px;
22 margin-bottom: 2px; 16 margin-bottom: 2px;
38 display: flex; 32 display: flex;
39 flex-direction: column; 33 flex-direction: column;
40 justify-content: space-between; 34 justify-content: space-between;
41 } 35 }
42 36
37 div[chat_content][show="intro"] div[posts] {
38 display: none;
39 }
40
43 div[posts] > * { 41 div[posts] > * {
44 padding-right: 3vw; 42 padding-right: 3vw;
45 } 43 }
46 44
47 div[top] { 45 div[top] {
65 div[post] { 63 div[post] {
66 margin-top: 16px; 64 margin-top: 16px;
67 margin-bottom: 16px; 65 margin-bottom: 16px;
68 } 66 }
69 67
70 [intro] { 68 div[intro] {
69 width: 100%;
71 display: flex; 70 display: flex;
72 flex-direction: column; 71 flex-direction: column;
73 align-items: center; 72 align-items: center;
74 } 73 }
75 74
76 [intro] input[type=email] { 75 div[intro] form {
76 max-width: 100%;
77 }
78 div[intro] input[type=email] {
77 width: 250px; 79 width: 250px;
80 max-width: 100%;
78 } 81 }
79 82
80 div[who] { 83 div[who] {
81 display: flex; 84 display: flex;
82 justify-content: space-between; 85 justify-content: space-between;
168 div[chat_content] { 171 div[chat_content] {
169 margin-left: calc(3% - 8px); 172 margin-left: calc(3% - 8px);
170 margin-right: 0; 173 margin-right: 0;
171 } 174 }
172 175
176 div[chat_content][show="chats"] div[intro],
177 div[chat_content][show="posts"] div[intro] {
178 display: none;
179 }
180
173 div[chats] { 181 div[chats] {
182 overflow-y: auto;
174 width: 250px; 183 width: 250px;
175 padding-right: 8px; 184 padding-right: 8px;
176 flex-shrink: 0; 185 flex-shrink: 0;
177 } 186 }
178 187
188 div[intro],
179 div[posts] { 189 div[posts] {
180 padding-left: 8px; 190 padding-left: 8px;
181 border-left: 1px solid grey; 191 border-left: 1px solid grey;
182 } 192 }
183 193
185 display: none; 195 display: none;
186 } 196 }
187 } 197 }
188 198
189 @media (max-width: 699px) { 199 @media (max-width: 699px) {
200 div[chat_content][show="intro"],
201 div[chat_content][show="chats"] {
202 flex-direction: column;
203 overflow-y: auto;
204 }
205 div[chat_content][show="posts"] {
206 margin-left: 3%;
207 }
208
190 div[chat_content][show="chats"] div[posts], 209 div[chat_content][show="chats"] div[posts],
210 div[chat_content][show="posts"] div[intro],
191 div[chat_content][show="posts"] div[chats] { 211 div[chat_content][show="posts"] div[chats] {
192 display: none; 212 display: none;
213 }
214
215 div[chats],
216 div[intro] {
217 padding-left: 3%;
218 padding-right: 3%;
193 } 219 }
194 220
195 div[chats] { 221 div[chats] {
196 width: 100%; 222 width: 100%;
223 }
224
225 div[intro] {
226 margin-top: 20px;
227 border-top: 1px solid grey;
228 }
229
230 div[intro] [or] {
231 display: none;
197 } 232 }
198 233
199 div[chat_content][show="posts"] { 234 div[chat_content][show="posts"] {
200 margin-right: 0; 235 margin-right: 0;
201 } 236 }