2021-12-07 16:00:26 +00:00
|
|
|
// Copyright 2021 Signal Messenger, LLC
|
|
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
|
|
|
|
.CallingButton {
|
|
|
|
@mixin icon($path) {
|
2023-05-04 18:04:22 +00:00
|
|
|
@include color-svg($path, $color-white);
|
|
|
|
height: 20px;
|
|
|
|
width: 20px;
|
2023-05-05 16:23:43 +00:00
|
|
|
border: none;
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&__icon {
|
|
|
|
align-items: center;
|
2023-10-25 13:40:22 +00:00
|
|
|
border-radius: 40px;
|
2021-12-07 16:00:26 +00:00
|
|
|
border: none;
|
|
|
|
display: flex;
|
2023-10-25 13:40:22 +00:00
|
|
|
height: 36px;
|
2021-12-07 16:00:26 +00:00
|
|
|
justify-content: center;
|
|
|
|
outline: none;
|
2023-10-25 13:40:22 +00:00
|
|
|
width: 36px;
|
|
|
|
|
|
|
|
@include keyboard-mode {
|
|
|
|
&:focus {
|
|
|
|
outline-offset: 1px;
|
|
|
|
outline: 2px solid $color-ultramarine;
|
|
|
|
}
|
|
|
|
}
|
2021-12-07 16:00:26 +00:00
|
|
|
|
|
|
|
@mixin calling-button-icon($icon, $background-color, $icon-color) {
|
|
|
|
background-color: $background-color;
|
|
|
|
|
|
|
|
div {
|
|
|
|
@include color-svg($icon, $icon-color);
|
2024-01-17 20:29:44 +00:00
|
|
|
height: 20px;
|
|
|
|
width: 20px;
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-05-17 17:51:21 +00:00
|
|
|
@mixin calling-button-icon-highlighted($icon) {
|
|
|
|
@include calling-button-icon($icon, $color-gray-15, $color-gray-90);
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
|
2023-05-17 17:51:21 +00:00
|
|
|
@mixin calling-button-icon-regular($icon) {
|
|
|
|
@include calling-button-icon($icon, $color-gray-60, $color-gray-15);
|
2021-12-07 16:00:26 +00:00
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin calling-button-icon-disabled($icon) {
|
2023-05-17 17:51:21 +00:00
|
|
|
@include calling-button-icon($icon, $color-gray-60, $color-gray-15);
|
|
|
|
opacity: 0.4;
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&--audio {
|
2023-05-04 18:04:22 +00:00
|
|
|
$icon: '../images/icons/v3/mic/mic-slash-fill-light.svg';
|
2021-12-07 16:00:26 +00:00
|
|
|
&--on {
|
2023-05-17 17:51:21 +00:00
|
|
|
@include calling-button-icon-regular(
|
2023-05-04 18:04:22 +00:00
|
|
|
'../images/icons/v3/mic/mic-fill-light.svg'
|
|
|
|
);
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
&--off {
|
2023-05-17 17:51:21 +00:00
|
|
|
@include calling-button-icon-highlighted($icon);
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
&--disabled {
|
|
|
|
@include calling-button-icon-disabled($icon);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&--video {
|
2023-05-04 18:04:22 +00:00
|
|
|
$icon: '../images/icons/v3/video/video-slash-fill-light.svg';
|
2021-12-07 16:00:26 +00:00
|
|
|
&--on {
|
2023-05-17 17:51:21 +00:00
|
|
|
@include calling-button-icon-regular(
|
2023-05-04 18:04:22 +00:00
|
|
|
'../images/icons/v3/video/video-fill-light.svg'
|
|
|
|
);
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
&--off {
|
2023-05-17 17:51:21 +00:00
|
|
|
@include calling-button-icon-highlighted($icon);
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
&--disabled {
|
|
|
|
@include calling-button-icon-disabled($icon);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&--hangup {
|
|
|
|
@include calling-button-icon(
|
2023-05-04 18:04:22 +00:00
|
|
|
'../images/icons/v3/phone/phone-down-fill-light.svg',
|
2021-12-07 16:00:26 +00:00
|
|
|
$color-accent-red,
|
|
|
|
$color-white
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2024-01-17 20:29:44 +00:00
|
|
|
&--raise-hand {
|
|
|
|
$icon: '../images/icons/v3/raise_hand/raise_hand-light.svg';
|
|
|
|
&--on {
|
|
|
|
@include calling-button-icon-highlighted($icon);
|
|
|
|
}
|
|
|
|
&--off {
|
|
|
|
@include calling-button-icon-regular($icon);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&--react {
|
|
|
|
$icon: '../images/icons/v3/heart/heart-plus.svg';
|
|
|
|
&--on {
|
|
|
|
@include calling-button-icon-highlighted($icon);
|
|
|
|
}
|
|
|
|
&--off {
|
|
|
|
@include calling-button-icon-regular($icon);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-07 16:00:26 +00:00
|
|
|
&--ring {
|
2023-05-17 17:51:21 +00:00
|
|
|
$icon: '../images/icons/v3/bell/bell-slash-fill.svg';
|
2021-12-07 16:00:26 +00:00
|
|
|
&--on {
|
2023-05-17 17:51:21 +00:00
|
|
|
@include calling-button-icon-regular(
|
|
|
|
'../images/icons/v3/bell/bell-ring-fill-light.svg'
|
|
|
|
);
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
&--off {
|
2023-05-17 17:51:21 +00:00
|
|
|
@include calling-button-icon-highlighted($icon);
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
&--disabled {
|
|
|
|
@include calling-button-icon-disabled($icon);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&--presenting {
|
2023-05-04 18:04:22 +00:00
|
|
|
$icon: '../images/icons/v3/share_screen/share_screen-fill-light.svg';
|
2021-12-07 16:00:26 +00:00
|
|
|
&--on {
|
2023-05-17 17:51:21 +00:00
|
|
|
@include calling-button-icon-highlighted($icon);
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
&--off {
|
2023-05-17 17:51:21 +00:00
|
|
|
@include calling-button-icon-regular($icon);
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
&--disabled {
|
|
|
|
@include calling-button-icon-disabled($icon);
|
|
|
|
}
|
|
|
|
}
|
2023-11-16 19:55:35 +00:00
|
|
|
|
|
|
|
&--more-options {
|
|
|
|
@include calling-button-icon-regular('../images/icons/v3/more/more.svg');
|
|
|
|
}
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
|
2023-10-25 13:40:22 +00:00
|
|
|
&__button-container {
|
2021-12-07 16:00:26 +00:00
|
|
|
display: inline-flex;
|
|
|
|
flex-direction: column;
|
2022-06-14 20:03:12 +00:00
|
|
|
max-width: 64px;
|
2023-10-25 13:40:22 +00:00
|
|
|
margin-inline: 10px;
|
2021-12-07 16:00:26 +00:00
|
|
|
|
2023-04-20 17:03:43 +00:00
|
|
|
transition: margin-inline-start 0.3s ease-out, opacity 0.3s ease-out;
|
2021-12-07 16:00:26 +00:00
|
|
|
@media (prefers-reduced-motion) {
|
|
|
|
transition: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&--hidden {
|
2023-04-20 17:03:43 +00:00
|
|
|
margin-inline-start: -100px;
|
2021-12-07 16:00:26 +00:00
|
|
|
opacity: 0;
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
|
|
// The container could be wider than 100px depending on the label. Hiding the label
|
|
|
|
// ensures that the above `margin-left` will completely hide the button.
|
|
|
|
.CallingButton__label {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-10-25 13:40:22 +00:00
|
|
|
&__tooltip {
|
|
|
|
background-color: $color-gray-80;
|
|
|
|
color: $color-gray-15;
|
|
|
|
font-size: 13px;
|
|
|
|
outline: 1px solid $color-gray-62;
|
|
|
|
padding-block: 5px;
|
|
|
|
padding-inline: 12px;
|
|
|
|
filter: drop-shadow(0px 4px 3px $color-black-alpha-20);
|
2023-10-30 18:30:29 +00:00
|
|
|
pointer-events: none;
|
2023-10-25 13:40:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&__tooltip .module-tooltip-arrow::before {
|
|
|
|
position: absolute;
|
|
|
|
content: '';
|
|
|
|
border-style: solid;
|
|
|
|
border-width: 7px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__tooltip[data-placement='bottom'] .module-tooltip-arrow::before {
|
|
|
|
border-color: transparent transparent $color-gray-62 transparent;
|
|
|
|
margin-block-start: -14px;
|
|
|
|
margin-inline-start: -7px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__tooltip[data-placement='bottom'] .module-tooltip-arrow::after {
|
|
|
|
border-bottom-color: $color-gray-80 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__tooltip[data-placement='top'] .module-tooltip-arrow::before {
|
|
|
|
border-color: $color-gray-62 transparent transparent transparent;
|
|
|
|
margin-block-start: 0;
|
|
|
|
margin-inline-start: -7px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__tooltip[data-placement='top'] .module-tooltip-arrow::after {
|
|
|
|
border-top-color: $color-gray-80 !important;
|
2021-12-07 16:00:26 +00:00
|
|
|
}
|
|
|
|
}
|