signal-desktop/stylesheets/components/CallingRaisedHandsList.scss

97 lines
1.8 KiB
SCSS
Raw Normal View History

2023-12-06 21:52:29 +00:00
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.CallingRaisedHandsList {
width: 100%;
height: auto;
margin-block-end: auto;
}
.CallingRaisedHandsList__width-container {
width: 320px;
height: auto;
margin-block-end: 72px;
margin-inline-start: 8px;
}
.CallingRaisedHandsList__overlay {
background: transparent;
}
.CallingRaisedHandsList__overlay-container {
flex-direction: column;
padding: 0;
justify-content: flex-end;
align-items: start;
}
.CallingRaisedHandsList__Overlay {
align-items: start;
}
.CallingRaisedHandsList__Button {
@include button-reset;
position: absolute;
inset-inline-start: 16px;
inset-block-end: 16px;
display: flex;
padding-block: 14px;
padding-inline: 12px;
background: $color-gray-78;
border-radius: 24px;
color: $color-white;
font-size: 14px;
z-index: $z-index-above-above-base;
@include keyboard-mode {
&:focus {
outline: 2px solid $color-ultramarine;
}
}
}
.CallingRaisedHandsList__ButtonIcon {
display: inline-block;
$icon-size: 20px;
width: $icon-size;
height: $icon-size;
margin-inline-end: 4px;
content: '';
@include color-svg(
'../images/icons/v3/raise_hand/raise_hand-light.svg',
$color-gray-15
);
}
.CallingRaisedHandsList__AvatarAndName {
max-width: 205px;
}
.CallingRaisedHandsList__NameHandIcon {
display: inline-block;
$icon-size: 16px;
width: $icon-size;
height: $icon-size;
content: '';
@include color-svg(
'../images/icons/v3/raise_hand/raise_hand-light.svg',
$color-gray-15
);
}
.CallingRaisedHandsList__LowerMyHandLink {
@include button-reset;
margin-inline-end: 24px;
font-size: 13px;
font-weight: 500;
color: $color-ultramarine-pastel;
@include keyboard-mode {
&:focus {
outline: 2px solid $color-ultramarine;
}
}
}