Mercurial Hosting > chat
annotate src/chat.css @ 113:4cab4df4cbbd default tip
minor
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Fri, 14 Nov 2025 10:44:05 -0700 |
| parents | b86bb25fb416 |
| children |
| rev | line source |
|---|---|
| 37 | 1 body { |
| 2 position: fixed; | |
| 3 top: 0; | |
| 4 bottom: 0; | |
| 5 left: 0; | |
| 6 right: 0; | |
| 7 } | |
| 8 | |
| 48 | 9 div[chat_content] { |
| 10 | 10 display: flex; |
| 37 | 11 height: calc(100% - 32px); |
| 10 | 12 } |
| 13 | |
| 14 div[chats] > div { | |
| 15 margin-top: 2px; | |
| 16 margin-bottom: 2px; | |
| 17 padding-top: 16px; | |
| 18 padding-bottom: 16px; | |
| 19 padding-left: 8px; | |
| 20 padding-right: 8px; | |
| 21 border-radius: 4px; | |
| 11 | 22 cursor: pointer; |
| 10 | 23 } |
| 24 | |
| 25 div[chats] > div:hover, | |
| 26 div[chats] > div[selected] { | |
| 27 background-color: LightBlue; | |
| 28 } | |
| 29 | |
| 30 div[posts] { | |
| 31 width: 100%; | |
| 32 display: flex; | |
| 33 flex-direction: column; | |
| 34 | 34 justify-content: space-between; |
| 10 | 35 } |
| 36 | |
| 60 | 37 div[chat_content][show="intro"] div[posts] { |
| 38 display: none; | |
| 39 } | |
| 40 | |
| 10 | 41 div[posts] > * { |
| 42 padding-right: 3vw; | |
| 43 } | |
| 44 | |
| 45 div[top] { | |
| 46 display: flex; | |
| 47 justify-content: space-between; | |
| 48 align-items: center; | |
| 49 } | |
| 50 | |
| 41 | 51 div[top] h3 a { |
| 52 display: inline-block; | |
| 53 margin-bottom: -5px; | |
| 54 } | |
| 55 div[top] h3 a img { | |
| 56 display: block; | |
| 57 } | |
| 58 | |
| 10 | 59 div[main] { |
| 60 overflow-y: auto; | |
| 61 } | |
| 62 | |
| 63 div[post] { | |
| 64 margin-top: 16px; | |
| 65 margin-bottom: 16px; | |
| 66 } | |
| 67 | |
| 60 | 68 div[intro] { |
| 69 width: 100%; | |
| 56 | 70 display: flex; |
| 71 flex-direction: column; | |
| 72 align-items: center; | |
| 73 } | |
| 74 | |
| 60 | 75 div[intro] form { |
| 76 max-width: 100%; | |
| 77 } | |
| 78 div[intro] input[type=email] { | |
| 56 | 79 width: 250px; |
| 60 | 80 max-width: 100%; |
| 34 | 81 } |
| 82 | |
| 89 | 83 div[up_to] { |
| 75 | 84 font-size: 12px; |
| 85 color: grey; | |
| 86 text-align: right; | |
| 87 } | |
| 88 | |
| 34 | 89 div[who] { |
| 90 display: flex; | |
| 91 justify-content: space-between; | |
| 92 font-size: 12px; | |
| 93 color: grey; | |
| 94 } | |
| 95 | |
| 22 | 96 span[pulldown] { |
| 97 position: relative; | |
| 68 | 98 } |
| 99 | |
| 100 div[who] span[pulldown] { | |
| 35 | 101 width: 16px; |
| 102 display: inline-block; | |
| 36 | 103 vertical-align: middle; |
| 22 | 104 } |
| 105 | |
| 106 span[pulldown] > div { | |
| 107 display: none; | |
| 34 | 108 right: 100%; |
| 22 | 109 z-index: 2; |
| 110 position: absolute; | |
| 111 border: 1px solid #cccccc; | |
| 112 border-radius: 4px; | |
| 113 text-align: left; | |
| 114 background-color: #eeeeee; | |
| 115 padding: 5px 0; | |
| 116 } | |
| 117 | |
| 68 | 118 div[who] span[pulldown] > div { |
| 119 top: 0; | |
| 120 } | |
| 121 | |
| 122 div[top] span[pulldown] > div { | |
| 123 right: 0; | |
| 124 } | |
| 125 | |
| 22 | 126 span[pulldown] > div > span { |
| 127 white-space: nowrap; | |
| 128 display: block; | |
| 74 | 129 padding: 8px 16px; |
| 22 | 130 cursor: pointer; |
| 131 } | |
| 132 | |
| 133 span[pulldown] > div > span:hover { | |
| 134 color: #ffffff; | |
| 135 background-color: #428bca; | |
| 136 } | |
| 137 | |
| 79 | 138 blockquote, |
| 10 | 139 div[text] { |
| 34 | 140 white-space: pre-wrap; |
| 98 | 141 overflow-wrap: break-word; |
| 10 | 142 } |
| 79 | 143 blockquote { |
| 144 margin: 0; | |
| 145 } | |
| 146 div[quote] { | |
| 147 border-left: 1px solid #888888; | |
| 148 padding-left: 8px; | |
| 149 } | |
| 109 | 150 div[reply] a[when], |
|
106
15cf43dd144c
handle reply to deleted
Franklin Schmidt <fschmidt@gmail.com>
parents:
98
diff
changeset
|
151 div[quote] [when], |
|
15cf43dd144c
handle reply to deleted
Franklin Schmidt <fschmidt@gmail.com>
parents:
98
diff
changeset
|
152 div[quote] [deleted] { |
| 79 | 153 font-size: 12px; |
| 154 } | |
| 10 | 155 |
| 156 div[input] { | |
| 157 padding-top: 1em; | |
| 158 padding-bottom: 1em; | |
| 159 display: flex; | |
| 160 gap: 8px; | |
| 161 align-items: flex-end; | |
| 162 } | |
| 163 | |
| 79 | 164 div[input] span[textarea] { |
| 10 | 165 flex-grow: 1; |
| 166 max-height: 150px; | |
| 79 | 167 } |
| 168 | |
| 169 div[input] div[reply] { | |
| 170 border: 1px solid #888888; | |
| 171 padding: 2px; | |
| 172 } | |
| 173 | |
| 174 div[input] div[reply_top] { | |
| 175 display: flex; | |
| 176 justify-content: space-between; | |
| 177 color: #5f6368; | |
| 178 } | |
| 179 | |
| 180 div[input] textarea { | |
| 181 display: block; | |
| 182 width: 100%; | |
| 10 | 183 resize: none; |
| 184 } | |
| 24 | 185 |
| 186 dialog textarea { | |
| 187 width: 600px; | |
| 188 max-width: 80vw; | |
| 189 } | |
| 27 | 190 |
| 33 | 191 span[online] { |
| 192 display: inline-block; | |
| 193 aspect-ratio: 1; | |
| 194 background-color: grey; | |
| 34 | 195 height: 0.6em; |
| 33 | 196 border-radius: 50%; |
| 197 margin-left: 4px; | |
| 198 } | |
| 199 | |
| 72 | 200 span[is_online=true] { |
| 201 background-color: green; | |
| 202 } | |
| 203 | |
| 53 | 204 span[unread] { |
| 205 font-size: small; | |
| 206 display: inline-block; | |
| 207 background-color: DodgerBlue; | |
| 208 color: white; | |
| 209 padding: 2px; | |
| 210 border-radius: calc(1em + 4px); | |
| 211 min-width: calc(1em + 4px); | |
| 212 text-align: center; | |
| 213 line-height: 1; | |
| 214 } | |
| 215 span[unread="0"] { | |
| 216 display: none; | |
| 217 } | |
| 27 | 218 |
| 63 | 219 input[type="file"] { |
| 220 display: none; | |
| 221 } | |
| 222 | |
| 65 | 223 div[people] { |
| 224 margin-bottom: 40px; | |
| 225 } | |
| 226 | |
| 227 div[people] img[phone] { | |
| 228 display: inline-block; | |
| 229 height: 1em; | |
| 230 } | |
| 231 | |
| 83 | 232 dialog[add] input[name=email] { |
| 233 width: 300px; | |
| 234 } | |
| 235 | |
| 236 [error] { | |
| 237 color: red; | |
| 238 } | |
| 239 | |
| 27 | 240 @media (min-width: 700px) { |
| 48 | 241 div[chat_content] { |
| 27 | 242 margin-left: calc(3% - 8px); |
| 243 margin-right: 0; | |
| 244 } | |
| 245 | |
| 60 | 246 div[chat_content][show="chats"] div[intro], |
| 247 div[chat_content][show="posts"] div[intro] { | |
| 248 display: none; | |
| 249 } | |
| 250 | |
| 27 | 251 div[chats] { |
| 60 | 252 overflow-y: auto; |
| 27 | 253 width: 250px; |
| 254 padding-right: 8px; | |
| 255 flex-shrink: 0; | |
| 256 } | |
| 257 | |
| 60 | 258 div[intro], |
| 27 | 259 div[posts] { |
| 260 padding-left: 8px; | |
| 34 | 261 border-left: 1px solid grey; |
| 82 | 262 max-width: calc(100% - 250px); |
| 27 | 263 } |
| 264 | |
| 41 | 265 div[top] img[back] { |
| 27 | 266 display: none; |
| 267 } | |
| 268 } | |
| 269 | |
| 270 @media (max-width: 699px) { | |
| 60 | 271 div[chat_content][show="intro"], |
| 272 div[chat_content][show="chats"] { | |
| 273 flex-direction: column; | |
| 274 overflow-y: auto; | |
| 275 } | |
| 276 div[chat_content][show="posts"] { | |
| 277 margin-left: 3%; | |
| 278 } | |
| 279 | |
| 48 | 280 div[chat_content][show="chats"] div[posts], |
| 60 | 281 div[chat_content][show="posts"] div[intro], |
| 48 | 282 div[chat_content][show="posts"] div[chats] { |
| 27 | 283 display: none; |
| 284 } | |
| 285 | |
| 60 | 286 div[chats], |
| 287 div[intro] { | |
| 288 padding-left: 3%; | |
| 289 padding-right: 3%; | |
| 290 } | |
| 291 | |
| 27 | 292 div[chats] { |
| 293 width: 100%; | |
| 294 } | |
| 295 | |
| 60 | 296 div[intro] { |
| 297 margin-top: 20px; | |
| 298 border-top: 1px solid grey; | |
| 299 } | |
| 300 | |
| 301 div[intro] [or] { | |
| 302 display: none; | |
| 303 } | |
| 304 | |
| 48 | 305 div[chat_content][show="posts"] { |
| 27 | 306 margin-right: 0; |
| 307 } | |
| 308 | |
| 309 div[top] h3 { | |
| 310 display: flex; | |
| 311 gap: 6px; | |
| 312 } | |
| 313 } |