signal-desktop/stylesheets/components/CallingButton.scss

191 lines
4.3 KiB
SCSS
Raw Normal View History

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;
border-radius: 52px;
border: none;
display: flex;
height: 52px;
justify-content: center;
outline: none;
width: 52px;
2023-04-20 17:03:43 +00:00
margin-inline: 6px;
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);
height: 24px;
width: 24px;
}
}
@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 {
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-04 18:04:22 +00:00
@include calling-button-icon-off(
'../images/icons/v3/mic/mic-fill-light.svg'
);
2021-12-07 16:00:26 +00:00
}
&--off {
@include calling-button-icon-on($icon);
}
&--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-04 18:04:22 +00:00
@include calling-button-icon-on(
'../images/icons/v3/video/video-fill-light.svg'
);
2021-12-07 16:00:26 +00:00
}
&--off {
@include calling-button-icon-off($icon);
}
&--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
);
}
&--ring {
2023-05-04 18:04:22 +00:00
$icon: '../images/icons/v3/bell/bell-ring-fill-light.svg';
2021-12-07 16:00:26 +00:00
&--on {
@include calling-button-icon-on($icon);
}
&--off {
@include calling-button-icon-off($icon);
}
&--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 {
@include calling-button-icon-on($icon);
}
&--off {
@include calling-button-icon-off($icon);
}
&--disabled {
@include calling-button-icon-disabled($icon);
}
}
}
&__participants {
2023-05-04 18:04:22 +00:00
@include icon('../images/icons/v3/group/group.svg');
2021-12-07 16:00:26 +00:00
display: inline-block;
&--container {
@include button-reset;
border: none;
color: $color-white;
}
&--shown {
background-color: $color-gray-75;
border-radius: 16px;
2023-04-20 17:03:43 +00:00
padding-block: 6px;
padding-inline: 8px;
2021-12-07 16:00:26 +00:00
}
&--count {
2023-05-05 16:23:43 +00:00
@include font-body-2;
2023-04-20 17:03:43 +00:00
margin-inline-start: 5px;
2021-12-07 16:00:26 +00:00
vertical-align: top;
}
}
&__settings {
2023-05-04 18:04:22 +00:00
@include icon('../images/icons/v3/tune/tune.svg');
2021-12-07 16:00:26 +00:00
}
&__grid-view {
2023-05-04 18:04:22 +00:00
@include icon('../images/icons/v3/grid/grid.svg');
2021-12-07 16:00:26 +00:00
}
&__speaker-view {
2023-05-04 18:04:22 +00:00
@include icon('../images/icons/v3/speaker_view/speaker_view.svg');
2021-12-07 16:00:26 +00:00
}
&__pip {
2023-05-04 18:04:22 +00:00
@include icon('../images/icons/v3/pip/pip.svg');
2021-12-07 16:00:26 +00:00
}
&__cancel {
2023-05-04 18:04:22 +00:00
@include icon('../images/icons/v3/x/x.svg');
2021-12-07 16:00:26 +00:00
}
&__container {
display: inline-flex;
flex-direction: column;
2023-04-20 17:03:43 +00:00
margin-inline: 6px;
max-width: 64px;
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;
}
}
}
&__label {
@include font-subtitle;
margin-top: 8px;
text-align: center;
color: $color-white;
@include calling-text-shadow;
user-select: none;
}
}