mirror of
https://github.com/signalapp/Signal-Desktop.git
synced 2026-03-02 14:38:57 +00:00
12d7f24d0f
Introduce new UI and behavior for playing audio attachments in conversations. Previously, playback stopped unexpectedly during window resizes and scrolling through the messages due to the row height recomputation in `react-virtualized`. With this commit we introduce `<GlobalAudioContext/>` instance that wraps whole conversation and provides an `<audio/>` element that doesn't get re-rendered (or destroyed) whenever `react-virtualized` recomputes messages. The audio players (with a freshly designed UI) now share this global `<audio/>` instance and manage access to it using `audioPlayer.owner` state from the redux. New UI computes on the fly, caches, and displays waveforms for each audio attachment. Storybook had to be slightly modified to accomodate testing of Android bubbles by introducing the new knob for `authorColor`.
11454 lines
215 KiB
SCSS
11454 lines
215 KiB
SCSS
// Copyright 2018-2021 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/
|
|
|
|
.module-title-bar-drag-area {
|
|
-webkit-app-region: drag;
|
|
height: var(--title-bar-drag-area-height);
|
|
left: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
}
|
|
|
|
.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: 24px auto;
|
|
|
|
&.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: $ultramarine-brand-light;
|
|
}
|
|
}
|
|
|
|
// Module: Message
|
|
|
|
// Note: this does the same thing as module-timeline__message-container but
|
|
// can be used outside tht Timeline contact more easily.
|
|
.module-message-container {
|
|
@include button-reset;
|
|
|
|
cursor: inherit;
|
|
width: 100%;
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
|
|
&::after {
|
|
visibility: hidden;
|
|
display: block;
|
|
font-size: 0;
|
|
content: ' ';
|
|
clear: both;
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
.module-message {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
|
|
outline: none;
|
|
}
|
|
|
|
.module-message--expired {
|
|
animation: module-message__shake 0.2s linear infinite;
|
|
}
|
|
|
|
@keyframes module-message__shake {
|
|
0% {
|
|
transform: translateX(0px);
|
|
}
|
|
25% {
|
|
transform: translateX(-5px);
|
|
}
|
|
50% {
|
|
transform: translateX(0px);
|
|
}
|
|
75% {
|
|
transform: translateX(5px);
|
|
}
|
|
100% {
|
|
transform: translateX(0px);
|
|
}
|
|
}
|
|
|
|
// Spec: container < 438px
|
|
.module-message--incoming {
|
|
margin-left: 16px;
|
|
margin-right: 32px;
|
|
}
|
|
.module-message--outgoing {
|
|
float: right;
|
|
margin-right: 16px;
|
|
margin-left: 32px;
|
|
}
|
|
|
|
.module-message__buttons {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
opacity: 0;
|
|
}
|
|
|
|
.module-message:hover .module-message__buttons {
|
|
opacity: 1;
|
|
}
|
|
|
|
.module-message__buttons--incoming {
|
|
left: 100%;
|
|
padding-left: 8px;
|
|
}
|
|
.module-message__buttons--outgoing {
|
|
right: 100%;
|
|
padding-right: 8px;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.module-message__buttons__download {
|
|
height: 24px;
|
|
width: 24px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/save-outline-24.svg',
|
|
$color-gray-45
|
|
);
|
|
&:hover {
|
|
@include color-svg(
|
|
'../images/icons/v2/save-outline-24.svg',
|
|
$color-gray-90
|
|
);
|
|
}
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/save-solid-24.svg', $color-gray-45);
|
|
&:hover {
|
|
@include color-svg(
|
|
'../images/icons/v2/save-solid-24.svg',
|
|
$color-gray-02
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-message__buttons__react {
|
|
height: 24px;
|
|
width: 24px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/add-emoji-outline-24.svg',
|
|
$color-gray-45
|
|
);
|
|
&:hover {
|
|
@include color-svg(
|
|
'../images/icons/v2/add-emoji-outline-24.svg',
|
|
$color-gray-90
|
|
);
|
|
}
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/add-emoji-outline-24.svg',
|
|
$color-gray-45
|
|
);
|
|
&:hover {
|
|
@include color-svg(
|
|
'../images/icons/v2/add-emoji-outline-24.svg',
|
|
$color-gray-02
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-message__buttons__download--incoming {
|
|
margin-left: 12px;
|
|
}
|
|
.module-message__buttons__download--outgoing {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.module-message__buttons__reply {
|
|
height: 24px;
|
|
width: 24px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/reply-outline-24.svg',
|
|
$color-gray-45
|
|
);
|
|
&:hover {
|
|
@include color-svg(
|
|
'../images/icons/v2/reply-outline-24.svg',
|
|
$color-gray-90
|
|
);
|
|
}
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/reply-solid-24.svg', $color-gray-45);
|
|
&:hover {
|
|
@include color-svg(
|
|
'../images/icons/v2/reply-solid-24.svg',
|
|
$color-gray-02
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-message__buttons__reply--incoming {
|
|
margin-left: 12px;
|
|
}
|
|
.module-message__buttons__reply--outgoing {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.module-message__buttons__menu {
|
|
height: 24px;
|
|
width: 24px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
|
|
@include color-svg('../images/icons/v2/more-horiz-24.svg', $color-gray-45);
|
|
@include light-theme {
|
|
&:hover {
|
|
@include color-svg(
|
|
'../images/icons/v2/more-horiz-24.svg',
|
|
$color-gray-90
|
|
);
|
|
}
|
|
}
|
|
@include dark-theme {
|
|
&:hover {
|
|
@include color-svg(
|
|
'../images/icons/v2/more-horiz-24.svg',
|
|
$color-gray-02
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-message__buttons__menu--incoming {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.module_message__buttons__menu--outgoing {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.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/v2/error-outline-24.svg',
|
|
$color-accent-red
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/error-solid-24.svg',
|
|
$color-accent-red
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-message__error--outgoing {
|
|
left: 8px;
|
|
}
|
|
|
|
.module-message__error--incoming {
|
|
right: 8px;
|
|
}
|
|
|
|
.module-message__container-outer {
|
|
line-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.module-message__container {
|
|
position: relative;
|
|
display: inline-block;
|
|
border-radius: 16px;
|
|
padding-right: 12px;
|
|
padding-left: 12px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
min-width: 0px;
|
|
overflow: hidden;
|
|
|
|
@include light-theme {
|
|
border: 1px solid $color-white;
|
|
}
|
|
|
|
@include dark-theme {
|
|
border: 1px solid $color-gray-95;
|
|
}
|
|
}
|
|
|
|
// This is the component we put the outline around when the whole message is selected
|
|
.module-message--selected .module-message__container {
|
|
@include mouse-mode {
|
|
animation: message--mouse-selected 1s $ease-out-expo;
|
|
}
|
|
}
|
|
.module-message:focus .module-message__container {
|
|
@include keyboard-mode {
|
|
box-shadow: 0 0 0 3px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
@keyframes message--mouse-selected {
|
|
0% {
|
|
box-shadow: 0 0 0 5px transparent;
|
|
}
|
|
10% {
|
|
box-shadow: 0 0 0 5px $ultramarine-ui-light;
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 5px $ultramarine-ui-light;
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 5px transparent;
|
|
}
|
|
}
|
|
|
|
// We disable this highlight for messages with stickers, instead highlighting the sticker
|
|
.module-message--selected .module-message__container--with-sticker {
|
|
@include mouse-mode {
|
|
animation: none;
|
|
}
|
|
}
|
|
.module-message:focus .module-message__container--with-sticker {
|
|
@include keyboard-mode {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.module-message__container--with-sticker {
|
|
@include light-theme {
|
|
border: none;
|
|
}
|
|
|
|
@include dark-theme {
|
|
border: none;
|
|
}
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.module-message__container--outgoing {
|
|
@include light-theme {
|
|
background-color: $color-gray-05;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
@include ios-theme {
|
|
background-color: $ultramarine-ui-light;
|
|
color: $color-white;
|
|
}
|
|
@include ios-dark-theme {
|
|
background-color: $ultramarine-ui-light;
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
// In case the color gets messed up
|
|
.module-message__container--incoming {
|
|
background-color: $color-conversation-grey;
|
|
|
|
@include ios-theme {
|
|
background-color: $color-gray-05;
|
|
color: $color-gray-90;
|
|
}
|
|
@include ios-dark-theme {
|
|
background-color: $color-gray-75;
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
@each $color, $value in $conversation-colors {
|
|
.module-message__container--incoming-#{$color} {
|
|
background-color: $value;
|
|
}
|
|
}
|
|
|
|
.module-message__container--with-tap-to-view {
|
|
min-width: 148px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.module-message__container--with-tap-to-view-pending {
|
|
@include ios-theme {
|
|
background-color: $color-gray-15;
|
|
}
|
|
}
|
|
|
|
// In case the color gets messed up
|
|
.module-message__container--incoming--tap-to-view-pending {
|
|
background-color: $color-conversation-grey-shade;
|
|
}
|
|
|
|
@each $color, $value in $conversation-colors-shade {
|
|
.module-message__container--incoming-#{$color}-tap-to-view-pending {
|
|
background-color: $value;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
@include ios-theme {
|
|
border: 1px solid $color-gray-15;
|
|
background-color: $color-white;
|
|
}
|
|
@include ios-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-accent-red;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-95;
|
|
border: 1px solid $color-deep-red;
|
|
}
|
|
@include ios-theme {
|
|
background-color: $color-white;
|
|
border: 1px solid $color-deep-red;
|
|
}
|
|
@include ios-dark-theme {
|
|
background-color: $color-black;
|
|
border: 1px solid $color-deep-red;
|
|
}
|
|
}
|
|
|
|
.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-right: 6px;
|
|
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.module-message__tap-to-view__icon {
|
|
margin-right: 6px;
|
|
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/view-once-24.svg', $color-white);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/view-once-24.svg', $color-gray-05);
|
|
}
|
|
@include ios-theme {
|
|
@include color-svg('../images/icons/v2/view-once-24.svg', $color-gray-90);
|
|
}
|
|
@include ios-dark-theme {
|
|
@include color-svg('../images/icons/v2/view-once-24.svg', $color-gray-05);
|
|
}
|
|
}
|
|
.module-message__tap-to-view__icon--outgoing {
|
|
@include light-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-05;
|
|
}
|
|
@include ios-theme {
|
|
background-color: $color-white;
|
|
}
|
|
}
|
|
.module-message__tap-to-view__icon--expired {
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/viewed-once-24.svg', $color-gray-75);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/viewed-once-24.svg', $color-gray-05);
|
|
}
|
|
@include ios-theme {
|
|
@include color-svg('../images/icons/v2/viewed-once-24.svg', $color-gray-75);
|
|
}
|
|
@include ios-dark-theme {
|
|
@include color-svg('../images/icons/v2/viewed-once-24.svg', $color-gray-05);
|
|
}
|
|
}
|
|
.module-message__tap-to-view__text {
|
|
@include font-body-1-bold;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
@include ios-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
}
|
|
.module-message__tap-to-view__text--incoming {
|
|
@include light-theme {
|
|
color: $color-white;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
@include ios-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include ios-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;
|
|
}
|
|
@include ios-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include ios-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;
|
|
}
|
|
@include ios-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
}
|
|
|
|
.module-message__tap-to-view__text--outgoing {
|
|
@include ios-theme {
|
|
color: $color-white;
|
|
}
|
|
}
|
|
.module-message__tap-to-view__text--outgoing-expired {
|
|
@include ios-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include ios-dark-theme {
|
|
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;
|
|
|
|
// These should match the paddings from .module-message__container,
|
|
// effectively "undoing" that padding.
|
|
margin: {
|
|
left: -12px;
|
|
right: -12px;
|
|
top: -10px;
|
|
bottom: -10px;
|
|
}
|
|
|
|
border-radius: 16px;
|
|
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;
|
|
border-bottom-left-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
}
|
|
|
|
&--with-content-above {
|
|
margin-top: 4px;
|
|
border-top-left-radius: 0px;
|
|
border-top-right-radius: 0px;
|
|
}
|
|
}
|
|
|
|
.module-message__sticker-container {
|
|
// To ensure that images are centered if they aren't full width of bubble
|
|
text-align: center;
|
|
|
|
margin: {
|
|
left: -12px;
|
|
right: -12px;
|
|
top: -9px;
|
|
bottom: -5px;
|
|
}
|
|
|
|
&--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 $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.module-message__generic-attachment__spinner-container {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.module-message__generic-attachment__icon {
|
|
background: url('../images/file-gradient.svg') no-repeat center;
|
|
height: 44px;
|
|
width: 56px;
|
|
margin-left: -13px;
|
|
margin-right: -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;
|
|
right: -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-left: auto;
|
|
margin-right: 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-left: 8px;
|
|
// The width of the icon plus our 8px margin
|
|
max-width: calc(100% - 37px);
|
|
}
|
|
|
|
.module-message__generic-attachment__file-name {
|
|
@include font-body-2-bold;
|
|
|
|
margin-top: 2px;
|
|
|
|
// Handling really long filenames - cut them off
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-02;
|
|
}
|
|
@include ios-theme {
|
|
color: $color-white;
|
|
}
|
|
}
|
|
|
|
.module-message__generic-attachment__file-name--incoming {
|
|
color: $color-white;
|
|
|
|
@include ios-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include ios-dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
.module-message__generic-attachment__file-size {
|
|
@include font-body-2;
|
|
|
|
margin-top: 3px;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-02;
|
|
}
|
|
@include ios-theme {
|
|
color: $color-white;
|
|
}
|
|
}
|
|
|
|
.module-message__generic-attachment__file-size--incoming {
|
|
color: $color-white;
|
|
|
|
@include ios-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include ios-dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
.module-message__link-preview {
|
|
@include button-reset;
|
|
|
|
&--nonclickable {
|
|
cursor: inherit;
|
|
.module-image__image {
|
|
cursor: inherit;
|
|
}
|
|
}
|
|
|
|
display: block;
|
|
|
|
margin-left: -12px;
|
|
margin-right: -12px;
|
|
width: calc(100% + 24px);
|
|
|
|
margin-top: -10px;
|
|
margin-bottom: 5px;
|
|
overflow: hidden;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-message__link-preview--with-content-above {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.module-message__link-preview__content {
|
|
padding: 8px 12px;
|
|
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-right: 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;
|
|
|
|
&:before {
|
|
content: '•';
|
|
font-size: 50%;
|
|
margin-left: 0.2rem;
|
|
margin-right: 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;
|
|
|
|
color: $color-white-alpha-90;
|
|
|
|
@include ios-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include ios-dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
|
|
&__profile-name {
|
|
@include font-caption-bold-italic;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
&__profile-name {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
&__profile-name {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.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-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
@include ios-theme {
|
|
color: $color-white-alpha-90;
|
|
}
|
|
@include ios-dark-theme {
|
|
color: $color-white-alpha-90;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
@include ios-theme {
|
|
color: $color-white-alpha-90;
|
|
}
|
|
@include ios-dark-theme {
|
|
color: $color-white-alpha-90;
|
|
}
|
|
@include ios-keyboard-mode {
|
|
&:focus {
|
|
outline: 1px solid $color-white-alpha-90;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-message__text--incoming {
|
|
@include light-theme {
|
|
color: $color-white;
|
|
}
|
|
@include ios-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-white-alpha-90;
|
|
}
|
|
@include ios-dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
outline: none;
|
|
|
|
@include light-theme {
|
|
color: $color-white;
|
|
}
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
outline: 1px solid $color-white;
|
|
}
|
|
}
|
|
|
|
@include dark-theme {
|
|
color: $color-white-alpha-90;
|
|
}
|
|
@include dark-keyboard-mode {
|
|
&:focus {
|
|
outline: 1px solid $color-white-alpha-90;
|
|
}
|
|
}
|
|
|
|
@include ios-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include ios-keyboard-mode {
|
|
&:focus {
|
|
outline: 1px solid $color-gray-90;
|
|
}
|
|
}
|
|
|
|
@include ios-dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
@include dark-ios-keyboard-mode {
|
|
&:focus {
|
|
outline: 1px solid $color-gray-05;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-message__text--error {
|
|
@include font-body-1-italic;
|
|
}
|
|
|
|
.module-message__metadata {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-top: 3px;
|
|
margin-bottom: -3px;
|
|
|
|
&--outgoing {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
&--with-reactions {
|
|
margin-bottom: -2px;
|
|
}
|
|
}
|
|
|
|
// 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: 2;
|
|
|
|
width: 100%;
|
|
// Because this is absolutely positioned, we 100% is too big, take it down by parent
|
|
// padding sizes.
|
|
padding-right: 24px;
|
|
|
|
// This is so all clicks go right through to the underlying image.
|
|
pointer-events: none;
|
|
}
|
|
|
|
.module-message__metadata__date {
|
|
@include font-caption;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-white-alpha-80;
|
|
}
|
|
@include ios-theme {
|
|
color: $color-white-alpha-80;
|
|
}
|
|
@include ios-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 ios-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include ios-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;
|
|
}
|
|
@include ios-theme {
|
|
color: $color-white;
|
|
}
|
|
}
|
|
.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-gray-75;
|
|
|
|
@include dark-theme {
|
|
color: $color-white-alpha-80;
|
|
}
|
|
}
|
|
|
|
.module-message__metadata__date--with-sticker {
|
|
@include ios-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
}
|
|
|
|
.module-message__metadata__status-icon {
|
|
width: 12px;
|
|
height: 12px;
|
|
display: inline-block;
|
|
margin-left: 6px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.module-message__metadata__status-icon--sending {
|
|
animation: module-message__metadata__status-icon--spinning 4s linear infinite;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/sending.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/sending.svg', $color-white-alpha-80);
|
|
}
|
|
@include ios-theme {
|
|
@include color-svg('../images/sending.svg', $color-white);
|
|
}
|
|
@include ios-dark-theme {
|
|
@include color-svg('../images/sending.svg', $color-white);
|
|
}
|
|
}
|
|
|
|
@keyframes module-message__metadata__status-icon--spinning {
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.module-message__metadata__status-icon--sent {
|
|
@include light-theme {
|
|
@include color-svg('../images/check-circle-outline.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/check-circle-outline.svg',
|
|
$color-white-alpha-80
|
|
);
|
|
}
|
|
@include ios-theme {
|
|
@include color-svg(
|
|
'../images/check-circle-outline.svg',
|
|
$color-white-alpha-80
|
|
);
|
|
}
|
|
@include ios-dark-theme {
|
|
@include color-svg(
|
|
'../images/check-circle-outline.svg',
|
|
$color-white-alpha-80
|
|
);
|
|
}
|
|
}
|
|
.module-message__metadata__status-icon--delivered {
|
|
width: 18px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/double-check.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/double-check.svg', $color-white-alpha-80);
|
|
}
|
|
@include ios-theme {
|
|
@include color-svg('../images/double-check.svg', $color-white-alpha-80);
|
|
}
|
|
@include ios-dark-theme {
|
|
@include color-svg('../images/double-check.svg', $color-white-alpha-80);
|
|
}
|
|
}
|
|
.module-message__metadata__status-icon--read {
|
|
width: 18px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/read.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/read.svg', $color-white-alpha-80);
|
|
}
|
|
@include ios-theme {
|
|
@include color-svg('../images/read.svg', $color-white-alpha-80);
|
|
}
|
|
@include ios-dark-theme {
|
|
@include color-svg('../images/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 light-theme {
|
|
background-color: $color-white;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-02;
|
|
}
|
|
@include ios-theme {
|
|
background-color: $color-white;
|
|
}
|
|
}
|
|
.module-message__metadata__status-icon--with-sticker {
|
|
@include ios-theme {
|
|
background-color: $color-gray-60;
|
|
}
|
|
}
|
|
.module-message__metadata__status-icon--with-tap-to-view-expired {
|
|
@include ios-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
}
|
|
|
|
.module-message__metadata__spinner-container {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.module-message__send-message-button {
|
|
@include button-reset;
|
|
|
|
width: calc(100% + 24px);
|
|
|
|
@include font-body-2-bold;
|
|
|
|
margin-top: 8px;
|
|
margin-bottom: -10px;
|
|
margin-left: -12px;
|
|
margin-right: -12px;
|
|
|
|
text-align: center;
|
|
padding: 10px;
|
|
|
|
border-bottom-left-radius: 16px;
|
|
border-bottom-right-radius: 16px;
|
|
|
|
@include light-theme {
|
|
color: $ultramarine-ui-light;
|
|
background-color: $color-gray-02;
|
|
border: 1px solid $color-black-alpha-20;
|
|
}
|
|
@include dark-theme {
|
|
color: $ultramarine-ui-dark;
|
|
background-color: $color-gray-75;
|
|
border: 1px solid $color-gray-45;
|
|
}
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-message__author-avatar-container {
|
|
align-items: flex-end;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-right: 8px;
|
|
|
|
&--with-reactions {
|
|
padding-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
.module-message__author-avatar {
|
|
@include button-reset;
|
|
|
|
cursor: pointer;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
|
|
.module-avatar {
|
|
@include keyboard-mode {
|
|
box-shadow: 0 0 0 3px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-message__typing-container {
|
|
height: 16px;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.module-message__reactions {
|
|
position: relative;
|
|
z-index: 2;
|
|
height: 22px;
|
|
display: flex;
|
|
|
|
&--incoming {
|
|
align-self: flex-end;
|
|
padding-right: 8px;
|
|
margin-left: 8px;
|
|
}
|
|
&--outgoing {
|
|
align-self: flex-start;
|
|
padding-left: 8px;
|
|
margin-right: 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;
|
|
}
|
|
|
|
&__count {
|
|
@include font-caption-bold;
|
|
|
|
margin-left: 4px;
|
|
|
|
&--no-emoji {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
|
|
&--is-me {
|
|
@include light-theme {
|
|
color: $color-gray-75;
|
|
}
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-15;
|
|
}
|
|
|
|
@include ios-theme {
|
|
color: $color-white-alpha-90;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
@include light-theme() {
|
|
border-color: $color-white;
|
|
background: $color-gray-05;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
border-color: $color-gray-95;
|
|
background: $color-gray-75;
|
|
}
|
|
|
|
&--is-me {
|
|
@include light-theme() {
|
|
background: $color-gray-25;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
background: $color-gray-45;
|
|
}
|
|
|
|
@include ios-theme() {
|
|
background: $color-accent-blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Expire Timer
|
|
|
|
.module-expire-timer {
|
|
width: 12px;
|
|
height: 12px;
|
|
display: inline-block;
|
|
margin-left: 6px;
|
|
margin-bottom: 2px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/timer-60-12.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/timer-60-12.svg',
|
|
$color-white-alpha-80
|
|
);
|
|
}
|
|
@include ios-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/timer-60-12.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 light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/timer-#{$timer-icon}-12.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/timer-#{$timer-icon}-12.svg',
|
|
$color-white-alpha-80
|
|
);
|
|
}
|
|
@include ios-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/timer-#{$timer-icon}-12.svg',
|
|
$color-white-alpha-80
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-expire-timer--incoming {
|
|
background-color: $color-white-alpha-80;
|
|
|
|
@include ios-theme {
|
|
background-color: $color-gray-60;
|
|
}
|
|
@include ios-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-gray-75;
|
|
|
|
@include dark-theme {
|
|
background-color: $color-white-alpha-80;
|
|
}
|
|
}
|
|
.module-expire-timer--with-sticker {
|
|
@include ios-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 ios-theme {
|
|
background-color: $color-white;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-02;
|
|
}
|
|
}
|
|
|
|
// Module: Quoted Reply
|
|
|
|
.module-quote-container {
|
|
margin: {
|
|
left: -6px;
|
|
right: -6px;
|
|
top: -4px;
|
|
bottom: 5px;
|
|
}
|
|
}
|
|
|
|
.module-quote-container--with-content-above {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.module-quote {
|
|
@include button-reset;
|
|
width: 100%;
|
|
|
|
position: relative;
|
|
border-radius: 4px;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
overflow: hidden;
|
|
|
|
border-left-width: 4px;
|
|
border-left-style: solid;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-quote--no-click {
|
|
cursor: auto;
|
|
}
|
|
|
|
.module-quote--with-content-above {
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
}
|
|
|
|
.module-quote--with-reference-warning {
|
|
border-bottom-left-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
}
|
|
|
|
.module-quote--outgoing {
|
|
border-left-color: $color-conversation-grey;
|
|
@include light-theme {
|
|
background-color: $color-conversation-grey-tint;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-conversation-grey-shade;
|
|
}
|
|
|
|
// To preserve contrast
|
|
@include ios-keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $color-white;
|
|
}
|
|
}
|
|
|
|
// Note: both of these override all of the specific color classes below
|
|
@include ios-dark-theme {
|
|
background-color: $ultramarine-brand-dark;
|
|
border-left-color: $color-black;
|
|
}
|
|
@include ios-theme {
|
|
background-color: $color-ios-blue-tint;
|
|
border-left-color: $color-white;
|
|
}
|
|
}
|
|
|
|
.module-composition-area__row {
|
|
.module-quote--outgoing {
|
|
border-left-style: solid;
|
|
|
|
@include ios-dark-theme {
|
|
background-color: $ultramarine-brand-dark;
|
|
border-left-color: $color-ios-blue-tint;
|
|
}
|
|
@include ios-theme {
|
|
background-color: $color-ios-blue-tint;
|
|
border-left-color: $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $color, $value in $conversation-colors {
|
|
.module-quote--outgoing-#{$color} {
|
|
border-left-color: $value;
|
|
}
|
|
}
|
|
@each $color, $value in $conversation-colors-tint {
|
|
.module-quote--outgoing-#{$color} {
|
|
@include light-theme {
|
|
background-color: $value;
|
|
}
|
|
}
|
|
}
|
|
@each $color, $value in $conversation-colors-shade {
|
|
.module-quote--outgoing-#{$color} {
|
|
@include dark-theme {
|
|
background-color: $value;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-quote--incoming {
|
|
@include light-theme {
|
|
border-left-color: $color-white;
|
|
background-color: $color-conversation-grey-tint;
|
|
}
|
|
@include dark-theme {
|
|
border-left-color: $color-black;
|
|
background-color: $color-conversation-grey-shade;
|
|
}
|
|
|
|
// Note: both of these override all of the specific color classes below
|
|
@include ios-theme {
|
|
background-color: $color-ios-blue-tint;
|
|
border-left-color: $ultramarine-ui-light;
|
|
}
|
|
@include ios-dark-theme {
|
|
background-color: $ultramarine-brand-dark;
|
|
border-left-color: $color-ios-blue-tint;
|
|
}
|
|
}
|
|
@each $color, $value in $conversation-colors-tint {
|
|
.module-quote--incoming-#{$color} {
|
|
@include light-theme {
|
|
background-color: $value;
|
|
}
|
|
}
|
|
}
|
|
@each $color, $value in $conversation-colors-shade {
|
|
.module-quote--incoming-#{$color} {
|
|
@include dark-theme {
|
|
background-color: $value;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-quote__primary {
|
|
flex-grow: 1;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
padding-top: 7px;
|
|
padding-bottom: 7px;
|
|
|
|
// To leave room for image thumbnail
|
|
min-height: 54px;
|
|
}
|
|
|
|
.module-quote__primary__author {
|
|
@include font-body-2-bold;
|
|
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-02;
|
|
}
|
|
@include ios-dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
.module-quote__primary__author--incoming {
|
|
@include ios-dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
.module-quote__primary__profile-name {
|
|
@include font-body-2-bold-italic;
|
|
}
|
|
|
|
.module-quote__primary__text {
|
|
@include font-body-1;
|
|
|
|
text-align: start;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
a {
|
|
color: $color-gray-90;
|
|
}
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-02;
|
|
a {
|
|
color: $color-gray-02;
|
|
}
|
|
}
|
|
@include ios-dark-theme {
|
|
color: $color-gray-05;
|
|
a {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
white-space: pre-wrap;
|
|
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
|
|
// Note: -webkit-line-clamp doesn't work for RTL text, and it forces you to use
|
|
// ... as the truncation indicator. That's not a solution that works well for
|
|
// all languages. More resources:
|
|
// - http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
|
|
// - https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5
|
|
}
|
|
|
|
.module-quote__primary__text--incoming {
|
|
@include ios-dark-theme {
|
|
color: $color-gray-05;
|
|
a {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-quote__primary__type-label {
|
|
@include font-body-2-italic;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-02;
|
|
}
|
|
@include ios-dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
.module-quote__primary__type-label--incoming {
|
|
@include ios-dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
.module-quote__primary__filename-label {
|
|
@include font-body-2;
|
|
}
|
|
|
|
.module-quote__close-container {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
height: 16px;
|
|
width: 16px;
|
|
|
|
border-radius: 50%;
|
|
|
|
background-color: $color-black-alpha-40;
|
|
|
|
@include keyboard-mode {
|
|
&:focus-within {
|
|
background-color: $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-quote__close-button {
|
|
@include button-reset;
|
|
|
|
width: 14px;
|
|
height: 14px;
|
|
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-white);
|
|
}
|
|
|
|
.module-quote__icon-container {
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
flex: 0 0 54px;
|
|
position: relative;
|
|
width: 54px;
|
|
}
|
|
|
|
.module-quote__icon-container__inner {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.module-quote__icon-container__circle-background {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
height: 32px;
|
|
width: 32px;
|
|
border-radius: 50%;
|
|
background-color: $color-white;
|
|
}
|
|
|
|
.module-quote__icon-container__icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.module-quote__icon-container__icon--file {
|
|
@include color-svg('../images/file.svg', $ultramarine-ui-light);
|
|
}
|
|
.module-quote__icon-container__icon--image {
|
|
@include color-svg('../images/image.svg', $ultramarine-ui-light);
|
|
}
|
|
.module-quote__icon-container__icon--microphone {
|
|
@include color-svg(
|
|
'../images/icons/v2/mic-outline-24.svg',
|
|
$ultramarine-ui-light
|
|
);
|
|
}
|
|
.module-quote__icon-container__icon--play {
|
|
@include color-svg(
|
|
'../images/icons/v2/play-solid-24.svg',
|
|
$ultramarine-ui-light
|
|
);
|
|
}
|
|
.module-quote__icon-container__icon--movie {
|
|
@include color-svg('../images/movie.svg', $ultramarine-ui-light);
|
|
}
|
|
|
|
.module-quote__generic-file {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.module-quote__generic-file__icon {
|
|
background: url('../images/file-gradient.svg');
|
|
background-size: 75%;
|
|
background-repeat: no-repeat;
|
|
height: 28px;
|
|
width: 36px;
|
|
margin-left: -4px;
|
|
margin-right: -6px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.module-quote__generic-file__text {
|
|
@include font-body-2;
|
|
|
|
max-width: calc(100% - 26px);
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-02;
|
|
}
|
|
@include ios-dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
.module-quote__generic-file__text--incoming {
|
|
@include ios-dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
.module-quote__reference-warning {
|
|
color: $color-gray-90;
|
|
height: 26px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
|
|
background-color: $color-white-alpha-80;
|
|
@include dark-theme {
|
|
background-color: $color-white-alpha-20;
|
|
}
|
|
@include ios-theme {
|
|
background-color: $color-ios-ref-warning-light;
|
|
}
|
|
@include ios-dark-theme {
|
|
background-color: $color-ios-ref-warning-dark;
|
|
}
|
|
}
|
|
|
|
.module-quote__reference-warning--incoming {
|
|
color: $color-gray-90;
|
|
@include ios-theme {
|
|
background-color: $color-ios-ref-warning-light;
|
|
}
|
|
@include ios-dark-theme {
|
|
background-color: $color-ios-ref-warning-dark;
|
|
}
|
|
}
|
|
|
|
.module-quote__reference-warning__icon {
|
|
height: 16px;
|
|
width: 16px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-25);
|
|
}
|
|
@include ios-theme {
|
|
@include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-90);
|
|
}
|
|
@include ios-dark-theme {
|
|
@include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-90);
|
|
}
|
|
}
|
|
|
|
.module-quote__reference-warning__icon--incoming {
|
|
@include ios-theme {
|
|
@include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-90);
|
|
}
|
|
@include ios-dark-theme {
|
|
@include color-svg('../images/icons/v2/link-broken-16.svg', $color-gray-90);
|
|
}
|
|
}
|
|
|
|
.module-quote__reference-warning__text {
|
|
@include font-caption;
|
|
|
|
margin-left: 6px;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-02;
|
|
}
|
|
@include ios-dark-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
}
|
|
|
|
.module-quote__reference-warning__text--incoming {
|
|
@include ios-dark-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
}
|
|
|
|
.module-about {
|
|
&__container {
|
|
margin-bottom: 8px;
|
|
margin-left: auto;
|
|
margin-right: 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-right: 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 $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-embedded-contact--outgoing {
|
|
@include ios-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-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.module-embedded-contact__text-container {
|
|
flex-grow: 1;
|
|
margin-left: 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-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-02;
|
|
}
|
|
@include ios-theme {
|
|
color: $color-white;
|
|
}
|
|
@include ios-dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
.module-embedded-contact__contact-name--incoming {
|
|
color: $color-white;
|
|
|
|
@include ios-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include ios-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 light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-white-alpha-80;
|
|
}
|
|
@include ios-theme {
|
|
color: $color-white-alpha-80;
|
|
}
|
|
}
|
|
|
|
.module-embedded-contact__contact-method--incoming {
|
|
color: $color-white-alpha-80;
|
|
|
|
@include ios-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
}
|
|
|
|
// Module: Contact Detail
|
|
|
|
.module-contact-detail {
|
|
text-align: center;
|
|
max-width: 300px;
|
|
margin-left: auto;
|
|
margin-right: 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: $ultramarine-ui-light;
|
|
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-right: 5px;
|
|
|
|
@include font-body-2-bold;
|
|
}
|
|
|
|
.module-contact-detail__send-message__bubble-icon {
|
|
height: 17px;
|
|
width: 18px;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/message-outline-24.svg',
|
|
$color-white
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/message-solid-24.svg', $color-white);
|
|
}
|
|
}
|
|
|
|
.module-contact-detail__additional-contact {
|
|
text-align: left;
|
|
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;
|
|
padding: 5px;
|
|
|
|
&:focus {
|
|
@include keyboard-mode {
|
|
background-color: $color-gray-02;
|
|
}
|
|
@include dark-keyboard-mode {
|
|
background-color: $color-gray-80;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Group Notification
|
|
|
|
.module-group-notification {
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
.module-group-notification__change {
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.module-group-notification__contact {
|
|
font-weight: bold;
|
|
}
|
|
|
|
// Module: Reset Session Notification
|
|
|
|
.module-reset-session-notification {
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
// Module: Safety Number Notification
|
|
|
|
.module-safety-number-notification {
|
|
text-align: center;
|
|
}
|
|
|
|
.module-safety-number-notification__icon {
|
|
height: 24px;
|
|
width: 24px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 7px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/safety-number-outline-24.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/safety-number-solid-24.svg',
|
|
$color-gray-25
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-safety-number-notification__text {
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
.module-safety-number-notification__contact {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.module-safety-number-notification__button {
|
|
@include button-reset;
|
|
|
|
@include font-body-2-bold;
|
|
|
|
margin-top: 5px;
|
|
display: inline-block;
|
|
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
|
|
color: $ultramarine-ui-light;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-02;
|
|
}
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
background-color: $color-gray-15;
|
|
}
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
@include dark-keyboard-mode {
|
|
&:focus {
|
|
background-color: $color-gray-60;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-message-calling--notification {
|
|
.module-message__metadata__date {
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
&__button {
|
|
@include button-reset;
|
|
@include button-small;
|
|
@include button-green;
|
|
@include font-body-1-bold;
|
|
|
|
display: block;
|
|
margin: 0.5rem auto 0 auto;
|
|
}
|
|
}
|
|
|
|
.module-safety-number__bold-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.module-message-calling {
|
|
&--audio {
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
&--audio__icon {
|
|
height: 24px;
|
|
margin-bottom: 4px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 24px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/phone-right-outline-24.svg',
|
|
$color-gray-75
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/phone-right-outline-24.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
&--video {
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
&--video__icon {
|
|
height: 24px;
|
|
margin-bottom: 4px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 24px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/video-outline-24.svg',
|
|
$color-gray-75
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/video-outline-24.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-message-unsynced {
|
|
padding-bottom: 24px;
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
.module-message-unsynced__icon {
|
|
height: 24px;
|
|
margin-bottom: 4px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 24px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/info-outline-24.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/info-solid-24.svg', $color-gray-25);
|
|
}
|
|
}
|
|
|
|
// Module: Verification Notification
|
|
|
|
.module-verification-notification {
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
.module-verification-notification__contact {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.module-verification-notification__icon--mark-verified {
|
|
height: 24px;
|
|
width: 24px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 4px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/check-24.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/check-24.svg', $color-gray-25);
|
|
}
|
|
}
|
|
|
|
.module-verification-notification__icon--mark-not-verified {
|
|
height: 24px;
|
|
width: 24px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 7px;
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/safety-number-outline-24.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/safety-number-solid-24.svg',
|
|
$color-gray-25
|
|
);
|
|
}
|
|
}
|
|
|
|
// Module: Timer Notification
|
|
|
|
.module-timer-notification {
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
.module-timer-notification__icon-container {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.module-timer-notification__icon {
|
|
height: 20px;
|
|
width: 20px;
|
|
display: inline-block;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/timer-24.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/timer-24.svg', $color-gray-05);
|
|
}
|
|
}
|
|
|
|
.module-timer-notification__icon--disabled {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/timer-disabled-24.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/timer-disabled-24.svg',
|
|
$color-gray-05
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-timer-notification__icon-label {
|
|
margin-left: 6px;
|
|
|
|
// Didn't seem centered otherwise
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.module-notification--with-click-handler {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.module-notification__icon {
|
|
height: 24px;
|
|
width: 24px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
// Module: Contact List Item
|
|
|
|
.module-contact-list-item {
|
|
@include button-reset;
|
|
|
|
cursor: inherit;
|
|
|
|
padding: 8px;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
|
|
@include mouse-mode {
|
|
&:hover {
|
|
background-color: $color-gray-02;
|
|
}
|
|
}
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
background-color: $color-gray-02;
|
|
}
|
|
}
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-15;
|
|
}
|
|
@include dark-mouse-mode {
|
|
&:hover {
|
|
background-color: $color-gray-80;
|
|
}
|
|
}
|
|
@include dark-keyboard-mode {
|
|
&:focus {
|
|
background-color: $color-gray-80;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-contact-list-item--with-click-handler {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.module-contact-list-item__text {
|
|
margin-left: 8px;
|
|
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
flex-grow: 1;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.module-contact-list-item__left {
|
|
flex: 1;
|
|
}
|
|
|
|
.module-contact-list-item__text__name {
|
|
@include font-body-1-bold;
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
.module-contact-list-item__text__profile-name {
|
|
@include font-body-2-bold-italic;
|
|
}
|
|
|
|
.module-contact-list-item__text__additional-data {
|
|
@include font-body-2;
|
|
|
|
margin-top: 3p;
|
|
}
|
|
|
|
.module-contact-list-item__text__verified-icon {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
vertical-align: text-bottom;
|
|
|
|
// Trying to account for the whitespace around the check mark
|
|
margin-bottom: -1px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/check-24.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/check-24.svg', $color-gray-25);
|
|
}
|
|
}
|
|
|
|
.module-contact-list-item__admin {
|
|
text-align: right;
|
|
height: 100%;
|
|
|
|
@include font-body-2;
|
|
}
|
|
|
|
// Module: In Contacts Icon
|
|
|
|
.module-in-contacts-icon__icon {
|
|
display: inline-block;
|
|
height: 15px;
|
|
width: 15px;
|
|
|
|
margin-bottom: 2px;
|
|
vertical-align: middle;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/profile-circle-outline-24.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/profile-circle-outline-24.svg',
|
|
$color-gray-25
|
|
);
|
|
}
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
@include color-svg(
|
|
'../images/icons/v2/profile-circle-outline-24.svg',
|
|
$ultramarine-ui-light
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Conversation Details
|
|
|
|
.conversation-details-panel {
|
|
max-width: 750px;
|
|
margin: 0 auto;
|
|
|
|
@at-root .conversation #{&} {
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
// Brought this up here to add specificity
|
|
button.module-conversation-details__action-button {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.module-conversation-details {
|
|
&-header {
|
|
&__root,
|
|
&__root--editable {
|
|
align-items: center;
|
|
background: none;
|
|
border: none;
|
|
color: inherit;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0;
|
|
outline: inherit;
|
|
padding: 0 0 24px 0;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
&__root--editable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__title {
|
|
@include font-title-1;
|
|
align-items: center;
|
|
display: flex;
|
|
padding-bottom: 8px;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
&__subtitle {
|
|
@include font-body-1;
|
|
color: $color-gray-60;
|
|
padding-bottom: 6px;
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
&__root--editable &__title {
|
|
$icon: '../images/icons/v2/compose-solid-24.svg';
|
|
|
|
&::after {
|
|
$size: 24px;
|
|
|
|
content: '';
|
|
height: $size;
|
|
left: $size + 13px;
|
|
margin-left: -$size;
|
|
opacity: 0;
|
|
position: relative;
|
|
transition: opacity 100ms ease-out;
|
|
width: $size;
|
|
|
|
@include light-theme {
|
|
@include color-svg($icon, $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg($icon, $color-gray-25);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__root--editable:hover &__title::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&__leave-group {
|
|
color: $color-accent-red;
|
|
}
|
|
|
|
&__block-group {
|
|
color: $color-accent-red;
|
|
}
|
|
|
|
&__tabs {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
&__tab {
|
|
@include font-body-1;
|
|
cursor: pointer;
|
|
padding: 15px;
|
|
|
|
&:focus {
|
|
@include mouse-mode {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
&--selected {
|
|
@include font-body-1-bold;
|
|
border-bottom: 2px solid $color-black;
|
|
}
|
|
}
|
|
|
|
&__pending--info {
|
|
@include font-subtitle;
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
padding: 0 28px;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
&-icon {
|
|
&__button {
|
|
background: none;
|
|
border: none;
|
|
padding: none;
|
|
|
|
&:focus {
|
|
@include mouse-mode {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
height: 32px;
|
|
width: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&::after {
|
|
display: block;
|
|
content: '';
|
|
width: 24px;
|
|
height: 24px;
|
|
-webkit-mask-size: 100%;
|
|
}
|
|
|
|
&--timer {
|
|
&::after {
|
|
-webkit-mask: url(../images/icons/v2/timer-disabled-24.svg) no-repeat
|
|
center;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-15;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--lock {
|
|
&::after {
|
|
-webkit-mask: url(../images/icons/v2/lock-outline-24.svg) no-repeat
|
|
center;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-15;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--approve {
|
|
&::after {
|
|
-webkit-mask: url(../images/icons/v2/check-24.svg) no-repeat center;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-15;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--link {
|
|
&::after {
|
|
-webkit-mask: url(../images/icons/v2/link-16.svg) no-repeat center;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-15;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--share {
|
|
&::after {
|
|
-webkit-mask: url(../images/icons/v2/share-ios-24.svg) no-repeat
|
|
center;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-15;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--reset {
|
|
&::after {
|
|
-webkit-mask: url(../images/icons/v2/refresh-24.svg) no-repeat center;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-15;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--trash {
|
|
&::after {
|
|
-webkit-mask: url(../images/icons/v2/trash-outline-24.svg) no-repeat
|
|
center;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-15;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--invites {
|
|
&::after {
|
|
-webkit-mask: url(../images/icons/v2/pending-invite-24.svg) no-repeat
|
|
center;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-15;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--down {
|
|
border-radius: 18px;
|
|
@include light-theme {
|
|
background-color: $color-gray-02;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-90;
|
|
}
|
|
|
|
&::after {
|
|
-webkit-mask: url(../images/icons/v2/chevron-down-16.svg) no-repeat
|
|
center;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-60;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-25;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--leave {
|
|
&::after {
|
|
-webkit-mask: url(../images/icons/v2/leave-24.svg) no-repeat center;
|
|
background-color: $color-accent-red;
|
|
}
|
|
}
|
|
|
|
&--block {
|
|
&::after {
|
|
-webkit-mask: url(../images/icons/v2/block-24.svg) no-repeat center;
|
|
background-color: $color-accent-red;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-media-list {
|
|
&__root {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0 20px;
|
|
padding-bottom: 24px;
|
|
|
|
.module-media-grid-item {
|
|
border-radius: 4px;
|
|
height: auto;
|
|
margin: 0 4px;
|
|
max-height: 94px;
|
|
overflow: hidden;
|
|
width: calc(100% / 6);
|
|
|
|
.module-media-grid-item__icon {
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
padding-top: 100%;
|
|
}
|
|
}
|
|
|
|
.module-media-grid-item__image-container,
|
|
img {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__show-all {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-95;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-panel-row {
|
|
&__root {
|
|
align-items: center;
|
|
display: flex;
|
|
padding: 16px 24px;
|
|
user-select: none;
|
|
width: 100%;
|
|
|
|
&--button {
|
|
color: inherit;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
&:hover {
|
|
@include light-theme {
|
|
background-color: $color-gray-02;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-90;
|
|
}
|
|
|
|
& .module-conversation-details-panel-row__actions {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
margin-right: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__label {
|
|
flex-grow: 1;
|
|
text-align: left;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
&__info {
|
|
@include font-body-2;
|
|
color: $color-gray-60;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
&__right {
|
|
color: $color-gray-45;
|
|
}
|
|
|
|
&__actions {
|
|
margin-left: 12px;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
|
|
&:focus-within {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-panel-section {
|
|
&__root {
|
|
position: relative;
|
|
|
|
&:not(:first-child)::before {
|
|
border-top: 1px solid transparent;
|
|
|
|
@include light-theme {
|
|
border-top-color: $color-gray-15;
|
|
}
|
|
|
|
@include dark-theme {
|
|
border-top-color: $color-gray-65;
|
|
}
|
|
|
|
content: '';
|
|
display: block;
|
|
left: 0;
|
|
margin: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
&--borderless {
|
|
&:not(:first-child)::before {
|
|
border-top: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 18px 24px 12px;
|
|
|
|
&--center {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
@include font-body-1-bold;
|
|
}
|
|
}
|
|
|
|
&-select {
|
|
position: relative;
|
|
|
|
select {
|
|
@include font-body-2;
|
|
-webkit-appearance: none;
|
|
border-radius: 4px;
|
|
border: 1px solid $color-gray-25;
|
|
cursor: pointer;
|
|
height: 40px;
|
|
min-width: 124px;
|
|
outline: 0;
|
|
padding: 10px;
|
|
padding-left: 12px;
|
|
padding-right: 32px;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-90;
|
|
border-color: $color-gray-60;
|
|
color: $color-gray-05;
|
|
}
|
|
|
|
&:focus {
|
|
border: 3px solid $ultramarine-ui-light;
|
|
line-height: 14px;
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
border: 2px solid $color-gray-60;
|
|
border-radius: 2px;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
content: ' ';
|
|
display: block;
|
|
height: 10px;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 14px;
|
|
transform-origin: center;
|
|
transform: rotate(-45deg);
|
|
width: 10px;
|
|
z-index: 2;
|
|
|
|
@include dark-theme {
|
|
border-color: $color-gray-15;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Message Detail
|
|
|
|
.module-message-detail {
|
|
max-width: 650px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 20px;
|
|
outline: none;
|
|
}
|
|
|
|
.module-message-detail__message-container {
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
|
|
&::after {
|
|
content: '.';
|
|
visibility: hidden;
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.module-message-detail__label {
|
|
@include font-body-1-bold;
|
|
}
|
|
|
|
.module-message-detail__unix-timestamp {
|
|
@include light-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-45;
|
|
}
|
|
}
|
|
|
|
.module-message-detail__delete-button-container {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.module-message-detail__delete-button {
|
|
@include button-reset;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
outline: -webkit-focus-ring-color auto 5px;
|
|
}
|
|
}
|
|
|
|
border-radius: 5px;
|
|
margin: 1em auto;
|
|
padding: 1em;
|
|
|
|
background-color: $color-accent-red;
|
|
color: $color-white;
|
|
|
|
@include light-theme {
|
|
border: solid 1px $color-gray-45;
|
|
box-shadow: 0 0 10px -3px $color-black-alpha-60;
|
|
}
|
|
@include dark-theme {
|
|
border: solid 1px $color-gray-25;
|
|
box-shadow: 0 0 10px -3px $color-white-alpha-60;
|
|
}
|
|
}
|
|
|
|
.module-message-detail__contact-container {
|
|
margin: 20px;
|
|
}
|
|
|
|
.module-message-detail__contact {
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.module-message-detail__contact__text {
|
|
margin-left: 10px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.module-message-detail__contact__error {
|
|
color: $color-accent-red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.module-message-detail__contact__status-icon {
|
|
width: 12px;
|
|
height: 12px;
|
|
display: inline-block;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.module-message-detail__contact__status-icon--sending {
|
|
animation: module-message-detail__contact__status-icon--spinning 4s linear
|
|
infinite;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/sending.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/sending.svg', $color-gray-25);
|
|
}
|
|
}
|
|
|
|
@keyframes module-message-detail__contact__status-icon--spinning {
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.module-message-detail__contact__status-icon--sent {
|
|
@include light-theme {
|
|
@include color-svg('../images/check-circle-outline.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/check-circle-outline.svg', $color-gray-25);
|
|
}
|
|
}
|
|
.module-message-detail__contact__status-icon--delivered {
|
|
width: 18px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/double-check.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/double-check.svg', $color-gray-25);
|
|
}
|
|
}
|
|
.module-message-detail__contact__status-icon--read {
|
|
width: 18px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/read.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/read.svg', $color-gray-25);
|
|
}
|
|
}
|
|
.module-message-detail__contact__status-icon--error {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/error-outline-12.svg',
|
|
$color-accent-red
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/error-solid-12.svg',
|
|
$color-accent-red
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-message-detail__contact__unidentified-delivery-icon {
|
|
margin-left: 6px;
|
|
margin-right: 10px;
|
|
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-block;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/unidentified-delivery.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/unidentified-delivery.svg', $color-gray-25);
|
|
}
|
|
}
|
|
|
|
.module-message-detail__contact__error-buttons {
|
|
text-align: right;
|
|
}
|
|
|
|
.module-message-detail__contact__show-safety-number {
|
|
@include button-reset;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
|
|
color: $color-white;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-45;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-25;
|
|
}
|
|
}
|
|
.module-message-detail__contact__send-anyway {
|
|
@include button-reset;
|
|
margin-left: 5px;
|
|
margin-top: 5px;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
|
|
color: $color-white;
|
|
background-color: $color-accent-red;
|
|
}
|
|
|
|
// Module: Media Gallery
|
|
|
|
.module-media-gallery {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
outline: none;
|
|
}
|
|
|
|
.module-media-gallery__tab-container {
|
|
display: flex;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
}
|
|
|
|
.module-media-gallery__tab {
|
|
width: 100%;
|
|
padding: 20px;
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-02;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-90;
|
|
}
|
|
|
|
outline: none;
|
|
|
|
&:focus {
|
|
@include keyboard-mode {
|
|
background-color: $color-gray-15;
|
|
}
|
|
@include dark-keyboard-mode {
|
|
background-color: $color-gray-75;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-media-gallery__tab--active {
|
|
border-bottom: 2px solid $ultramarine-ui-light;
|
|
}
|
|
|
|
.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 $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-left: 8px;
|
|
margin-right: 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-right: 4px;
|
|
margin-bottom: 4px;
|
|
position: relative;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-media-grid-item__image {
|
|
height: 94px;
|
|
width: 94px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.module-media-grid-item__icon {
|
|
position: absolute;
|
|
top: 15px;
|
|
bottom: 15px;
|
|
left: 15px;
|
|
right: 15px;
|
|
}
|
|
|
|
.module-media-grid-item__icon-image {
|
|
@include color-svg('../images/image.svg', $color-gray-45);
|
|
}
|
|
|
|
.module-media-grid-item__image-container {
|
|
height: 94px;
|
|
width: 94px;
|
|
object-fit: cover;
|
|
position: relative;
|
|
}
|
|
|
|
.module-media-grid-item__circle-overlay {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
width: 42px;
|
|
height: 42px;
|
|
background-color: $color-white;
|
|
border-radius: 21px;
|
|
}
|
|
|
|
.module-media-grid-item__play-overlay {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
height: 24px;
|
|
width: 24px;
|
|
@include color-svg(
|
|
'../images/icons/v2/play-solid-24.svg',
|
|
$ultramarine-ui-light
|
|
);
|
|
}
|
|
|
|
.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: Conversation Hero
|
|
|
|
.module-conversation-hero {
|
|
padding: 32px 0 28px 0;
|
|
text-align: center;
|
|
|
|
&__avatar {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
&__profile-name {
|
|
@include font-title-2;
|
|
margin-bottom: 2px;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
&__with {
|
|
@include font-body-2;
|
|
margin-bottom: 16px;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
&__membership {
|
|
@include font-body-2;
|
|
|
|
padding: 0 16px;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
|
|
&__name {
|
|
@include font-body-2-bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Message Request Actions
|
|
|
|
.module-message-request-actions {
|
|
padding: 8px 16px 12px 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;
|
|
|
|
&__button {
|
|
border: none;
|
|
border-radius: 4px;
|
|
min-width: 80px;
|
|
height: 36px;
|
|
padding: 0 14px;
|
|
text-align: center;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
|
|
@include keyboard-mode {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
@include font-body-1-bold;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-05;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
|
|
&:not(:last-of-type) {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
&--deny {
|
|
color: $color-accent-red;
|
|
}
|
|
|
|
&--accept {
|
|
color: $color-accent-blue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Avatar
|
|
|
|
.module-avatar {
|
|
position: relative;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
user-select: none;
|
|
|
|
img {
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.module-avatar-button {
|
|
@include button-reset;
|
|
|
|
// Ensures that the border of the item sticks tight to the inner contents
|
|
width: 100%;
|
|
line-height: 0;
|
|
border-radius: 50%;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-avatar__label {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
|
|
@include light-theme {
|
|
color: $color-white;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
.module-avatar__icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.module-avatar__icon--group {
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/group-outline-40.svg', $color-white);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/group-outline-40.svg',
|
|
$color-gray-05
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-avatar__icon--direct {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/profile-outline-40.svg',
|
|
$color-white
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/profile-outline-40.svg',
|
|
$color-gray-05
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-avatar--28 {
|
|
min-width: 28px;
|
|
height: 28px;
|
|
width: 28px;
|
|
|
|
img {
|
|
height: 28px;
|
|
width: 28px;
|
|
}
|
|
}
|
|
|
|
.module-avatar__icon--28.module-avatar__icon--group {
|
|
height: 20px;
|
|
width: 20px;
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/group-outline-20.svg', $color-white);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/group-outline-20.svg',
|
|
$color-gray-05
|
|
);
|
|
}
|
|
}
|
|
.module-avatar__icon--28.module-avatar__icon--direct {
|
|
height: 20px;
|
|
width: 20px;
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/profile-outline-20.svg',
|
|
$color-white
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/profile-outline-20.svg',
|
|
$color-gray-05
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-avatar__label--28 {
|
|
font-size: 14px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.module-avatar--32 {
|
|
height: 32px;
|
|
width: 32px;
|
|
min-width: 32px;
|
|
|
|
img {
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
}
|
|
|
|
.module-avatar__icon--32.module-avatar__icon--group {
|
|
height: 20px;
|
|
width: 20px;
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/group-outline-20.svg', $color-white);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/group-outline-20.svg',
|
|
$color-gray-05
|
|
);
|
|
}
|
|
}
|
|
.module-avatar__icon--32.module-avatar__icon--direct {
|
|
height: 20px;
|
|
width: 20px;
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/profile-outline-20.svg',
|
|
$color-white
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/profile-outline-20.svg',
|
|
$color-gray-05
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-avatar__label--32 {
|
|
font-size: 14px;
|
|
line-height: 32px;
|
|
}
|
|
|
|
.module-avatar--52 {
|
|
height: 52px;
|
|
width: 52px;
|
|
min-width: 52px;
|
|
|
|
img {
|
|
height: 52px;
|
|
width: 52px;
|
|
}
|
|
}
|
|
|
|
.module-avatar__label--52 {
|
|
width: 52px;
|
|
font-size: 22px;
|
|
letter-spacing: 0.19px;
|
|
line-height: 52px;
|
|
}
|
|
|
|
.module-avatar__icon--52 {
|
|
height: 38px;
|
|
width: 38px;
|
|
}
|
|
.module-avatar__icon--52.module-avatar__icon--direct {
|
|
height: 42px;
|
|
width: 42px;
|
|
}
|
|
|
|
.module-avatar--80 {
|
|
height: 80px;
|
|
width: 80px;
|
|
min-width: 80px;
|
|
|
|
img {
|
|
height: 80px;
|
|
width: 80px;
|
|
}
|
|
}
|
|
|
|
.module-avatar__label--80 {
|
|
width: 80px;
|
|
font-size: 40px;
|
|
line-height: 80px;
|
|
}
|
|
|
|
.module-avatar__icon--80 {
|
|
height: 58px;
|
|
width: 58px;
|
|
}
|
|
|
|
.module-avatar__icon--80.module-avatar__icon--direct {
|
|
height: 62px;
|
|
width: 62px;
|
|
}
|
|
|
|
.module-avatar--96 {
|
|
height: 96px;
|
|
width: 96px;
|
|
min-width: 96px;
|
|
|
|
img {
|
|
height: 96px;
|
|
width: 96px;
|
|
}
|
|
}
|
|
|
|
.module-avatar__label--96 {
|
|
width: 96px;
|
|
font-size: 48px;
|
|
line-height: 96px;
|
|
}
|
|
|
|
.module-avatar__icon--96 {
|
|
height: 70px;
|
|
width: 70px;
|
|
}
|
|
|
|
.module-avatar--112 {
|
|
height: 112px;
|
|
width: 112px;
|
|
min-width: 112px;
|
|
|
|
img {
|
|
height: 112px;
|
|
width: 112px;
|
|
}
|
|
}
|
|
|
|
.module-avatar__label--112 {
|
|
width: 112px;
|
|
font-size: 56px;
|
|
line-height: 112px;
|
|
}
|
|
|
|
.module-avatar__icon--112 {
|
|
height: 81px;
|
|
width: 81px;
|
|
}
|
|
.module-avatar__icon--112.module-avatar__icon--direct {
|
|
height: 87px;
|
|
width: 87px;
|
|
}
|
|
|
|
.module-avatar__icon--note-to-self {
|
|
width: 70%;
|
|
height: 70%;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/note-28.svg', $color-white);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/note-28.svg', $color-gray-05);
|
|
}
|
|
}
|
|
|
|
.module-avatar--no-image {
|
|
@include light-theme {
|
|
background-color: $color-conversation-grey;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-conversation-grey-shade;
|
|
}
|
|
}
|
|
|
|
.module-avatar__spinner-container {
|
|
padding: 4px;
|
|
}
|
|
|
|
.module-avatar--signal-blue {
|
|
background-color: $ultramarine-ui-light;
|
|
}
|
|
|
|
@each $color, $value in $conversation-colors {
|
|
.module-avatar--#{$color} {
|
|
@include light-theme {
|
|
background-color: $value;
|
|
}
|
|
}
|
|
}
|
|
@each $color, $value in $conversation-colors-shade {
|
|
.module-avatar--#{$color} {
|
|
@include dark-theme {
|
|
background-color: $value;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Main Header
|
|
|
|
.module-main-header {
|
|
-webkit-app-region: var(--draggable-app-region);
|
|
|
|
height: calc(#{$header-height} + var(--title-bar-drag-area-height));
|
|
width: 100%;
|
|
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
padding-top: var(--title-bar-drag-area-height);
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
& > * {
|
|
margin-right: 12px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&__avatar {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
&__search {
|
|
flex-grow: 1;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
-webkit-app-region: no-drag;
|
|
|
|
&__input {
|
|
flex-grow: 1;
|
|
height: 28px;
|
|
|
|
padding-left: 30px;
|
|
padding-right: 5px;
|
|
|
|
border-radius: 14px;
|
|
border: none;
|
|
|
|
@include font-body-2;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-05;
|
|
color: $color-gray-90;
|
|
border: solid 1px $color-gray-02;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
background-color: $color-gray-95;
|
|
border: solid 1px $color-gray-80;
|
|
}
|
|
|
|
&:placeholder {
|
|
color: $color-gray-45;
|
|
}
|
|
|
|
&:focus {
|
|
border: solid 1px $ultramarine-ui-light;
|
|
outline: none;
|
|
}
|
|
|
|
&--with-text {
|
|
padding-right: 30px;
|
|
}
|
|
|
|
&--in-conversation {
|
|
padding-left: 50px;
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 6px;
|
|
height: 16px;
|
|
width: 16px;
|
|
|
|
cursor: text;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/search-16.svg', $color-gray-75);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/search-16.svg', $color-gray-25);
|
|
}
|
|
}
|
|
|
|
&__in-conversation-pill {
|
|
position: absolute;
|
|
left: 3px;
|
|
top: 3px;
|
|
bottom: 3px;
|
|
|
|
border-radius: 14px;
|
|
width: 42px;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
// Overriding some default button styling
|
|
border: none;
|
|
padding: 0;
|
|
outline: none;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-15;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
|
|
&__avatar-container {
|
|
margin-left: 4px;
|
|
height: 16px;
|
|
width: 16px;
|
|
border-radius: 8px;
|
|
|
|
background-color: $ultramarine-ui-light;
|
|
}
|
|
|
|
&__avatar {
|
|
height: 16px;
|
|
width: 16px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/profile-circle-outline-24.svg',
|
|
$color-white
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/profile-circle-solid-24.svg',
|
|
$color-gray-05
|
|
);
|
|
}
|
|
}
|
|
|
|
&__x-button {
|
|
margin-left: 2px;
|
|
|
|
height: 16px;
|
|
width: 16px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-25);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__cancel-icon {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 5px;
|
|
height: 18px;
|
|
width: 18px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-25);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__compose-icon {
|
|
$icon: '../images/icons/v2/compose-outline-24.svg';
|
|
|
|
width: 24px;
|
|
height: 24px;
|
|
-webkit-app-region: no-drag;
|
|
|
|
@include light-theme {
|
|
@include color-svg($icon, $color-gray-90);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg($icon, $color-gray-02);
|
|
}
|
|
|
|
&:focus {
|
|
@include color-svg($icon, $ultramarine-ui-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Image
|
|
|
|
.module-image {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: 1px;
|
|
vertical-align: middle;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.module-image--not-downloaded {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
i {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
border-radius: 48px;
|
|
height: 48px;
|
|
width: 48px;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-65;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
height: 17px;
|
|
width: 17px;
|
|
@include color-svg('../images/icons/v2/arrow-down-24.svg', $color-white);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
i {
|
|
background-color: $color-black;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
i {
|
|
background-color: $color-gray-75;
|
|
border: 4px solid $ultramarine-ui-light;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-image__download-pending {
|
|
position: relative;
|
|
|
|
&--spinner-container {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 100%;
|
|
justify-content: center;
|
|
left: 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: 12px 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;
|
|
left: 6px;
|
|
}
|
|
|
|
.module-image--soft-corners {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.module-image--curved-top-left {
|
|
border-top-left-radius: 16px;
|
|
}
|
|
.module-image--curved-top-right {
|
|
border-top-right-radius: 16px;
|
|
}
|
|
.module-image--curved-bottom-left {
|
|
border-bottom-left-radius: 16px;
|
|
}
|
|
.module-image--curved-bottom-right {
|
|
border-bottom-right-radius: 16px;
|
|
}
|
|
.module-image--small-curved-top-left {
|
|
border-top-left-radius: 10px;
|
|
}
|
|
|
|
.module-image__border-overlay {
|
|
@include button-reset;
|
|
|
|
width: 100%;
|
|
cursor: inherit;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.module-image__border-overlay--with-click-handler {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.module-image__border-overlay--with-border {
|
|
@include light-theme {
|
|
box-shadow: inset 0px 0px 0px 1px $color-black-alpha-20;
|
|
}
|
|
@include dark-theme {
|
|
box-shadow: inset 0px 0px 0px 1px $color-white-alpha-20;
|
|
}
|
|
}
|
|
|
|
// Only if it's a sticker do we put the outline inside it
|
|
.module-message--selected
|
|
.module-message__container--with-sticker
|
|
.module-image__border-overlay {
|
|
@include mouse-mode {
|
|
top: 1px;
|
|
bottom: 1px;
|
|
left: 1px;
|
|
right: 1px;
|
|
border-radius: 10px;
|
|
|
|
animation: message--mouse-selected 1s $ease-out-expo;
|
|
}
|
|
}
|
|
|
|
.module-message:focus
|
|
.module-message__container--with-sticker
|
|
.module-image__border-overlay {
|
|
@include keyboard-mode {
|
|
top: 1px;
|
|
bottom: 1px;
|
|
left: 1px;
|
|
right: 1px;
|
|
border-radius: 10px;
|
|
|
|
box-shadow: 0 0 0 3px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
button.module-image__border-overlay:focus {
|
|
@include keyboard-mode {
|
|
box-shadow: inset 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
.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: 1;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.module-image__play-overlay__circle {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
width: 48px;
|
|
height: 48px;
|
|
background-color: $color-white;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.module-image__play-overlay__icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
height: 24px;
|
|
width: 24px;
|
|
@include color-svg(
|
|
'../images/icons/v2/play-solid-24.svg',
|
|
$ultramarine-ui-light
|
|
);
|
|
}
|
|
|
|
.module-image__text-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 3;
|
|
|
|
// 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 button-reset;
|
|
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
width: 16px;
|
|
height: 16px;
|
|
z-index: 2;
|
|
|
|
background-image: url('../images/x-shadow-16.svg');
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
outline: 2px solid $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Image Grid
|
|
|
|
.module-image-grid {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
margin: -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;
|
|
}
|
|
|
|
.module-image-grid__row {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
// Module: Typing Animation
|
|
|
|
.module-typing-animation {
|
|
display: inline-flex;
|
|
flex-directin: row;
|
|
align-items: center;
|
|
|
|
height: 8px;
|
|
width: 38px;
|
|
padding-left: 1px;
|
|
padding-right: 1px;
|
|
}
|
|
|
|
.module-typing-animation__dot {
|
|
border-radius: 50%;
|
|
|
|
height: 6px;
|
|
width: 6px;
|
|
opacity: 0.4;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-white;
|
|
}
|
|
@include ios-theme {
|
|
background-color: $color-gray-60;
|
|
}
|
|
}
|
|
|
|
.module-typing-animation__dot--light {
|
|
border-radius: 50%;
|
|
|
|
height: 6px;
|
|
width: 6px;
|
|
opacity: 0.4;
|
|
|
|
background-color: $color-white;
|
|
|
|
@include ios-theme {
|
|
background-color: $color-gray-60;
|
|
}
|
|
}
|
|
|
|
@keyframes typing-animation-first {
|
|
0% {
|
|
opacity: 0.4;
|
|
}
|
|
20% {
|
|
transform: scale(1.3);
|
|
opacity: 1;
|
|
}
|
|
40% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
@keyframes typing-animation-second {
|
|
10% {
|
|
opacity: 0.4;
|
|
}
|
|
30% {
|
|
transform: scale(1.3);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
@keyframes typing-animation-third {
|
|
20% {
|
|
opacity: 0.4;
|
|
}
|
|
40% {
|
|
transform: scale(1.3);
|
|
opacity: 1;
|
|
}
|
|
60% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
.module-typing-animation__dot--first {
|
|
animation: typing-animation-first 1600ms ease infinite;
|
|
}
|
|
|
|
.module-typing-animation__dot--second {
|
|
animation: typing-animation-second 1600ms ease infinite;
|
|
}
|
|
|
|
.module-typing-animation__dot--third {
|
|
animation: typing-animation-third 1600ms ease infinite;
|
|
}
|
|
|
|
.module-typing-animation__spacer {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
// Module: Attachments
|
|
|
|
.module-attachments__header {
|
|
height: 24px;
|
|
position: relative;
|
|
}
|
|
|
|
.module-attachments__close-button {
|
|
@include button-reset;
|
|
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 16px;
|
|
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
z-index: 2;
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-black);
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-attachments__rail {
|
|
margin-top: 12px;
|
|
margin-left: 12px;
|
|
padding-right: 12px;
|
|
overflow-x: scroll;
|
|
max-height: 142px;
|
|
white-space: nowrap;
|
|
overflow-y: hidden;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
// Module: Staged Generic Attachment
|
|
|
|
.module-staged-generic-attachment {
|
|
height: 120px;
|
|
width: 120px;
|
|
margin: 1px;
|
|
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 button-reset;
|
|
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
width: 16px;
|
|
height: 16px;
|
|
z-index: 2;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-black);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/x-24.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-left: 32px;
|
|
margin-right: 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-left: auto;
|
|
margin-right: 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: Caption Editor
|
|
|
|
.module-caption-editor {
|
|
background-color: $color-black;
|
|
z-index: 20;
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.module-caption-editor__close-button {
|
|
z-index: 21;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
|
|
top: 12px;
|
|
right: 16px;
|
|
width: 30px;
|
|
height: 30px;
|
|
z-index: 2;
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-white);
|
|
}
|
|
|
|
.module-caption-editor__media-container {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
background-color: $color-black;
|
|
text-align: center;
|
|
margin: 50px;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.module-caption-editor__image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
.module-caption-editor__video {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
.module-caption-editor__placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.module-caption-editor__bottom-bar {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
height: 52px;
|
|
padding: 8px;
|
|
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: middle;
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.module-caption-editor__input-container {
|
|
position: relative;
|
|
}
|
|
|
|
.module-caption-editor__caption-input {
|
|
height: 36px;
|
|
width: 40em;
|
|
|
|
color: $color-white;
|
|
|
|
border: 1px solid $color-white;
|
|
border-radius: 18px;
|
|
background-color: $color-black;
|
|
padding: 9px;
|
|
padding-left: 12px;
|
|
padding-right: 65px;
|
|
|
|
&:placeholder {
|
|
color: $color-white-alpha-80;
|
|
}
|
|
&:focus {
|
|
border: 1px solid $ultramarine-ui-light;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.module-caption-editor__save-button {
|
|
@include button-reset;
|
|
|
|
position: absolute;
|
|
background-color: $ultramarine-ui-light;
|
|
color: $color-white;
|
|
|
|
height: 28px;
|
|
border-radius: 15px;
|
|
|
|
padding: 5px;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
|
|
right: 4px;
|
|
top: 4px;
|
|
}
|
|
|
|
// 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 $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
@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 $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-staged-placeholder-attachment__plus-icon {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
height: 36px;
|
|
width: 36px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/plus-24.svg', $color-gray-45);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/plus-24.svg', $color-gray-60);
|
|
}
|
|
}
|
|
|
|
// Module: Staged Link Preview
|
|
|
|
.module-staged-link-preview {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
|
|
min-height: 65px;
|
|
}
|
|
|
|
.module-staged-link-preview--is-loading {
|
|
align-items: center;
|
|
}
|
|
.module-staged-link-preview__loading {
|
|
text-align: center;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
.module-staged-link-preview__icon-container {
|
|
margin-right: 8px;
|
|
}
|
|
.module-staged-link-preview__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-right: 20px;
|
|
}
|
|
.module-staged-link-preview__title {
|
|
@include font-body-1-bold;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.module-staged-link-preview__description {
|
|
@include font-body-1;
|
|
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.module-staged-link-preview__footer {
|
|
@include font-body-2;
|
|
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-items: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
|
|
> *:not(:first-child) {
|
|
display: flex;
|
|
|
|
&:before {
|
|
content: '•';
|
|
font-size: 50%;
|
|
margin-left: 0.2rem;
|
|
margin-right: 0.2rem;
|
|
}
|
|
}
|
|
}
|
|
.module-staged-link-preview__location {
|
|
@include font-body-2;
|
|
|
|
text-transform: lowercase;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
.module-staged-link-preview__close-button {
|
|
@include button-reset;
|
|
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
|
|
height: 16px;
|
|
width: 16px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
|
|
}
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-light);
|
|
}
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-25);
|
|
}
|
|
@include dark-keyboard-mode {
|
|
&:focus {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-dark);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Spinner
|
|
|
|
.module-spinner__container {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
position: relative;
|
|
height: 56px;
|
|
width: 56px;
|
|
}
|
|
|
|
.module-spinner__circle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
z-index: 2;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
@include color-svg('../images/spinner-track-56.svg', $color-white-alpha-40);
|
|
}
|
|
.module-spinner__arc {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
z-index: 3;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
animation: spinner-arc-animation 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);
|
|
}
|
|
}
|
|
|
|
@keyframes spinner-arc-animation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: rotate(180deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
// 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%;
|
|
}
|
|
.module-spinner__arc--small {
|
|
-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-white;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-02;
|
|
}
|
|
@include ios-theme {
|
|
background-color: $color-gray-60;
|
|
}
|
|
@include ios-dark-theme {
|
|
background-color: $color-gray-02;
|
|
}
|
|
}
|
|
|
|
.module-spinner__circle--outgoing {
|
|
@include dark-theme {
|
|
background-color: $color-white-alpha-40;
|
|
}
|
|
@include ios-theme {
|
|
background-color: $color-white-alpha-40;
|
|
}
|
|
@include ios-dark-theme {
|
|
background-color: $color-white-alpha-40;
|
|
}
|
|
}
|
|
.module-spinner__arc--outgoing {
|
|
@include dark-theme {
|
|
background-color: $color-gray-05;
|
|
}
|
|
@include ios-theme {
|
|
background-color: $color-white;
|
|
}
|
|
@include ios-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-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: $ultramarine-ui-light;
|
|
}
|
|
.module-spinner__arc--on-avatar {
|
|
background-color: $color-white;
|
|
}
|
|
|
|
// Module: Highlighted Message Body
|
|
|
|
.module-message-body__highlight {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.module-message-body__at-mention {
|
|
background-color: $color-black-alpha-40;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
border: 1px solid transparent;
|
|
|
|
&:focus {
|
|
border: 1px solid $color-black;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.module-message-body__at-mention--incoming {
|
|
@include ios-theme {
|
|
@include light-theme {
|
|
background-color: $color-gray-20;
|
|
}
|
|
}
|
|
|
|
@include ios-dark-theme {
|
|
background-color: $color-gray-60;
|
|
}
|
|
}
|
|
|
|
.module-message-body__at-mention--outgoing {
|
|
@include light-theme {
|
|
background-color: $color-gray-20;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-60;
|
|
}
|
|
|
|
@include ios-theme {
|
|
background-color: $ultramarine-brand-dark;
|
|
}
|
|
}
|
|
|
|
// 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: 0px 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: 0px 8px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-basis: 45px;
|
|
flex-shrink: 0;
|
|
|
|
&:not(:first-of-type) {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
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-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
flex-grow: 1;
|
|
padding: 0 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-left: 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: Reaction Picker
|
|
|
|
@keyframes module-reaction-picker__background-fade {
|
|
from {
|
|
background: transparent;
|
|
}
|
|
to {
|
|
// This color is the same in both light and dark themes
|
|
background: rgba($color-black, 0.8);
|
|
}
|
|
}
|
|
|
|
@keyframes module-reaction-picker__emoji-fade {
|
|
from {
|
|
transform: translate3d(0, 24px, 0);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.module-reaction-picker {
|
|
width: 320px;
|
|
height: 56px;
|
|
border-radius: 30px;
|
|
position: relative;
|
|
margin: 4px 0;
|
|
z-index: 2;
|
|
|
|
animation: {
|
|
name: module-reaction-picker__background-fade;
|
|
duration: 400ms;
|
|
timing-function: $ease-out-expo;
|
|
fill-mode: forwards;
|
|
}
|
|
|
|
&__emoji-btn {
|
|
@include button-reset;
|
|
display: flex;
|
|
min-width: 52px;
|
|
min-height: 52px;
|
|
border-radius: 52px;
|
|
|
|
position: absolute;
|
|
top: 2px;
|
|
|
|
@for $i from 0 through 6 {
|
|
&:nth-of-type(#{$i + 1}) {
|
|
left: 2px + ($i * 44px);
|
|
|
|
// Prevent animation jank
|
|
opacity: 0;
|
|
|
|
animation: {
|
|
name: module-reaction-picker__emoji-fade;
|
|
duration: 400ms;
|
|
timing-function: $ease-out-expo;
|
|
delay: #{$i * 10ms};
|
|
fill-mode: forwards;
|
|
}
|
|
}
|
|
}
|
|
|
|
transition: background 400ms $ease-out-expo;
|
|
&--selected {
|
|
// This color is the same in both light and dark themes
|
|
background: rgba($color-white, 0.3);
|
|
}
|
|
&--more {
|
|
@include light-theme {
|
|
background: url('../images/any-emoji-32-light.svg') no-repeat center;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background: url('../images/any-emoji-32-dark.svg') no-repeat center;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
width: 52px;
|
|
height: 52px;
|
|
opacity: 0;
|
|
transition: opacity 400ms $ease-out-expo;
|
|
|
|
@include light-theme {
|
|
background: url('../images/any-emoji-32-light-hover.svg') no-repeat
|
|
center;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background: url('../images/any-emoji-32-dark-hover.svg') no-repeat
|
|
center;
|
|
}
|
|
}
|
|
|
|
&:hover::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include keyboard-mode {
|
|
&:focus:before {
|
|
content: '';
|
|
display: block;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: $ultramarine-ui-light;
|
|
border-radius: 2px;
|
|
position: absolute;
|
|
bottom: 4px;
|
|
left: calc(50% - 2px);
|
|
}
|
|
}
|
|
|
|
$emoji-btn: &;
|
|
|
|
&__emoji {
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 2px;
|
|
transform-origin: center;
|
|
$scale: 32 / 48;
|
|
transform: scale3d($scale, $scale, $scale);
|
|
transition: transform 400ms $ease-out-expo;
|
|
|
|
#{$emoji-btn}:hover &,
|
|
.keyboard-mode #{$emoji-btn}:focus & {
|
|
transform: scale3d(1, 1, 1) translate3d(0, -24px, 0);
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Calling
|
|
.module-calling {
|
|
&__container {
|
|
align-items: center;
|
|
background-color: $calling-background-color;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
justify-content: center;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
&__header {
|
|
color: #ffffff;
|
|
font-style: normal;
|
|
padding-bottom: 24px;
|
|
padding-top: calc(24px + var(--title-bar-drag-area-height));
|
|
text-align: center;
|
|
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
|
|
width: 100%;
|
|
|
|
&--header-name {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.009em;
|
|
line-height: 21px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
&__buttons {
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-bottom: 32px;
|
|
padding-top: 32px;
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
&__background {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
&--blur {
|
|
position: absolute;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
filter: blur(25px);
|
|
height: 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&__video-off {
|
|
&--icon {
|
|
@include color-svg(
|
|
'../images/icons/v2/video-off-solid-24.svg',
|
|
$color-white
|
|
);
|
|
height: 24px;
|
|
margin-bottom: 8px;
|
|
width: 24px;
|
|
}
|
|
|
|
&--text {
|
|
color: $color-white;
|
|
z-index: 1;
|
|
}
|
|
|
|
&--container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 12px;
|
|
|
|
.module-calling__video-off--text {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-incoming-call {
|
|
align-items: center;
|
|
background-color: $color-gray-75;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: var(--title-bar-drag-area-height);
|
|
}
|
|
|
|
.module-incoming-call__contact {
|
|
align-items: center;
|
|
display: flex;
|
|
min-width: 0;
|
|
|
|
&--avatar {
|
|
margin-bottom: 8px;
|
|
margin-left: 16px;
|
|
margin-top: 8px;
|
|
position: relative;
|
|
}
|
|
|
|
&--name {
|
|
align-items: stretch;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
&--name-header {
|
|
@include font-body-1-bold;
|
|
color: #ffffff;
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&--message-text {
|
|
@include font-body-2;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.module-incoming-call__actions {
|
|
display: flex;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.module-incoming-call__button {
|
|
&--accept-video-as-audio {
|
|
background-color: $color-gray-45;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 4px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
@include mouse-mode {
|
|
&:hover {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
div {
|
|
@include color-svg(
|
|
'../images/icons/v2/video-off-solid-24.svg',
|
|
$color-white
|
|
);
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
|
|
&--accept-video {
|
|
background-color: $color-accent-green;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 4px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
@include mouse-mode {
|
|
&:hover {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
div {
|
|
@include color-svg('../images/icons/v2/video-solid-24.svg', $color-white);
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
|
|
&--accept-audio {
|
|
background-color: $color-accent-green;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 4px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
@include mouse-mode {
|
|
&:hover {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
div {
|
|
@include color-svg(
|
|
'../images/icons/v2/phone-right-solid-24.svg',
|
|
$color-white
|
|
);
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
|
|
&--decline {
|
|
background-color: $color-accent-red;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 4px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
@include mouse-mode {
|
|
&:hover {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
div {
|
|
@include color-svg('../images/icons/v2/phone-down-24.svg', $color-white);
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-incoming-call__button,
|
|
.module-calling-button__icon {
|
|
align-items: center;
|
|
border-radius: 40px;
|
|
border: none;
|
|
display: flex;
|
|
height: 40px;
|
|
justify-content: center;
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
outline: none;
|
|
width: 40px;
|
|
}
|
|
|
|
.module-calling-button {
|
|
$size: 22px;
|
|
|
|
&__participants {
|
|
@include color-svg('../images/icons/v2/group-solid-24.svg', $color-white);
|
|
display: inline-block;
|
|
height: $size;
|
|
width: $size;
|
|
|
|
&--container {
|
|
@include button-reset;
|
|
border: none;
|
|
color: $color-white;
|
|
}
|
|
|
|
&--shown {
|
|
background-color: $color-gray-75;
|
|
border-radius: 16px;
|
|
padding: 6px 8px;
|
|
padding-bottom: 2px;
|
|
margin-top: -6px;
|
|
margin-right: -8px;
|
|
}
|
|
|
|
&--count {
|
|
@include font-body-2-bold;
|
|
margin-left: 5px;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
&__settings {
|
|
@include color-svg(
|
|
'../images/icons/v2/settings-solid-16.svg',
|
|
$color-white
|
|
);
|
|
height: $size;
|
|
width: $size;
|
|
}
|
|
|
|
&__grid-view {
|
|
@include color-svg(
|
|
'../images/icons/v2/grid-view-solid-24.svg',
|
|
$color-white
|
|
);
|
|
height: $size;
|
|
width: $size;
|
|
}
|
|
|
|
&__speaker-view {
|
|
@include color-svg(
|
|
'../images/icons/v2/speaker-view-solid-24.svg',
|
|
$color-white
|
|
);
|
|
height: $size;
|
|
width: $size;
|
|
}
|
|
|
|
&__pip {
|
|
@include color-svg('../images/icons/v2/pip-minimize-24.svg', $color-white);
|
|
height: $size;
|
|
width: $size;
|
|
}
|
|
}
|
|
|
|
.module-calling-button__icon {
|
|
border-radius: 56px;
|
|
height: 56px;
|
|
width: 56px;
|
|
|
|
@mixin calling-button-icon($icon, $background-color, $icon-color) {
|
|
background-color: $background-color;
|
|
|
|
div {
|
|
@include color-svg($icon, $icon-color);
|
|
height: 28px;
|
|
width: 28px;
|
|
}
|
|
}
|
|
|
|
@mixin calling-button-icon-on($icon) {
|
|
@include calling-button-icon($icon, $color-white, $color-gray-75);
|
|
}
|
|
|
|
@mixin calling-button-icon-off($icon) {
|
|
@include calling-button-icon($icon, $color-white-alpha-40, $color-white);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
@mixin calling-button-icon-disabled($icon) {
|
|
@include calling-button-icon($icon, $color-gray-45, $color-white);
|
|
opacity: 0.2;
|
|
}
|
|
|
|
// If the on/off states seem backwards, it's because this button reflects "is audio
|
|
// muted?", not "is audio on?".
|
|
&--audio {
|
|
$icon: '../images/icons/v2/mic-off-solid-28.svg';
|
|
&--on {
|
|
@include calling-button-icon-off($icon);
|
|
}
|
|
&--off {
|
|
@include calling-button-icon-on($icon);
|
|
}
|
|
&--disabled {
|
|
@include calling-button-icon-disabled($icon);
|
|
}
|
|
}
|
|
|
|
&--video {
|
|
$icon: '../images/icons/v2/video-solid-28.svg';
|
|
&--on {
|
|
@include calling-button-icon-on($icon);
|
|
}
|
|
&--off {
|
|
@include calling-button-icon-off($icon);
|
|
}
|
|
&--disabled {
|
|
@include calling-button-icon-disabled($icon);
|
|
}
|
|
}
|
|
|
|
&--hangup {
|
|
@include calling-button-icon(
|
|
'../images/icons/v2/phone-down-28.svg',
|
|
$color-accent-red,
|
|
$color-white
|
|
);
|
|
}
|
|
}
|
|
|
|
@keyframes module-ongoing-call__controls--fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes module-ongoing-call__controls--fade-out {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.module-ongoing-call {
|
|
$local-preview-width: 136px;
|
|
$local-preview-height: 102px;
|
|
|
|
&__remote-video-enabled {
|
|
background-color: $color-gray-95;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
&__remote-video-disabled {
|
|
background-color: $color-gray-95;
|
|
height: 100vh;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__container {
|
|
&--direct {
|
|
.module-ongoing-call__header {
|
|
position: absolute;
|
|
}
|
|
.module-ongoing-call__footer {
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__header {
|
|
background: linear-gradient($color-black-alpha-40, transparent);
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 2;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
&__header-message {
|
|
font-weight: normal;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
letter-spacing: -0.0025em;
|
|
}
|
|
|
|
&__participants {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
width: 100%;
|
|
|
|
&__grid {
|
|
flex-grow: 1;
|
|
position: relative;
|
|
}
|
|
|
|
&__overflow {
|
|
flex: 0 0 auto;
|
|
position: relative;
|
|
margin-left: 16px;
|
|
margin-right: 16px;
|
|
|
|
&__inner {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
max-height: 100%;
|
|
overflow-y: scroll;
|
|
|
|
&::-webkit-scrollbar,
|
|
&::-webkit-scrollbar-thumb {
|
|
width: 0;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
& .module-ongoing-call__group-call-remote-participant {
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
&__scroll-marker {
|
|
$scroll-marker-selector: &;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
left: 0;
|
|
opacity: 1;
|
|
position: absolute;
|
|
scroll-behavior: smooth;
|
|
transition: opacity 200ms ease-out;
|
|
width: 100%;
|
|
z-index: 1;
|
|
|
|
&--hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
&__button {
|
|
&::before {
|
|
@include color-svg(
|
|
'../images/icons/v2/arrow-down-24.svg',
|
|
$color-white
|
|
);
|
|
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
background: $color-gray-60;
|
|
border-radius: 100%;
|
|
border: 0;
|
|
box-shadow: 0 0 5px rgba($color-gray-95, 0.5);
|
|
height: 28px;
|
|
margin: 12px 0;
|
|
opacity: 0;
|
|
outline: none;
|
|
transition: opacity 200ms ease-out;
|
|
width: 28px;
|
|
}
|
|
|
|
&--top {
|
|
top: 0;
|
|
background: linear-gradient(
|
|
$calling-background-color,
|
|
transparent 20px,
|
|
transparent
|
|
);
|
|
|
|
#{$scroll-marker-selector}__button {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
&--bottom {
|
|
bottom: 0;
|
|
background: linear-gradient(
|
|
to top,
|
|
$calling-background-color,
|
|
transparent 20px,
|
|
transparent
|
|
);
|
|
}
|
|
}
|
|
|
|
&:hover &__scroll-marker__button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__group-call-remote-participant {
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
line-height: 0;
|
|
overflow: hidden;
|
|
border-radius: 5px;
|
|
transition: top 200ms linear, left 200ms linear, width 200ms linear,
|
|
height 200ms linear;
|
|
|
|
&__remote-video {
|
|
// The background-color is seen while the video loads.
|
|
background-color: $color-gray-75;
|
|
}
|
|
|
|
&__blocked {
|
|
@include color-svg('../images/icons/v2/block-24.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: 3px 10px;
|
|
}
|
|
|
|
&--modal-title {
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
&--title {
|
|
@include font-caption;
|
|
background: linear-gradient(
|
|
180deg,
|
|
transparent,
|
|
$color-black-alpha-60 100%
|
|
);
|
|
bottom: 0;
|
|
display: flex;
|
|
padding: 6px;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
&--contact-name {
|
|
color: $color-white;
|
|
margin-right: 20px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&--audio-muted::after {
|
|
@include color-svg(
|
|
'../images/icons/v2/mic-off-solid-28.svg',
|
|
$color-white
|
|
);
|
|
content: '';
|
|
height: 14px;
|
|
position: absolute;
|
|
right: 6px;
|
|
width: 14px;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
&__local-preview-fullsize {
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
&__footer {
|
|
background: linear-gradient(transparent, $color-black-alpha-40);
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
z-index: 2;
|
|
|
|
&__actions {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
// This layout-only element is not ideal, but lets us keep the actions centered until
|
|
// until they'd overlap with the video, at which point they start to move.
|
|
&__local-preview-offset {
|
|
flex: 1 0;
|
|
max-width: $local-preview-width;
|
|
visibility: hidden;
|
|
}
|
|
|
|
&__local-preview {
|
|
border-radius: 5px;
|
|
display: flex;
|
|
height: $local-preview-height;
|
|
margin: 2px 16px 16px 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: $local-preview-width;
|
|
|
|
&__video {
|
|
// The background-color is seen while the video loads.
|
|
background-color: $color-gray-75;
|
|
height: 100%;
|
|
transform: rotateY(180deg);
|
|
width: 100%;
|
|
}
|
|
|
|
&--audio-muted::before {
|
|
@include color-svg(
|
|
'../images/icons/v2/mic-off-solid-28.svg',
|
|
$color-white
|
|
);
|
|
bottom: 6px;
|
|
content: '';
|
|
height: 14px;
|
|
position: absolute;
|
|
right: 6px;
|
|
width: 14px;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__controls--fadeIn {
|
|
animation: {
|
|
name: module-ongoing-call__controls--fade-in;
|
|
duration: 400ms;
|
|
timing-function: $ease-out-expo;
|
|
fill-mode: forwards;
|
|
}
|
|
}
|
|
|
|
&__controls--fadeOut {
|
|
animation: {
|
|
name: module-ongoing-call__controls--fade-out;
|
|
duration: 1200ms;
|
|
timing-function: $ease-out-expo;
|
|
fill-mode: forwards;
|
|
}
|
|
}
|
|
|
|
&__toast {
|
|
@include font-body-1-bold;
|
|
background-color: $color-gray-75;
|
|
border-radius: 8px;
|
|
color: $color-white;
|
|
max-width: 80%;
|
|
opacity: 1;
|
|
padding: 12px;
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 12px;
|
|
transition: top 200ms ease-out, opacity 200ms ease-out;
|
|
user-select: none;
|
|
z-index: 1;
|
|
|
|
&--hidden {
|
|
opacity: 0;
|
|
top: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-calling-tools {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
position: absolute;
|
|
top: calc(24px + var(--title-bar-drag-area-height));
|
|
width: 100%;
|
|
|
|
&__button {
|
|
margin-right: 25px;
|
|
}
|
|
}
|
|
|
|
.module-calling-lobby {
|
|
&__actions {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: 0 0 100px;
|
|
}
|
|
|
|
&__button {
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
width: 160px;
|
|
|
|
&[disabled] {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
// The dimensions of this element are set by JavaScript.
|
|
&__local-preview {
|
|
$transition: 200ms ease-out;
|
|
|
|
@include font-body-2;
|
|
border-radius: 8px;
|
|
color: $color-white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
transition: width $transition, height $transition;
|
|
|
|
&-container {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
justify-content: center;
|
|
margin: 24px;
|
|
overflow: hidden;
|
|
width: 90%;
|
|
}
|
|
|
|
&__video-on {
|
|
background-color: $color-gray-80;
|
|
display: block;
|
|
flex-grow: 1;
|
|
object-fit: contain;
|
|
transform: rotateY(180deg);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&__video-off {
|
|
&__icon {
|
|
@include color-svg(
|
|
'../images/icons/v2/video-off-solid-24.svg',
|
|
$color-white
|
|
);
|
|
height: 24px;
|
|
margin-bottom: 8px;
|
|
width: 24px;
|
|
}
|
|
|
|
&__text {
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__info {
|
|
color: $color-white;
|
|
margin-bottom: 36px;
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
|
|
.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: absolute;
|
|
width: 120px;
|
|
z-index: 2;
|
|
|
|
& .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%;
|
|
|
|
.module-ongoing-call__group-call-remote-participant--audio-muted::after {
|
|
display: none;
|
|
}
|
|
|
|
// The avatar image can be dragged on Windows.
|
|
.module-avatar img {
|
|
-webkit-user-drag: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
}
|
|
|
|
&--local {
|
|
bottom: 38px;
|
|
height: 32px;
|
|
position: absolute;
|
|
right: 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/v2/phone-down-28.svg',
|
|
$color-gray-75
|
|
);
|
|
height: 28px;
|
|
width: 28px;
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/phone-down-28.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
&--pip {
|
|
@include color-svg(
|
|
'../images/icons/v2/pip-maximize-24.svg',
|
|
$color-gray-75
|
|
);
|
|
height: 24px;
|
|
width: 24px;
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/pip-maximize-24.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-calling-participants-list {
|
|
background-color: $color-gray-80;
|
|
border-radius: 8px;
|
|
color: $color-white;
|
|
margin-right: 12px;
|
|
margin-top: 54px;
|
|
overflow: hidden;
|
|
padding: 14px;
|
|
width: 280px;
|
|
padding-bottom: 0;
|
|
|
|
&__overlay {
|
|
display: flex;
|
|
height: 100vh;
|
|
justify-content: flex-end;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100vw;
|
|
z-index: 2;
|
|
}
|
|
|
|
&__title {
|
|
@include font-body-2-bold;
|
|
}
|
|
|
|
&__contact-icon {
|
|
background-color: $color-gray-25;
|
|
}
|
|
|
|
&__list {
|
|
height: 100%;
|
|
margin-bottom: 0;
|
|
margin-left: -14px;
|
|
margin-right: -14px;
|
|
margin-top: 22px;
|
|
overflow: scroll;
|
|
padding-bottom: 24px;
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
padding-top: 0;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
border: none;
|
|
border-radius: 4px;
|
|
background-color: $color-gray-45;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background-color: $color-gray-80;
|
|
}
|
|
}
|
|
|
|
&__contact {
|
|
@include font-body-1;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
list-style-type: none;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
&__name {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
max-width: 130px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&__close {
|
|
@include button-reset;
|
|
|
|
@include color-svg('../images/x-shadow-16.svg', $color-gray-15);
|
|
|
|
height: 16px;
|
|
width: 16px;
|
|
z-index: 2;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
outline: 2px solid $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__muted {
|
|
&--video {
|
|
@include color-svg(
|
|
'../images/icons/v2/video-off-solid-28.svg',
|
|
$color-white
|
|
);
|
|
display: inline-block;
|
|
margin-left: 18px;
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
&--audio {
|
|
@include color-svg(
|
|
'../images/icons/v2/mic-off-solid-28.svg',
|
|
$color-white
|
|
);
|
|
display: inline-block;
|
|
margin-left: 18px;
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: relative;
|
|
width: 100%;
|
|
|
|
&__text {
|
|
margin: 2em 1em;
|
|
max-width: 400px;
|
|
@include font-body-1;
|
|
text-align: center;
|
|
}
|
|
|
|
&__button {
|
|
padding: 0.5em 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 {
|
|
scroll-behavior: smooth;
|
|
|
|
&__item {
|
|
&--archive-button {
|
|
@include button-reset;
|
|
|
|
@include font-body-1-bold;
|
|
|
|
height: 64px;
|
|
line-height: 64px;
|
|
text-align: center;
|
|
width: 100%;
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
&__archived-count {
|
|
@include font-body-2-bold;
|
|
|
|
padding: 6px;
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
border-radius: 10px;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
background-color: $color-gray-05;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
background-color: $color-gray-75;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--contact-or-conversation {
|
|
@include button-reset;
|
|
|
|
align-items: center;
|
|
cursor: inherit;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
user-select: none;
|
|
width: 100%;
|
|
|
|
&--is-button {
|
|
cursor: pointer;
|
|
|
|
&:disabled {
|
|
cursor: inherit;
|
|
}
|
|
|
|
&:hover:not(:disabled),
|
|
&:focus:not(:disabled) {
|
|
@include light-theme {
|
|
background-color: $color-gray-05;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--is-checkbox {
|
|
cursor: pointer;
|
|
|
|
&--disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
$disabled-selector: '#{&}--disabled';
|
|
&:hover:not(#{$disabled-selector}),
|
|
&:focus:not(#{$disabled-selector}) {
|
|
@include light-theme {
|
|
background-color: $color-gray-05;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--has-unread {
|
|
padding-left: 12px;
|
|
|
|
@include light-theme {
|
|
border-left: 4px solid $ultramarine-ui-light;
|
|
}
|
|
|
|
@include dark-theme {
|
|
border-left: 4px solid $ultramarine-ui-dark;
|
|
}
|
|
}
|
|
|
|
&--is-selected {
|
|
@include light-theme {
|
|
background-color: $color-gray-15;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-65;
|
|
}
|
|
}
|
|
|
|
&__avatar-container {
|
|
position: relative;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
&__unread-count {
|
|
text-align: center;
|
|
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
|
|
position: absolute;
|
|
right: -6px;
|
|
top: 0px;
|
|
|
|
@include font-caption-bold;
|
|
|
|
height: 20px;
|
|
min-width: 20px;
|
|
line-height: 20px;
|
|
border-radius: 10px;
|
|
|
|
color: $color-white;
|
|
|
|
@include light-theme {
|
|
background-color: $ultramarine-ui-light;
|
|
box-shadow: 0px 0px 0px 1px $color-gray-02;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $ultramarine-ui-dark;
|
|
box-shadow: 0px 0px 0px 1px $color-gray-90;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
flex-grow: 1;
|
|
margin-left: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
overflow: hidden;
|
|
|
|
&--disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&__header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
&__name {
|
|
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;
|
|
}
|
|
}
|
|
|
|
&__date {
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
|
|
&--has-unread {
|
|
@include font-caption-bold;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
&__timestamp {
|
|
flex-shrink: 0;
|
|
margin-left: 6px;
|
|
|
|
@include font-caption;
|
|
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
|
|
&--with-unread {
|
|
@include font-caption-bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__message {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
&__text {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
|
|
@include font-body-2;
|
|
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
text-align: left;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
|
|
&--has-unread {
|
|
@include font-body-2-bold;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
&__muted {
|
|
display: inline-block;
|
|
height: 14px;
|
|
margin-right: 4px;
|
|
vertical-align: middle;
|
|
width: 14px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/sound-off-outline-24.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/sound-off-outline-24.svg',
|
|
$color-gray-25
|
|
);
|
|
}
|
|
}
|
|
|
|
&__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-right: 3px;
|
|
}
|
|
|
|
&__status-icon {
|
|
flex-shrink: 0;
|
|
|
|
margin-top: 2px;
|
|
width: 12px;
|
|
height: 12px;
|
|
display: inline-block;
|
|
margin-left: 6px;
|
|
|
|
@mixin normal-status-icon($icon) {
|
|
@include light-theme {
|
|
@include color-svg($icon, $color-gray-25);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg($icon, $color-gray-45);
|
|
}
|
|
}
|
|
|
|
&--sending {
|
|
animation: module-conversation-list__item--contact-or-conversation__contact__message__text__status-icon--spinning
|
|
4s linear infinite;
|
|
@include light-theme {
|
|
@include color-svg('../images/sending.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/sending.svg', $color-gray-45);
|
|
}
|
|
}
|
|
|
|
&--sent {
|
|
@include normal-status-icon(
|
|
'../images/check-circle-outline.svg'
|
|
);
|
|
}
|
|
|
|
&--delivered {
|
|
@include normal-status-icon('../images/double-check.svg');
|
|
width: 18px;
|
|
}
|
|
|
|
&--read {
|
|
@include normal-status-icon('../images/read.svg');
|
|
width: 18px;
|
|
}
|
|
|
|
&--error,
|
|
&--partial-sent {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/error-outline-12.svg',
|
|
$color-accent-red
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/error-solid-12.svg',
|
|
$color-accent-red
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__message-search-result-contents {
|
|
display: -webkit-box;
|
|
white-space: initial;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
|
|
// Note: -webkit-line-clamp doesn't work for RTL text, and it forces you to use
|
|
// ... as the truncation indicator. That's not a solution that works well for
|
|
// all languages. More resources:
|
|
// - http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
|
|
// - https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5
|
|
}
|
|
|
|
&__start-new-conversation {
|
|
@include font-body-1-italic;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__checkbox {
|
|
-webkit-appearance: none;
|
|
background: $color-white;
|
|
border-radius: 100%;
|
|
height: 20px;
|
|
margin-left: 16px;
|
|
margin-right: 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: $ultramarine-ui-light;
|
|
&:checked {
|
|
box-shadow: inset 0 0 0px 1px $color-white;
|
|
}
|
|
}
|
|
}
|
|
@include dark-keyboard-mode {
|
|
&:focus {
|
|
border-width: 2px;
|
|
border-color: $ultramarine-ui-dark;
|
|
|
|
&:checked {
|
|
box-shadow: inset 0 0 0px 1px $color-black;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&:checked {
|
|
background: $ultramarine-ui-light;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
@include color-svg('../images/icons/v2/check-24.svg', $color-white);
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&--header {
|
|
@include font-body-1-bold;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding-left: 16px;
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
&--spinner {
|
|
width: 100%;
|
|
padding: 10px;
|
|
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes module-conversation-list__item--contact-or-conversation__contact__message__text__status-icon--spinning {
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
// Module: Left Pane
|
|
|
|
.module-left-pane {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
|
|
width: $left-pane-width;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.module-left-pane__header {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
|
|
&__contents {
|
|
height: calc(#{$header-height} + var(--title-bar-drag-area-height));
|
|
width: 100%;
|
|
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-top: var(--title-bar-drag-area-height);
|
|
|
|
&__back-button {
|
|
@include button-reset;
|
|
|
|
margin-left: 7px;
|
|
margin-right: 5px;
|
|
|
|
width: 24px;
|
|
height: 24px;
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/chevron-left-24.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
@include color-svg(
|
|
'../images/icons/v2/chevron-left-24.svg',
|
|
$ultramarine-ui-light
|
|
);
|
|
}
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/chevron-left-24.svg',
|
|
$color-gray-25
|
|
);
|
|
}
|
|
@include dark-keyboard-mode {
|
|
&:hover {
|
|
@include color-svg(
|
|
'../images/icons/v2/chevron-left-24.svg',
|
|
$ultramarine-ui-dark
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__text {
|
|
@include font-body-1-bold;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.module-left-pane__archive-helper-text {
|
|
@include font-body-2;
|
|
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
|
|
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-left: 1em;
|
|
padding-right: 1em;
|
|
width: 100%;
|
|
text-align: center;
|
|
outline: none;
|
|
}
|
|
|
|
.module-left-pane__compose-search-form {
|
|
display: flex;
|
|
padding: 8px 16px;
|
|
margin-bottom: 8px;
|
|
|
|
&__input {
|
|
flex-grow: 1;
|
|
|
|
padding: 5px 12px;
|
|
|
|
border-radius: 17px;
|
|
border: none;
|
|
|
|
@include font-body-1;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-05;
|
|
color: $color-gray-90;
|
|
border: solid 1px $color-gray-02;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
background-color: $color-gray-95;
|
|
border: solid 1px $color-gray-80;
|
|
}
|
|
|
|
&:placeholder {
|
|
color: $color-gray-45;
|
|
}
|
|
|
|
&:focus {
|
|
border: solid 1px $ultramarine-ui-light;
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
left: 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: Timeline Loading Row
|
|
|
|
.module-timeline-loading-row {
|
|
height: 48px;
|
|
padding: 12px;
|
|
|
|
display: flex;
|
|
flex-direction: columns;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-75;
|
|
}
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
// Module: Timeline
|
|
|
|
.module-timeline {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.module-timeline--disabled {
|
|
user-select: none;
|
|
}
|
|
|
|
.module-timeline__message-container {
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.ReactVirtualized__List {
|
|
outline: none;
|
|
}
|
|
|
|
// Module: CompositionPopper
|
|
|
|
%module-composition-popper {
|
|
width: 332px;
|
|
border-radius: 8px;
|
|
margin-bottom: 6px;
|
|
z-index: 2;
|
|
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: SafetyNumberChangeDialog
|
|
|
|
.module-sfn-dialog__title {
|
|
@include font-body-1-bold;
|
|
text-align: center;
|
|
|
|
@include dark-theme {
|
|
color: $color-white;
|
|
}
|
|
}
|
|
|
|
.module-sfn-dialog__message {
|
|
@include font-body-2;
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
.module-sfn-dialog__contacts {
|
|
list-style-type: none;
|
|
max-height: 300px;
|
|
overflow-y: scroll;
|
|
padding: 0;
|
|
}
|
|
|
|
.module-sfn-dialog__contact {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 16px;
|
|
|
|
&--wrapper {
|
|
flex-grow: 1;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
&--name {
|
|
@include font-body-1-bold;
|
|
|
|
@include dark-theme {
|
|
color: $color-white;
|
|
}
|
|
}
|
|
|
|
&--number {
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
&--view {
|
|
@include font-body-1-bold;
|
|
background: inherit;
|
|
border: none;
|
|
cursor: pointer;
|
|
margin-right: 2px;
|
|
outline: none;
|
|
padding: 8px 14px;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
@include light-theme {
|
|
color: $ultramarine-ui-light;
|
|
}
|
|
|
|
@include dark-theme {
|
|
color: $ultramarine-ui-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-sfn-dialog__actions {
|
|
border-top: 1px solid $color-gray-05;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-left: -16px;
|
|
margin-right: -16px;
|
|
margin-top: -14px;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
padding-top: 16px;
|
|
|
|
&--cancel {
|
|
@include font-body-1-bold;
|
|
border: none;
|
|
border-radius: 4px;
|
|
outline: none;
|
|
padding: 7px 14px;
|
|
|
|
@include mouse-mode {
|
|
&:hover {
|
|
background: $color-gray-15;
|
|
}
|
|
}
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-05;
|
|
color: $ultramarine-ui-light;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-75;
|
|
color: $ultramarine-ui-dark;
|
|
}
|
|
}
|
|
|
|
&--confirm {
|
|
@include font-body-1-bold;
|
|
background: $ultramarine-ui-light;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: $color-white;
|
|
margin-left: 12px;
|
|
outline: none;
|
|
padding: 7px 14px;
|
|
|
|
@include mouse-mode {
|
|
&:hover {
|
|
background: $ultramarine-brand-dark;
|
|
}
|
|
}
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-brand-dark;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Safety Number verification */
|
|
|
|
.module-safety-number {
|
|
&__icon {
|
|
height: 1.25em;
|
|
width: 1.25em;
|
|
vertical-align: text-bottom;
|
|
display: inline-block;
|
|
}
|
|
|
|
&__verification-label {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
&__icon--verified {
|
|
display: inline-block;
|
|
height: 1.25em;
|
|
margin-right: 4px;
|
|
vertical-align: text-bottom;
|
|
width: 1.25em;
|
|
|
|
@include light-theme {
|
|
-webkit-mask: url('../images/icons/v2/check-24.svg') no-repeat center;
|
|
-webkit-mask-size: 100%;
|
|
background-color: #121212;
|
|
}
|
|
|
|
@include dark-theme {
|
|
-webkit-mask: url('../images/icons/v2/check-24.svg') no-repeat center;
|
|
-webkit-mask-size: 100%;
|
|
background-color: #f6f6f6;
|
|
}
|
|
}
|
|
|
|
&__icon--shield {
|
|
display: inline-block;
|
|
height: 1.25em;
|
|
margin-right: 4px;
|
|
vertical-align: text-bottom;
|
|
width: 1.25em;
|
|
|
|
@include light-theme {
|
|
-webkit-mask: url('../images/icons/v2/safety-number-outline-24.svg')
|
|
no-repeat center;
|
|
-webkit-mask-size: 100%;
|
|
background-color: #121212;
|
|
}
|
|
|
|
@include dark-theme {
|
|
-webkit-mask: url('../images/icons/v2/safety-number-solid-24.svg')
|
|
no-repeat center;
|
|
-webkit-mask-size: 100%;
|
|
background-color: #f6f6f6;
|
|
}
|
|
}
|
|
|
|
&__verify-container {
|
|
text-align: center;
|
|
}
|
|
|
|
&__button--verify {
|
|
border-radius: 5px;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
outline: none;
|
|
padding: 10px;
|
|
}
|
|
|
|
&__number {
|
|
background: #f6f6f6;
|
|
border-radius: 5px;
|
|
border: solid 1px #dedede;
|
|
font-family: monospace;
|
|
margin: 20px auto 20px auto;
|
|
padding: 10px;
|
|
text-align: center;
|
|
width: 16em;
|
|
|
|
@include dark-theme {
|
|
background: #1b1b1b;
|
|
border: solid 1px #848484;
|
|
color: #f6f6f6;
|
|
}
|
|
}
|
|
|
|
&__verification-status {
|
|
margin: 30px 0 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
&__close-button {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
button {
|
|
background: inherit;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
border: 1px solid $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display: inline-block;
|
|
height: 24px;
|
|
width: 24px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-05);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: StickerPicker
|
|
|
|
.module-sticker-picker {
|
|
@extend %module-composition-popper;
|
|
height: 400px;
|
|
display: grid;
|
|
grid-template-rows: 44px 1fr;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.module-sticker-picker__header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 0 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;
|
|
transform: translateX(0);
|
|
transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
}
|
|
|
|
.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-right: 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/v2/recent-outline-20.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/recent-solid-20.svg',
|
|
$color-gray-25
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--add-pack {
|
|
&::after {
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/plus-20.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/plus-20.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;
|
|
left: 0;
|
|
|
|
&::after {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/chevron-left-16.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/chevron-left-16.svg',
|
|
$color-gray-25
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--next-page {
|
|
position: absolute;
|
|
right: 0;
|
|
|
|
&::after {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/chevron-right-16.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/chevron-right-16.svg',
|
|
$color-gray-25
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--error {
|
|
position: relative;
|
|
|
|
&::before {
|
|
display: block;
|
|
content: '';
|
|
width: 12px;
|
|
height: 12px;
|
|
position: absolute;
|
|
left: 14px;
|
|
top: 2px;
|
|
@include color-svg(
|
|
'../images/icons/v2/error-solid-24.svg',
|
|
$color-accent-red
|
|
);
|
|
}
|
|
}
|
|
|
|
&--hint {
|
|
position: relative;
|
|
&::before {
|
|
display: block;
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 7px;
|
|
background: $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
&__content {
|
|
width: 332px;
|
|
height: 356px;
|
|
padding: 8px 20px 16px 16px;
|
|
overflow-y: auto;
|
|
display: grid;
|
|
grid-gap: 8px;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-auto-rows: 68px;
|
|
|
|
&--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: 8px 16px 12px 0;
|
|
|
|
@include light-theme() {
|
|
color: $color-gray-60;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
color: $color-gray-25;
|
|
}
|
|
|
|
&:only-child {
|
|
padding: 0 0 28px 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: $ultramarine-ui-light;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
color: $ultramarine-ui-dark;
|
|
}
|
|
}
|
|
|
|
&--pin {
|
|
padding: 8px 16px 12px 0px;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: StickerManager
|
|
|
|
.module-sticker-manager {
|
|
padding: 0 16px;
|
|
outline: none;
|
|
}
|
|
|
|
.module-sticker-manager__text {
|
|
height: 18px;
|
|
|
|
letter-spacing: 0px;
|
|
line-height: 18px;
|
|
|
|
@include light-theme() {
|
|
color: $color-gray-60;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
color: $color-gray-25;
|
|
}
|
|
|
|
&--heading {
|
|
@include font-body-1-bold;
|
|
|
|
@include light-theme() {
|
|
color: $color-gray-90;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-sticker-manager__empty {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 64px;
|
|
border-radius: 8px;
|
|
|
|
@include light-theme {
|
|
background: $color-gray-02;
|
|
color: $color-gray-60;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background: $color-gray-90;
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
%blessed-sticker-pack-icon {
|
|
height: 14px;
|
|
width: 14px;
|
|
border-radius: 8px;
|
|
background-color: $color-white;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin: {
|
|
left: 5px;
|
|
bottom: 2px;
|
|
}
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/check-circle-solid-24.svg',
|
|
$color-accent-blue
|
|
);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/check-circle-solid-24.svg',
|
|
$color-accent-blue
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-sticker-manager__pack-row {
|
|
@include button-reset;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 16px;
|
|
|
|
@include light-theme {
|
|
& + & {
|
|
border-top: 1px solid $color-gray-15;
|
|
}
|
|
}
|
|
|
|
@include dark-theme {
|
|
& + & {
|
|
border-top: 1px solid $color-gray-75;
|
|
}
|
|
}
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
&__cover {
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: contain;
|
|
}
|
|
&__cover-placeholder {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: $color-gray-05;
|
|
}
|
|
|
|
&__meta {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&:not(:first-child) {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
&__title {
|
|
flex: 1;
|
|
}
|
|
|
|
&__author {
|
|
flex: 1;
|
|
|
|
@include light-theme() {
|
|
color: $color-gray-45;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
&__blessed-icon {
|
|
@extend %blessed-sticker-pack-icon;
|
|
}
|
|
}
|
|
|
|
&__controls {
|
|
flex-shrink: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&__button {
|
|
background: none;
|
|
border: 0;
|
|
&--menu {
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
min-width: 24px;
|
|
min-height: 24px;
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/more-horiz-24.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/more-horiz-24.svg',
|
|
$color-gray-25
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-sticker-manager__install-button {
|
|
background: none;
|
|
border: 0;
|
|
color: $color-gray-90;
|
|
|
|
@include font-body-1-bold;
|
|
|
|
height: 24px;
|
|
background: $color-gray-05;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
background: $color-gray-75;
|
|
}
|
|
|
|
@include mouse-mode {
|
|
outline: none;
|
|
}
|
|
|
|
&--blue {
|
|
@include light-theme {
|
|
background: $ultramarine-ui-light;
|
|
color: $color-white;
|
|
}
|
|
@include dark-theme {
|
|
background: $ultramarine-ui-dark;
|
|
color: $color-white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-sticker-manager__preview-modal {
|
|
&__overlay {
|
|
background: $color-black-alpha-40;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 5;
|
|
}
|
|
|
|
&__container {
|
|
position: relative;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px 0 $color-black-alpha-20;
|
|
width: 440px;
|
|
height: 360px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@include light-theme {
|
|
background: $color-white;
|
|
}
|
|
@include dark-theme {
|
|
background: $color-gray-75;
|
|
}
|
|
|
|
&__error {
|
|
color: $color-accent-red;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 80px 30px 80px;
|
|
|
|
@include font-body-1-bold;
|
|
}
|
|
|
|
&__header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-shrink: 0;
|
|
height: 36px;
|
|
padding: 0 8px 0 16px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
&__text {
|
|
@include font-body-1-bold;
|
|
|
|
color: $color-gray-90;
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
&__close-button {
|
|
border: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-05);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__sticker-grid {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-gap: 8px;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
overflow-y: auto;
|
|
padding: 0 16px;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
height: 80px;
|
|
grid-column: 1 / span 4;
|
|
}
|
|
|
|
&__cell {
|
|
width: 96px;
|
|
height: 96px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&__image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
&--placeholder {
|
|
border-radius: 4px;
|
|
|
|
@include light-theme() {
|
|
background: $color-gray-05;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
background: $color-gray-60;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__meta-overlay {
|
|
border-radius: 4px;
|
|
width: 408px;
|
|
height: 52px;
|
|
position: absolute;
|
|
left: 16px;
|
|
bottom: 16px;
|
|
padding: 0 12px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
@include light-theme {
|
|
background: $color-gray-05;
|
|
}
|
|
|
|
@include dark-theme {
|
|
background: $color-gray-60;
|
|
}
|
|
|
|
&__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
|
|
&__title {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
@include font-body-1-bold;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
&__author {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-45;
|
|
}
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
&__blessed-icon {
|
|
@extend %blessed-sticker-pack-icon;
|
|
}
|
|
}
|
|
|
|
&__install {
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Sticker button (launches the sticker picker)
|
|
|
|
.sticker-button-wrapper {
|
|
height: 36px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.module-sticker-button__button {
|
|
border: 0;
|
|
background: none;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
opacity: 0.5;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
outline: none;
|
|
|
|
&::after {
|
|
display: block;
|
|
content: '';
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/sticker-outline-24.svg',
|
|
$color-gray-75
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/sticker-solid-24.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: 7px 12px;
|
|
border-radius: 8px;
|
|
margin-bottom: 6px;
|
|
z-index: 1;
|
|
|
|
@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-left: 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: 0 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: 20px;
|
|
height: 20px;
|
|
border: none;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-05);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: confirmation dialog
|
|
.module-confirmation-dialog {
|
|
&__overlay {
|
|
background: $color-black-alpha-40;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// THIS Z-INDEX IS OVER NINE THOUSAND. OVER NINE THOUSAND?! THAT CAN'T BE!
|
|
z-index: 9001;
|
|
}
|
|
|
|
&__container {
|
|
width: 360px;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
@include popper-shadow();
|
|
|
|
@include light-theme() {
|
|
background: $color-white;
|
|
color: $color-gray-90;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
background: $color-gray-80;
|
|
color: $color-gray-05;
|
|
}
|
|
|
|
&__title {
|
|
@include font-body-1-bold;
|
|
}
|
|
|
|
&__content {
|
|
@include font-body-1;
|
|
}
|
|
|
|
&__buttons {
|
|
margin-top: 22px;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
|
|
&__button {
|
|
margin-left: 4px;
|
|
border-radius: 17px;
|
|
height: 34px;
|
|
padding: 5px 12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
@include font-body-1-bold;
|
|
|
|
@include mouse-mode {
|
|
outline: none;
|
|
}
|
|
|
|
@include light-theme() {
|
|
background: $color-white;
|
|
color: $color-gray-60;
|
|
border: 1px solid $color-gray-60;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
background: $color-gray-75;
|
|
color: $color-gray-25;
|
|
border: 1px solid $color-gray-25;
|
|
}
|
|
|
|
&--negative {
|
|
@include light-theme() {
|
|
border: none;
|
|
background: $color-accent-red;
|
|
color: $color-white;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
border: none;
|
|
background: $color-accent-red;
|
|
color: $color-white;
|
|
}
|
|
}
|
|
|
|
&--affirmative {
|
|
@include light-theme() {
|
|
border: none;
|
|
background: $color-accent-green;
|
|
color: $color-white;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
border: none;
|
|
background: $color-accent-green;
|
|
color: $color-white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-left-pane-dialog {
|
|
background: $color-accent-green;
|
|
color: $color-white;
|
|
padding: 16px;
|
|
|
|
.module-left-pane-dialog__message {
|
|
h3 {
|
|
@include font-body-1-bold;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
margin-bottom: 8px;
|
|
}
|
|
span {
|
|
@include font-body-1;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.module-left-pane-dialog__actions {
|
|
margin-top: 8px;
|
|
text-align: right;
|
|
|
|
.module-left-pane-dialog__link {
|
|
@include keyboard-mode {
|
|
display: inline-block;
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
button {
|
|
background: inherit;
|
|
border-radius: 20px;
|
|
border: solid 1px $color-white;
|
|
color: $color-white;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
margin: 0 4px;
|
|
padding: 8px 16px;
|
|
outline: 0;
|
|
|
|
&:focus {
|
|
@include keyboard-mode {
|
|
box-shadow: 0 0 0 3px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
@include mouse-mode {
|
|
box-shadow: 0 0 0 3px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-left-pane-dialog__button--no-border {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
&.module-left-pane-dialog--error {
|
|
background-color: $color-accent-red;
|
|
}
|
|
|
|
&.module-left-pane-dialog--warning {
|
|
background-color: $color-accent-yellow;
|
|
color: $color-black;
|
|
|
|
button {
|
|
border-color: $color-black;
|
|
color: $color-black;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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: 0 12px;
|
|
|
|
&__search-field {
|
|
flex-grow: 1;
|
|
margin-left: 8px;
|
|
position: relative;
|
|
|
|
@include font-body-2;
|
|
|
|
&::after {
|
|
display: block;
|
|
content: '';
|
|
width: 16px;
|
|
height: 16px;
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 6px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/search-16.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/search-16.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: 0 8px 0 30px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
@include light-theme {
|
|
background: $color-white;
|
|
color: $color-gray-90;
|
|
border-color: $color-gray-60;
|
|
|
|
&:focus {
|
|
border-color: $ultramarine-ui-light;
|
|
}
|
|
|
|
&:placeholder {
|
|
color: $color-gray-45;
|
|
}
|
|
}
|
|
|
|
@include dark-theme {
|
|
border-color: $color-gray-25;
|
|
background: $color-gray-75;
|
|
color: $color-gray-05;
|
|
|
|
&:focus {
|
|
border-color: $ultramarine-ui-light;
|
|
}
|
|
|
|
&:placeholder {
|
|
color: $color-gray-45;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
@extend %module-emoji-picker--ribbon;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__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(:first-of-type) {
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
|
|
&--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/v2/search-16.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/search-16.svg',
|
|
$color-gray-25
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--close {
|
|
&::after {
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-25);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--recents {
|
|
&::after {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/recent-outline-20.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/recent-solid-20.svg',
|
|
$color-gray-25
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--emoji {
|
|
&::after {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/emoji-smiley-outline-20.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/emoji-smiley-solid-20.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/v2/emoji-#{$cat}-outline-20.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/emoji-#{$cat}-solid-20.svg',
|
|
$color-gray-25
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
padding: 8px 16px 0 12px;
|
|
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: 0 6px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.module-emoji-button__button {
|
|
border: 0;
|
|
background: none;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
opacity: 0.5;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
outline: none;
|
|
|
|
&::after {
|
|
display: block;
|
|
content: '';
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/emoji-smiley-outline-24.svg',
|
|
$color-gray-75
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/emoji-smiley-solid-24.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
&--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;
|
|
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: Unsupported Message
|
|
|
|
.module-unsupported-message {
|
|
text-align: center;
|
|
}
|
|
|
|
.module-unsupported-message__icon {
|
|
height: 24px;
|
|
width: 24px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 7px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/error-outline-24.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/error-solid-24.svg', $color-gray-25);
|
|
}
|
|
}
|
|
|
|
.module-unsupported-message__icon--can-process {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/check-circle-outline-24.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/check-circle-solid-24.svg',
|
|
$color-gray-25
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-unsupported-message__text {
|
|
max-width: 396px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
.module-unsupported-message__contact {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.module-unsupported-message__button {
|
|
@include button-reset;
|
|
|
|
margin-top: 5px;
|
|
display: inline-block;
|
|
|
|
@include font-body-1-bold;
|
|
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
|
|
@include light-theme {
|
|
color: $ultramarine-ui-light;
|
|
background-color: $color-gray-02;
|
|
}
|
|
@include dark-theme {
|
|
color: $ultramarine-ui-dark;
|
|
background-color: $color-gray-75;
|
|
}
|
|
}
|
|
|
|
// Module: Countdown
|
|
|
|
.module-countdown {
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
// Note: the colors here should match the module-spinner's on-background colors
|
|
.module-countdown__front-path {
|
|
fill-opacity: 0;
|
|
stroke-width: 2;
|
|
|
|
@include light-theme {
|
|
stroke: $color-gray-60;
|
|
}
|
|
|
|
@include dark-theme {
|
|
stroke: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
.module-countdown__back-path {
|
|
fill-opacity: 0;
|
|
stroke-width: 2;
|
|
|
|
@include light-theme {
|
|
stroke: $color-gray-05;
|
|
}
|
|
|
|
@include dark-theme {
|
|
stroke: $color-gray-75;
|
|
}
|
|
}
|
|
|
|
// Module: CompositionInput
|
|
.module-composition-input {
|
|
&__quill {
|
|
height: 100%;
|
|
|
|
.ql-editor {
|
|
caret-color: transparent;
|
|
padding: 0;
|
|
text-align: start;
|
|
|
|
&--loaded {
|
|
caret-color: auto;
|
|
}
|
|
|
|
&.ql-blank::before {
|
|
left: 0;
|
|
right: 0;
|
|
font-style: normal;
|
|
}
|
|
|
|
.emoji-blot {
|
|
width: 20px;
|
|
height: 20px;
|
|
vertical-align: text-bottom;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__at-mention {
|
|
background-color: $color-gray-20;
|
|
border-radius: 4px;
|
|
display: inline;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
height: 22px;
|
|
line-height: 22px;
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-60;
|
|
}
|
|
}
|
|
|
|
&__input {
|
|
border: none;
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
word-break: break-word;
|
|
|
|
// Override Quill styles
|
|
.ql-container {
|
|
@include font-body-1;
|
|
}
|
|
|
|
.ql-blank::before {
|
|
color: $color-gray-45;
|
|
}
|
|
|
|
@include light-theme() {
|
|
// Same as background color
|
|
border: 1px solid $color-white;
|
|
background-color: $color-gray-05;
|
|
color: $color-gray-90;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
// Same as background color
|
|
border: 1px solid $color-gray-95;
|
|
background-color: $color-gray-75;
|
|
color: $color-gray-05;
|
|
}
|
|
|
|
&__scroller {
|
|
padding: 7px 12px;
|
|
min-height: 32px;
|
|
max-height: 80px;
|
|
overflow: auto;
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
@include light-theme {
|
|
border: 2px solid $color-gray-05;
|
|
}
|
|
@include dark-theme {
|
|
border: 2px solid $color-gray-75;
|
|
}
|
|
}
|
|
|
|
&--large {
|
|
max-height: 227px;
|
|
min-height: 227px;
|
|
|
|
.DraftEditor-root {
|
|
height: 227px - 2 * 7px; // subtract padding
|
|
}
|
|
}
|
|
}
|
|
|
|
&:focus-within {
|
|
@include light-theme() {
|
|
border: 1px solid $ultramarine-ui-light;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
border: 1px solid $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__suggestions {
|
|
padding: 0;
|
|
margin-bottom: 6px;
|
|
border-radius: 8px;
|
|
z-index: 2;
|
|
overflow: hidden;
|
|
|
|
&--scroller {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@include popper-shadow();
|
|
|
|
@include light-theme() {
|
|
background: $color-white;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
background: $color-gray-75;
|
|
}
|
|
|
|
&__row {
|
|
height: 34px;
|
|
padding: 0 12px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
background: none;
|
|
border: none;
|
|
width: 100%;
|
|
|
|
&--mention {
|
|
height: 40px;
|
|
}
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
@include font-body-2;
|
|
|
|
@include light-theme() {
|
|
color: $color-gray-60;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
color: $color-gray-25;
|
|
}
|
|
|
|
&__short-name {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
&--selected,
|
|
&:hover {
|
|
@include light-theme() {
|
|
background: $color-gray-05;
|
|
color: $color-gray-90;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
background: $color-gray-60;
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
stroke: $color-white;
|
|
}
|
|
}
|
|
|
|
// Module: CompositionArea
|
|
.module-composition-area {
|
|
position: relative;
|
|
min-height: 42px;
|
|
padding-top: 6px;
|
|
|
|
&__row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
&--center {
|
|
justify-content: center;
|
|
}
|
|
&--padded {
|
|
padding: 0 12px;
|
|
}
|
|
&--control-row {
|
|
margin-top: 8px;
|
|
}
|
|
&--column {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
&__button-cell {
|
|
margin-top: 2px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 40px;
|
|
height: 100%;
|
|
flex-shrink: 0;
|
|
&--mic-active {
|
|
width: 150px;
|
|
}
|
|
&--large-right {
|
|
margin-left: auto;
|
|
margin-right: 4px;
|
|
}
|
|
&--large-right-mic-active {
|
|
margin-left: auto;
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
&__send-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: none;
|
|
border: none;
|
|
&::after {
|
|
display: block;
|
|
content: '';
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
@include color-svg(
|
|
'../images/icons/v2/send-24.svg',
|
|
$ultramarine-ui-light
|
|
);
|
|
}
|
|
}
|
|
&__input {
|
|
flex-grow: 1;
|
|
}
|
|
$comp-area: &;
|
|
&__toggle-large {
|
|
width: 48px;
|
|
height: 24px;
|
|
position: absolute;
|
|
left: calc(50% - 24px);
|
|
top: -18px;
|
|
border-radius: 12px 12px 0 0;
|
|
pointer-events: none;
|
|
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-out;
|
|
|
|
#{$comp-area}:hover & {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
|
|
@include light-theme() {
|
|
background-color: $color-white;
|
|
}
|
|
|
|
@include dark-theme() {
|
|
background-color: $color-gray-95;
|
|
}
|
|
|
|
&__button {
|
|
width: 48px;
|
|
height: 24px;
|
|
border: none;
|
|
|
|
@include light-theme() {
|
|
@include color-svg(
|
|
'../images/icons/v2/expand-up-20.svg',
|
|
$color-gray-45,
|
|
false
|
|
);
|
|
}
|
|
|
|
@include dark-theme() {
|
|
@include color-svg(
|
|
'../images/icons/v2/expand-up-20.svg',
|
|
$color-gray-45,
|
|
false
|
|
);
|
|
}
|
|
|
|
&--large-active {
|
|
@include light-theme() {
|
|
@include color-svg(
|
|
'../images/icons/v2/collapse-down-20.svg',
|
|
$color-gray-45,
|
|
false
|
|
);
|
|
}
|
|
|
|
@include dark-theme() {
|
|
@include color-svg(
|
|
'../images/icons/v2/collapse-down-20.svg',
|
|
$color-gray-45,
|
|
false
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__attachment-list {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.composition-area-placeholder {
|
|
flex-grow: 1;
|
|
margin: {
|
|
bottom: 6px;
|
|
}
|
|
}
|
|
|
|
// Module: Last Seen Indicator
|
|
|
|
.module-last-seen-indicator {
|
|
padding-top: 25px;
|
|
padding-bottom: 35px;
|
|
}
|
|
|
|
.module-last-seen-indicator__bar {
|
|
background-color: $color-gray-45;
|
|
width: 100%;
|
|
height: 1px;
|
|
}
|
|
|
|
.module-last-seen-indicator__text {
|
|
margin-top: 3px;
|
|
|
|
@include font-body-2-bold;
|
|
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
// Module: Scroll Down Button
|
|
|
|
.module-scroll-down {
|
|
z-index: 100;
|
|
position: absolute;
|
|
right: 20px;
|
|
bottom: 10px;
|
|
}
|
|
|
|
.module-scroll-down__button {
|
|
height: 44px;
|
|
width: 44px;
|
|
border-radius: 22px;
|
|
text-align: center;
|
|
border: none;
|
|
outline: none;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-25;
|
|
&:hover {
|
|
background-color: $color-gray-45;
|
|
}
|
|
|
|
box-shadow: 0px 3px 5px 0px $color-black-alpha-20;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-45;
|
|
&:hover {
|
|
background-color: $color-gray-25;
|
|
}
|
|
|
|
box-shadow: 0px 3px 5px 0px $color-white-alpha-20;
|
|
}
|
|
}
|
|
|
|
.module-scroll-down__button--new-messages {
|
|
background-color: $ultramarine-ui-light;
|
|
|
|
&:hover {
|
|
background-color: $ultramarine-brand-dark;
|
|
}
|
|
}
|
|
|
|
.module-scroll-down__icon {
|
|
@include color-svg('../images/icons/v2/arrow-down-24.svg', $color-white);
|
|
height: 36px;
|
|
width: 36px;
|
|
margin-left: -3px;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
// Module: Avatar Popup
|
|
|
|
.module-avatar-popup {
|
|
min-width: 240px;
|
|
|
|
border-radius: 4px;
|
|
padding-bottom: 4px;
|
|
|
|
@include popper-shadow;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
background-color: $color-white;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
background-color: $color-gray-75;
|
|
}
|
|
}
|
|
|
|
.module-avatar-popup__profile {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.module-avatar-popup__profile {
|
|
padding: 12px;
|
|
}
|
|
|
|
.module-avatar-popup__profile__text {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.module-avatar-popup__profile__name {
|
|
@include font-body-1-bold;
|
|
}
|
|
.module-avatar-popup__profile__number {
|
|
@include font-subtitle;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
.module-avatar-popup__divider {
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
height: 1px;
|
|
width: 100%;
|
|
margin-bottom: 6px;
|
|
|
|
@include light-theme {
|
|
background-color: $color-gray-15;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-60;
|
|
}
|
|
}
|
|
|
|
.module-avatar-popup__item {
|
|
@include font-body-2;
|
|
@include button-reset;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 6px;
|
|
|
|
@include light-theme {
|
|
&:hover {
|
|
background-color: $color-gray-05;
|
|
}
|
|
}
|
|
@include keyboard-mode {
|
|
&:hover {
|
|
background-color: inherit;
|
|
}
|
|
&:focus {
|
|
background-color: $color-gray-05;
|
|
}
|
|
}
|
|
@include dark-theme {
|
|
&:hover {
|
|
background-color: $color-gray-60;
|
|
}
|
|
}
|
|
@include dark-keyboard-mode {
|
|
&:hover {
|
|
background-color: inherit;
|
|
}
|
|
&:focus {
|
|
background-color: $color-gray-60;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-avatar-popup__item__icon {
|
|
margin-left: 6px;
|
|
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
.module-avatar-popup__item__icon-settings {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/settings-outline-16.svg',
|
|
$color-gray-75
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/settings-solid-16.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
.module-avatar-popup__item__icon-archive {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/archive-outline-16.svg',
|
|
$color-gray-75
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/archive-solid-16.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-avatar-popup__item__text {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
// Module: Shortcut Guide Modal
|
|
|
|
.module-shortcut-guide-modal {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
padding: 20px;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
background-color: $color-black-alpha-40;
|
|
|
|
// react-contextmenu uses a z-index of 1000
|
|
z-index: 2000;
|
|
}
|
|
|
|
.module-shortcut-guide-container {
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Module: Shortcut Guide
|
|
|
|
.module-shortcut-guide {
|
|
border-radius: 4px;
|
|
padding: 16px;
|
|
|
|
max-height: calc(100vh - 40px);
|
|
max-width: 1150px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@include popper-shadow;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
background-color: $color-white;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
background-color: $color-gray-75;
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border: 2px solid $color-gray-75;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-shortcut-guide__header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.module-shortcut-guide__header-text {
|
|
@include font-title-2;
|
|
|
|
flex-grow: 1;
|
|
}
|
|
.module-shortcut-guide__header-close {
|
|
@include button-reset;
|
|
|
|
height: 24px;
|
|
width: 24px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-05);
|
|
}
|
|
|
|
&:focus {
|
|
@include keyboard-mode {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-light);
|
|
}
|
|
@include dark-keyboard-mode {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $ultramarine-ui-dark);
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-shortcut-guide__section-header {
|
|
@include font-body-1-bold;
|
|
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.module-shortcut-guide__scroll-container {
|
|
outline: none;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.module-shortcut-guide__section {
|
|
&:not(:last-child) {
|
|
margin-bottom: 25px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 900px) {
|
|
.module-shortcut-guide__section-list {
|
|
column-count: 2;
|
|
column-gap: 20px;
|
|
column-span: none;
|
|
column-fill: auto;
|
|
}
|
|
}
|
|
|
|
.module-shortcut-guide__shortcut {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
break-inside: avoid;
|
|
|
|
padding-left: 4px;
|
|
min-height: 40px;
|
|
outline: none;
|
|
|
|
&:focus {
|
|
@include keyboard-mode {
|
|
background-color: $color-gray-05;
|
|
}
|
|
@include dark-keyboard-mode {
|
|
background-color: $color-gray-90;
|
|
}
|
|
}
|
|
|
|
@include light-theme {
|
|
border-bottom: 1px solid $color-gray-05;
|
|
}
|
|
@include dark-theme {
|
|
border-bottom: 1px solid $color-gray-90;
|
|
}
|
|
}
|
|
|
|
.module-shortcut-guide__shortcut__description {
|
|
flex-grow: 1;
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.module-shortcut-guide__shortcut__key-container {
|
|
margin-bottom: 4px;
|
|
}
|
|
.module-shortcut-guide__shortcut__key-inner-container {
|
|
text-align: right;
|
|
margin-top: 4px;
|
|
margin-right: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.module-shortcut-guide__shortcut__key {
|
|
display: inline-block;
|
|
|
|
border-radius: 2px;
|
|
padding: 3px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
margin-left: 4px;
|
|
|
|
height: 30px;
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
border: 1px solid $color-gray-15;
|
|
}
|
|
@include dark-theme {
|
|
border: 1px solid $color-gray-90;
|
|
}
|
|
}
|
|
|
|
.module-shortcut-guide__shortcut__key--square {
|
|
width: 30px;
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
// Module: Profile Change Notification
|
|
|
|
.module-profile-change-notification {
|
|
@include font-body-1;
|
|
|
|
margin-left: 2em;
|
|
margin-right: 2em;
|
|
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
.module-profile-change-notification--icon {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/profile-outline-20.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/profile-outline-20.svg',
|
|
$color-gray-05
|
|
);
|
|
}
|
|
|
|
height: 20px;
|
|
width: 20px;
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Calling: Device Selection */
|
|
|
|
.module-calling-device-selection {
|
|
position: relative;
|
|
}
|
|
|
|
.module-calling-device-selection__close-button {
|
|
@include button-reset;
|
|
|
|
@include color-svg('../images/x-shadow-16.svg', $color-white);
|
|
|
|
height: 16px;
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 0;
|
|
width: 16px;
|
|
z-index: 2;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
outline: 2px solid $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
select {
|
|
@include font-body-1;
|
|
-webkit-appearance: none;
|
|
border-radius: 4px;
|
|
border: 1px solid $color-gray-45;
|
|
cursor: pointer;
|
|
height: 40px;
|
|
outline: 0;
|
|
padding: 10px;
|
|
padding-right: 32px;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
}
|
|
|
|
&::after {
|
|
border: 2px solid $color-gray-75;
|
|
|
|
border-radius: 2px;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
content: ' ';
|
|
display: block;
|
|
height: 10px;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 16px;
|
|
transform-origin: center;
|
|
transform: rotate(-45deg);
|
|
width: 10px;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
// Module: GroupV2 Change
|
|
|
|
.module-group-v2-change {
|
|
@include font-body-1;
|
|
|
|
margin-left: 2em;
|
|
margin-right: 2em;
|
|
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
.module-group-v2-change--icon {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/group-outline-20.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/group-outline-20.svg',
|
|
$color-gray-05
|
|
);
|
|
}
|
|
|
|
height: 20px;
|
|
width: 20px;
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
// Module: GV1 Migration
|
|
|
|
.module-group-v1-migration {
|
|
@include font-body-1;
|
|
|
|
margin-left: 2em;
|
|
margin-right: 2em;
|
|
|
|
text-align: center;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
.module-group-v1-migration--icon {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/group-outline-20.svg',
|
|
$color-gray-60
|
|
);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/group-outline-20.svg',
|
|
$color-gray-05
|
|
);
|
|
}
|
|
|
|
height: 20px;
|
|
width: 20px;
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.module-group-v1-migration--text {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.module-group-v1-migration--button {
|
|
@include button-reset;
|
|
@include font-body-2-bold;
|
|
border-radius: 4px;
|
|
|
|
padding: 8px;
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
|
|
@include button-light-blue-text;
|
|
}
|
|
|
|
// Module: GroupV1 Disabled Actions
|
|
|
|
.module-group-v1-disabled-actions {
|
|
padding: 8px 16px 12px 16px;
|
|
max-width: 650px;
|
|
margin-left: auto;
|
|
margin-right: 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-left: 30px;
|
|
padding-right: 30px;
|
|
|
|
@include button-primary;
|
|
}
|
|
|
|
// Module: GroupV2 Pending Approval Actions
|
|
|
|
.module-group-v2-pending-approval-actions {
|
|
padding: 8px 16px 12px 16px;
|
|
max-width: 650px;
|
|
margin-left: auto;
|
|
margin-right: 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-left: 30px;
|
|
padding-right: 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;
|
|
position: absolute;
|
|
|
|
height: 100vh;
|
|
width: 100vw;
|
|
|
|
left: 0;
|
|
top: 0;
|
|
|
|
z-index: 2;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
overflow: hidden;
|
|
padding: 20px;
|
|
}
|
|
|
|
// Module: GroupV2 Join Dialog
|
|
|
|
.module-group-v2-join-dialog {
|
|
@include font-body-1;
|
|
border-radius: 8px;
|
|
width: 360px;
|
|
margin-left: auto;
|
|
margin-right: 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;
|
|
right: 12px;
|
|
top: 12px;
|
|
|
|
height: 24px;
|
|
width: 24px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-75);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
|
|
}
|
|
|
|
&:focus {
|
|
@include keyboard-mode {
|
|
background-color: $ultramarine-ui-light;
|
|
}
|
|
@include dark-keyboard-mode {
|
|
background-color: $ultramarine-ui-dark;
|
|
}
|
|
}
|
|
}
|
|
.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 {
|
|
text-align: center;
|
|
}
|
|
.module-group-v2-join-dialog__prompt {
|
|
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-left: 16px;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 5;
|
|
}
|
|
|
|
// 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 $ultramarine-ui-light;
|
|
}
|
|
}
|
|
|
|
@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: 7px 12px;
|
|
}
|
|
|
|
&__gray {
|
|
@include font-body-1-bold;
|
|
background-color: $color-gray-45;
|
|
border-radius: 4px;
|
|
border: none;
|
|
color: $color-white;
|
|
line-height: 24px;
|
|
outline: none;
|
|
padding: 7px 14px;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__green {
|
|
@include font-body-1-bold;
|
|
background-color: $color-accent-green;
|
|
border-radius: 4px;
|
|
border: none;
|
|
color: $color-white;
|
|
line-height: 24px;
|
|
outline: none;
|
|
padding: 7px 14px;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Group Contact Details
|
|
|
|
$contact-modal-padding: 18px;
|
|
.module-contact-modal {
|
|
@include font-body-2;
|
|
|
|
min-width: 280px;
|
|
padding: $contact-modal-padding;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
@include popper-shadow();
|
|
|
|
position: relative;
|
|
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-75;
|
|
color: $color-gray-05;
|
|
}
|
|
|
|
&__overlay {
|
|
background: $color-black-alpha-40;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 5;
|
|
}
|
|
}
|
|
|
|
.module-contact-modal__name {
|
|
@include font-title-2;
|
|
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.module-contact-modal__profile-and-number {
|
|
color: $color-gray-60;
|
|
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
.module-contact-modal__button-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
margin: 12px 0 15px -$contact-modal-padding;
|
|
width: calc(100% + (#{$contact-modal-padding} * 2));
|
|
}
|
|
|
|
.module-contact-modal__button {
|
|
@include button-reset;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 7px $contact-modal-padding;
|
|
width: 100%;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $color-gray-15;
|
|
|
|
@include dark-theme {
|
|
background-color: $color-gray-60;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
@include keyboard-mode {
|
|
background-color: $color-gray-15;
|
|
}
|
|
|
|
@include dark-keyboard-mode {
|
|
background-color: $color-gray-60;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-contact-modal__bubble-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 10px;
|
|
width: 20px;
|
|
}
|
|
|
|
.module-contact-modal__send-message__bubble-icon {
|
|
height: 16px;
|
|
width: 18px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/message-outline-24.svg',
|
|
$color-gray-75
|
|
);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/message-outline-24.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-contact-modal__safety-number__bubble-icon {
|
|
height: 18px;
|
|
width: 17px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/safety-number-outline-24.svg',
|
|
$color-gray-75
|
|
);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/safety-number-outline-24.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-contact-modal__make-admin__bubble-icon {
|
|
height: 16px;
|
|
width: 18px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/group-outline-20.svg',
|
|
$color-gray-75
|
|
);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/group-outline-20.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-contact-modal__remove-from-group__bubble-icon {
|
|
height: 16px;
|
|
width: 16px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/leave-group-outline-16.svg',
|
|
$color-gray-75
|
|
);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/leave-group-outline-16.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
.module-contact-modal__close-button {
|
|
@include button-reset;
|
|
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 12px;
|
|
|
|
width: 24px;
|
|
height: 24px;
|
|
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-75);
|
|
|
|
@include dark-theme() {
|
|
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-25);
|
|
}
|
|
|
|
&:focus {
|
|
@include keyboard-mode {
|
|
background-color: $ultramarine-ui-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-background-color {
|
|
&__default {
|
|
background-color: $color-black-alpha-40;
|
|
}
|
|
|
|
@each $color, $value in $conversation-colors {
|
|
&__#{$color} {
|
|
background-color: $value;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: 8px 21px;
|
|
position: fixed;
|
|
text-align: center;
|
|
z-index: 999;
|
|
|
|
.module-tooltip-arrow {
|
|
position: absolute;
|
|
}
|
|
|
|
.module-tooltip-arrow::after {
|
|
border: solid 6px transparent;
|
|
content: '';
|
|
display: block;
|
|
height: 0;
|
|
margin-left: -6px;
|
|
margin-top: -6px;
|
|
position: absolute;
|
|
width: 0;
|
|
}
|
|
|
|
&[data-placement='top'] {
|
|
margin-bottom: 12px;
|
|
|
|
.module-tooltip-arrow {
|
|
bottom: 0;
|
|
}
|
|
|
|
.module-tooltip-arrow::after {
|
|
bottom: -12px;
|
|
border-top-color: var(--tooltip-background-color);
|
|
}
|
|
}
|
|
|
|
&[data-placement='right'] {
|
|
margin-left: 12px;
|
|
|
|
.module-tooltip-arrow {
|
|
left: 0;
|
|
}
|
|
|
|
.module-tooltip-arrow::after {
|
|
left: -6px;
|
|
border-right-color: var(--tooltip-background-color);
|
|
}
|
|
}
|
|
|
|
&[data-placement='bottom'] {
|
|
margin-top: 12px;
|
|
|
|
.module-tooltip-arrow {
|
|
top: 0;
|
|
}
|
|
|
|
.module-tooltip-arrow::after {
|
|
top: -6px;
|
|
border-bottom-color: var(--tooltip-background-color);
|
|
}
|
|
}
|
|
|
|
&[data-placement='left'] {
|
|
margin-right: 12px;
|
|
|
|
.module-tooltip-arrow {
|
|
right: 0;
|
|
}
|
|
|
|
.module-tooltip-arrow::after {
|
|
right: -12px;
|
|
border-left-color: var(--tooltip-background-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Module: Chat Session Refreshed Notification
|
|
|
|
.module-chat-session-refreshed-notification {
|
|
@include font-body-2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.module-chat-session-refreshed-notification__first-line {
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.module-chat-session-refreshed-notification__icon {
|
|
height: 16px;
|
|
width: 16px;
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/refresh-16.svg', $color-gray-60);
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/refresh-16.svg', $color-gray-25);
|
|
}
|
|
}
|
|
.module-chat-session-refreshed-notification__button {
|
|
@include button-reset;
|
|
@include button-light-blue-text;
|
|
@include button-small;
|
|
|
|
@include font-body-2;
|
|
padding: 5px 12px;
|
|
}
|
|
|
|
// Module: Chat Session Refreshed Dialog
|
|
|
|
.module-chat-session-refreshed-dialog {
|
|
width: 360px;
|
|
padding: 16px;
|
|
padding-top: 28px;
|
|
border-radius: 8px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
@include light-theme {
|
|
background-color: $color-white;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-95;
|
|
}
|
|
}
|
|
.module-chat-session-refreshed-dialog__image {
|
|
text-align: center;
|
|
}
|
|
.module-chat-session-refreshed-dialog__title {
|
|
@include font-body-1-bold;
|
|
margin-top: 10px;
|
|
margin-bottom: 3px;
|
|
}
|
|
.module-chat-session-refreshed-dialog__buttons {
|
|
text-align: right;
|
|
margin-top: 20px;
|
|
}
|
|
.module-chat-session-refreshed-dialog__button {
|
|
@include font-body-1-bold;
|
|
@include button-reset;
|
|
@include button-primary;
|
|
|
|
border-radius: 4px;
|
|
padding: 7px 14px;
|
|
margin-left: 12px;
|
|
}
|
|
.module-chat-session-refreshed-dialog__button--secondary {
|
|
@include button-secondary;
|
|
}
|
|
|
|
/* Third-party module: react-contextmenu*/
|
|
|
|
.react-contextmenu {
|
|
@include popper-shadow();
|
|
|
|
outline: none;
|
|
border-radius: 4px;
|
|
min-width: 220px;
|
|
padding: 6px 0;
|
|
opacity: 0;
|
|
user-select: none;
|
|
|
|
@include light-theme {
|
|
background-color: $color-white;
|
|
}
|
|
@include dark-theme {
|
|
background-color: $color-gray-75;
|
|
}
|
|
}
|
|
|
|
.react-contextmenu--visible {
|
|
z-index: 1000;
|
|
opacity: 1;
|
|
}
|
|
|
|
.react-contextmenu-item {
|
|
outline: none;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
|
|
@include font-body-2;
|
|
|
|
padding: 7px 12px;
|
|
|
|
@include light-theme {
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-02;
|
|
}
|
|
|
|
&--divider {
|
|
height: 1px;
|
|
margin: 6px 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;
|
|
right: 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-right: 36px;
|
|
}
|
|
|
|
.react-contextmenu-item.react-contextmenu-submenu
|
|
> .react-contextmenu-item:after {
|
|
content: ' ';
|
|
display: inline-block;
|
|
height: 18px;
|
|
position: absolute;
|
|
right: 7px;
|
|
width: 12px;
|
|
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/chevron-right-16.svg',
|
|
$color-gray-75
|
|
);
|
|
color: $color-gray-90;
|
|
}
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/chevron-right-16.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.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;
|
|
}
|
|
}
|
|
|
|
// All media query widths have 300px added to account for the left pane
|
|
// And have been tweaked for smoother transitions
|
|
|
|
// To hide in small breakpoints
|
|
.module-message__buttons__download {
|
|
display: none;
|
|
}
|
|
.module-message__buttons__reply {
|
|
display: none;
|
|
}
|
|
.module-message__buttons__react {
|
|
display: none;
|
|
}
|
|
|
|
// To limit messages with things forcing them wider, like long attachment names
|
|
.module-message__container {
|
|
&--incoming {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
&--outgoing {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
&--with-reactions {
|
|
margin-bottom: -10px;
|
|
}
|
|
|
|
&--deleted-for-everyone {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.module-message__context {
|
|
&--icon::before {
|
|
content: ' ';
|
|
display: inline-block;
|
|
height: 14px;
|
|
margin-right: 8px;
|
|
width: 14px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
&__download::before {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/save-outline-24.svg',
|
|
$color-black
|
|
);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/save-solid-24.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
&__reply::before {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/reply-outline-24.svg',
|
|
$color-black
|
|
);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/reply-solid-24.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
&__react::before {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/add-emoji-outline-24.svg',
|
|
$color-black
|
|
);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/add-emoji-outline-24.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
&__more-info::before {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/info-outline-24.svg',
|
|
$color-black
|
|
);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/info-outline-24.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
&__retry-send::before {
|
|
@include light-theme {
|
|
@include color-svg('../images/icons/v2/send-24.svg', $color-black);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg('../images/icons/v2/send-24.svg', $color-gray-15);
|
|
}
|
|
}
|
|
|
|
&__delete-message::before {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/trash-outline-24.svg',
|
|
$color-black
|
|
);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/trash-solid-24.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
|
|
&__delete-message-for-everyone::before {
|
|
@include light-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/trash-outline-24.svg',
|
|
$color-black
|
|
);
|
|
}
|
|
|
|
@include dark-theme {
|
|
@include color-svg(
|
|
'../images/icons/v2/trash-solid-24.svg',
|
|
$color-gray-15
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Spec: container < 437px */
|
|
@media (min-width: 0px) and (max-width: 799px) {
|
|
.module-message {
|
|
// Add 2px for 1px border
|
|
max-width: 302px;
|
|
}
|
|
}
|
|
|
|
/* Spec: container > 438px and container < 593px */
|
|
@media (min-width: 800px) and (max-width: 925px) {
|
|
.module-message {
|
|
// Add 2px for 1px border
|
|
max-width: 376px;
|
|
}
|
|
|
|
// Spec: container < 438px
|
|
.module-message--incoming {
|
|
margin-right: auto;
|
|
}
|
|
.module-message--outgoing {
|
|
margin-left: auto;
|
|
}
|
|
|
|
// To hide in small breakpoints
|
|
.module-message__buttons__download {
|
|
display: inline-block;
|
|
}
|
|
.module-message__buttons__reply {
|
|
display: inline-block;
|
|
}
|
|
.module-message__buttons__react {
|
|
display: inline-block;
|
|
}
|
|
|
|
// To hide in larger breakpoints
|
|
.module-message__context__download {
|
|
display: none;
|
|
}
|
|
.module-message__context__reply {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Spec: container > 593px
|
|
@media (min-width: 926px) {
|
|
.module-message {
|
|
max-width: 66%;
|
|
}
|
|
|
|
.module-message--incoming {
|
|
margin-right: auto;
|
|
}
|
|
.module-message--outgoing {
|
|
margin-left: auto;
|
|
}
|
|
|
|
// To hide in small breakpoints
|
|
.module-message__buttons__download {
|
|
display: inline-block;
|
|
}
|
|
.module-message__buttons__reply {
|
|
display: inline-block;
|
|
}
|
|
.module-message__buttons__react {
|
|
display: inline-block;
|
|
}
|
|
|
|
// To hide in larger breakpoints
|
|
.module-message__context__download {
|
|
display: none;
|
|
}
|
|
.module-message__context__reply {
|
|
display: none;
|
|
}
|
|
.module-message__context__react {
|
|
display: none;
|
|
}
|
|
}
|