13e44f087e
Co-authored-by: Jamie Kyle <jamie@signal.org>
7489 lines
148 KiB
SCSS
7489 lines
148 KiB
SCSS
// 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 <Modal.../>
|
|
|
|
#app-container {
|
|
height: 100%;
|
|
}
|
|
|
|
.inbox {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.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__attachment-too-big {
|
|
user-select: none;
|
|
|
|
margin-inline: -$message-padding-horizontal;
|
|
margin-top: -$message-padding-vertical;
|
|
margin-bottom: -$message-padding-vertical;
|
|
padding-top: $message-padding-vertical;
|
|
padding-bottom: $message-padding-vertical;
|
|
padding-inline: $message-padding-horizontal;
|
|
|
|
border-radius: 18px;
|
|
|
|
@include font-body-1-italic;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
border: 1px solid $color-gray-05;
|
|
background-color: $color-white;
|
|
background-image: none;
|
|
}
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
border: 1px solid $color-gray-75;
|
|
background-color: $color-gray-95;
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
.module-message__attachment-too-big--content-above {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
.module-message__attachment-too-big--content-below {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
|
|
border-bottom: none;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
.module-message__attachment-too-big--collapse-above--incoming {
|
|
border-top-left-radius: 4px;
|
|
}
|
|
.module-message__attachment-too-big--collapse-above--outgoing {
|
|
border-top-right-radius: 4px;
|
|
}
|
|
.module-message__attachment-too-big--collapse-below--incoming {
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
.module-message__attachment-too-big--collapse-below--outgoing {
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
.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--outline-only-bubble {
|
|
@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--outline-only-bubble {
|
|
@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--outline-only-bubble {
|
|
@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;
|
|
min-width: 28px;
|
|
padding-bottom: 6px;
|
|
|
|
&--with-reactions {
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
&--typing {
|
|
flex-direction: row-reverse;
|
|
overflow-y: clip;
|
|
}
|
|
}
|
|
|
|
.module-message__container-outer--typing-bubble {
|
|
overflow-y: clip;
|
|
}
|
|
|
|
.module-message__typing-avatar-container {
|
|
flex-direction: row-reverse;
|
|
overflow-y: clip;
|
|
}
|
|
|
|
.module-message__typing-avatar {
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: $z-index-base;
|
|
|
|
&:not(:last-child) {
|
|
margin-inline-start: -4px;
|
|
}
|
|
|
|
&--overflow-count {
|
|
.module-Avatar__contents {
|
|
@include light-theme() {
|
|
background: $color-gray-05;
|
|
color: $color-gray-60;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
background: $color-gray-75;
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
.module-Avatar__label {
|
|
@include font-caption-bold;
|
|
}
|
|
}
|
|
|
|
.module-Avatar {
|
|
min-width: 28px;
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.module-Avatar__contents {
|
|
outline: 3px solid;
|
|
|
|
@include light-theme() {
|
|
outline-color: $color-white;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
outline-color: $color-gray-95;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-message__typing-avatar-spacer {
|
|
flex: 0 1 24px;
|
|
}
|
|
|
|
.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-animation-container {
|
|
height: 16px;
|
|
overflow-y: clip;
|
|
|
|
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--outline-only-bubble {
|
|
@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;
|
|
user-select: none;
|
|
|
|
@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: 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-085;
|
|
}
|
|
@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;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
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-message__typing-animation-container .module-typing-animation {
|
|
width: 30px;
|
|
}
|
|
|
|
.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: 0;
|
|
inset-inline-start: 0;
|
|
z-index: $z-index-calling-container;
|
|
}
|
|
|
|
&__container {
|
|
align-items: center;
|
|
background-color: $calling-background-color;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
justify-content: center;
|
|
position: fixed;
|
|
/* stylelint-disable-next-line liberty/use-logical-spec */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: $z-index-calling;
|
|
}
|
|
|
|
&__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%;
|
|
// Improve appearance of blurred edges by reducing edge gradient effect
|
|
transform: scale(1.2, 1.2);
|
|
}
|
|
}
|
|
|
|
&__camera-is-off {
|
|
@include calling-text-shadow;
|
|
align-items: center;
|
|
color: $color-white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
font-size: 15px;
|
|
line-height: 20px;
|
|
margin-block-start: 15px;
|
|
margin-block-end: 15px;
|
|
justify-content: center;
|
|
text-align: center;
|
|
transition: opacity 100ms ease-out;
|
|
user-select: none;
|
|
z-index: $z-index-base;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
background-color: $color-white;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url('../images/icons/v3/video/video-slash-light.svg');
|
|
height: 24px;
|
|
width: 24px;
|
|
margin-block-end: 12px;
|
|
}
|
|
}
|
|
|
|
&__camera-is-off-spacer {
|
|
flex-basis: 120px;
|
|
}
|
|
}
|
|
|
|
.module-calling__spacer {
|
|
display: flex;
|
|
flex-grow: 0;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
@mixin module-ongoing-call__controls--fade-in {
|
|
animation: {
|
|
name: module-ongoing-call__controls--fade-in;
|
|
duration: 1200ms;
|
|
timing-function: $ease-out-expo;
|
|
fill-mode: forwards;
|
|
}
|
|
}
|
|
|
|
@mixin module-ongoing-call__controls--fade-out {
|
|
animation: {
|
|
name: module-ongoing-call__controls--fade-out;
|
|
duration: 1200ms;
|
|
timing-function: $ease-out-expo;
|
|
fill-mode: forwards;
|
|
}
|
|
pointer-events: none;
|
|
}
|
|
|
|
.module-ongoing-call__container--hide-controls {
|
|
.module-ongoing-call__prev-page,
|
|
.module-ongoing-call__next-page {
|
|
@include module-ongoing-call__controls--fade-out;
|
|
}
|
|
}
|
|
.module-ongoing-call {
|
|
$local-preview-width: 108px;
|
|
$local-preview-height: 80px;
|
|
|
|
&__remote-video-enabled {
|
|
background-color: $color-gray-95;
|
|
height: 100%;
|
|
width: 100%;
|
|
&--reconnecting {
|
|
filter: blur(15px);
|
|
}
|
|
}
|
|
|
|
&__remote-video-disabled {
|
|
background-color: $color-gray-95;
|
|
height: 100vh;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__container {
|
|
&--direct:not(&--call-not-started) {
|
|
.module-ongoing-call__footer {
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__next-page,
|
|
&__prev-page {
|
|
@include button-reset;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 32px;
|
|
width: 32px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
background-color: $color-gray-78;
|
|
z-index: $z-index-above-above-base;
|
|
|
|
&--arrow {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
&__next-page {
|
|
inset-inline-end: 4px;
|
|
&--arrow {
|
|
@include color-svg(
|
|
'../images/icons/v3/chevron/chevron-right.svg',
|
|
$color-white
|
|
);
|
|
}
|
|
}
|
|
|
|
&__prev-page {
|
|
inset-inline-start: 4px;
|
|
&--arrow {
|
|
@include color-svg(
|
|
'../images/icons/v3/chevron/chevron-left.svg',
|
|
$color-white
|
|
);
|
|
}
|
|
}
|
|
|
|
&__direct-call-ringing-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
&__participants {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
width: 100%;
|
|
margin-block-start: 24px;
|
|
z-index: $z-index-above-base;
|
|
-webkit-app-region: no-drag;
|
|
|
|
&__grid--wrapper {
|
|
margin-block-start: 26px;
|
|
margin-block-end: 16px;
|
|
margin-inline: 16px;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
&__grid {
|
|
flex-grow: 1;
|
|
position: relative;
|
|
|
|
.module-ongoing-call__group-call-remote-participant--hand-raised
|
|
.module-ongoing-call__group-call-remote-participant__info__contact-name {
|
|
display: block;
|
|
visibility: visible;
|
|
}
|
|
|
|
.module-ongoing-call__group-call-remote-participant {
|
|
// Only apply container-type: size to grid column to prevent size collapse
|
|
// for implicitly sized participants (PiP)
|
|
container-type: size;
|
|
|
|
@container (min-width: 180px) or (min-height: 180px) {
|
|
.module-ongoing-call__group-call-remote-participant__footer {
|
|
padding-block: 0 14px;
|
|
padding-inline: 16px;
|
|
}
|
|
}
|
|
|
|
&--hand-raised {
|
|
.module-ongoing-call__group-call-remote-participant__footer {
|
|
padding-block: 0 8px;
|
|
padding-inline: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__overflow {
|
|
flex: 0 0 auto;
|
|
position: relative;
|
|
margin-block-start: calc(60px + var(--title-bar-drag-area-height));
|
|
margin-inline-end: 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;
|
|
|
|
&__footer {
|
|
padding-block: 0 8px;
|
|
padding-inline: 10px;
|
|
}
|
|
|
|
&--hand-raised {
|
|
.module-ongoing-call__group-call-remote-participant__footer {
|
|
padding-block: 0 6px;
|
|
padding-inline: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__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-gray-15
|
|
);
|
|
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
background: $color-gray-78;
|
|
border-radius: 100%;
|
|
border: 0;
|
|
height: 24px;
|
|
padding-inline: 4px;
|
|
margin-inline: 0;
|
|
opacity: 0;
|
|
outline: none;
|
|
transition: opacity 200ms ease-out;
|
|
width: 24px;
|
|
}
|
|
|
|
&--top {
|
|
top: 0;
|
|
background: linear-gradient(
|
|
$calling-background-color,
|
|
transparent 20px,
|
|
transparent
|
|
);
|
|
|
|
#{$scroll-marker-selector}__button {
|
|
margin-block-start: 16px;
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
&--bottom {
|
|
bottom: 0;
|
|
background: linear-gradient(
|
|
to top,
|
|
$calling-background-color,
|
|
transparent 20px,
|
|
transparent
|
|
);
|
|
|
|
#{$scroll-marker-selector}__button {
|
|
margin-block-end: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover &__scroll-marker__button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__group-call--pagination-tile {
|
|
@include button-reset;
|
|
position: absolute;
|
|
border-radius: 10px;
|
|
background-color: $color-gray-78;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
@include font-body-1;
|
|
color: $color-gray-20;
|
|
&--next-arrow {
|
|
@include color-svg(
|
|
'../images/icons/v3/chevron/chevron-right.svg',
|
|
$color-gray-20
|
|
);
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
&--prev-arrow {
|
|
@include color-svg(
|
|
'../images/icons/v3/chevron/chevron-left.svg',
|
|
$color-gray-20
|
|
);
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
}
|
|
|
|
&__group-call-remote-participant {
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
line-height: 0;
|
|
overflow: hidden;
|
|
border-radius: 10px;
|
|
transition: top 200ms linear, inset-inline-start 200ms linear,
|
|
transform 200ms linear, width 200ms linear, height 200ms linear;
|
|
|
|
@media (prefers-reduced-motion) {
|
|
transition: none;
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: $z-index-above-above-base;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0 solid transparent;
|
|
border-radius: 10px;
|
|
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;
|
|
pointer-events: none;
|
|
}
|
|
&--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;
|
|
&--reconnecting {
|
|
filter: blur(15px);
|
|
}
|
|
}
|
|
|
|
&-background.module-calling__background--no-avatar {
|
|
background-color: $color-gray-78;
|
|
}
|
|
|
|
&__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;
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
display: flex;
|
|
position: absolute;
|
|
bottom: 0;
|
|
height: 60px;
|
|
padding-block: 0 10px;
|
|
padding-inline: 12px;
|
|
user-select: none;
|
|
width: 100%;
|
|
z-index: $z-index-above-base;
|
|
}
|
|
|
|
&__info {
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: flex-end;
|
|
justify-content: space-between;
|
|
max-width: 100%;
|
|
|
|
&__contact-name {
|
|
flex-grow: 1;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
color: $color-white;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
visibility: hidden;
|
|
direction: inherit;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&--clickable {
|
|
@include button-reset;
|
|
}
|
|
}
|
|
|
|
&--hand-raised &__footer {
|
|
background: transparent;
|
|
}
|
|
|
|
&--hand-raised &__info {
|
|
background: $color-white;
|
|
border-radius: 40px;
|
|
|
|
&__contact-name {
|
|
display: none;
|
|
color: $color-black;
|
|
margin-inline-end: 12px;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.module-ongoing-call__group-call-remote-participant__info__contact-name {
|
|
display: block;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
&:hover:not(
|
|
.module-ongoing-call__group-call-remote-participant--hand-raised
|
|
) {
|
|
.module-ongoing-call__group-call-remote-participant__footer {
|
|
background: linear-gradient(
|
|
180deg,
|
|
transparent,
|
|
$color-black-alpha-60 100%
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__local-preview-fullsize {
|
|
position: absolute;
|
|
top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: $z-index-negative;
|
|
|
|
video {
|
|
@include lonely-local-video-preview;
|
|
}
|
|
|
|
&--presenting {
|
|
video {
|
|
transform: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
z-index: $z-index-above-base;
|
|
|
|
&__actions {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__local-preview {
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
height: $local-preview-height;
|
|
margin-block-end: 16px;
|
|
margin-inline: 0 16px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: $local-preview-width;
|
|
|
|
&--active {
|
|
box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
|
|
}
|
|
|
|
&__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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__controls--fadeIn {
|
|
@include module-ongoing-call__controls--fade-in;
|
|
}
|
|
|
|
&__controls--fadeOut {
|
|
@include module-ongoing-call__controls--fade-out;
|
|
}
|
|
}
|
|
|
|
.module-calling-tools {
|
|
position: absolute;
|
|
top: calc(32px + var(--title-bar-drag-area-height));
|
|
inset-inline-end: 0;
|
|
z-index: $z-index-above-above-base;
|
|
display: flex;
|
|
|
|
&__button {
|
|
margin-inline-end: 12px;
|
|
}
|
|
|
|
&__button:last-child {
|
|
margin-inline-end: 24px;
|
|
}
|
|
.ContextMenu__container {
|
|
background: none;
|
|
text-wrap: nowrap;
|
|
}
|
|
}
|
|
|
|
.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 <CallingPipRemoteVideo>'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;
|
|
}
|
|
|
|
.module-calling__background--no-avatar {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
&--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/pip/pip-maximize-light.svg',
|
|
$color-gray-75
|
|
);
|
|
height: 24px;
|
|
width: 24px;
|
|
border: none;
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v3/pip/pip-maximize-light.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-calling-participants-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 320px;
|
|
height: 440px;
|
|
background-color: $color-gray-80;
|
|
border-radius: 10px;
|
|
color: $color-white;
|
|
filter: drop-shadow(0px 4px 3px $color-black-alpha-20);
|
|
margin-inline-end: 340px;
|
|
margin-block-end: 85px;
|
|
margin-block-start: 20px;
|
|
outline: 1px solid $color-gray-62;
|
|
overflow: hidden;
|
|
padding-block: 5px 0;
|
|
padding-inline: 5px;
|
|
|
|
&__overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
justify-content: flex-end;
|
|
inset-inline-start: 0;
|
|
z-index: $z-index-calling;
|
|
}
|
|
|
|
&__title {
|
|
@include font-body-2-bold;
|
|
}
|
|
|
|
&__contact-icon {
|
|
background-color: $color-gray-25;
|
|
}
|
|
|
|
&__list {
|
|
height: 100%;
|
|
overflow: auto;
|
|
margin: 0;
|
|
padding-block: 0;
|
|
padding-inline: 0;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-corner,
|
|
&::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
&__contact {
|
|
@include font-body-1;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-block: 2px;
|
|
padding-block: 8px;
|
|
padding-inline-start: 10px;
|
|
padding-inline-end: 2px;
|
|
list-style-type: none;
|
|
border-radius: 6px;
|
|
&:hover {
|
|
background-color: $color-gray-62;
|
|
}
|
|
}
|
|
|
|
&__avatar-and-name {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
align-items: center;
|
|
}
|
|
|
|
&__name {
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
margin-inline-start: 8px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-block-end: 2px;
|
|
padding-block: 8px;
|
|
padding-inline: 10px 5px;
|
|
}
|
|
|
|
&__close {
|
|
@include button-reset;
|
|
|
|
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
|
|
|
|
height: 18px;
|
|
width: 18px;
|
|
margin-inline-end: 4px;
|
|
z-index: $z-index-above-base;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
background: $color-ultramarine;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__status-icon {
|
|
display: flex;
|
|
flex: none;
|
|
margin-inline: 8px;
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
&__hand-raised {
|
|
@include color-svg(
|
|
'../images/icons/v3/raise_hand/raise_hand-light.svg',
|
|
$color-white
|
|
);
|
|
}
|
|
|
|
&__muted {
|
|
&--video {
|
|
@include color-svg(
|
|
'../images/icons/v3/video/video-slash-compact-light.svg',
|
|
$color-white
|
|
);
|
|
}
|
|
|
|
&--audio {
|
|
@include color-svg(
|
|
'../images/icons/v3/mic/mic-slash-compact-light.svg',
|
|
$color-white
|
|
);
|
|
}
|
|
}
|
|
|
|
&__presenting {
|
|
@include color-svg(
|
|
'../images/icons/v3/share_screen/share_screen-fill-light.svg',
|
|
$color-white
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-call-need-permission-screen {
|
|
align-items: center;
|
|
background-color: $color-gray-95;
|
|
color: $color-gray-05;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
justify-content: center;
|
|
position: fixed;
|
|
top: 0;
|
|
/* stylelint-disable-next-line liberty/use-logical-spec */
|
|
left: 0;
|
|
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 NavTabs__Scroller;
|
|
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: '#{&}__unread-indicator';
|
|
|
|
@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;
|
|
}
|
|
|
|
#{$unread-indicator} {
|
|
$size: 18px;
|
|
height: $size;
|
|
min-width: $size;
|
|
border-radius: 10px;
|
|
|
|
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;
|
|
}
|
|
&--unread-messages,
|
|
&--marked-unread {
|
|
@include font-caption-bold;
|
|
text-align: center;
|
|
word-break: normal;
|
|
padding-inline: 4px;
|
|
line-height: 100%;
|
|
color: $color-white;
|
|
font-weight: 500;
|
|
}
|
|
&--unread-mentions__icon {
|
|
@include color-svg('../images/icons/v3/at/at.svg', $color-white);
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
&--is-button {
|
|
cursor: pointer;
|
|
|
|
&:disabled {
|
|
cursor: inherit;
|
|
}
|
|
}
|
|
|
|
&--is-checkbox {
|
|
cursor: pointer;
|
|
|
|
&--disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
&:hover:not(:disabled, &--disabled, &--is-selected),
|
|
&:focus:not(:disabled, &--disabled, &--is-selected) {
|
|
@include light-theme {
|
|
background-color: $color-gray-05;
|
|
#{$unread-indicator} {
|
|
border-color: $color-gray-05;
|
|
}
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-75;
|
|
#{$unread-indicator} {
|
|
border-color: $color-gray-75;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--is-selected {
|
|
@include light-theme {
|
|
background-color: $color-gray-15;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-65;
|
|
}
|
|
}
|
|
|
|
&--is-selected &__avatar-container {
|
|
@include light-theme {
|
|
#{$unread-indicator} {
|
|
border-color: $color-gray-15;
|
|
}
|
|
}
|
|
@include dark-theme {
|
|
#{$unread-indicator} {
|
|
border-color: $color-gray-65;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__avatar-container {
|
|
position: relative;
|
|
|
|
#{$unread-indicator} {
|
|
$border-width: 3px;
|
|
$size: 21px + $border-width;
|
|
|
|
@include rounded-corners;
|
|
border: $border-width solid transparent;
|
|
height: $size;
|
|
margin: 0;
|
|
min-width: $size;
|
|
position: absolute;
|
|
top: -(1px + $border-width);
|
|
display: none;
|
|
|
|
.module-conversation-list--width-narrow & {
|
|
display: flex;
|
|
}
|
|
|
|
@include light-theme {
|
|
border-color: $color-gray-02;
|
|
}
|
|
@include dark-theme {
|
|
border-color: $color-gray-80;
|
|
}
|
|
|
|
&--unread-messages,
|
|
&--marked-unread {
|
|
inset-inline-end: -(5px + $border-width);
|
|
}
|
|
&--unread-mentions {
|
|
inset-inline-start: -(5px + $border-width);
|
|
}
|
|
&--is-selected {
|
|
@include light-theme {
|
|
border-color: $color-gray-15;
|
|
}
|
|
@include dark-theme {
|
|
border-color: $color-gray-65;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__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;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__unread-indicators {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
margin-inline-start: 10px;
|
|
margin-top: 1px;
|
|
}
|
|
}
|
|
|
|
&__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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
@include light-theme {
|
|
$background-color: $color-gray-02;
|
|
}
|
|
|
|
@include dark-theme {
|
|
$background-color: $color-gray-80;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-block: 15px;
|
|
|
|
&__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__startComposingIcon {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v3/compose/compose.svg',
|
|
$color-gray-75
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v3/compose/compose.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-left-pane__moreActionsIcon {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v3/more/more.svg', $color-black);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v3/more/more.svg', $color-gray-15);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
// Unset this for buttons in the timeline so that it doesn't prevent the higher z-index
|
|
// ConversationHeader from being draggable
|
|
button {
|
|
-webkit-app-region: initial;
|
|
}
|
|
}
|
|
|
|
.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/
|
|
&::after {
|
|
content: '';
|
|
height: 1px; // Always show the element to not mess with the height of the scroll area
|
|
display: block;
|
|
}
|
|
&--have-newest:not(&--scroll-locked) {
|
|
& > * {
|
|
overflow-anchor: none;
|
|
}
|
|
&::after {
|
|
overflow-anchor: auto;
|
|
}
|
|
}
|
|
|
|
&--have-oldest {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
&__at-bottom-detector {
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.module-timeline__scrolldown-buttons {
|
|
z-index: $z-index-scroll-down-button;
|
|
position: absolute;
|
|
inset-inline-end: 16px;
|
|
bottom: 12px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* 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: 100vw;
|
|
height: 100vh;
|
|
inset-inline-start: 0;
|
|
top: 0;
|
|
position: fixed;
|
|
z-index: $z-index-modal-host;
|
|
}
|
|
|
|
.module-modal-host__overlay-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
inset-inline-start: 0;
|
|
top: 0;
|
|
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: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
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;
|
|
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
|
|
direction: ltr;
|
|
}
|
|
|
|
.module-tooltip-arrow::after {
|
|
border: solid 6px transparent;
|
|
content: '';
|
|
display: block;
|
|
height: 0;
|
|
/* stylelint-disable-next-line liberty/use-logical-spec */
|
|
margin-left: -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 {
|
|
/* stylelint-disable-next-line liberty/use-logical-spec */
|
|
left: 0;
|
|
}
|
|
|
|
.module-tooltip-arrow::after {
|
|
/* stylelint-disable-next-line liberty/use-logical-spec */
|
|
left: -6px;
|
|
/* stylelint-disable-next-line liberty/use-logical-spec */
|
|
border-right-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 {
|
|
/* stylelint-disable-next-line liberty/use-logical-spec */
|
|
right: 0;
|
|
}
|
|
|
|
.module-tooltip-arrow::after {
|
|
/* stylelint-disable-next-line liberty/use-logical-spec */
|
|
right: -12px;
|
|
/* stylelint-disable-next-line liberty/use-logical-spec */
|
|
border-left-color: var(--tooltip-background-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Chat Session Refreshed Dialog
|
|
|
|
.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: 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;
|
|
|
|
// style a menu with only one option
|
|
&:not(:has(:nth-child(2))) {
|
|
padding-block: 0;
|
|
.react-contextmenu-item {
|
|
padding-block: 9px;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
@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 {
|
|
@include color-svg(
|
|
'../images/icons/v3/chevron/chevron-right.svg',
|
|
$color-gray-75
|
|
);
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v3/chevron/chevron-right.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
|
|
);
|
|
}
|
|
}
|
|
}
|