Corrected messages in Telegram (#2562)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-01-30 05:55:35 +03:00 committed by GitHub
parent febd582637
commit 10063ff7c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 8 deletions

View File

@ -275,8 +275,8 @@
--toggle-on-bg-color: #6e79d6;
--toggle-on-bg-hover: #535db3;
--incoming-msg: rgba(67, 67, 72, .3);
--outcoming-msg: rgba(67, 67, 72, .6);
--incoming-msg: rgba(67, 67, 72, .1);
--outcoming-msg: rgba(67, 67, 72, .2);
--trans-content-05: rgba(60, 65, 73, .05);
--trans-content-10: rgba(60, 65, 73, .1);

View File

@ -480,3 +480,13 @@
&:focus-within .caption { border-color: var(--primary-edit-border-color); }
}
}
// Consecutive messages in Telegram (incomung/outcoming)
.message-row-bg[data-type="in"] + .message-row-bg[data-type="in"] .message-row .message-container {
padding-top: 0;
.message { border-radius: 0.125rem 0.75rem 0.75rem 0.125rem; }
}
.message-row-bg[data-type="out"] + .message-row-bg[data-type="out"] .message-row .message-container {
padding-top: 0;
.message.outcoming { border-radius: 0.75rem 0.125rem 0.125rem 0.75rem; }
}

View File

@ -41,8 +41,9 @@
margin: 0.3rem auto;
padding: 0.25rem 0.75rem;
width: fit-content;
color: var(--theme-content-accent-color);
background-color: var(--theme-menu-divider);
font-weight: 500;
color: var(--caption-color);
background-color: var(--divider-color);
border-radius: 1.25rem;
user-select: text;
}

View File

@ -32,7 +32,8 @@
const dispatch = createEventDispatcher()
</script>
<div class="message-row-bg" class:selectable class:selected-row={selected}>
<div class="message-row-bg" class:selectable class:selected-row={selected} data-type={message.incoming ? 'in' : 'out'}>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="message-row"
class:selectable
@ -133,19 +134,19 @@
max-width: 66%;
width: fit-content;
background-color: var(--incoming-msg);
border-radius: 0.75rem 0.75rem 0.75rem 0.25rem;
border-radius: 0.75rem 0.75rem 0.75rem 0.125rem;
overflow-wrap: anywhere;
user-select: text;
cursor: default;
&.outcoming {
background-color: var(--outcoming-msg);
border-radius: 0.75rem 0.75rem 0.25rem 0.75rem;
border-radius: 0.75rem 0.75rem 0.125rem 0.75rem;
}
.time {
align-self: flex-end;
margin-left: auto;
color: var(--theme-content-trans-color);
color: var(--dark-color);
font-size: 0.75rem;
font-style: italic;
white-space: nowrap;