// Copyright 2018 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
// Using BEM syntax explained here: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
// CAUTION: these styles are often overridden by other components
// if you make changes to these, you must check EVERY component that uses
.module-title-bar-drag-area {
-webkit-app-region: drag;
height: var(--title-bar-drag-area-height);
inset-inline-start: 0;
position: fixed;
top: 0;
width: 100%;
z-index: $z-index-on-top-of-everything;
}
.module-splash-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.module-splash-screen__logo {
@include color-svg('../images/signal-logo.svg', $color-white);
margin-block: 24px;
margin-inline: 0;
&.module-img--256 {
height: 256px;
width: 256px;
}
&.module-img--200 {
height: 200px;
width: 200px;
}
&.module-img--150 {
height: 150px;
width: 150px;
}
&.module-img--128 {
height: 128px;
width: 128px;
}
&.module-logo-blue {
background-color: $color-ultramarine-icon;
}
}
// Module: Message
.module-message {
position: relative;
display: flex;
flex-direction: row;
align-items: stretch;
outline: none;
padding-inline: 16px;
transition-property: background, translate;
transition-duration: 0.1s;
transition-timing-function: ease-out;
}
.module-message__quote-story-reaction-header {
@include font-subtitle;
margin-bottom: 6px;
.module-message__container-outgoing & {
color: $color-white-alpha-80;
}
.module-message__container-incoming & {
color: $color-gray-60;
}
}
.module-message--expired {
animation: module-message__shake 0.2s linear infinite;
}
@keyframes module-message__shake {
0% {
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translateX(0px);
}
25% {
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translateX(-5px);
}
50% {
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translateX(0px);
}
75% {
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translateX(5px);
}
100% {
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translateX(0px);
}
}
@keyframes module-message__highlight {
0% {
filter: none;
}
33% {
filter: brightness(50%);
}
66% {
filter: brightness(50%);
}
100% {
filter: none;
}
}
@keyframes module-message__highlight-lighter {
0% {
filter: none;
}
33% {
filter: brightness(76%);
}
66% {
filter: brightness(76%);
}
100% {
filter: none;
}
}
.module-message--outgoing {
flex-direction: row-reverse;
}
.module-message__buttons {
display: inline-flex;
flex-direction: row;
align-items: center;
opacity: 0;
}
.module-message:hover .module-message__buttons {
opacity: 1;
}
.module-message__buttons--incoming {
padding-inline-start: 8px;
& > * {
margin-inline-start: 12px;
&:first-child {
margin-inline-start: 0;
}
}
}
.module-message__buttons--outgoing {
padding-inline-end: 8px;
flex-direction: row-reverse;
& > * {
margin-inline-end: 12px;
&:first-child {
margin-inline-end: 0;
}
}
}
@mixin module-message__buttons__button($light-icon, $dark-icon: $light-icon) {
cursor: pointer;
height: 20px;
width: 20px;
@include light-theme {
@include color-svg($light-icon, $color-gray-45);
&:hover {
@include color-svg($light-icon, $color-gray-90);
}
}
@include dark-theme {
@include color-svg($dark-icon, $color-gray-45);
&:hover {
@include color-svg($dark-icon, $color-gray-02);
}
}
.module-message--targeted & {
@include mouse-mode {
background-color: $color-gray-60;
}
@include dark-mouse-mode {
background-color: $color-white;
}
}
.module-message:focus & {
@include keyboard-mode {
background-color: $color-gray-60;
}
@include dark-keyboard-mode {
background-color: $color-white;
}
}
}
.module-message__buttons__download {
@include module-message__buttons__button('../images/icons/v3/save/save.svg');
}
.module-message__buttons__react {
@include module-message__buttons__button(
'../images/icons/v3/heart/heart-plus.svg'
);
}
.module-message__buttons__reply {
@include module-message__buttons__button(
'../images/icons/v3/reply/reply.svg'
);
}
.module-message__buttons__menu {
@include module-message__buttons__button('../images/icons/v3/more/more.svg');
&--container {
border-radius: 4px;
height: 20px;
// the z-index here is so that this container is above the message and when
// clicked on, doesn't propagate the click event to the message.
z-index: $z-index-above-base;
}
}
.module-message__error-container {
min-width: 28px;
position: relative;
}
.module-message__error {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
bottom: 4px;
@include light-theme {
@include color-svg(
'../images/icons/v3/error/error-circle.svg',
$color-accent-red
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/error/error-circle.svg',
$color-accent-red
);
}
}
.module-message__error--paused {
@include light-theme {
@include color-svg(
'../images/icons/v3/error/error-circle.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/error/error-circle.svg',
$color-gray-45
);
}
}
.module-message__error--outgoing {
inset-inline-start: 8px;
}
.module-message__error--incoming {
inset-inline-end: 8px;
}
.module-message__container-outer {
line-height: 0;
display: flex;
flex-direction: column;
min-width: 0;
max-width: min(306px, calc(100% - 16px - 22px));
.module-timeline--width-wide &,
.module-message-detail & {
// NOTE(evanhahn): I wanted this to be 66% of the timeline, but I could not make that
// work without introducing layout bugs for some message types. This constant,
// though not ideal, fixes those bugs.
max-width: 50vw;
}
.module-timeline--width-medium & {
max-width: 370px;
}
}
$message-padding-vertical: 8px;
$message-padding-horizontal: 12px;
.module-message__container {
$collapsed-border-radius: 4px;
position: relative;
display: inline-block;
border-radius: 18px;
outline: none;
margin-bottom: 6px;
margin-top: 6px;
min-width: 0px;
overflow: hidden;
padding-inline: $message-padding-horizontal;
padding-top: $message-padding-vertical;
padding-bottom: $message-padding-vertical;
.module-message--collapsed-above & {
margin-top: 1px;
}
.module-message--collapsed-below & {
margin-bottom: 1px;
}
.module-message--incoming.module-message--collapsed-above & {
border-start-start-radius: $collapsed-border-radius;
}
.module-message--incoming.module-message--collapsed-below & {
border-end-start-radius: $collapsed-border-radius;
}
.module-message--outgoing.module-message--collapsed-above & {
border-start-end-radius: $collapsed-border-radius;
}
.module-message--outgoing.module-message--collapsed-below & {
border-end-end-radius: $collapsed-border-radius;
}
}
.module-message__container--targeted {
@include mouse-mode {
animation: module-message__highlight 1.2s cubic-bezier(0.17, 0.17, 0, 1);
}
}
.module-message__container--targeted-lighter {
@include mouse-mode {
animation: module-message__highlight-lighter 1.2s
cubic-bezier(0.17, 0.17, 0, 1);
}
}
.module-message__wrapper {
position: relative;
transition: background 0.1s ease-out;
}
.module-message__wrapper--select-mode {
.module-message--incoming {
&:dir(ltr) {
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
translate: calc(16px + 22px) 0;
}
&:dir(rtl) {
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
translate: calc(-16px - 22px) 0;
}
}
}
.module-message__alt-accessibility-tree {
@include sr-only;
}
.module-message__wrapper--selected {
background: rgba($color-ultramarine, 8%);
}
.module-message__select-checkbox {
position: absolute;
top: 50%;
inset-inline-start: 16px;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 9999px;
background: transparent;
border: 1px solid $color-gray-20;
animation: module-message__select-checkbox--fadeIn 0.2s ease-out;
transition: background 0.1s ease-out, border-color 0.1s ease-out;
&::before {
content: '';
display: block;
width: 14px;
height: 14px;
margin: 2px;
@include color-svg(
'../images/icons/v3/check/check-compact-bold.svg',
$color-white
);
opacity: 0;
transition: opacity 0.1s ease-out;
}
.module-message__wrapper--selected & {
background: $color-ultramarine;
border-color: $color-ultramarine;
&::before {
opacity: 1;
}
}
}
@keyframes module-message__select-checkbox--fadeIn {
from {
opacity: 0;
}
}
.module-message:focus-within {
@include keyboard-mode {
background: $color-selected-message-background-light;
}
@include dark-keyboard-mode {
background: $color-selected-message-background-dark;
}
}
.module-message__container--emoji {
padding-top: 4px;
.module-message__text--outgoing {
text-align: end;
}
}
.module-message__container--outgoing {
@include light-theme {
background-color: $color-ultramarine;
color: $color-white;
}
@include dark-theme {
background-color: $color-ultramarine;
color: $color-gray-05;
}
}
// In case the color gets messed up
.module-message__container--incoming {
background-color: $color-gray-05;
color: $color-gray-90;
@include dark-theme {
background-color: $color-gray-75;
color: $color-gray-05;
}
}
@each $color, $value in $conversation-colors {
.module-message__container--outgoing-#{$color} {
background-color: $value;
@include dark-theme {
background-color: $value;
}
}
}
.module-message__container--outgoing-custom {
background-attachment: fixed;
}
@each $color, $value in $conversation-colors-gradient {
.module-message__container--outgoing-#{$color} {
background-attachment: fixed;
background-image: linear-gradient(
map-get($value, 'deg'),
map-get($value, 'start'),
map-get($value, 'end')
);
}
}
.module-message__container--with-tap-to-view {
min-width: 148px;
cursor: pointer;
user-select: none;
}
.module-message__container--with-tap-to-view-pending {
background-color: $color-gray-15;
}
.module-message__container--with-tap-to-view-pending {
cursor: default;
}
.module-message__container--with-tap-to-view-expired {
@include light-theme {
border: 1px solid $color-gray-15;
background-color: $color-white;
}
@include dark-theme {
border: 1px solid $color-gray-60;
background-color: $color-gray-95;
}
}
.module-message__container--with-tap-to-view-error {
width: auto;
cursor: default;
@include light-theme {
background-color: $color-white;
border: 1px solid $color-deep-red;
}
@include dark-theme {
background-color: $color-black;
border: 1px solid $color-deep-red;
}
}
.module-message__container--deleted-for-everyone {
@include light-theme {
color: $color-gray-90;
border: 1px solid $color-gray-25;
background-color: transparent;
background-image: none;
}
@include dark-theme {
color: $color-gray-05;
border: 1px solid $color-gray-75;
background-color: transparent;
background-image: none;
}
}
.module-message__tap-to-view {
margin-top: 2px;
display: flex;
flex-direction: row;
align-items: center;
}
.module-message__tap-to-view--with-content-above {
margin-top: 8px;
}
.module-message__tap-to-view--with-content-below {
margin-bottom: 8px;
}
.module-message__tap-to-view__spinner-container {
margin-inline-end: 6px;
flex-grow: 0;
flex-shrink: 0;
width: 20px;
height: 20px;
}
.module-message__tap-to-view__icon {
margin-inline-end: 6px;
flex-grow: 0;
flex-shrink: 0;
width: 20px;
height: 20px;
@include light-theme {
@include color-svg(
'../images/icons/v3/view_once/view_once.svg',
$color-gray-90
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/view_once/view_once.svg',
$color-gray-05
);
}
}
.module-message__tap-to-view__icon--expired {
@include light-theme {
@include color-svg(
'../images/icons/v3/view_once/view_once-dash.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/view_once/view_once-dash.svg',
$color-gray-05
);
}
}
.module-message__tap-to-view__icon--outgoing {
background-color: $color-gray-05;
}
.module-message__tap-to-view__text {
@include font-body-1-bold;
color: $color-gray-05;
}
.module-message__tap-to-view__text--incoming {
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
}
}
.module-message__tap-to-view__text--incoming-expired {
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
}
}
.module-message__tap-to-view__text--incoming-error {
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
.module-message__tap-to-view__text--outgoing {
color: $color-white;
}
.module-message__tap-to-view__text--outgoing-expired {
color: $color-gray-05;
}
.module-message__attachment-container {
// To ensure that images are centered if they aren't full width of bubble
text-align: center;
position: relative;
margin-inline: -$message-padding-horizontal;
margin-top: -$message-padding-vertical;
margin-bottom: -$message-padding-vertical;
line-height: 0;
overflow: hidden;
@include light-theme {
background-color: $color-white;
}
@include dark-theme {
background-color: $color-gray-95;
}
&--with-content-below {
margin-bottom: 7px;
}
&--with-content-above {
margin-top: 4px;
}
}
.module-message__sticker-container {
// To ensure that images are centered if they aren't full width of bubble
text-align: center;
margin-inline: -$message-padding-horizontal;
margin-top: -$message-padding-vertical - 1px;
margin-bottom: -$message-padding-vertical + 3px;
&--with-content-below {
margin-bottom: 5px;
}
&--with-content-above {
margin-top: 4px;
}
}
.module-message__img-attachment {
margin-bottom: -3px;
// redundant with attachment-container, but we get cursor flashing on move otherwise
cursor: pointer;
}
.module-message__generic-attachment {
@include button-reset;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
@include keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 2px $color-ultramarine;
}
}
}
.module-message__generic-attachment--with-content-below {
padding-bottom: 6px;
}
.module-message__generic-attachment--with-content-above {
padding-top: 4px;
}
.module-message__generic-attachment--not-active {
cursor: default;
pointer-events: none;
}
.module-message__generic-attachment__icon-container {
position: relative;
user-select: none;
}
.module-message__generic-attachment__spinner-container {
padding-inline: 4px;
}
.module-message__generic-attachment__icon {
background: url('../images/file-gradient.svg') no-repeat center;
height: 44px;
width: 56px;
margin-inline: -13px -14px;
margin-bottom: -4px;
// So we can center the extension text inside this icon
display: flex;
flex-direction: row;
align-items: center;
}
.module-message__generic-attachment__icon-dangerous-container {
position: absolute;
top: -1px;
inset-inline-end: -4px;
height: 16px;
width: 16px;
border-radius: 50%;
background-color: $color-white;
}
.module-message__generic-attachment__icon-dangerous {
height: 16px;
width: 16px;
@include color-svg(
'../images/icons/v2/error-solid-24.svg',
$color-accent-red
);
}
.module-message__generic-attachment__icon__extension {
font-size: 10px;
line-height: 13px;
letter-spacing: 0.1px;
text-transform: uppercase;
// Along with flow layout in parent item, centers text
text-align: center;
width: 25px;
margin-inline: auto;
// We don't have much room for text here, cut it off without ellipse
overflow-x: hidden;
white-space: nowrap;
text-overflow: clip;
color: $color-gray-90;
}
.module-message__generic-attachment__text {
flex-grow: 1;
margin-inline-start: 8px;
// The width of the icon plus our 8px margin plus 1px leeway
max-width: calc(100% - 36px);
}
.module-message__generic-attachment__file-name {
@include font-body-2-bold;
margin-top: 2px;
user-select: none;
// Handling really long filenames - cut them off
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include light-theme {
color: $color-white;
}
@include dark-theme {
color: $color-gray-02;
}
}
.module-message__generic-attachment__file-name--incoming {
color: $color-white;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-25;
}
}
.module-message__generic-attachment__file-size {
@include font-body-2;
margin-top: 3px;
user-select: none;
@include light-theme {
color: $color-white;
}
@include dark-theme {
color: $color-gray-02;
}
}
.module-message__generic-attachment__file-size--incoming {
color: $color-white;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-25;
}
}
.module-message__link-preview {
cursor: pointer;
&--nonclickable {
cursor: inherit;
.module-image__image,
.module-image__border-overlay--with-click-handler {
cursor: inherit;
}
}
display: block;
margin-inline: -$message-padding-horizontal;
width: calc(100% + 24px);
outline: none;
margin-top: -$message-padding-vertical;
margin-bottom: 5px;
overflow: hidden;
@include keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 2px $color-ultramarine;
}
}
}
.module-message__link-preview--with-content-above {
margin-top: 4px;
}
.module-message__link-preview__content {
padding-block: $message-padding-vertical;
padding-inline: $message-padding-horizontal;
display: flex;
flex-direction: row;
align-items: flex-start;
@include light-theme {
background-color: $color-gray-02;
}
@include dark-theme {
background-color: $color-gray-80;
}
}
.module-message__link-preview__icon_container {
margin: -2px;
margin-inline-end: 8px;
display: inline-block;
}
.module-message__link-preview__text--with-icon {
margin-top: 5px;
}
.module-message__link-preview__title {
@include font-body-1-bold;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
}
}
.module-message__link-preview__description {
@include font-body-2;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
}
}
.module-message__link-preview__footer {
@include font-body-2;
display: flex;
flex-flow: row wrap;
align-items: center;
margin-top: 2px;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
> *:not(:first-child) {
display: flex;
flex-grow: 1;
&:before {
content: '•';
font-size: 50%;
margin-inline: 0.2rem;
}
}
}
.module-message__link-preview__location {
text-transform: lowercase;
}
.module-message__author {
@include font-body-2-bold;
height: 18px;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
user-select: none;
}
.module-message__author--with-tap-to-view-expired {
@include font-body-2-bold;
height: 18px;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include light-theme {
color: $color-gray-75;
}
@include dark-theme {
color: $color-white;
}
}
.module-message__author_with_sticker {
@include font-body-2-bold;
height: 18px;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// Stickers are pretty narrow, so we allow this one element of a sticker
// message to go wider than normal.
// There's a tension here, since this is width and not max-width; things will
// look bad for RTL users if we make it too wide.
width: 300px;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
}
}
.module-message__text {
@include font-body-1;
text-align: start;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
@include light-theme {
color: $color-white-alpha-90;
}
@include dark-theme {
color: $color-white-alpha-90;
}
a {
text-decoration: underline;
outline: none;
@include light-theme {
color: $color-white-alpha-90;
}
@include keyboard-mode {
&:focus {
outline: 1px solid $color-gray-90;
}
}
@include dark-theme {
color: $color-white-alpha-90;
}
@include dark-keyboard-mode {
&:focus {
outline: 1px solid $color-white-alpha-90;
}
}
}
}
.module-message__text--incoming {
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
}
a {
text-decoration: underline;
outline: none;
@include light-theme {
color: $color-gray-90;
}
@include keyboard-mode {
&:focus {
outline: 1px solid $color-gray-90;
}
}
@include dark-theme {
color: $color-gray-05;
}
@include dark-keyboard-mode {
&:focus {
outline: 1px solid $color-gray-05;
}
}
}
}
.module-message__text--error {
@include font-body-1-italic;
}
.module-message__text--delete-for-everyone {
user-select: none;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
}
}
.module-message__metadata {
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 3px;
font-style: normal;
&--inline {
float: inline-end;
margin-top: -14px;
}
}
.module-message__metadata__edited {
@include button-reset;
@include font-caption;
color: $color-gray-60;
cursor: pointer;
margin-inline-end: 6px;
z-index: $z-index-base;
@include dark-theme {
color: $color-gray-25;
}
}
.module-message__container--outgoing .module-message__metadata__edited {
color: $color-white-alpha-80;
}
// With an image and no caption, this section needs to be on top of the image overlay
.module-message__metadata--with-image-no-caption {
position: absolute;
bottom: 9px;
z-index: $z-index-above-base;
width: 100%;
// Because this is absolutely positioned, we 100% is too big, take it down by parent
// padding sizes.
padding-inline-end: 24px;
// This is so all clicks go right through to the underlying image.
pointer-events: none;
}
.module-message__metadata--deleted-for-everyone {
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
.module-message__metadata__date {
@include font-caption;
user-select: none;
white-space: nowrap;
@include light-theme {
color: $color-white-alpha-80;
}
@include dark-theme {
color: $color-white-alpha-80;
}
}
.module-message__metadata__tapable {
@include button-reset;
}
.module-message__metadata__date--incoming {
color: $color-white-alpha-80;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
.module-message__metadata__date--with-image-no-caption {
@include light-theme {
color: $color-white;
}
@include dark-theme {
color: $color-white-alpha-80;
}
}
.module-message__metadata__date--deleted-for-everyone {
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
.module-message__metadata__date.module-message__metadata__date--incoming-with-tap-to-view-expired {
color: $color-gray-75;
@include dark-theme {
color: $color-white-alpha-80;
}
}
.module-message__metadata__date.module-message__metadata__date--outgoing-with-tap-to-view-expired {
color: $color-white-alpha-80;
}
.module-message__metadata__date--with-sticker {
@include light-theme {
color: $color-gray-60;
}
}
.module-message__metadata__status-icon {
width: 12px;
height: 12px;
display: inline-block;
margin-inline: 6px;
// High margin to leave space for the increase when we go to two checks
margin-bottom: 2px;
}
.module-message__metadata__status-icon--paused,
.module-message__metadata__status-icon--sending {
@include only-when-page-is-visible {
animation: rotate 4s linear infinite;
}
@include color-svg(
'../images/icons/v3/message_status/messagestatus-sending.svg',
$color-white
);
}
.module-message__metadata__status-icon--sent {
@include light-theme {
@include color-svg(
'../images/icons/v3/message_status/messagestatus-sent.svg',
$color-white-alpha-80
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/message_status/messagestatus-sent.svg',
$color-white-alpha-80
);
}
}
.module-message__metadata__status-icon--delivered {
// We reduce the margin size to keep the overall width the same
margin-inline-end: 0px;
width: 18px;
@include light-theme {
@include color-svg(
'../images/icons/v3/message_status/messagestatus-delivered.svg',
$color-white-alpha-80
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/message_status/messagestatus-delivered.svg',
$color-white-alpha-80
);
}
}
.module-message__metadata__status-icon--read,
.module-message__metadata__status-icon--viewed {
// We reduce the margin size to keep the overall width the same
margin-inline-end: 0px;
width: 18px;
@include light-theme {
@include color-svg(
'../images/icons/v3/message_status/messagestatus-read.svg',
$color-white-alpha-80
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/message_status/messagestatus-read.svg',
$color-white-alpha-80
);
}
}
// When status indicators are overlaid on top of an image, they use different colors
.module-message__metadata__status-icon--with-image-no-caption {
@include dark-theme {
background-color: $color-gray-02;
}
@include light-theme {
background-color: $color-white;
}
}
.module-message__metadata__status-icon--with-sticker {
@include light-theme {
background-color: $color-gray-60;
}
}
.module-message__metadata__status-icon--deleted-for-everyone {
@include light-theme {
background-color: $color-gray-60;
}
@include dark-theme {
background-color: $color-gray-25;
}
}
.module-message__metadata__spinner-container {
margin-inline-start: 6px;
}
.module-message__send-message-button {
@include button-reset;
width: calc(100% + 24px);
@include font-body-2-bold;
margin-top: $message-padding-vertical;
margin-bottom: -$message-padding-vertical;
margin-inline: -$message-padding-horizontal;
text-align: center;
padding: 10px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
@include light-theme {
color: $color-ultramarine;
background-color: $color-gray-02;
border: 1px solid $color-black-alpha-20;
}
@include dark-theme {
color: $color-ultramarine-light;
background-color: $color-gray-75;
border: 1px solid $color-gray-45;
}
@include keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 2px $color-ultramarine;
}
}
}
.module-message__send-message-button--no-bottom-left-curve {
border-bottom-left-radius: 4px;
}
.module-message__send-message-button--no-bottom-right-curve {
border-bottom-right-radius: 4px;
}
.module-message__author-avatar-container {
align-items: flex-end;
display: flex;
justify-content: center;
margin-inline-end: 8px;
padding-bottom: 6px;
&--with-reactions {
padding-bottom: 15px;
}
}
.module-message__unopened-gift-badge {
width: 240px;
height: 132px;
background-color: $color-ultramarine;
position: relative;
margin-inline: -$message-padding-horizontal;
margin-top: -$message-padding-vertical;
margin-bottom: $message-padding-vertical;
&--outgoing {
@include light-theme {
border-bottom: 1px solid $color-white-alpha-80;
}
@include dark-theme {
border-bottom: 1px solid $color-gray-95;
}
}
&__container {
cursor: default;
user-select: none;
}
&__ribbon-horizontal {
position: absolute;
inset-inline: 0;
height: 16px;
top: 50%;
transform: translateY(-50%);
background-color: $color-white;
}
&__ribbon-vertical {
@include position-absolute-center-x;
top: 0;
bottom: 0;
width: 16px;
background-color: $color-white;
}
&__bow {
// Centered
@include position-absolute-center;
// For proper alignment with the ribbons
margin-top: 3px;
// 75.26px by 51.93px in Figma, but there's a buffer in the SVG file
width: 81px;
height: 60px;
}
&__text {
@include font-body-2-italic;
&--incoming {
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
}
&__container .module-message__text--incoming {
@include font-body-2-italic;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
&__container .module-message__text--outgoing {
@include font-body-2-italic;
@include light-theme {
color: $color-white-alpha-80;
}
@include dark-theme {
color: $color-white-alpha-80;
}
}
}
.module-message__redeemed-gift-badge {
display: flex;
flex-direction: row;
&__container {
user-select: none;
}
&__badge {
height: 64px;
width: 64px;
margin-inline: 4px 12px;
margin-top: 8px;
margin-bottom: 16px;
flex-grow: 0;
flex-shrink: 0;
&--missing-incoming {
border-radius: 50%;
@include light-theme {
background-color: $color-gray-15;
}
@include dark-theme {
background-color: $color-gray-60;
}
}
&--missing-outgoing {
border-radius: 50%;
@include light-theme {
background-color: $color-white-alpha-20;
}
@include dark-theme {
background-color: $color-white-alpha-20;
}
}
}
&__text {
flex-grow: 1;
margin-top: 19px;
}
&__title {
margin-bottom: 6px;
@include font-body-1;
}
&__remaining {
@include font-subtitle;
&--incoming {
@include light-theme {
color: $color-gray-75;
}
@include dark-theme {
color: $color-gray-25;
}
}
&--outgoing {
@include light-theme {
color: $color-white-alpha-80;
}
@include dark-theme {
color: $color-white-alpha-80;
}
}
}
&__button {
@include button-reset;
@include button-secondary;
margin-inline: auto;
width: 216px;
margin-bottom: 7px;
text-align: center;
border-radius: 4px;
@include font-body-1-bold;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
&--incoming {
@include light-theme {
color: $color-gray-90;
background-color: $color-white;
}
@include dark-theme {
color: $color-gray-05;
background-color: $color-gray-62;
}
// Disabling hover
&:hover {
@include mouse-mode {
background-color: $color-white;
}
@include dark-mouse-mode {
background-color: $color-gray-62;
}
}
}
&--outgoing {
@include light-theme {
color: $color-gray-90;
background-color: $color-white-alpha-80;
}
@include dark-theme {
color: $color-gray-90;
background-color: $color-white-alpha-80;
}
&:hover {
@include mouse-mode {
background-color: $color-white-alpha-90;
}
@include dark-mouse-mode {
background-color: $color-white-alpha-90;
}
}
&:focus {
@include keyboard-mode {
box-shadow: 0px 0px 0px 3px $color-ultramarine-light;
}
@include dark-keyboard-mode {
box-shadow: 0px 0px 0px 3px $color-ultramarine-light;
}
}
&:active {
// We need to include all four here for specificity precedence
@include mouse-mode {
background-color: $color-white;
}
@include dark-mouse-mode {
background-color: $color-white;
}
@include keyboard-mode {
background-color: $color-white;
}
@include dark-keyboard-mode {
background-color: $color-white;
}
}
}
&__text {
display: flex;
flex-direction: row;
align-items: center;
height: 36px;
}
}
&__icon-check {
height: 19px;
width: 19px;
margin-inline-end: 5px;
display: inline-block;
&--incoming {
@include light-theme {
@include color-svg(
'../images/icons/v3/check/check-circle.svg',
$color-gray-90
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/check/check-circle.svg',
$color-gray-05
);
}
}
&--outgoing {
@include light-theme {
@include color-svg(
'../images/icons/v3/check/check-circle.svg',
$color-gray-90
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/check/check-circle.svg',
$color-gray-90
);
}
}
}
}
.module-message__typing-container {
height: 16px;
display: flex;
flex-direction: row;
align-items: center;
}
.module-message__reactions {
position: relative;
z-index: $z-index-above-base;
height: 22px;
display: flex;
user-select: none;
&--incoming {
align-self: flex-end;
padding-inline-end: 8px;
margin-inline-start: 8px;
}
&--outgoing {
align-self: flex-start;
padding-inline-start: 8px;
margin-inline-end: 8px;
}
}
.module-message__reactions__reaction {
@include button-reset;
min-width: 28px;
height: 22px;
border: 1px solid;
border-radius: 33px;
display: flex;
justify-content: center;
align-items: center;
&--with-count {
min-width: 40px;
padding-block: 0;
padding-inline: 6px;
}
&__count {
@include font-caption-bold;
margin-inline-start: 4px;
&--no-emoji {
margin-inline-start: 0px;
}
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
&--is-me {
@include dark-theme {
color: $color-gray-15;
}
}
}
&:focus {
outline: none;
}
@include keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 2px $color-ultramarine;
}
}
@include light-theme() {
border-color: $color-white;
background: $color-gray-05;
}
@include dark-theme() {
border-color: $color-gray-95;
background: $color-gray-90;
}
&--is-me {
@include dark-theme() {
background: $color-gray-60;
}
@include light-theme() {
background: $color-gray-25;
}
}
}
// Module: Expire Timer
.module-expire-timer {
width: 12px;
height: 12px;
display: inline-block;
margin-inline-start: 6px;
margin-bottom: 2px;
@include dark-theme {
@include color-svg(
'../images/icons/v3/message_timer/messagetimer-60.svg',
$color-white-alpha-80
);
}
@include light-theme {
@include color-svg(
'../images/icons/v3/message_timer/messagetimer-60.svg',
$color-white-alpha-80
);
}
}
$timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
'00';
@each $timer-icon in $timer-icons {
.module-expire-timer--#{$timer-icon} {
@include dark-theme {
@include color-svg(
'../images/icons/v3/message_timer/messagetimer-#{$timer-icon}.svg',
$color-white-alpha-80
);
}
@include light-theme {
@include color-svg(
'../images/icons/v3/message_timer/messagetimer-#{$timer-icon}.svg',
$color-white-alpha-80
);
}
}
}
.module-expire-timer--incoming {
background-color: $color-white-alpha-80;
@include light-theme {
background-color: $color-gray-60;
}
@include dark-theme {
background-color: $color-gray-25;
}
}
.module-expire-timer.module-expire-timer--incoming-with-tap-to-view-expired {
background-color: $color-gray-75;
@include dark-theme {
background-color: $color-white-alpha-80;
}
}
.module-expire-timer.module-expire-timer--outgoing-with-tap-to-view-expired {
background-color: $color-white-alpha-80;
}
.module-expire-timer--with-sticker {
@include light-theme {
background-color: $color-gray-60;
}
}
// When status indicators are overlaid on top of an image, they use different colors
.module-expire-timer--with-image-no-caption {
@include light-theme {
background-color: $color-white;
}
@include dark-theme {
background-color: $color-gray-02;
}
}
.module-expire-timer--deleted-for-everyone {
@include light-theme {
background-color: $color-gray-60;
}
@include dark-theme {
background-color: $color-gray-25;
}
}
.module-about {
&__container {
margin-inline: auto;
max-width: 248px;
text-align: center;
}
&__text {
@include font-body-1;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
max-width: 400px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
img.emoji {
height: 1em;
margin-inline-end: 3px;
margin-bottom: 3px;
vertical-align: middle;
width: 1em;
}
}
}
// Module: Embedded Contact
.module-embedded-contact {
@include button-reset;
width: 100%;
padding: 5px;
display: flex;
flex-direction: row;
align-items: center;
@include keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 2px $color-ultramarine;
}
}
}
.module-embedded-contact--outgoing {
@include keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 2px $color-white;
}
}
}
.module-embedded-contact--with-content-above {
padding-top: 4px;
}
.module-embedded-contact--with-content-below {
padding-bottom: 4px;
}
.module-embedded-contact__spinner-container {
padding-inline: 5px;
}
.module-embedded-contact__text-container {
flex-grow: 1;
margin-inline-start: 8px;
max-width: calc(100% - 58px);
}
.module-embedded-contact__contact-name {
@include font-body-1-bold;
margin-top: 6px;
max-width: 100%;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
@include light-theme {
color: $color-white;
}
@include dark-theme {
color: $color-gray-05;
}
}
.module-embedded-contact__contact-name--incoming {
color: $color-white;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-25;
}
}
.module-embedded-contact__contact-method {
@include font-body-2;
margin-top: 3px;
max-width: 100%;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
@include dark-theme {
color: $color-white-alpha-80;
}
@include light-theme {
color: $color-white-alpha-80;
}
}
.module-embedded-contact__contact-method--incoming {
color: $color-white-alpha-80;
@include light-theme {
color: $color-gray-60;
}
}
// Module: Contact Detail
.module-contact-detail {
text-align: center;
max-width: 300px;
margin-inline: auto;
}
.module-contact-detail__avatar {
margin-bottom: 4px;
}
.module-contact-detail__contact-name {
@include font-body-1-bold;
}
.module-contact-detail__contact-method {
@include font-body-2;
margin-top: 10px;
}
.module-contact-detail__send-message {
@include button-reset;
border-radius: 4px;
background-color: $color-ultramarine;
display: inline-block;
padding: 6px;
margin-top: 20px;
color: $color-white;
flex-direction: column;
align-items: center;
}
.module-contact-detail__send-message__inner {
display: flex;
align-items: center;
padding-inline-end: 5px;
@include font-body-2-bold;
}
.module-contact-detail__send-message__bubble-icon {
height: 17px;
width: 18px;
display: inline-block;
margin-inline-end: 5px;
@include light-theme {
@include color-svg('../images/icons/v3/chat/chat.svg', $color-white);
}
@include dark-theme {
@include color-svg('../images/icons/v3/chat/chat.svg', $color-white);
}
}
.module-contact-detail__additional-contact {
text-align: start;
margin-top: 15px;
padding-top: 8px;
@include light-theme {
border-top: 1px solid $color-gray-05;
}
@include dark-theme {
border-top: 1px solid $color-gray-75;
}
}
.module-contact-detail__additional-contact__type {
@include font-caption-bold;
color: $color-gray-45;
margin-bottom: 3px;
}
// Module: Inline Notification Wrapper
.module-inline-notification-wrapper {
outline: none;
&:focus {
@include keyboard-mode {
background: $color-selected-message-background-light;
}
@include dark-keyboard-mode {
background: $color-selected-message-background-dark;
}
}
}
// Module: Group Notification
.module-group-notification__contact {
font-weight: bold;
}
.module-safety-number__bold-name {
font-weight: bold;
}
// Module: Error Boundary
.module-error-boundary-notification {
text-align: center;
cursor: pointer;
&:focus {
@include keyboard-mode {
outline: 0;
}
}
&:focus &__message {
@include keyboard-mode {
opacity: 1;
}
}
&__message {
opacity: 0.8;
}
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-05;
}
&__icon-container {
margin-inline: auto;
display: inline-flex;
flex-direction: row;
align-items: center;
margin-bottom: 8px;
}
&__icon {
height: 20px;
width: 20px;
display: inline-block;
opacity: 0.6;
@include light-theme {
@include color-svg(
'../images/icons/v2/error-solid-24.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/error-solid-24.svg',
$color-gray-05
);
}
}
}
.module-notification--with-click-handler {
cursor: pointer;
}
.module-notification__icon {
height: 24px;
width: 24px;
margin-inline: auto;
}
// Module: In Contacts Icon
.module-in-contacts-icon__icon {
display: inline-block;
height: 14px;
width: 14px;
margin-bottom: 2px;
vertical-align: middle;
@include light-theme {
@include color-svg(
'../images/icons/v3/person/person-circle-compact.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/person/person-circle-compact.svg',
$color-gray-25
);
}
@include keyboard-mode {
&:focus {
@include color-svg(
'../images/icons/v3/person/person-circle-compact.svg',
$color-ultramarine
);
}
}
}
// Module: Conversation Details
.conversation-details-panel {
max-width: 750px;
margin-block: 0;
margin-inline: auto;
@at-root .conversation #{&} {
overflow-y: auto;
}
}
// Brought this up here to add specificity
button.ConversationDetails__action-button {
margin-inline-start: 16px;
}
// Module: Media Gallery
.module-media-gallery {
display: flex;
flex-direction: column;
flex-grow: 1;
width: 100%;
height: 100%;
outline: none;
}
.module-media-gallery__content {
display: flex;
flex-grow: 1;
overflow-y: auto;
padding: 20px;
}
.module-media-gallery__sections {
display: flex;
flex-grow: 1;
flex-direction: column;
}
// Module: Attachment Section
.module-attachment-section {
width: 100%;
}
.module-attachment-section__header {
@include font-body-1-bold;
}
.module-attachment-section__items {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
// Module: Document List Item
.module-document-list-item {
width: 100%;
height: 72px;
}
.module-document-list-item--with-separator {
@include light-theme {
border-bottom: 1px solid $color-gray-02;
}
@include dark-theme {
border-bottom: 1px solid $color-gray-75;
}
}
.module-document-list-item__content {
@include button-reset;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
@include keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 2px $color-ultramarine;
}
}
}
.module-document-list-item__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
@include color-svg('../images/file.svg', $color-gray-45);
}
.module-document-list-item__metadata {
display: inline-flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
margin-inline: 8px;
}
.module-document-list-item__file-size {
display: inline-block;
margin-top: 8px;
@include font-body-2;
}
.module-document-list-item__date {
display: inline-block;
flex-shrink: 0;
}
// Module: Media Grid Item
.module-media-grid-item {
@include button-reset;
height: 94px;
width: 94px;
background-color: $color-gray-05;
margin-inline-end: 4px;
margin-bottom: 4px;
position: relative;
@include keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 2px $color-ultramarine;
}
}
}
.module-media-grid-item__image {
height: 94px;
width: 100%;
object-fit: cover;
}
.module-media-grid-item__icon {
position: absolute;
top: 15px;
bottom: 15px;
inset-inline: 15px;
}
.module-media-grid-item__icon-image {
@include color-svg('../images/image.svg', $color-gray-45);
}
.module-media-grid-item__image-container {
position: relative;
}
.module-media-grid-item__circle-overlay {
@include position-absolute-center;
width: 42px;
height: 42px;
background-color: $color-white;
border-radius: 21px;
}
.module-media-grid-item__play-overlay {
@include position-absolute-center;
height: 24px;
width: 24px;
@include color-svg(
'../images/icons/v3/play/play-fill.svg',
$color-ultramarine
);
}
.module-media-grid-item__icon-video {
@include color-svg('../images/movie.svg', $color-gray-45);
}
.module-media-grid-item__icon-generic {
@include color-svg('../images/file.svg', $color-gray-45);
}
/* Module: Empty State*/
.module-empty-state {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
@include font-title-1;
color: $color-gray-45;
}
// Module: Message Request Actions
.module-message-request-actions {
padding-block: 8px 12px;
padding-inline: 16px;
@include light-theme {
background: $color-white;
}
@include dark-theme {
background: $color-gray-95;
}
&__message {
@include font-body-2;
text-align: center;
margin-bottom: 12px;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
&__name {
@include font-body-2-bold;
}
&__learn-more {
text-decoration: none;
}
}
&__buttons {
display: flex;
flex-direction: row;
justify-content: center;
.module-Button {
min-width: 80px;
&:not(:last-of-type) {
margin-inline-end: 8px;
}
}
}
}
// Module: Main Header
.module-main-header {
-webkit-app-region: var(--draggable-app-region);
height: calc(#{$header-height} + var(--title-bar-drag-area-height));
width: 100%;
padding-inline: 16px;
padding-top: var(--title-bar-drag-area-height);
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
.module-left-pane--width-narrow & {
flex-direction: column;
height: auto;
justify-content: center;
}
& > * {
margin-inline-end: 12px;
&:last-child {
margin-inline-end: 0;
}
}
&__avatar {
-webkit-app-region: no-drag;
&--container {
position: relative;
.module-left-pane--width-narrow & {
margin-bottom: 20px;
margin-inline-end: 0;
margin-top: 12px;
}
}
&--badged {
background: $color-ultramarine;
border-radius: 100%;
border: 1px solid $color-white;
height: 8px;
width: 8px;
position: absolute;
top: 0;
inset-inline-end: 0;
}
}
&__icon-container {
display: flex;
.module-left-pane--width-narrow & {
flex-direction: column-reverse;
}
}
&__compose-icon {
-webkit-app-region: no-drag;
align-items: center;
background: none;
border-radius: 4px;
border: 2px solid transparent;
display: inline-flex;
height: 28px;
justify-content: center;
width: 28px;
padding: 0px;
@include keyboard-mode {
&:focus {
border-color: $color-ultramarine;
outline: none;
}
}
&::before {
$icon: '../images/icons/v3/compose/compose.svg';
width: 20px;
height: 20px;
content: '';
@include light-theme {
@include color-svg($icon, $color-gray-75);
}
@include dark-theme {
@include color-svg($icon, $color-gray-15);
}
}
}
&__stories-badge {
@include rounded-corners;
align-items: center;
background-color: $color-accent-red;
color: $color-white;
display: flex;
font-size: 10px;
height: 16px;
justify-content: center;
min-width: 16px;
overflow: hidden;
padding-block: 0;
padding-inline: 2px;
position: absolute;
inset-inline-end: -6px;
top: -4px;
user-select: none;
z-index: $z-index-base;
}
&__stories-icon {
-webkit-app-region: no-drag;
align-items: center;
background: none;
border-radius: 4px;
border: 2px solid transparent;
display: inline-flex;
height: 28px;
justify-content: center;
margin-inline-end: 12px;
position: relative;
width: 28px;
padding: 0px;
.module-left-pane--width-narrow & {
margin-inline-end: 0;
margin-top: 16px;
margin-bottom: 20px;
}
@include keyboard-mode {
&:focus {
border-color: $color-ultramarine;
outline: none;
}
}
&::before {
$icon: '../images/icons/v3/stories/stories.svg';
width: 20px;
height: 20px;
content: '';
@include light-theme {
@include color-svg($icon, $color-gray-75);
}
@include dark-theme {
@include color-svg($icon, $color-gray-15);
}
}
}
}
// Module: Image
.module-image {
position: relative;
display: inline-block;
vertical-align: middle;
}
.module-image--hidden {
visibility: hidden;
}
.module-image--tap-to-play,
.module-image--not-downloaded {
align-items: center;
display: flex;
justify-content: center;
span {
align-items: center;
display: flex;
justify-content: center;
border-radius: 48px;
height: 48px;
width: 48px;
background-color: $color-black-alpha-70;
}
&:hover {
span {
background-color: $color-black-alpha-80;
}
}
&:focus {
span {
background-color: $color-gray-75;
border: 4px solid $color-ultramarine;
box-sizing: border-box;
outline: none;
}
}
}
.module-image--not-downloaded {
span:after {
content: '';
height: 24px;
width: 24px;
@include color-svg('../images/icons/v3/arrow/arrow-down.svg', $color-white);
}
}
.module-image--tap-to-play {
span:after {
display: flex;
flex-direction: column;
align-items: center;
content: 'GIF';
height: 24px;
width: 24px;
@include font-body-1;
color: $color-white;
}
}
.module-image__download-pending {
position: relative;
&--spinner-container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
&--spinner {
background-color: $color-gray-75;
border-radius: 48px;
height: 48px;
width: 48px;
.module-image-spinner {
&__container {
margin-block: 12px;
margin-inline: auto;
}
&__arc {
background-color: $color-gray-75;
}
&__circle {
background-color: $color-white;
}
@include dark-theme {
&__arc {
background-color: $color-gray-75;
}
}
}
}
}
.module-image--with-background {
@include light-theme {
background-color: $color-white;
}
@include dark-theme {
background-color: $color-black;
}
}
.module-image__caption-icon {
position: absolute;
top: 6px;
inset-inline-start: 6px;
}
.module-image--cropped {
overflow: hidden;
}
.module-image__border-overlay {
@include button-reset;
width: 100%;
cursor: inherit;
position: absolute;
top: 0;
bottom: 0;
inset-inline: 0;
z-index: $z-index-above-base;
}
.module-image__border-overlay--with-click-handler {
cursor: pointer;
}
.module-image__border-overlay--with-border {
@include light-theme {
box-shadow: inset 0px 0px 0px 1px $color-black-alpha-20;
}
@include dark-theme {
box-shadow: inset 0px 0px 0px 1px $color-white-alpha-20;
}
}
.module-image--gif {
&__filesize {
position: absolute;
top: 10px;
inset-inline-start: 10px;
padding-block: 2px;
padding-inline: 8px;
color: $color-white;
background: $color-black-alpha-70;
/* The height is: 14px + 2x2px from the padding */
border-radius: 9px;
font-size: 11px;
line-height: 14px;
user-select: none;
}
video {
cursor: pointer;
}
}
button.module-image__border-overlay:focus {
@include keyboard-mode {
box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
}
}
.module-image__border-overlay--dark {
background-color: $color-black-alpha-20;
}
.module-image__loading-placeholder {
display: inline-flex;
flex-direction: row;
align-items: center;
@include light-theme {
background-color: $color-black-alpha-20;
}
@include dark-theme {
background-color: $color-white-alpha-20;
}
}
.module-image__image {
object-fit: cover;
// redundant with attachment-container, but we get cursor flashing on move otherwise
cursor: pointer;
}
.module-image__bottom-overlay {
height: 48px;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0) 9%,
rgba(0, 0, 0, 0.02) 17%,
rgba(0, 0, 0, 0.05) 24%,
rgba(0, 0, 0, 0.08) 31%,
rgba(0, 0, 0, 0.12) 37%,
rgba(0, 0, 0, 0.16) 44%,
rgba(0, 0, 0, 0.2) 50%,
rgba(0, 0, 0, 0.24) 56%,
rgba(0, 0, 0, 0.28) 63%,
rgba(0, 0, 0, 0.32) 69%,
rgba(0, 0, 0, 0.35) 76%,
rgba(0, 0, 0, 0.38) 83%,
rgba(0, 0, 0, 0.4) 91%,
rgba(0, 0, 0, 0.4)
);
position: absolute;
bottom: 0;
z-index: $z-index-base;
inset-inline: 0;
}
.module-image__play-overlay__circle {
@include position-absolute-center;
width: 48px;
height: 48px;
background-color: $color-white;
border-radius: 24px;
}
.module-image__play-overlay__icon {
@include position-absolute-center;
height: 24px;
width: 24px;
@include color-svg(
'../images/icons/v3/play/play-fill.svg',
$color-ultramarine
);
}
.module-image__text-container {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
z-index: $z-index-above-above-base;
// This allows click-through to the overlay button behind it
pointer-events: none;
color: $color-white;
@include font-body-1;
text-align: center;
}
.module-image__close-button {
@include staged-attachment-close-button;
&::before {
content: '';
display: block;
width: 16px;
height: 16px;
@include color-svg('../images/icons/v3/x/x-compact.svg', $color-white);
}
background-image: url('../images/icons/v3/x/x-compact.svg');
filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.6));
@include keyboard-mode {
&:focus {
outline: 2px solid $color-ultramarine;
}
}
}
// Module: Image Grid
.module-image-grid {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 1px;
}
.module-image-grid--one-image {
margin-bottom: -5px;
}
.module-image-grid--with-sticker {
padding: 8px;
}
.module-image-grid__column {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
.module-image-grid__row {
display: inline-flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
gap: 1px;
}
// Module: Typing Animation
.module-typing-animation {
display: inline-flex;
flex-direction: row;
align-items: center;
height: 8px;
width: 38px;
padding-inline: 1px;
}
.module-typing-animation__dot {
border-radius: 50%;
height: 6px;
width: 6px;
opacity: 0.4;
will-change: transform, opacity;
@include dark-theme {
background-color: $color-white;
}
@include light-theme {
background-color: $color-gray-60;
}
@include only-when-page-is-visible {
animation: {
name: typing-animation;
duration: 1600ms;
timing-function: ease;
iteration-count: infinite;
}
}
}
.module-left-pane .module-typing-animation__dot {
@include only-when-page-is-visible {
animation-name: typing-animation-bare;
}
}
.module-typing-animation__dot--light {
background-color: $color-white;
@include light-theme {
background-color: $color-gray-60;
}
}
@keyframes typing-animation {
0% {
opacity: 0.4;
}
20% {
transform: scale(1.3);
opacity: 1;
}
40% {
opacity: 0.4;
}
}
@keyframes typing-animation-bare {
0% {
opacity: 0.4;
}
20% {
opacity: 1;
}
40% {
opacity: 0.4;
}
}
.module-typing-animation__dot--second {
animation-delay: 160ms;
}
.module-typing-animation__dot--third {
animation-delay: 320ms;
}
.module-typing-animation__spacer {
flex-grow: 1;
}
// Module: Attachments
.module-attachments__header {
height: 24px;
position: relative;
}
.module-attachments__edit-icon {
align-items: center;
background: $color-black-alpha-60;
border-radius: 100%;
display: flex;
height: 36px;
justify-content: center;
inset-inline-start: 50%;
margin-inline-start: -20px;
margin-top: -18px;
position: absolute;
top: 50%;
visibility: hidden;
width: 36px;
&::after {
@include color-svg(
'../images/icons/v3/edit/edit-compact.svg',
$color-white
);
content: '';
height: 20px;
width: 20px;
}
}
.module-attachments--editable {
display: inline-block;
position: relative;
&:hover {
.module-attachments__edit-icon {
visibility: visible;
}
}
}
.module-attachments__close-button {
$icon: '../images/icons/v3/x/x.svg';
@include button-reset;
position: absolute;
top: 8px;
inset-inline-end: 16px;
width: 20px;
height: 20px;
z-index: $z-index-above-base;
@include light-theme {
@include color-svg($icon, $color-black);
}
@include dark-theme {
@include color-svg($icon, $color-white);
}
@include keyboard-mode {
&:focus {
@include color-svg($icon, $color-ultramarine);
}
}
}
.module-attachments__rail {
margin-top: 12px;
margin-inline-start: 12px;
padding-inline-end: 12px;
overflow-x: scroll;
max-height: 142px;
white-space: nowrap;
overflow-y: hidden;
margin-bottom: 6px;
}
.module-staged-attachment {
margin-inline-end: 8px;
&.module-image::before {
background: linear-gradient(
180deg,
$color-black-alpha-30 0%,
transparent 100%
);
content: '';
display: block;
height: 40px;
opacity: 0;
position: absolute;
transition: opacity 0.2s ease-out;
width: 100%;
}
&.module-image:hover::before {
opacity: 1;
}
}
// Module: Staged Generic Attachment
.module-staged-generic-attachment {
height: 120px;
width: 120px;
display: inline-block;
position: relative;
border-radius: 4px;
vertical-align: middle;
white-space: nowrap;
@include light-theme {
box-shadow: inset 0px 0px 0px 1px $color-black-alpha-20;
background-color: $color-gray-05;
}
@include dark-theme {
box-shadow: inset 0px 0px 0px 1px $color-gray-45;
background-color: $color-gray-75;
color: $color-gray-02;
}
}
.module-staged-generic-attachment__close-button {
@include staged-attachment-close-button;
@include light-theme {
@include color-svg('../images/icons/v3/x/x-compact.svg', $color-black);
}
@include dark-theme {
@include color-svg('../images/icons/v3/x/x-compact.svg', $color-gray-45);
}
}
.module-staged-generic-attachment__icon {
margin-top: 30px;
background: url('../images/file-gradient.svg') no-repeat center;
height: 44px;
width: 56px;
margin-inline: 32px;
margin-bottom: -4px;
// So we can center the extension text inside this icon
display: flex;
flex-direction: row;
align-items: center;
}
.module-staged-generic-attachment__icon__extension {
font-size: 10px;
line-height: 13px;
letter-spacing: 0.1px;
text-transform: uppercase;
// Along with flow layout in parent item, centers text
text-align: center;
width: 25px;
margin-inline: auto;
// We don't have much room for text here, cut it off without ellipse
overflow-x: hidden;
white-space: nowrap;
text-overflow: clip;
color: $color-gray-90;
}
.module-staged-generic-attachment__filename {
@include font-caption;
margin: 7px;
margin-top: 5px;
text-align: center;
overflow: hidden;
height: 2.4em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
// Module: Staged Placeholder Attachment
.module-staged-placeholder-attachment {
@include button-reset;
margin: 1px;
border-radius: 4px;
height: 120px;
width: 120px;
display: inline-block;
vertical-align: middle;
position: relative;
@include light-theme {
border: 1px solid $color-gray-25;
&:hover {
background: $color-gray-05;
}
}
@include keyboard-mode {
&:focus {
box-shadow: inset 0 0 0 2px $color-ultramarine;
}
}
@include dark-theme {
border: 1px solid $color-gray-60;
&:hover {
background: $color-gray-75;
}
}
@include dark-keyboard-mode {
&:focus {
box-shadow: inset 0 0 0 2px $color-ultramarine;
}
}
}
.module-staged-placeholder-attachment__plus-icon {
@include position-absolute-center;
height: 28px;
width: 28px;
@include light-theme {
@include color-svg(
'../images/icons/v3/plus/plus-light.svg',
$color-gray-45
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/plus/plus-light.svg',
$color-gray-60
);
}
}
.module-payment-notification {
&__container {
display: block;
}
&__label {
margin-block: 0 7px;
margin-inline: 0;
@include font-subtitle;
@include light-theme() {
color: $color-gray-60;
}
@include dark-theme() {
color: $color-gray-25;
}
}
&__check_device_box {
display: flex;
gap: 9px;
align-items: center;
@include font-body-2;
padding-block: 22px;
padding-inline: 7px;
padding-inline-start: 12px;
border-radius: 18px;
margin-block: 0;
margin-inline: -4px;
@include light-theme() {
background: $color-white-alpha-60;
color: $color-gray-90;
}
@include dark-theme() {
background: $color-white-alpha-20;
color: $color-white;
}
&::before {
content: '';
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
@include color-svg('../images/icons/v3/info/info.svg', currentcolor);
}
}
&__note {
margin-block: 9px 0;
margin-inline: 0;
@include font-body-1;
}
&--outgoing &__label {
@include light-theme() {
color: $color-white-alpha-80;
}
@include dark-theme() {
color: $color-white-alpha-80;
}
}
&--outgoing &__check_device_box {
background: $color-white-alpha-20;
color: $color-white;
}
}
// Module: Spinner
.module-spinner__container {
margin-inline: auto;
position: relative;
height: 56px;
width: 56px;
}
.module-spinner__circle {
position: absolute;
top: 0;
inset-inline-start: 0;
z-index: $z-index-above-base;
height: 100%;
width: 100%;
@include color-svg('../images/spinner-track-56.svg', $color-white-alpha-40);
}
.module-spinner__arc {
position: absolute;
top: 0;
inset-inline-start: 0;
z-index: $z-index-above-above-base;
height: 100%;
width: 100%;
animation: rotate 1000ms linear infinite;
@include light-theme {
@include color-svg('../images/spinner-56.svg', $color-gray-60);
}
@include dark-theme {
@include color-svg('../images/spinner-56.svg', $color-gray-05);
}
}
// In these --small and --mini sizes, we're exploding our @color-svg mixin so we don't
// have to duplicate our background colors for the dark/ios/size matrix.
.module-spinner__container--small {
height: 24px;
width: 24px;
}
.module-spinner__circle--small {
-webkit-mask: url('../images/spinner-track-24.svg') no-repeat center;
-webkit-mask-size: 100%;
// For specificity
@include dark-theme {
-webkit-mask: url('../images/spinner-track-24.svg') no-repeat center;
-webkit-mask-size: 100%;
}
}
.module-spinner__arc--small {
-webkit-mask: url('../images/spinner-24.svg') no-repeat center;
-webkit-mask-size: 100%;
// For specificity
@include dark-theme {
-webkit-mask: url('../images/spinner-24.svg') no-repeat center;
-webkit-mask-size: 100%;
}
}
.module-spinner__circle--incoming {
background-color: $color-white-alpha-40;
}
.module-spinner__arc--incoming {
@include light-theme {
background-color: $color-gray-60;
}
@include dark-theme {
background-color: $color-gray-02;
}
}
.module-spinner__circle--outgoing {
@include light-theme {
background-color: $color-white-alpha-40;
}
@include dark-theme {
background-color: $color-white-alpha-40;
}
}
.module-spinner__arc--outgoing {
@include light-theme {
background-color: $color-white;
}
@include dark-theme {
background-color: $color-gray-05;
}
}
.module-spinner__circle--on-avatar {
background-color: $color-white-alpha-40;
}
.module-spinner__circle--on-background {
@include light-theme {
background-color: $color-gray-05;
}
@include dark-theme {
background-color: $color-gray-75;
}
}
.module-spinner__arc--on-background {
@include light-theme {
background-color: $color-gray-60;
}
@include dark-theme {
background-color: $color-gray-25;
}
}
.module-spinner__circle--on-primary-button {
background-color: $color-white-alpha-40;
}
.module-spinner__circle--on-progress-dialog {
@include light-theme {
background-color: $color-white;
}
@include dark-theme {
background-color: $color-gray-80;
}
}
.module-spinner__arc--on-progress-dialog {
background-color: $color-ultramarine;
}
.module-spinner__arc--on-avatar {
background-color: $color-white;
}
.module-spinner__arc--on-primary-button {
background-color: $color-white;
}
// Module: Reaction Viewer
.module-reaction-viewer {
width: 320px;
height: 320px;
border-radius: 8px;
display: flex;
flex-direction: column;
@include popper-shadow();
@include light-theme() {
background: $color-white;
}
@include dark-theme() {
background: $color-gray-75;
}
&__header {
width: 100%;
min-height: 44px;
padding-block: 0px;
padding-inline: 8px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
overflow-x: auto;
&__button {
min-height: 28px;
border: none;
border-radius: 18px;
padding-block: 0px;
padding-inline: 8px;
display: flex;
justify-content: center;
align-items: center;
flex-basis: 45px;
flex-shrink: 0;
&:not(:first-of-type) {
margin-inline-start: 4px;
}
&:focus {
outline: none;
}
@include keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 2px $color-ultramarine;
}
}
background: none;
&--selected {
@include light-theme() {
background: $color-gray-05;
}
@include dark-theme() {
background: $color-gray-60;
}
}
&__count,
&__all {
@include font-body-2-bold();
white-space: nowrap;
@include light-theme() {
color: $color-gray-90;
}
@include dark-theme() {
color: $color-gray-05;
}
}
&__count {
margin-inline-start: 4px;
}
}
}
&__body {
flex-grow: 1;
padding-block: 0;
padding-inline: 16px;
overflow: auto;
&__row {
margin-top: 12px;
min-height: 32px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
&:last-of-type {
margin-bottom: 12px;
}
&__avatar {
min-width: 32px;
flex-shrink: 1;
}
&__name {
@include font-body-1-bold();
flex-grow: 1;
margin-inline-start: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include light-theme() {
color: $color-gray-90;
}
@include dark-theme() {
color: $color-gray-05;
}
}
&__emoji {
width: 18px;
flex-shrink: 1;
}
}
}
}
// Module: Calling
.module-calling {
// creates a new independent stacking context that includes modals
//
// container has no width/height, direct children need to:
// - size themselves explicitly (no percentage width/height or top/bottom or left/right)
// - size themselves in relation to viewport (position: fixed)
&__modal-container {
position: fixed;
top: var(--titlebar-height);
inset-inline-start: 0;
z-index: $z-index-on-top-of-everything;
}
&__container {
align-items: center;
background-color: $calling-background-color;
display: flex;
flex-direction: column;
height: var(--window-height);
justify-content: center;
position: fixed;
width: 100%;
z-index: $z-index-calling;
}
&__header {
color: #ffffff;
font-style: normal;
padding-bottom: 24px;
padding-top: calc(24px + var(--title-bar-drag-area-height));
text-align: center;
@include calling-text-shadow;
width: 100%;
&--header-name {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.009em;
line-height: 21px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&__buttons {
bottom: 0;
display: flex;
justify-content: center;
padding-bottom: 32px;
padding-top: 32px;
position: absolute;
text-align: center;
width: 100%;
&--inline {
position: static;
}
}
&__background {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
overflow: hidden;
position: relative;
width: 100%;
&--blur {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
filter: blur(25px);
height: 100%;
position: absolute;
width: 100%;
}
}
&__camera-is-off {
@include calling-text-shadow;
@include font-body-1;
color: $color-white;
display: flex;
align-items: center;
z-index: $z-index-base;
margin-top: 10px;
// To match the icon height in ::before
line-height: 24px;
&::before {
content: '';
display: block;
background-image: url('../images/icons/v3/video/video-slash-fill-white.svg');
background-size: 100%;
-webkit-filter: drop-shadow(0 0 4px $color-black-alpha-40);
height: 20px;
margin-inline-end: 10px;
width: 20px;
}
}
}
@keyframes module-ongoing-call__controls--fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes module-ongoing-call__controls--fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.module-ongoing-call {
$local-preview-width: 136px;
$local-preview-height: 102px;
&__remote-video-enabled {
background-color: $color-gray-95;
height: 100%;
width: 100%;
}
&__remote-video-disabled {
background-color: $color-gray-95;
height: var(--window-height);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
&__container {
&--direct:not(&--call-not-started) {
.module-ongoing-call__header {
position: absolute;
}
.module-ongoing-call__footer {
position: absolute;
}
}
}
&__header {
background: linear-gradient($color-black-alpha-40, transparent);
top: 0;
width: 100%;
z-index: $z-index-above-base;
padding-bottom: 1rem;
}
&__header-message {
font-weight: normal;
font-size: 13px;
font-variant: tabular-nums;
line-height: 18px;
letter-spacing: -0.0025em;
}
&__direct-call-ringing-spacer {
flex: 1;
}
&__participants {
display: flex;
flex: 1 1 0;
width: 100%;
&__grid {
flex-grow: 1;
position: relative;
}
&__overflow {
flex: 0 0 auto;
position: relative;
margin-inline: 16px;
&__inner {
position: absolute;
bottom: 0;
inset-inline-start: 0;
width: 100%;
max-height: 100%;
overflow-y: scroll;
&::-webkit-scrollbar,
&::-webkit-scrollbar-thumb {
width: 0;
background: transparent;
}
}
& .module-ongoing-call__group-call-remote-participant {
width: 100%;
margin-bottom: 1rem;
}
&__scroll-marker {
$scroll-marker-selector: &;
@include smooth-scroll;
display: flex;
justify-content: center;
inset-inline-start: 0;
opacity: 1;
position: absolute;
transition: opacity 200ms ease-out;
width: 100%;
z-index: $z-index-above-above-base;
&--hidden {
opacity: 0;
}
&__button {
&::before {
@include color-svg(
'../images/icons/v3/chevron/chevron-down.svg',
$color-white
);
content: '';
display: block;
height: 100%;
width: 100%;
}
background: $color-gray-60;
border-radius: 100%;
border: 0;
box-shadow: 0 0 5px rgba($color-gray-95, 0.5);
height: 28px;
margin-block: 12px;
margin-inline: 0;
opacity: 0;
outline: none;
transition: opacity 200ms ease-out;
width: 28px;
}
&--top {
top: 0;
background: linear-gradient(
$calling-background-color,
transparent 20px,
transparent
);
#{$scroll-marker-selector}__button {
transform: rotate(180deg);
}
}
&--bottom {
bottom: 0;
background: linear-gradient(
to top,
$calling-background-color,
transparent 20px,
transparent
);
}
}
&:hover &__scroll-marker__button {
opacity: 1;
}
}
}
&__group-call-remote-participant {
display: flex;
justify-content: center;
position: relative;
line-height: 0;
overflow: hidden;
border-radius: 5px;
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translate(0, 0);
transition: transform 200ms linear, width 200ms linear, height 200ms linear;
&:after {
content: '';
position: absolute;
z-index: $z-index-above-above-base;
width: 100%;
height: 100%;
border: 0 solid transparent;
border-radius: 5px;
transition-property: border-width, border-color;
// Turn on the transition when the user stops speaking to fade out.
transition-duration: 300ms;
transition-delay: 1000ms;
transition-timing-function: ease-in-out;
}
&--speaking:after {
border-width: 3px;
border-color: $color-white;
// Turn off the transition when the user starts speaking to appear instantly
transition-duration: 0ms;
transition-delay: 0ms;
}
&__remote-video {
// The background-color is seen while the video loads.
background-color: $color-gray-75;
}
&__blocked {
@include color-svg('../images/icons/v3/block/block.svg', $color-white);
height: 24px;
margin-bottom: 16px;
width: 24px;
&--info {
@include button-reset;
background-color: $color-gray-75;
border-radius: 16px;
color: $color-white;
line-height: 16px;
padding-block: 3px;
padding-inline: 10px;
}
&--modal-title {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
}
}
&__info {
@include font-caption;
align-items: flex-end;
bottom: 0;
display: flex;
height: 48px;
justify-content: space-between;
padding: 6px;
position: absolute;
user-select: none;
width: 100%;
z-index: $z-index-above-base;
&__contact-name {
font-size: 12px;
color: $color-white;
margin-inline-end: 20px;
overflow: hidden;
text-overflow: ellipsis;
visibility: hidden;
white-space: nowrap;
margin-bottom: 2px;
}
}
&:hover {
.module-ongoing-call__group-call-remote-participant__info {
background: linear-gradient(
180deg,
transparent,
$color-black-alpha-60 100%
);
&__contact-name {
visibility: visible;
}
}
}
}
&__local-preview-fullsize {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
z-index: $z-index-negative;
video {
@include lonely-local-video-preview;
}
&--presenting {
video {
transform: none;
}
}
}
&__footer {
background: linear-gradient(transparent, $color-black-alpha-40);
bottom: 0;
display: flex;
justify-content: space-between;
width: 100%;
z-index: $z-index-above-base;
&__actions {
align-items: center;
display: flex;
flex-grow: 1;
justify-content: center;
}
// This layout-only element is not ideal, but lets us keep the actions centered until
// until they'd overlap with the video, at which point they start to move.
&__local-preview-offset {
flex: 1 0;
max-width: $local-preview-width;
visibility: hidden;
}
&__local-preview {
border-radius: 5px;
display: flex;
height: $local-preview-height;
margin-block: 2px 16px;
margin-inline: 0 16px;
overflow: hidden;
position: relative;
width: $local-preview-width;
&__video {
// The background-color is seen while the video loads.
background-color: $color-gray-75;
height: 100%;
transform: rotateY(180deg);
width: 100%;
&--presenting {
transform: inherit;
}
}
.CallingAudioIndicator {
bottom: 6px;
position: absolute;
inset-inline-end: 6px;
z-index: $z-index-base;
}
}
}
&__controls--fadeIn {
animation: {
name: module-ongoing-call__controls--fade-in;
duration: 400ms;
timing-function: $ease-out-expo;
fill-mode: forwards;
}
}
&__controls--fadeOut {
animation: {
name: module-ongoing-call__controls--fade-out;
duration: 1200ms;
timing-function: $ease-out-expo;
fill-mode: forwards;
}
}
}
.module-calling-tools {
display: flex;
justify-content: flex-end;
position: absolute;
top: calc(24px + var(--title-bar-drag-area-height));
width: 100%;
&__button {
margin-inline-end: 25px;
}
}
.module-calling-pip {
backface-visibility: hidden;
background-color: $color-gray-95;
border-radius: 4px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 8px 20px rgba(0, 0, 0, 0.3);
cursor: grab;
height: 158px;
position: fixed;
width: 120px;
z-index: $z-index-calling-pip;
& .module-ongoing-call__group-call-remote-participant {
border-radius: 0;
}
&__video {
&--remote {
align-items: center;
background-color: $color-gray-95;
border-radius: 4px 4px 0 0;
display: flex;
height: 120px; // This height should be kept in sync with 's hard-coded height.
justify-content: center;
overflow: hidden;
position: relative;
width: 100%;
// The avatar image can be dragged on Windows.
.module-Avatar img {
-webkit-user-drag: none;
-webkit-user-select: none;
}
}
&--local {
bottom: 38px;
height: 32px;
position: absolute;
inset-inline-end: 4px;
transform: rotateY(180deg);
width: 32px;
}
}
&__actions {
align-items: center;
background-color: $color-gray-02;
border-radius: 0 0 4px 4px;
display: flex;
flex-direction: row;
height: 38px;
justify-content: space-around;
@include dark-theme {
background-color: $color-gray-65;
}
}
&__button {
&--hangup {
@include color-svg(
'../images/icons/v3/phone/phone-down-light.svg',
$color-gray-75
);
height: 28px;
width: 28px;
border: none;
@include dark-theme {
@include color-svg(
'../images/icons/v3/phone/phone-down-light.svg',
$color-gray-15
);
}
}
&--pip {
@include color-svg(
'../images/icons/v3/maximize/maximize-square-light.svg',
$color-gray-75
);
height: 24px;
width: 24px;
border: none;
@include dark-theme {
@include color-svg(
'../images/icons/v3/maximize/maximize-square-light.svg',
$color-gray-15
);
}
}
}
}
.module-calling-participants-list {
background-color: $color-gray-80;
border-radius: 8px;
color: $color-white;
margin-inline-end: 12px;
margin-top: 54px;
overflow: hidden;
padding: 14px;
width: 280px;
padding-bottom: 0;
&__overlay {
display: flex;
width: var(--window-width);
height: var(--window-height);
justify-content: flex-end;
inset-inline-start: 0;
position: absolute;
top: 0;
z-index: $z-index-popup;
}
&__title {
@include font-body-2-bold;
}
&__contact-icon {
background-color: $color-gray-25;
}
&__list {
height: 100%;
margin-bottom: 0;
margin-inline: -14px;
margin-top: 22px;
overflow: scroll;
padding-bottom: 24px;
padding-inline: 14px;
padding-top: 0;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
border: none;
border-radius: 4px;
background-color: $color-gray-45;
}
&::-webkit-scrollbar-track {
background-color: $color-gray-80;
}
}
&__contact {
@include font-body-1;
align-items: center;
display: flex;
justify-content: space-between;
list-style-type: none;
margin-bottom: 16px;
}
&__name {
display: inline-block;
margin-inline-start: 8px;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
&__header {
display: flex;
justify-content: space-between;
}
&__close {
@include button-reset;
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
height: 20px;
width: 20px;
z-index: $z-index-above-base;
@include keyboard-mode {
&:focus {
outline: 2px solid $color-ultramarine;
}
}
}
&__muted {
&--video {
@include color-svg(
'../images/icons/v3/video/video-slash-compact-light.svg',
$color-white
);
display: inline-block;
margin-inline-start: 18px;
height: 18px;
width: 18px;
}
&--audio {
@include color-svg(
'../images/icons/v3/mic/mic-slash-compact-light.svg',
$color-white
);
display: inline-block;
margin-inline-start: 18px;
height: 18px;
width: 18px;
}
}
&__presenting {
@include color-svg(
'../images/icons/v3/share_screen/share_screen-fill-light.svg',
$color-white
);
display: inline-block;
margin-inline-start: 18px;
height: 18px;
width: 18px;
}
}
.module-call-need-permission-screen {
align-items: center;
background-color: $color-gray-95;
color: $color-gray-05;
display: flex;
flex-direction: column;
height: var(--window-height);
justify-content: center;
position: relative;
width: 100%;
&__text {
margin-block: 2em;
margin-inline: 1em;
max-width: 400px;
@include font-body-1;
text-align: center;
}
&__button {
padding-block: 0.5em;
padding-inline: 1em;
border: 0;
border-radius: 4px;
@include font-body-1-bold;
color: $color-gray-05;
background: $color-gray-65;
}
}
// Module: conversation list
.module-conversation-list {
$normal-row-height: 72px;
@include scrollbar;
padding-inline: 10px;
// list tiles in choose-group-members and compose extend to the edge
.module-left-pane--mode-choose-group-members &,
.module-left-pane--mode-compose & {
padding-inline: 0;
}
&--width-narrow {
padding-inline: 10px;
}
&__item {
&--archive-button {
@include button-reset;
align-items: center;
display: flex;
justify-content: center;
border-radius: 10px;
height: $normal-row-height;
line-height: $normal-row-height;
text-align: center;
width: 100%;
padding-inline: 18px;
display: flex;
@include light-theme {
color: $color-gray-60;
&:hover,
&:focus {
background-color: $color-gray-05;
}
}
@include dark-theme {
color: $color-gray-25;
&:hover,
&:focus {
background-color: $color-gray-75;
}
}
&__icon {
&::before {
display: block;
content: '';
width: 24px;
height: 24px;
@include light-theme {
@include color-svg(
'../images/icons/v3/archive/archive.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/archive/archive.svg',
$color-gray-25
);
}
}
}
&__text {
@include font-body-1-bold;
margin-inline: 8px;
}
&__archived-count {
@include font-body-2-bold;
padding: 6px;
padding-top: 1px;
padding-bottom: 1px;
border-radius: 10px;
white-space: pre;
@include light-theme {
color: $color-gray-60;
background-color: $color-gray-05;
}
@include dark-theme {
color: $color-gray-25;
background-color: $color-gray-75;
}
}
.module-conversation-list--width-narrow & {
&__icon {
display: block;
width: 48px;
height: 48px;
padding: 12px;
}
&__text,
&__archived-count {
display: none;
}
}
}
&--contact-or-conversation {
$unread-indicator-selector: '#{&}__unread-indicator';
$avatar-container-unread-indicator-selector: '#{&}__avatar-container #{$unread-indicator-selector}';
@include button-reset;
align-items: center;
border-radius: 10px;
cursor: inherit;
display: flex;
flex-direction: row;
height: $normal-row-height;
margin-block: 2px;
margin-inline: 0;
padding-block: 8px;
padding-inline: 14px;
user-select: none;
width: 100%;
.module-conversation-list--width-narrow & {
padding-inline: 14px 0;
}
&--is-button {
cursor: pointer;
&:disabled {
cursor: inherit;
}
&:hover:not(:disabled),
&:focus:not(:disabled) {
@include light-theme {
background-color: $color-black-alpha-06;
}
@include dark-theme {
background-color: $color-white-alpha-06;
}
}
}
&--is-checkbox {
cursor: pointer;
&--disabled {
cursor: not-allowed;
}
$disabled-selector: '#{&}--disabled';
&:hover:not(#{$disabled-selector}),
&:focus:not(#{$disabled-selector}) {
@include light-theme {
background-color: $color-gray-05;
}
@include dark-theme {
background-color: $color-gray-75;
}
}
}
&--is-selected {
@include light-theme {
$background-color: $color-gray-15;
background-color: $background-color;
#{$avatar-container-unread-indicator-selector} {
border-color: $background-color;
}
}
@include dark-theme {
$background-color: $color-gray-65;
background-color: $background-color;
#{$avatar-container-unread-indicator-selector} {
border-color: $background-color;
}
}
}
&__avatar-container {
position: relative;
#{$unread-indicator-selector} {
$border-width: 3px;
$size: 21px + $border-width;
@include rounded-corners;
border: $border-width solid transparent;
display: none;
height: $size;
margin: 0;
min-width: $size;
position: absolute;
inset-inline-end: -(5px + $border-width);
top: -(1px + $border-width);
.module-conversation-list--width-narrow & {
display: block;
}
@include light-theme {
border-color: $color-gray-02;
}
@include dark-theme {
border-color: $color-gray-80;
}
}
}
// We want this to just be the unread indicator selector, not a child of the parent.
@at-root #{$unread-indicator-selector} {
$size: 18px;
flex-shrink: 0;
@include font-caption-bold;
border-radius: 10px;
color: $color-white;
font-weight: 500;
height: $size;
line-height: $size;
margin-inline-start: 10px;
margin-top: 1px;
min-width: $size;
padding-inline: 4px;
text-align: center;
word-break: normal;
display: flex;
justify-content: center;
align-items: center;
.module-conversation-list--width-narrow & {
display: none;
}
@include light-theme {
background-color: $color-ultramarine;
}
@include dark-theme {
background-color: $color-ultramarine-dawn;
}
}
&__content {
flex-grow: 1;
margin-inline-start: 12px;
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
.module-conversation-list--width-narrow & {
margin-inline-start: 0;
}
&--disabled {
opacity: 0.5;
}
&__header {
display: flex;
flex-direction: row;
align-items: center;
.module-conversation-list--width-narrow & {
display: none;
}
&__name {
align-items: center;
display: flex;
flex-grow: 1;
flex-shrink: 1;
@include font-body-1-bold;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
}
&__contact-name {
overflow: hidden;
text-overflow: ellipsis;
.ContactModal__official-badge {
position: relative;
top: 1px;
}
}
&__mute-icon {
$size: 14px;
height: $size;
margin-inline-start: 8px;
min-width: $size;
width: $size;
@include light-theme {
@include color-svg(
'../images/icons/v3/bell/bell-slash-bold.svg',
$color-gray-45
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/bell/bell-slash-bold.svg',
$color-gray-25
);
}
}
}
&__date {
@include font-caption;
display: inline-block;
flex-shrink: 0;
margin-inline-start: 6px;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
}
&__message {
display: flex;
flex-direction: row;
justify-content: flex-end;
.module-conversation-list--width-narrow & {
align-items: center;
justify-content: flex-start;
}
&__text {
.module-conversation-list__item--contact-or-conversation--is-checkbox
& {
/* restrict the growth so it doesn't encroach on the checkbox */
-webkit-line-clamp: 1;
}
}
&__text {
flex-grow: 1;
flex-shrink: 1;
@include font-body-2;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
text-align: start;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
.module-conversation-list--width-narrow & {
display: none;
}
&--always-full-size {
height: 36px; // two lines
}
&__message-request {
@include font-body-2-bold;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
&__draft-prefix,
&__deleted-for-everyone {
font-style: italic;
margin-inline-end: 3px;
}
&__status-icon {
flex-shrink: 0;
margin-top: 4px;
width: 12px;
height: 12px;
display: inline-block;
margin-inline-start: 6px;
.module-conversation-list--width-narrow & {
display: none;
}
@mixin normal-status-icon($icon) {
@include light-theme {
@include color-svg($icon, $color-gray-45);
}
@include dark-theme {
@include color-svg($icon, $color-gray-25);
}
}
&--sending {
@include only-when-page-is-visible {
animation: rotate 4s linear infinite;
}
@include light-theme {
@include color-svg(
'../images/icons/v3/message_status/messagestatus-sending.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/message_status/messagestatus-sending.svg',
$color-gray-45
);
}
}
&--sent {
@include normal-status-icon(
'../images/icons/v3/message_status/messagestatus-sent.svg'
);
}
&--delivered {
@include normal-status-icon(
'../images/icons/v3/message_status/messagestatus-delivered.svg'
);
width: 18px;
}
&--read,
&--viewed {
@include normal-status-icon(
'../images/icons/v3/message_status/messagestatus-read.svg'
);
width: 18px;
}
&--error,
&--partial-sent {
@include light-theme {
@include color-svg(
'../images/icons/v3/error/error-circle.svg',
$color-accent-red
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/error/error-circle.svg',
$color-accent-red
);
}
}
&--paused {
@include light-theme {
@include color-svg(
'../images/icons/v3/error/error-circle.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/error/error-circle.svg',
$color-gray-45
);
}
}
}
&__message-search-result-contents {
display: -webkit-box;
white-space: initial;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
&__start-new-conversation {
@include font-body-1-italic;
}
}
}
}
&__checkbox {
-webkit-appearance: none;
background: $color-white;
border-radius: 100%;
height: 20px;
margin-inline: 16px;
width: 20px;
min-width: 20px;
pointer-events: none;
@include light-theme {
border: 1px solid $color-gray-15;
}
@include dark-theme {
border: 1px solid $color-gray-80;
}
&:focus {
outline: none;
}
@include keyboard-mode {
&:focus {
border-width: 2px;
border-color: $color-ultramarine;
&:checked {
box-shadow: inset 0 0 0px 1px $color-white;
}
}
}
@include dark-keyboard-mode {
&:focus {
border-width: 2px;
border-color: $color-ultramarine-light;
&:checked {
box-shadow: inset 0 0 0px 1px $color-black;
}
}
}
&:disabled:not(:checked) {
opacity: 0.5;
}
&:checked {
$icon: '../images/icons/v3/check/check.svg';
background: $color-ultramarine;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: '';
display: block;
@include color-svg($icon, $color-white);
width: 13px;
height: 13px;
}
@include light-theme {
&:disabled {
background: $color-gray-15;
}
}
@include dark-theme {
&:disabled {
background: $color-gray-45;
}
}
}
&--container {
margin-inline-start: 8px;
/* prevent sibling content from pushing this smaller (min-width: the "!important" of width) */
min-width: 20px;
}
}
}
&--header {
@include font-body-1-bold;
align-items: flex-end;
display: flex;
height: 100%;
overflow-x: hidden;
padding-bottom: 8px;
padding-inline-start: 16px;
text-overflow: ellipsis;
user-select: none;
white-space: nowrap;
@include dark-theme {
color: $color-gray-05;
}
.module-conversation-list--width-narrow & {
@include rounded-corners;
display: block;
height: 2px;
margin-block: 19px;
margin-inline: 14px 0;
padding-bottom: 0;
width: 48px;
// Hide the text, but keep it for screen readers.
color: transparent;
overflow: hidden;
text-indent: -99999px;
@include light-theme {
background: $color-black-alpha-12;
}
@include dark-theme {
background: $color-white-alpha-12;
}
}
}
&--spinner {
width: 100%;
padding: 10px;
text-align: center;
}
}
}
// Module: Left Pane
.module-left-pane {
border-inline-end-style: solid;
border-inline-end-width: 1px;
display: inline-flex;
flex-direction: column;
height: 100%;
position: relative;
@include light-theme {
$background-color: $color-gray-02;
border-color: $color-gray-15;
background-color: $background-color;
::-webkit-scrollbar-thumb {
border: 2px solid $color-gray-02;
}
.module-conversation-list__item--contact-or-conversation:hover
.module-conversation-list__item--contact-or-conversation__unread-indicator {
border-color: mix($color-black, $background-color, 6%);
}
}
@include dark-theme {
$background-color: $color-gray-80;
border-color: $color-gray-65;
background-color: $background-color;
::-webkit-scrollbar-thumb {
border: 2px solid $color-gray-80;
}
.module-conversation-list__item--contact-or-conversation:hover
.module-conversation-list__item--contact-or-conversation__unread-indicator {
border-color: mix($color-white, $background-color, 6%);
}
}
}
.module-left-pane__dialogs {
&:first-child {
margin-top: 8px;
}
}
.module-left-pane__empty {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
padding-block: 0;
padding-inline: 32px;
text-align: center;
.module-left-pane--width-narrow & {
display: none;
}
&--composer_icon {
align-items: center;
background-color: $color-gray-05;
border-radius: 100%;
display: inline-flex;
height: 28px;
justify-content: center;
margin-bottom: -2px;
margin-inline-start: 4px;
vertical-align: bottom;
width: 28px;
&--icon {
$icon: '../images/icons/v3/compose/compose.svg';
@include color-svg($icon, $color-gray-90);
display: inline-block;
height: 16px;
width: 16px;
}
}
}
.module-left-pane__header {
flex-grow: 0;
flex-shrink: 0;
user-select: none;
&__contents {
height: calc(#{$header-height} + var(--title-bar-drag-area-height));
width: 100%;
display: inline-flex;
flex-direction: row;
align-items: center;
padding-top: var(--title-bar-drag-area-height);
&__back-button {
@include button-reset;
margin-inline-start: 16px;
width: 20px;
height: 20px;
&:disabled {
cursor: not-allowed;
}
@include light-theme {
&:dir(ltr) {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-60
);
}
&:dir(rtl) {
@include color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$color-gray-60
);
}
}
@include keyboard-mode {
&:dir(ltr) {
&:focus {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-ultramarine
);
}
}
&:dir(rtl) {
&:focus {
@include color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$color-ultramarine
);
}
}
}
@include dark-theme {
&:dir(ltr) {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-25
);
}
&:dir(rtl) {
@include color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$color-gray-25
);
}
}
@include dark-keyboard-mode {
&:dir(ltr) {
&:hover {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-ultramarine-light
);
}
}
&:dir(rtl) {
&:hover {
@include color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$color-ultramarine-light
);
}
}
}
}
&__text {
@include font-body-1-bold;
flex-grow: 1;
padding-inline-end: 36px;
text-align: center;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
}
}
}
&__form {
display: flex;
flex-direction: column;
&__expire-timer {
display: flex;
flex-direction: row;
align-items: center;
margin-block: 0 16px;
margin-inline: 16px;
&__label {
margin-inline-end: 12px;
}
.module-disappearing-timer-select {
width: 144px;
}
}
}
}
.module-left-pane__archive-helper-text {
@include font-body-2;
flex-grow: 0;
flex-shrink: 0;
user-select: none;
padding: 1em;
@include light-theme {
color: $color-gray-60;
background-color: $color-gray-05;
}
@include dark-theme {
color: $color-gray-25;
background-color: $color-gray-75;
}
}
.module-left-pane__no-search-results,
.module-left-pane__compose-no-contacts {
flex-grow: 1;
margin-top: 27px;
padding-inline: 1em;
width: 100%;
text-align: center;
outline: none;
}
.module-left-pane__no-search-results__sms-only {
margin-top: 12px;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
.module-left-pane__compose-search-form {
&__input {
flex-grow: 1;
}
}
.module-left-pane__list--measure {
flex-grow: 1;
flex-shrink: 1;
outline: none;
}
.module-left-pane__list--wrapper {
position: relative;
}
.module-left-pane__list {
position: absolute;
outline: none;
}
.module-left-pane__footer {
bottom: 0;
display: flex;
flex-direction: row;
justify-content: flex-end;
inset-inline-start: 0;
padding: 12px;
position: absolute;
width: 100%;
@include light-theme {
background: linear-gradient(transparent, $color-gray-02);
}
@include dark-theme {
background: linear-gradient(transparent, $color-gray-80);
}
}
.module-left-pane__resize-grab-area {
position: absolute;
width: 8px;
height: 100%;
inset-inline-end: -8px;
top: 0;
z-index: $z-index-above-base;
cursor: col-resize;
}
// Module: Timeline
.module-timeline {
display: flex;
height: 100%;
overflow: hidden;
}
.module-timeline--disabled {
user-select: none;
}
.module-timeline__messages__container {
flex: 1 1;
overflow-x: hidden;
overflow-y: overlay;
display: flex;
flex-direction: column;
}
.module-timeline__messages {
display: flex;
flex-direction: column;
flex: 1 1;
padding-bottom: 6px;
position: relative;
justify-content: flex-end;
// This is a modified version of ["Pin Scrolling to Bottom"][0].
// [0]: https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/
&--have-newest {
& > * {
overflow-anchor: none;
}
&::after {
content: '';
height: 1px;
display: block;
overflow-anchor: auto;
}
}
&--have-oldest {
justify-content: flex-start;
}
&__at-bottom-detector {
position: absolute;
bottom: 0;
}
}
.ReactVirtualized__List {
outline: none;
}
// Module: CompositionPopper
%module-composition-popper {
width: 332px;
border-radius: 4px;
margin-bottom: 6px;
z-index: $z-index-context-menu;
user-select: none;
overflow: hidden;
@include popper-shadow();
@include light-theme {
background: $color-gray-02;
::-webkit-scrollbar-thumb {
border: 2px solid $color-gray-02;
}
}
@include dark-theme {
background: $color-gray-75;
::-webkit-scrollbar-thumb {
border: 2px solid $color-gray-75;
}
}
}
// Module: StickerPicker
.module-sticker-picker {
@extend %module-composition-popper;
height: 400px;
display: grid;
grid-template-rows: 44px 1fr;
grid-template-columns: 1fr;
z-index: $z-index-context-menu;
}
.module-sticker-picker__header {
display: flex;
flex-direction: row;
padding-block: 0;
padding-inline: 8px;
justify-content: flex-start;
align-items: center;
}
.module-sticker-picker__header__packs {
width: 288px;
overflow: hidden;
position: relative;
&__slider {
display: flex;
flex-direction: row;
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translateX(0);
transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
}
.module-sticker-picker__recents--title {
color: $color-gray-05;
}
.module-sticker-picker__header__button {
width: 28px;
height: 28px;
border: 0;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
background: none;
margin-inline-end: 4px;
outline: none;
&:active,
&:focus {
@include keyboard-mode {
background: $color-gray-05;
}
@include dark-keyboard-mode {
background: $color-gray-60;
}
}
&--selected {
@include light-theme {
background: $color-gray-15;
}
@include dark-theme {
background: $color-gray-45;
}
}
&--recents,
&--add-pack {
&::after {
content: '';
display: block;
min-width: 20px;
min-height: 20px;
}
}
&--recents {
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/recent/recent.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/recent/recent.svg',
$color-gray-25
);
}
}
}
&--add-pack {
&::after {
@include light-theme {
@include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-60);
}
@include dark-theme {
@include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-25);
}
}
}
&--prev-page,
&--next-page {
top: 0;
margin: 0;
border-radius: 0;
&::after {
content: '';
display: block;
min-width: 16px;
min-height: 16px;
}
@include light-theme {
background: $color-gray-02;
}
@include dark-theme {
background: $color-gray-75;
}
}
&--prev-page {
position: absolute;
inset-inline-start: 0;
&:dir(ltr) {
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-25
);
}
}
}
&:dir(rtl) {
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$color-gray-25
);
}
}
}
}
&--next-page {
position: absolute;
inset-inline-end: 0;
&:dir(ltr) {
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$color-gray-25
);
}
}
}
&:dir(rtl) {
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-25
);
}
}
}
}
&--error {
position: relative;
&::before {
display: block;
content: '';
width: 12px;
height: 12px;
position: absolute;
inset-inline-start: 14px;
top: 2px;
@include color-svg(
'../images/icons/v3/error/error-circle.svg',
$color-accent-red
);
}
}
&--hint {
position: relative;
&::before {
display: block;
content: '';
position: absolute;
top: 0;
inset-inline-end: 0;
width: 14px;
height: 14px;
border-radius: 7px;
background: $color-ultramarine;
}
}
}
.module-sticker-picker__header__button__image {
width: 20px;
height: 20px;
object-fit: contain;
}
.module-sticker-picker__header__button__image--placeholder {
min-width: 20px;
min-height: 20px;
max-width: 20px;
max-height: 20px;
background-color: $color-gray-05;
}
.module-sticker-picker__body {
position: relative;
&__grid {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 68px;
}
&__content {
width: 332px;
height: 356px;
padding-block: 8px 16px;
padding-inline: 13px;
overflow-y: auto;
&--under-text {
height: 320px;
}
&--under-long-text {
height: 304px;
}
}
&__cell {
border: none;
background: none;
padding: 0;
width: 68px;
height: 68px;
display: flex;
justify-content: center;
align-items: center;
@include mouse-mode {
outline: none;
}
&__image,
&__placeholder {
width: 100%;
height: 100%;
object-fit: contain;
}
&__placeholder {
border-radius: 4px;
@include light-theme() {
background-color: $color-gray-05;
}
@include dark-theme() {
background-color: $color-gray-60;
}
}
}
&--empty {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
&__text {
@include font-body-1-bold;
text-align: center;
padding-block: 8px 12px;
padding-inline: 0 16px;
@include light-theme() {
color: $color-gray-60;
}
@include dark-theme() {
color: $color-gray-25;
}
&:only-child {
padding-block: 0 28px;
padding-inline: 0; // header height to offset the text so it is centered in the whole picker
}
&--error {
@include light-theme() {
color: $color-accent-red;
}
@include dark-theme() {
color: $color-accent-red;
}
}
&--hint {
@include light-theme() {
color: $color-ultramarine;
}
@include dark-theme() {
color: $color-ultramarine-light;
}
}
&--pin {
padding-block: 8px 12px;
padding-inline: 0px 16px;
position: absolute;
top: 0;
}
}
}
.module-sticker-picker__time--digital {
@include time-fonts;
color: $color-white;
font-size: 28px;
line-height: 0px;
}
.module-sticker-picker__time--analog {
background: url(../images/analog-time/Arabic.svg) center no-repeat;
background-size: contain;
height: 64px;
position: relative;
width: 64px;
}
.module-sticker-picker__time--analog__hour {
background: url(../images/analog-time/Arabic-hour.svg) center no-repeat;
height: 14px;
inset-inline-start: 50%;
margin-inline-start: -1px;
margin-top: -14px;
position: absolute;
top: 50%;
transform-origin: 50% 100%;
width: 2px;
}
.module-sticker-picker__time--analog__minute {
background: url(../images/analog-time/Arabic-minute.svg) center no-repeat;
height: 22px;
inset-inline-start: 50%;
margin-inline-start: -1px;
margin-top: -22px;
position: absolute;
top: 50%;
transform-origin: 50% 100%;
width: 2px;
}
// Module: Sticker button (launches the sticker picker)
.sticker-button-wrapper {
height: 36px;
display: flex;
justify-content: center;
align-items: center;
margin-inline-start: 6px;
}
.module-sticker-button__button {
border: 0;
border-radius: 4px;
background: none;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
@include keyboard-mode {
&:focus {
outline: 2px solid $color-ultramarine;
}
}
outline: none;
&::after {
display: block;
content: '';
width: 20px;
height: 20px;
flex-shrink: 0;
@include light-theme {
@include color-svg(
'../images/icons/v3/sticker/sticker.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/sticker/sticker.svg',
$color-gray-15
);
}
}
&--active {
@include light-theme() {
background: $color-gray-05;
}
@include dark-theme() {
background: $color-gray-75;
}
opacity: 1;
}
}
.module-sticker-button__tooltip {
@include button-reset;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
padding-block: 7px;
padding-inline: 12px;
border-radius: 8px;
margin-bottom: 6px;
z-index: $z-index-tooltip;
@include light-theme {
background: $color-white;
}
@include dark-theme {
background: $color-gray-75;
}
@include popper-shadow();
&__triangle {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 8px 0 8px;
@include light-theme {
border-color: $color-white transparent transparent transparent;
}
@include dark-theme {
border-color: $color-gray-75 transparent transparent transparent;
}
&--top-end {
top: 34px;
}
&--introduction {
top: 72px;
}
}
&__image {
width: 20px;
height: 20px;
object-fit: contain;
}
&__image-placeholder {
width: 20px;
height: 20px;
background-color: $color-gray-05;
}
&__text {
margin-inline-start: 4px;
cursor: default;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
}
&__title {
font-weight: bold;
}
}
&--introduction {
width: 420px;
height: 72px;
display: flex;
flex-direction: row;
&__image {
width: 52px;
height: 52px;
}
&__meta {
flex-grow: 1;
padding-block: 0;
padding-inline: 12px;
display: flex;
flex-direction: column;
justify-content: center;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
}
&__title {
margin: 0;
@include font-body-1-bold;
height: 16px;
}
&__subtitle {
margin-top: 3px;
height: 16px;
}
}
&__close {
flex-shrink: 1;
height: 100%;
&__button {
width: 16px;
height: 16px;
border: none;
@include light-theme {
@include color-svg(
'../images/icons/v3/x/x-compact.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/x/x-compact.svg',
$color-gray-05
);
}
}
}
}
}
// Module: Emoji Picker
%module-emoji-picker--ribbon {
height: 44px;
display: flex;
flex-direction: row;
align-items: center;
}
.module-emoji-picker {
@extend %module-composition-popper;
height: 428px;
display: grid;
grid-template-rows: 44px 1fr;
grid-template-columns: 1fr;
&__header {
@extend %module-emoji-picker--ribbon;
justify-content: space-between;
margin-block: 0;
margin-inline: 12px;
&__search-field {
flex-grow: 1;
margin-inline-start: 8px;
position: relative;
@include font-body-2;
&::after {
display: block;
content: '';
width: 16px;
height: 16px;
position: absolute;
inset-inline-start: 8px;
top: 6px;
@include light-theme {
@include color-svg(
'../images/icons/v3/search/search-compact.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/search/search-compact.svg',
$color-gray-25
);
}
}
&__input {
width: 100%;
height: 28px;
@include font-body-1;
line-height: 28px;
border-radius: 17px;
border-width: 1px;
border-style: solid;
padding-block: 0;
padding-inline: 30px 8px;
&:focus {
outline: none;
}
@include light-theme {
background: $color-white;
color: $color-gray-90;
border-color: $color-gray-60;
&:focus {
border-color: $color-ultramarine;
}
&:placeholder {
color: $color-gray-45;
}
}
@include dark-theme {
border-color: $color-gray-25;
background: $color-gray-75;
color: $color-gray-05;
&:focus {
border-color: $color-ultramarine;
}
&:placeholder {
color: $color-gray-45;
}
}
}
}
}
&__footer {
@extend %module-emoji-picker--ribbon;
justify-content: center;
&__skin-tones {
align-items: center;
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: center;
}
&__settings-spacer {
width: 28px;
margin-inline-end: 12px;
}
}
&__button {
width: 28px;
height: 28px;
border: none;
border-radius: 8px;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: none;
@include mouse-mode {
outline: none;
}
&--footer {
&:not(:last-of-type) {
margin-inline-end: 4px;
}
}
&--settings {
margin-inline-start: 12px;
border-radius: 100%;
@include light-theme {
background: $color-white;
box-shadow: 0px 0px 4px $color-black-alpha-20;
}
@include dark-theme {
background: $color-gray-65;
}
&::before {
display: block;
width: 20px;
height: 20px;
content: '';
@include light-theme {
@include color-svg(
'../images/icons/v3/settings/settings.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/settings/settings.svg',
$color-gray-25
);
}
}
}
&--selected {
@include light-theme {
background: $color-gray-05;
}
@include dark-theme {
background: $color-gray-60;
}
}
&--icon {
display: flex;
justify-content: center;
align-items: center;
&::after {
display: block;
content: '';
width: 20px;
height: 20px;
}
&--search {
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/search/search.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/search/search.svg',
$color-gray-25
);
}
}
}
&--close {
&::after {
@include light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-60);
}
@include dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-25);
}
}
}
&--recents {
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/recent/recent.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/recent/recent.svg',
$color-gray-25
);
}
}
}
&--emoji {
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/emoji/emoji.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/emoji/emoji.svg',
$color-gray-25
);
}
}
}
$categories: animal food activity travel object symbol flag;
@each $cat in $categories {
&--#{$cat} {
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/emoji/emoji-#{$cat}.svg',
$color-gray-60
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/emoji/emoji-#{$cat}.svg',
$color-gray-25
);
}
}
}
}
}
}
&__body {
padding-block: 8px 0;
padding-inline: 12px 16px;
outline: none;
&__emoji-cell {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
&--empty {
display: flex;
padding: 0;
justify-content: center;
align-items: center;
@include font-body-1;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
}
}
// Module: EmojiButton
.emoji-button-wrapper {
height: 36px;
display: flex;
justify-content: center;
align-items: center;
margin-block: 0;
margin-inline: 6px;
padding-top: 4px;
}
.module-emoji-button__button {
border: 0;
border-radius: 4px;
background: none;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
@include keyboard-mode {
&:focus {
outline: 2px solid $color-ultramarine;
}
}
outline: none;
&::after {
display: block;
content: '';
width: 20px;
height: 20px;
flex-shrink: 0;
@include light-theme {
@include color-svg('../images/icons/v3/emoji/emoji.svg', $color-gray-75);
}
@include dark-theme {
@include color-svg('../images/icons/v3/emoji/emoji.svg', $color-gray-15);
}
}
&--profile-editor::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/emoji/emoji-plus.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/emoji/emoji-plus.svg',
$color-gray-15
);
}
}
&--has-emoji {
opacity: 1;
&::after {
display: none;
}
}
&--active {
@include light-theme() {
background: $color-gray-05;
}
@include dark-theme() {
background: $color-gray-75;
}
opacity: 1;
}
}
// Module: Emoji
@mixin emoji-size($size) {
&--#{$size} {
width: $size;
height: $size;
&--inline {
display: inline-block;
vertical-align: bottom;
background-size: $size $size;
}
}
&__image--#{$size} {
width: $size;
height: $size;
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
transform: translate3d(0, 0, 0);
vertical-align: baseline;
}
}
.module-emoji {
display: flex;
justify-content: center;
align-items: center;
color: transparent;
font-family: auto;
@include light-theme() {
caret-color: $color-gray-90;
}
@include dark-theme() {
caret-color: $color-gray-05;
}
@include emoji-size(16px);
@include emoji-size(18px);
@include emoji-size(20px);
@include emoji-size(24px);
@include emoji-size(28px);
@include emoji-size(32px);
@include emoji-size(48px);
@include emoji-size(64px);
@include emoji-size(66px);
}
// Module: Last Seen Indicator
.module-last-seen-indicator {
padding-top: 25px;
padding-bottom: 35px;
user-select: none;
}
.module-last-seen-indicator__bar {
background-color: $color-gray-45;
width: 100%;
height: 1px;
}
.module-last-seen-indicator__text {
margin-top: 3px;
@include font-body-2-bold;
text-align: center;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
}
}
// Module: Avatar Popup
.module-avatar-popup {
min-width: 240px;
max-width: 320px;
border-radius: 4px;
padding-bottom: 4px;
@include popper-shadow;
@include light-theme {
color: $color-gray-90;
background-color: $color-white;
}
@include dark-theme {
color: $color-gray-05;
background-color: $color-gray-75;
}
}
.module-avatar-popup__profile {
@include button-reset();
align-items: center;
display: flex;
flex-direction: row;
width: 100%;
@include light-theme {
&:hover {
background-color: $color-gray-05;
}
}
@include dark-theme {
&:hover {
background-color: $color-gray-60;
}
}
@include keyboard-mode {
&:hover {
background-color: inherit;
}
&:focus {
background-color: $color-gray-05;
}
}
@include dark-keyboard-mode {
&:hover {
background-color: inherit;
}
&:focus {
background-color: $color-gray-60;
}
}
}
.module-avatar-popup__profile {
padding: 12px;
}
.module-avatar-popup__profile__text {
margin-inline-start: 10px;
overflow: hidden;
}
.module-avatar-popup__profile__name {
@include font-body-1-bold;
}
.module-avatar-popup__profile__number {
@include font-subtitle;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
.module-avatar-popup__profile__name,
.module-avatar-popup__profile__number {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.module-avatar-popup__divider {
border: none;
padding: 0;
margin: 0;
height: 1px;
width: 100%;
margin-bottom: 6px;
@include light-theme {
background-color: $color-gray-15;
}
@include dark-theme {
background-color: $color-gray-60;
}
}
.module-avatar-popup__item {
@include font-body-2;
@include button-reset;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 32px;
padding: 6px;
@include light-theme {
&:hover {
background-color: $color-gray-05;
}
}
@include keyboard-mode {
&:hover {
background-color: inherit;
}
&:focus {
background-color: $color-gray-05;
}
}
@include dark-theme {
&:hover {
background-color: $color-gray-60;
}
}
@include dark-keyboard-mode {
&:hover {
background-color: inherit;
}
&:focus {
background-color: $color-gray-60;
}
}
}
.module-avatar-popup__item__icon {
margin-inline-start: 6px;
height: 16px;
width: 16px;
&--update {
@include light-theme {
@include color-svg(
'../images/icons/v3/refresh/refresh.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/refresh/refresh.svg',
$color-gray-15
);
}
}
}
.module-avatar-popup__item__icon-settings {
@include light-theme {
@include color-svg(
'../images/icons/v3/settings/settings-compact.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/settings/settings-compact.svg',
$color-gray-15
);
}
}
.module-avatar-popup__item__icon-archive {
@include light-theme {
@include color-svg(
'../images/icons/v3/archive/archive-compact.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/archive/archive-compact.svg',
$color-gray-15
);
}
}
.module-avatar-popup__item__text {
flex-grow: 1;
margin-inline-start: 8px;
}
.module-avatar-popup__item--badge {
background: $color-ultramarine;
border-radius: 100%;
height: 8px;
margin-inline-end: 10px;
width: 8px;
}
// Module: Shortcut Guide Modal
.module-shortcut-guide-modal {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
padding: 20px;
display: flex;
flex-direction: row;
align-items: center;
background-color: $color-black-alpha-40;
z-index: $z-index-above-context-menu;
}
.module-shortcut-guide-container {
flex-grow: 1;
overflow: hidden;
}
// Module: Shortcut Guide
.module-shortcut-guide {
border-radius: 4px;
padding: 16px;
max-height: calc(var(--window-height) - 40px);
max-width: 1150px;
margin-inline: auto;
display: flex;
flex-direction: column;
@include popper-shadow;
@include light-theme {
color: $color-gray-90;
background-color: $color-white;
}
@include dark-theme {
color: $color-gray-05;
background-color: $color-gray-75;
::-webkit-scrollbar-thumb {
border: 2px solid $color-gray-75;
}
}
}
.module-shortcut-guide__header {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}
.module-shortcut-guide__header-text {
@include font-title-2;
flex-grow: 1;
}
.module-shortcut-guide__header-close {
@include button-reset;
height: 24px;
width: 24px;
@include light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-60);
}
@include dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-05);
}
&:focus {
@include keyboard-mode {
@include color-svg('../images/icons/v3/x/x.svg', $color-ultramarine);
}
@include dark-keyboard-mode {
@include color-svg(
'../images/icons/v3/x/x.svg',
$color-ultramarine-light
);
}
}
}
.module-shortcut-guide__section-header {
@include font-body-1-bold;
margin-bottom: 8px;
}
.module-shortcut-guide__scroll-container {
outline: none;
overflow-y: scroll;
}
.module-shortcut-guide__section {
&:not(:last-child) {
margin-bottom: 25px;
}
}
@media (min-width: 900px) {
.module-shortcut-guide__section-list {
column-count: 2;
column-gap: 20px;
column-span: none;
column-fill: auto;
}
}
.module-shortcut-guide__shortcut {
display: flex;
flex-direction: row;
align-items: center;
break-inside: avoid;
padding-inline-start: 4px;
min-height: 40px;
outline: none;
&:focus {
@include keyboard-mode {
background-color: $color-gray-05;
}
@include dark-keyboard-mode {
background-color: $color-gray-90;
}
}
@include light-theme {
border-bottom: 1px solid $color-gray-05;
}
@include dark-theme {
border-bottom: 1px solid $color-gray-90;
}
}
.module-shortcut-guide__shortcut__description {
flex-grow: 1;
margin-top: 4px;
margin-bottom: 4px;
}
.module-shortcut-guide__shortcut__key-container {
margin-bottom: 4px;
}
.module-shortcut-guide__shortcut__key-inner-container {
text-align: end;
margin-top: 4px;
margin-inline-end: 4px;
white-space: nowrap;
}
.module-shortcut-guide__shortcut__key {
display: inline-block;
border-radius: 2px;
padding: 3px;
padding-inline: 8px;
margin-inline-start: 4px;
height: 30px;
text-align: center;
@include light-theme {
border: 1px solid $color-gray-15;
}
@include dark-theme {
border: 1px solid $color-gray-90;
}
}
.module-shortcut-guide__shortcut__key--square {
width: 30px;
padding-inline: 0px;
}
/* Calling: Device Selection */
.module-calling-device-selection {
position: relative;
}
.module-calling-device-selection__close-button {
@include button-reset;
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
height: 24px;
position: absolute;
inset-inline-end: 5px;
top: 0;
width: 24px;
z-index: $z-index-above-base;
@include keyboard-mode {
&:focus,
&:active,
&:hover {
background-color: $color-ultramarine;
}
}
}
.module-calling-device-selection__title {
@include font-title-2;
margin-top: 12px;
margin-bottom: 20px;
}
.module-calling-device-selection__label {
@include font-body-1-bold;
display: block;
margin-bottom: 16px;
}
.module-calling-device-selection__select {
margin-bottom: 20px;
position: relative;
}
// Module: GroupV1 Disabled Actions
.module-group-v1-disabled-actions {
padding-block: 8px 12px;
padding-inline: 16px;
max-width: 650px;
margin-inline: auto;
@include light-theme {
background: $color-white;
}
@include dark-theme {
background: $color-gray-95;
}
}
.module-group-v1-disabled-actions__message {
@include font-body-2;
text-align: center;
margin-bottom: 12px;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
.module-group-v1-disabled-actions__message__learn-more {
text-decoration: none;
}
.module-group-v1-disabled-actions__buttons {
display: flex;
flex-direction: row;
justify-content: center;
}
.module-group-v1-disabled-actions__buttons__button {
@include button-reset;
@include font-body-1-bold;
border-radius: 4px;
padding: 8px;
padding-inline: 30px;
@include button-primary;
}
// Module: GroupV2 Pending Approval Actions
.module-group-v2-pending-approval-actions {
padding-block: 8px 12px;
padding-inline: 16px;
max-width: 650px;
margin-inline: auto;
@include light-theme {
background: $color-white;
}
@include dark-theme {
background: $color-gray-95;
}
}
.module-group-v2-pending-approval-actions__message {
@include font-body-2;
text-align: center;
margin-bottom: 12px;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
}
.module-group-v2-pending-approval-actions__buttons {
display: flex;
flex-direction: row;
justify-content: center;
}
.module-group-v2-pending-approval-actions__buttons__button {
@include button-reset;
@include font-body-1-bold;
border-radius: 4px;
padding: 8px;
padding-inline: 30px;
@include button-secondary;
@include light-theme {
color: $color-gray-60;
background-color: $color-gray-05;
}
}
// Module: Modal Host
.module-modal-host__overlay {
background: $color-black-alpha-40;
width: var(--window-width);
height: var(--window-height);
inset-inline-start: var(--window-border);
top: var(--titlebar-height);
position: fixed;
z-index: $z-index-modal-host;
}
.module-modal-host__overlay-container {
display: flex;
flex-direction: row;
width: var(--window-width);
height: var(--window-height);
inset-inline-start: var(--window-border);
top: var(--titlebar-height);
justify-content: center;
align-items: center;
overflow: hidden;
padding: 20px;
position: fixed;
z-index: $z-index-modal-host;
}
.module-modal-host__width-container {
max-width: 360px;
width: 95%;
}
.module-modal-host--on-top-of-everything {
$loading-screen-modal-overlay: $z-index-on-top-of-everything + 1;
.module-modal-host__overlay,
.module-modal-host__overlay-container {
z-index: $loading-screen-modal-overlay;
}
}
// Module: GroupV2 Join Dialog
.module-group-v2-join-dialog {
@include font-body-1;
border-radius: 8px;
width: 360px;
margin-inline: auto;
padding: 20px;
position: relative;
@include light-theme {
background-color: $color-white;
}
@include dark-theme {
background-color: $color-gray-95;
}
}
.module-group-v2-join-dialog__close-button {
@include button-reset;
position: absolute;
inset-inline-end: 12px;
top: 12px;
height: 24px;
width: 24px;
@include light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-75);
}
@include dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
}
&:focus {
@include keyboard-mode {
background-color: $color-ultramarine;
}
@include dark-keyboard-mode {
background-color: $color-ultramarine-light;
}
}
}
.module-group-v2-join-dialog__title {
@include font-title-2;
text-align: center;
margin-top: 12px;
margin-bottom: 2px;
}
.module-group-v2-join-dialog__avatar {
text-align: center;
}
.module-group-v2-join-dialog__metadata {
color: $color-gray-60;
text-align: center;
}
.module-group-v2-join-dialog__prompt {
margin-top: 40px;
&--approval {
@include font-subtitle;
color: $color-gray-45;
margin-top: 40px;
}
}
.module-group-v2-join-dialog__buttons {
margin-top: 16px;
text-align: center;
display: flex;
}
.module-group-v2-join-dialog__button {
// Start flex basis at zero so text width doesn't affect layout. We want the buttons
// evenly distributed.
flex: 1 1 0px;
&:not(:first-of-type) {
margin-inline-start: 16px;
}
}
.module-group-v2-join-dialog__description {
color: $color-gray-60;
margin-top: 12px;
}
// Module: Progress Dialog
.module-progress-dialog {
width: 138px;
padding: 18px;
border-radius: 8px;
@include popper-shadow();
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@include light-theme() {
background: $color-white;
color: $color-gray-90;
}
@include dark-theme() {
background: $color-gray-80;
color: $color-gray-05;
}
}
.module-progress-dialog__spinner {
padding: 10px;
}
.module-progress-dialog__text {
@include font-body-2;
}
.module-progress-dialog__overlay {
background: $color-black-alpha-40;
position: fixed;
inset-inline-start: var(--window-border);
top: var(--titlebar-height);
width: var(--window-width);
height: var(--window-height);
display: flex;
justify-content: center;
align-items: center;
z-index: $z-index-popup-overlay;
}
// Module: Error Modal
.module-error-modal__button-container {
margin-top: 10px;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.module-button {
&__small {
@include font-body-2;
@include button-reset;
@include keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 2px $color-ultramarine;
}
}
@include light-theme {
color: $color-gray-90;
border-color: $color-gray-15;
}
@include dark-theme {
color: $color-gray-05;
border-color: $color-gray-65;
}
border-radius: 4px;
border-style: solid;
border-width: 1px;
outline: none;
padding-block: 7px;
padding-inline: 12px;
}
}
.module-background-color {
&__default {
background-color: $color-black-alpha-40;
}
@include avatar-colors();
}
.module-tooltip {
--tooltip-text-color: #{$color-gray-75};
--tooltip-background-color: #{$color-gray-02};
@mixin tooltip-dark-theme-variables {
--tooltip-text-color: #{$color-gray-05};
--tooltip-background-color: #{$color-gray-65};
}
&--dark-theme {
@include tooltip-dark-theme-variables;
}
@include dark-theme {
@include tooltip-dark-theme-variables;
}
background-color: var(--tooltip-background-color);
border-radius: 8px;
color: var(--tooltip-text-color);
display: inline-block;
padding-block: 8px;
padding-inline: 21px;
position: fixed;
text-align: center;
z-index: $z-index-tooltip;
.module-tooltip-arrow {
position: absolute;
}
.module-tooltip-arrow::after {
border: solid 6px transparent;
content: '';
display: block;
height: 0;
margin-inline-start: -6px;
margin-top: -6px;
position: absolute;
width: 0;
}
&[data-placement='top'] {
.module-tooltip-arrow {
bottom: 0;
}
.module-tooltip-arrow::after {
bottom: -12px;
border-top-color: var(--tooltip-background-color);
}
}
&[data-placement='right'] {
.module-tooltip-arrow {
inset-inline-start: 0;
}
.module-tooltip-arrow::after {
inset-inline-start: -6px;
border-inline-end-color: var(--tooltip-background-color);
}
}
&[data-placement='bottom'] {
.module-tooltip-arrow {
top: 0;
}
.module-tooltip-arrow::after {
top: -6px;
border-bottom-color: var(--tooltip-background-color);
}
}
&[data-placement='left'] {
.module-tooltip-arrow {
inset-inline-end: 0;
}
.module-tooltip-arrow::after {
inset-inline-end: -12px;
border-inline-start-color: var(--tooltip-background-color);
}
}
}
// Module: Chat Session Refreshed Dialog
.module-chat-session-refreshed-dialog {
@include light-theme {
background-color: $color-white;
}
@include dark-theme {
background-color: $color-gray-95;
}
}
.module-chat-session-refreshed-dialog__image {
text-align: center;
}
.module-chat-session-refreshed-dialog__title {
@include font-body-1-bold;
margin-top: 10px;
margin-bottom: 3px;
}
.module-chat-session-refreshed-dialog__buttons {
text-align: end;
margin-top: 20px;
padding: 3px;
}
.module-chat-session-refreshed-dialog__button {
@include font-body-1-bold;
@include button-reset;
@include button-primary;
border-radius: 4px;
padding-block: 7px;
padding-inline: 14px;
margin-inline-start: 12px;
}
.module-chat-session-refreshed-dialog__button--secondary {
@include button-secondary;
}
// Module: Delivery Issue Dialog
.module-delivery-issue-dialog__image {
text-align: center;
}
.module-delivery-issue-dialog__title {
@include font-body-1-bold;
margin-top: 10px;
margin-bottom: 3px;
}
/* Third-party module: react-contextmenu*/
.react-contextmenu {
@include popper-shadow();
outline: none;
border-radius: 4px;
min-width: 220px;
padding-block: 6px;
padding-inline: 0;
opacity: 0;
user-select: none;
visibility: hidden;
@include light-theme {
background-color: $color-white;
}
@include dark-theme {
background-color: $color-gray-75;
}
}
.react-contextmenu--visible {
opacity: 1;
visibility: visible;
z-index: $z-index-context-menu;
-webkit-app-region: no-drag;
}
.react-contextmenu-item {
outline: none;
cursor: pointer;
white-space: nowrap;
display: flex;
width: 100%;
align-items: center;
@include font-body-2;
padding-block: 7px;
padding-inline: 12px;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-02;
}
&--divider {
height: 1px;
margin-block: 6px;
margin-inline: 0;
padding: 0;
@include light-theme {
background-color: $color-gray-15;
}
@include dark-theme {
background-color: $color-gray-60;
}
}
}
.react-contextmenu-item--checked:before {
content: '✓';
display: inline-block;
position: absolute;
inset-inline-end: 7px;
@include light-theme {
color: $color-gray-90;
}
@include dark-theme {
color: $color-gray-02;
}
}
.react-contextmenu-item.react-contextmenu-submenu {
padding: 0;
}
.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item {
padding-inline-end: 36px;
}
.react-contextmenu-item.react-contextmenu-submenu
> .react-contextmenu-item:after {
content: ' ';
display: inline-block;
height: 18px;
position: absolute;
inset-inline-end: 7px;
width: 12px;
@include light-theme {
&:dir(ltr) {
@include color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$color-gray-75
);
}
&:dir(rtl) {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-75
);
}
color: $color-gray-90;
}
@include dark-theme {
&:dir(ltr) {
@include color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$color-gray-15
);
}
&:dir(rtl) {
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-15
);
}
color: $color-gray-02;
}
}
.react-contextmenu-item.react-contextmenu-item--active,
.react-contextmenu-item.react-contextmenu-item--selected {
color: $color-black;
@include light-theme {
background-color: $color-gray-15;
}
@include dark-theme {
background-color: $color-gray-60;
color: $color-white;
}
}
.react-contextmenu-item--disabled.react-contextmenu-item--selected {
background-color: inherit;
cursor: inherit;
}
.react-contextmenu-item.react-contextmenu-item--active.react-contextmenu-item--checked:before,
.react-contextmenu-item.react-contextmenu-item--selected.react-contextmenu-item--checked:before {
color: $color-black;
@include dark-theme {
color: $color-white;
}
}
.react-contextmenu-item.react-contextmenu-submenu
> .react-contextmenu-item.react-contextmenu-item--active:after,
.react-contextmenu-item.react-contextmenu-submenu
> .react-contextmenu-item.react-contextmenu-item--selected:after {
color: $color-black;
@include dark-theme {
color: $color-white;
}
}
// To limit messages with things forcing them wider, like long attachment names
.module-message__container {
max-width: 100%;
&--incoming {
align-self: flex-start;
}
&--outgoing {
align-self: flex-end;
}
&--with-reactions {
margin-bottom: -6px;
}
&--deleted-for-everyone {
font-style: italic;
}
}
.module-message__context {
&--icon::before {
content: ' ';
display: inline-block;
height: 16px;
margin-inline-end: 8px;
width: 16px;
vertical-align: middle;
}
&__download::before {
@include light-theme {
@include color-svg(
'../images/icons/v3/save/save-compact.svg',
$color-black
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/save/save-compact.svg',
$color-gray-15
);
}
}
&__reply::before {
@include light-theme {
@include color-svg(
'../images/icons/v3/reply/reply-compact.svg',
$color-black
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/reply/reply-compact.svg',
$color-gray-15
);
}
}
&__react::before {
@include light-theme {
@include color-svg(
'../images/icons/v3/heart/heart-plus-compact.svg',
$color-black
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/heart/heart-plus-compact.svg',
$color-gray-15
);
}
}
&__more-info::before {
@include light-theme {
@include color-svg(
'../images/icons/v3/info/info-compact.svg',
$color-black
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/info/info-compact.svg',
$color-gray-15
);
}
}
&__select::before {
@include light-theme {
@include color-svg(
'../images/icons/v3/check/check-circle-compact.svg',
$color-black
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/check/check-circle-compact.svg',
$color-gray-15
);
}
}
&__retry-send::before {
@include light-theme {
@include color-svg('../images/icons/v3/send/send.svg', $color-black);
}
@include dark-theme {
@include color-svg('../images/icons/v3/send/send.svg', $color-gray-15);
}
}
&__forward-message::before {
@include light-theme {
@include color-svg(
'../images/icons/v3/forward/forward-compact.svg',
$color-black
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/forward/forward-compact.svg',
$color-gray-15
);
}
}
&__edit-message::before {
@include light-theme {
@include color-svg(
'../images/icons/v3/edit/edit-compact.svg',
$color-black
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/edit/edit-compact.svg',
$color-gray-15
);
}
}
&__delete-message::before,
&__delete-message-for-everyone::before {
@include light-theme {
@include color-svg(
'../images/icons/v3/trash/trash-compact.svg',
$color-black
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/trash/trash-compact.svg',
$color-gray-15
);
}
}
&__copy-timestamp::before {
@include light-theme {
@include color-svg(
'../images/icons/v3/copy/copy-compact.svg',
$color-black
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/copy/copy-compact.svg',
$color-gray-15
);
}
}
}