signal-desktop/stylesheets/components/StoryListItem.scss

184 lines
3.4 KiB
SCSS
Raw Normal View History

2022-03-04 21:14:52 +00:00
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.StoryListItem {
2022-07-25 18:55:44 +00:00
&__button {
@include button-reset;
align-items: center;
border-radius: 10px;
display: flex;
height: 96px;
2022-08-25 00:33:16 +00:00
min-height: 96px;
2023-04-20 17:03:43 +00:00
padding-block: 0;
padding-inline: 10px;
2022-07-25 18:55:44 +00:00
width: 100%;
@include keyboard-mode {
&:focus {
background: $color-gray-65;
}
}
// highlighted on hover and when it has triggered a context menu
// that has not been closed yet (active)
&:hover,
&--active {
2022-07-25 18:55:44 +00:00
background: $color-gray-65;
}
2022-03-04 21:14:52 +00:00
}
2022-08-25 00:34:17 +00:00
&--active-opacity,
&--active-opacity__button {
&:active {
opacity: 0.3;
}
}
&__click-container {
align-items: center;
display: flex;
height: 100%;
width: 100%;
&:focus {
outline: none;
}
@include keyboard-mode {
&:focus {
outline: 1px solid $color-ultramarine;
}
}
}
2022-03-04 21:14:52 +00:00
&__info {
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
2023-04-20 17:03:43 +00:00
margin-inline: 12px;
2022-03-04 21:14:52 +00:00
&--title {
@include font-body-1-bold;
2022-03-29 01:10:08 +00:00
color: $color-gray-05;
2022-11-09 02:38:19 +00:00
display: flex;
align-items: center;
2022-03-04 21:14:52 +00:00
}
&--timestamp,
&--sending,
&--send_failed {
2022-03-04 21:14:52 +00:00
@include font-body-2;
color: $color-gray-25;
}
&--send_failed {
display: flex;
align-items: center;
&::before {
content: '';
display: flex;
flex-shrink: 0;
height: 12px;
width: 12px;
2023-04-20 17:03:43 +00:00
margin-inline-end: 8px;
@include color-svg(
'../images/icons/v2/error-outline-12.svg',
$color-accent-red
);
}
}
2022-03-04 21:14:52 +00:00
&--replies {
&--others {
@include color-svg(
'../images/icons/v2/messages-solid-20.svg',
$color-gray-25
);
height: 20px;
width: 20px;
}
&--self {
@include color-svg(
'../images/icons/v2/reply-solid-24.svg',
$color-gray-25
);
height: 20px;
width: 20px;
}
}
}
&__previews {
height: 72px;
position: relative;
width: 46px;
&--image {
@include button-reset;
align-items: center;
background-color: $color-gray-60;
2022-08-25 00:33:16 +00:00
background-size: cover;
2022-03-04 21:14:52 +00:00
border-radius: 8px;
display: flex;
height: 72px;
justify-content: center;
2023-04-20 17:03:43 +00:00
inset-inline-start: 0;
2022-03-04 21:14:52 +00:00
overflow: hidden;
position: absolute;
2022-08-25 00:33:16 +00:00
top: 0;
2022-03-04 21:14:52 +00:00
width: 46px;
z-index: $z-index-base;
}
&--multiple &--image {
border: 1px solid $color-gray-80;
}
&--more {
background: #99a8a0;
border-radius: 6px;
height: 62px;
position: absolute;
transform: rotate(-12deg);
width: 40px;
}
}
&__icon {
&--chat {
@include color-svg('../images/icons/v2/open-24.svg', $color-white);
}
2022-07-25 18:55:44 +00:00
&--delete {
@include color-svg(
'../images/icons/v2/trash-outline-24.svg',
$color-white
);
}
2022-03-04 21:14:52 +00:00
&--hide {
@include color-svg('../images/icons/v2/x-24.svg', $color-white);
}
2022-07-25 18:55:44 +00:00
&--info {
@include color-svg(
'../images/icons/v2/info-outline-24.svg',
$color-white
);
}
2022-03-04 21:14:52 +00:00
}
2022-08-25 00:34:17 +00:00
&__chevron::after {
content: '';
display: inline-block;
height: 20px;
2023-04-20 17:03:43 +00:00
margin-inline-start: 6px;
2022-08-25 00:34:17 +00:00
vertical-align: middle;
width: 12px;
@include color-svg('../images/icons/v2/chevron-right-20.svg', $color-white);
}
2022-03-04 21:14:52 +00:00
}