2023-01-06 22:49:02 +01:00

154 lines
2.9 KiB
SCSS

.MessageMeta {
position: absolute;
height: 1.25rem;
bottom: 0;
right: 0;
display: flex;
align-items: center;
background: rgba(#999999, 0.6);
border-radius: 0.625rem;
padding: 0 0.25rem;
color: white;
cursor: pointer;
max-width: 100%;
user-select: none;
.message-time,
.message-imported,
.message-signature,
.message-views {
font-size: 0.75rem;
white-space: nowrap;
}
.message-time {
margin-right: 0.1875rem;
}
body.is-ios & {
.message-time {
margin-right: 0.25rem;
}
}
.message-views {
margin-inline-start: 0.1875rem;
}
.message-imported,
.message-signature {
overflow: hidden;
text-overflow: ellipsis;
margin-right: 0.375rem;
.emoji-small {
width: 1rem !important;
height: 1rem !important;
}
}
.icon-channelviews {
margin-left: 0.125rem;
margin-right: 0.375rem;
font-size: 1.125rem;
position: relative;
top: -0.0625rem;
}
.has-solid-background & {
color: rgba(var(--color-text-meta-rgb), 0.75);
background: none;
}
.media:not(.text) &,
.Message .custom-shape &,
.Message .invoice & {
--color-accent-own: white;
--color-accent: white;
color: white !important;
opacity: 1;
bottom: 0.25rem;
right: 0.25rem;
left: auto;
height: 1.125rem;
padding: 0 0.3125rem 0 0.375rem;
.MessageOutgoingStatus i {
background: transparent;
}
}
.media:not(.text) &,
.Message .invoice & {
background: rgba(0, 0, 0, 0.2);
}
.Message .custom-shape & {
background: var(--pattern-color);
}
.voice &[dir="rtl"] {
right: auto !important;
left: 0.25rem;
padding: 0 0.375rem 0 0.3125rem;
}
// This is currently only supported in Firefox.
// When attempting to combine with other selectors, the rule no longer applies anywhere except Firefox.
.media:not(.text):dir(rtl) &,
.Message .custom-shape:dir(rtl) & {
right: auto !important;
left: 0.25rem;
padding: 0 0.375rem 0 0.3125rem;
}
.is-forwarded.media:not(.text):dir(rtl) &,
.Message .is-forwarded.custom-shape:dir(rtl) & {
left: 0.8125rem;
}
.is-forwarded.media:not(.text) & {
bottom: 0.9375rem;
right: 0.8125rem;
}
.Message.own .has-solid-background & {
color: var(--color-message-meta-own);
}
.MessageOutgoingStatus {
margin-left: -0.1875rem;
font-size: 1.1875rem;
border-radius: 0.625rem;
.Message.own & {
color: var(--color-accent-own);
}
}
.message-content.has-replies:not(.custom-shape) & {
bottom: 3.375rem;
}
.message-content.has-replies.text:not(.custom-shape) & {
bottom: 3.4375rem;
}
&[dir="rtl"] {
.message-views {
order: 10;
}
.icon-channelviews {
order: 9;
}
}
}
.Message:not(.own) {
.custom-shape .with-subheader + .MessageMeta {
right: auto;
left: 13.25rem;
bottom: 0.25rem;
}
}