signal-desktop/stylesheets/components/ContactListItem.scss
2024-03-25 12:22:35 -07:00

129 lines
2.7 KiB
SCSS

// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.ContactListItem {
&__context-menu {
&__chat-icon {
@include dark-theme {
@include color-svg(
'../images/icons/v3/chat/chat-compact.svg',
$color-white
);
}
@include light-theme {
@include color-svg(
'../images/icons/v3/chat/chat-compact.svg',
$color-black
);
}
}
&__phone-icon {
@include dark-theme {
@include color-svg(
'../images/icons/v3/phone/phone-compact.svg',
$color-white
);
}
@include light-theme {
@include color-svg(
'../images/icons/v3/phone/phone-compact.svg',
$color-black
);
}
}
&__video-icon {
@include dark-theme {
@include color-svg(
'../images/icons/v3/video/video-compact.svg',
$color-white
);
}
@include light-theme {
@include color-svg(
'../images/icons/v3/video/video-compact.svg',
$color-black
);
}
}
&__delete-icon {
@include dark-theme {
@include color-svg(
'../images/icons/v3/minus/minus-circle-compact.svg',
$color-white
);
}
@include light-theme {
@include color-svg(
'../images/icons/v3/minus/minus-circle-compact.svg',
$color-black
);
}
}
&__block-icon {
@include dark-theme {
@include color-svg(
'../images/icons/v3/block/block-compact.svg',
$color-white
);
}
@include light-theme {
@include color-svg(
'../images/icons/v3/block/block-compact.svg',
$color-black
);
}
}
// Overrides
&__popper.ContextMenu__popper {
min-width: 240px;
}
&__button.ContextMenu__button {
opacity: 0;
.ContactListItem:hover & {
opacity: 1;
}
&:hover {
@include light-theme {
background-color: $color-gray-20;
}
@include dark-theme {
background-color: $color-gray-80;
}
}
width: 28px;
height: 28px;
padding: 4px;
border-radius: 4px;
&::after {
display: block;
width: 20px;
height: 20px;
content: '';
@include dark-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-white);
}
@include light-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-black);
}
}
}
}
}
.ContactListItem__contact-icon {
width: 14px;
height: 14px;
color: currentColor;
}