2020-02-28 01:48:21 +01:00
|
|
|
@keyframes toShadow {
|
|
|
|
from {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2022-05-11 08:01:33 +02:00
|
|
|
|
2020-02-28 01:48:21 +01:00
|
|
|
to {
|
|
|
|
opacity: 0.25;
|
|
|
|
}
|
|
|
|
}
|
2022-05-11 08:01:33 +02:00
|
|
|
|
2020-02-28 01:48:21 +01:00
|
|
|
@keyframes fromShadow {
|
|
|
|
from {
|
|
|
|
opacity: 0.25;
|
|
|
|
}
|
2022-05-11 08:01:33 +02:00
|
|
|
|
2020-02-28 01:48:21 +01:00
|
|
|
to {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-13 07:17:48 +01:00
|
|
|
.conversation-item__options-pane {
|
|
|
|
position: absolute;
|
2020-02-19 02:05:48 +01:00
|
|
|
height: 100%;
|
2020-11-13 07:17:48 +01:00
|
|
|
right: 0vw;
|
2020-03-12 07:15:02 +01:00
|
|
|
|
2021-07-14 05:48:59 +02:00
|
|
|
transition: transform 0.3s ease-in-out;
|
2020-11-13 07:17:48 +01:00
|
|
|
transform: translateX(100%);
|
|
|
|
will-change: transform;
|
|
|
|
width: 25vw;
|
2022-03-11 00:57:25 +01:00
|
|
|
z-index: 5;
|
2020-02-28 01:48:21 +01:00
|
|
|
|
2022-09-19 03:07:59 +02:00
|
|
|
background-color: var(--background-primary-color);
|
|
|
|
border-left: 1px solid var(--border-color);
|
|
|
|
|
2020-11-13 07:17:48 +01:00
|
|
|
&.show {
|
|
|
|
transform: none;
|
2021-07-14 05:48:59 +02:00
|
|
|
transition: transform 0.3s ease-in-out;
|
2022-10-14 07:27:42 +02:00
|
|
|
z-index: 3;
|
2020-03-17 08:29:17 +01:00
|
|
|
}
|
2020-02-28 01:48:21 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.conversation-header {
|
2020-03-12 07:15:02 +01:00
|
|
|
&--items-wrapper {
|
2020-02-28 01:48:21 +01:00
|
|
|
display: flex;
|
|
|
|
flex-grow: 1;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2020-10-16 06:12:41 +02:00
|
|
|
width: 100%;
|
2020-02-28 01:48:21 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.message-selection-overlay {
|
|
|
|
position: absolute;
|
|
|
|
display: flex;
|
|
|
|
left: 0px;
|
|
|
|
right: 0px;
|
2022-08-22 02:28:07 +02:00
|
|
|
padding: 0px var(--margins-md);
|
2020-02-28 01:48:21 +01:00
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
2022-08-22 02:45:35 +02:00
|
|
|
height: var(--main-view-header-height);
|
2022-09-16 08:58:24 +02:00
|
|
|
background: var(--background-primary-color);
|
2020-03-12 07:15:02 +01:00
|
|
|
|
2020-02-28 01:48:21 +01:00
|
|
|
.close-button {
|
|
|
|
float: left;
|
|
|
|
}
|
2020-03-12 07:15:02 +01:00
|
|
|
|
2022-09-16 05:39:19 +02:00
|
|
|
.session-button.danger {
|
2020-02-28 01:48:21 +01:00
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
}
|
2022-05-11 08:01:33 +02:00
|
|
|
|
2020-02-28 01:48:21 +01:00
|
|
|
.message-selection-overlay div[role='button'] {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
2020-03-12 07:15:02 +01:00
|
|
|
|
2020-02-28 01:48:21 +01:00
|
|
|
.message-selection-overlay .button-group {
|
2021-10-25 08:04:51 +02:00
|
|
|
display: flex;
|
2020-02-28 01:48:21 +01:00
|
|
|
}
|
2020-02-17 05:16:24 +01:00
|
|
|
}
|
|
|
|
|
2020-11-13 04:29:59 +01:00
|
|
|
.session-conversation {
|
2023-05-19 05:05:41 +02:00
|
|
|
position: relative;
|
2020-11-13 04:29:59 +01:00
|
|
|
flex-grow: 1;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2020-11-13 07:17:48 +01:00
|
|
|
max-width: calc(100vw - 380px);
|
2023-04-21 08:17:14 +02:00
|
|
|
height: 100%;
|
2020-11-13 07:17:48 +01:00
|
|
|
|
|
|
|
.selection-mode {
|
|
|
|
.messages-container > *:not(.message-selected) {
|
2022-08-22 02:28:07 +02:00
|
|
|
animation: toShadow var(--default-duration);
|
2022-10-07 02:59:27 +02:00
|
|
|
opacity: 0.3;
|
2020-11-13 07:17:48 +01:00
|
|
|
}
|
|
|
|
}
|
2020-02-17 05:16:24 +01:00
|
|
|
}
|
|
|
|
|
2020-07-20 09:30:26 +02:00
|
|
|
.conversation-content {
|
|
|
|
display: flex;
|
|
|
|
flex-grow: 1;
|
|
|
|
flex-direction: column;
|
|
|
|
position: relative;
|
2020-07-21 06:43:46 +02:00
|
|
|
outline: none;
|
2020-07-20 09:30:26 +02:00
|
|
|
|
|
|
|
.conversation-messages {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-grow: 1;
|
|
|
|
width: 100%;
|
2020-07-21 06:43:46 +02:00
|
|
|
height: 0;
|
2020-07-20 09:30:26 +02:00
|
|
|
background-color: inherit;
|
2020-07-21 06:43:46 +02:00
|
|
|
outline: none;
|
2020-07-21 08:40:17 +02:00
|
|
|
position: relative;
|
2022-09-19 03:28:45 +02:00
|
|
|
background-color: var(--background-secondary-color);
|
2022-09-19 03:07:59 +02:00
|
|
|
border-top: 1px solid var(--border-color);
|
2020-07-20 09:30:26 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.conversation-info-panel {
|
|
|
|
position: absolute;
|
|
|
|
justify-content: flex-start;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
2020-12-01 01:24:07 +01:00
|
|
|
z-index: 5; // to be sure to hide the borders of images in messages
|
2020-07-20 09:30:26 +02:00
|
|
|
background-color: inherit;
|
|
|
|
display: none;
|
|
|
|
padding: 20px;
|
|
|
|
|
|
|
|
&.show {
|
|
|
|
display: flex;
|
2022-09-16 06:47:22 +02:00
|
|
|
background: var(--background-primary-color);
|
2020-07-20 09:30:26 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-02-17 05:16:24 +01:00
|
|
|
.composition-container {
|
2020-02-19 02:05:48 +01:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
2022-08-22 02:28:07 +02:00
|
|
|
padding: 0px var(--margins-md);
|
2020-02-27 02:01:08 +01:00
|
|
|
min-height: min-content;
|
2022-09-16 08:58:24 +02:00
|
|
|
border-top: 1px solid var(--border-color);
|
2021-11-03 06:05:59 +01:00
|
|
|
z-index: 1;
|
2020-02-19 02:05:48 +01:00
|
|
|
|
2021-08-05 03:32:55 +02:00
|
|
|
.session-icon-button {
|
2020-02-27 06:29:01 +01:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
2021-08-03 08:18:38 +02:00
|
|
|
|
2022-09-19 08:34:36 +02:00
|
|
|
margin-right: var(--margins-sm);
|
2020-02-19 02:05:48 +01:00
|
|
|
|
|
|
|
.send {
|
2022-08-22 02:28:07 +02:00
|
|
|
padding: var(--margins-xs);
|
2020-02-19 02:05:48 +01:00
|
|
|
border-radius: 50%;
|
|
|
|
height: 30px;
|
|
|
|
width: 30px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-08-03 07:45:44 +02:00
|
|
|
.send-message-button {
|
2022-08-22 02:28:07 +02:00
|
|
|
animation: fadein var(--default-duration);
|
2021-08-05 02:47:53 +02:00
|
|
|
|
2021-08-05 03:18:18 +02:00
|
|
|
&---scale {
|
|
|
|
animation: scaling 2s ease-in-out;
|
|
|
|
|
|
|
|
@keyframes scaling {
|
|
|
|
0% {
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
2022-05-11 08:01:33 +02:00
|
|
|
|
2021-08-05 03:18:18 +02:00
|
|
|
80% {
|
|
|
|
transform: scale(1.3);
|
|
|
|
}
|
2022-05-11 08:01:33 +02:00
|
|
|
|
2021-08-05 03:18:18 +02:00
|
|
|
100% {
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
}
|
2021-08-05 02:47:53 +02:00
|
|
|
}
|
2021-08-03 07:45:44 +02:00
|
|
|
}
|
|
|
|
|
2020-02-27 06:29:01 +01:00
|
|
|
.session-recording {
|
2022-09-16 05:39:19 +02:00
|
|
|
height: var(--composition-container-height);
|
2020-02-27 06:29:01 +01:00
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
flex-grow: 1;
|
2020-03-12 04:11:15 +01:00
|
|
|
outline: none;
|
2020-02-27 06:29:01 +01:00
|
|
|
|
2021-08-05 02:47:35 +02:00
|
|
|
$actions-element-size: 30px;
|
2020-02-27 06:29:01 +01:00
|
|
|
|
|
|
|
&--actions {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
width: $actions-element-size;
|
|
|
|
height: $actions-element-size;
|
|
|
|
border-radius: 50%;
|
|
|
|
|
2021-08-03 07:45:44 +02:00
|
|
|
.session-button {
|
2022-08-22 02:28:07 +02:00
|
|
|
animation: fadein var(--default-duration);
|
2021-08-03 07:45:44 +02:00
|
|
|
}
|
|
|
|
|
2020-02-27 06:29:01 +01:00
|
|
|
.session-icon-button {
|
2022-08-22 02:28:07 +02:00
|
|
|
animation: fadein var(--default-duration);
|
2020-02-27 06:29:01 +01:00
|
|
|
border-radius: 50%;
|
|
|
|
width: $actions-element-size;
|
|
|
|
height: $actions-element-size;
|
|
|
|
|
|
|
|
.play {
|
|
|
|
margin-left: 4px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-02-28 03:15:00 +01:00
|
|
|
&--visualisation {
|
2020-12-09 01:35:58 +01:00
|
|
|
z-index: 2;
|
2020-02-28 03:15:00 +01:00
|
|
|
width: 100%;
|
2020-03-03 05:07:48 +01:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2020-03-06 05:03:07 +01:00
|
|
|
position: relative;
|
2020-03-03 05:34:02 +01:00
|
|
|
|
|
|
|
canvas {
|
2020-03-06 05:03:07 +01:00
|
|
|
position: absolute;
|
2020-03-03 06:00:54 +01:00
|
|
|
width: 100%;
|
2022-08-22 02:28:07 +02:00
|
|
|
padding: 0px var(--margins-lg);
|
2020-03-03 05:34:02 +01:00
|
|
|
}
|
2020-02-28 03:15:00 +01:00
|
|
|
}
|
|
|
|
|
2020-03-05 00:43:48 +01:00
|
|
|
&--timer {
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
2022-10-04 08:27:12 +02:00
|
|
|
font-family: var(--font-default);
|
2020-03-05 00:43:48 +01:00
|
|
|
font-weight: bold;
|
|
|
|
font-size: 14px;
|
2020-12-14 04:39:39 +01:00
|
|
|
flex-shrink: 0;
|
2020-03-05 00:43:48 +01:00
|
|
|
|
2020-03-12 04:11:15 +01:00
|
|
|
&.playback-timer {
|
2022-08-22 02:28:07 +02:00
|
|
|
animation: fadein var(--default-duration);
|
2021-08-03 07:45:44 +02:00
|
|
|
|
|
|
|
@media (-webkit-min-device-pixel-ratio: 1.6) {
|
|
|
|
margin-left: auto;
|
|
|
|
}
|
2020-03-12 04:11:15 +01:00
|
|
|
}
|
|
|
|
|
2020-03-12 07:15:02 +01:00
|
|
|
&-light {
|
2022-08-22 02:28:07 +02:00
|
|
|
height: var(--margins-sm);
|
|
|
|
width: var(--margins-sm);
|
2020-03-05 00:43:48 +01:00
|
|
|
border-radius: 50%;
|
2022-09-28 09:15:06 +02:00
|
|
|
background-color: var(--danger-color);
|
2022-08-22 02:28:07 +02:00
|
|
|
margin: 0 var(--margins-sm);
|
2020-03-05 07:03:22 +01:00
|
|
|
|
2022-09-28 09:15:06 +02:00
|
|
|
@include pulse-color(var(--danger-color), 1s, infinite);
|
2020-02-27 06:29:01 +01:00
|
|
|
}
|
|
|
|
}
|
2020-03-12 04:11:15 +01:00
|
|
|
}
|