|
|
|
// Messages
|
|
|
|
.conversation {
|
|
|
|
background: none !important;
|
|
|
|
}
|
|
|
|
.module-conversation-header {
|
|
|
|
background: var(--color-cell-background);
|
|
|
|
}
|
|
|
|
|
|
|
|
.module-message {
|
|
|
|
position: relative;
|
|
|
|
display: inline-flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
max-width: 65%;
|
|
|
|
|
|
|
|
&__text-error {
|
|
|
|
font-style: italic;
|
|
|
|
}
|
|
|
|
|
|
|
|
&_text {
|
|
|
|
font-size: 14px;
|
|
|
|
line-height: 18px;
|
|
|
|
text-align: start;
|
|
|
|
overflow-wrap: break-word;
|
|
|
|
word-wrap: break-word;
|
|
|
|
word-break: break-word;
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
|
|
|
a {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__container--incoming {
|
|
|
|
&--opaque {
|
|
|
|
background: var(--color-received-message-background);
|
|
|
|
}
|
|
|
|
|
|
|
|
&--transparent {
|
|
|
|
background: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
border-top-right-radius: $message-container-border-radius;
|
|
|
|
border-bottom-right-radius: $message-container-border-radius;
|
|
|
|
border-top-left-radius: 5px;
|
|
|
|
border-bottom-left-radius: 5px;
|
|
|
|
|
|
|
|
&--first-of-series {
|
|
|
|
border-top-left-radius: $message-container-border-radius;
|
|
|
|
}
|
|
|
|
|
|
|
|
&--last-of-series {
|
|
|
|
border-bottom-left-radius: $message-container-border-radius;
|
|
|
|
}
|
|
|
|
|
|
|
|
.module-message__text {
|
|
|
|
color: var(--color-received-message-text);
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
svg {
|
|
|
|
margin-right: $session-margin-xs;
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
text-decoration: underline;
|
|
|
|
color: var(--color-received-message-text);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__container--outgoing {
|
|
|
|
border-top-left-radius: $message-container-border-radius;
|
|
|
|
border-bottom-left-radius: $message-container-border-radius;
|
|
|
|
|
|
|
|
border-top-right-radius: 5px;
|
|
|
|
border-bottom-right-radius: 5px;
|
|
|
|
&--opaque {
|
|
|
|
background: var(--color-sent-message-background);
|
|
|
|
}
|
|
|
|
|
|
|
|
&--transparent {
|
|
|
|
background: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&--first-of-series {
|
|
|
|
border-top-right-radius: $message-container-border-radius;
|
|
|
|
}
|
|
|
|
|
|
|
|
&--last-of-series {
|
|
|
|
border-bottom-right-radius: $message-container-border-radius;
|
|
|
|
}
|
|
|
|
|
|
|
|
.module-message__text {
|
|
|
|
color: var(--color-sent-message-text);
|
|
|
|
|
|
|
|
a {
|
|
|
|
text-decoration: underline;
|
|
|
|
color: var(--color-sent-message-text);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.session-message-wrapper {
|
|
|
|
letter-spacing: 0.03em;
|
|
|
|
margin-top: 3px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
&.message-highlighted {
|
|
|
|
animation: highlightedMessageAnimation 1s ease-in-out;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.message-selected {
|
|
|
|
.module-message {
|
|
|
|
&__container {
|
|
|
|
box-shadow: var(--color-session-shadow);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.inbox {
|
|
|
|
background: var(--color-inbox-background);
|
|
|
|
color: var(--color-text);
|
|
|
|
}
|
|
|
|
|
|
|
|
.conversation {
|
|
|
|
background: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin session-h-title {
|
|
|
|
@include fontAccentBold();
|
|
|
|
}
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
@include session-h-title;
|
|
|
|
color: $session-shade-16;
|
|
|
|
font-size: 25px;
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
color: var(--color-text);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
@include session-h-title;
|
|
|
|
color: var(--color-text);
|
|
|
|
|
|
|
|
font-size: 22px;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
h3 {
|
|
|
|
@include session-h-title;
|
|
|
|
color: var(--color-text);
|
|
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
padding-top: 22px;
|
|
|
|
}
|
|
|
|
|
|
|
|
h4 {
|
|
|
|
@include session-h-title;
|
|
|
|
color: var(--color-text);
|
|
|
|
|
|
|
|
font-size: 17px;
|
|
|
|
text-align: center;
|
|
|
|
}
|