signal-desktop/stylesheets/components/StoryListItem.scss

209 lines
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%;
&:focus {
@include keyboard-mode {
background: $color-gray-15;
}
@include dark-keyboard-mode {
background: $color-gray-65;
2022-07-25 18:55:44 +00:00
}
}
// highlighted on hover and when it has triggered a context menu
// that has not been closed yet (active)
&:hover,
&--active {
2023-08-09 00:53:06 +00:00
@include light-theme {
background: $color-gray-15;
}
@include dark-theme {
background: $color-gray-65;
}
2022-07-25 18:55:44 +00:00
}
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-11-09 02:38:19 +00:00
display: flex;
align-items: center;
2023-08-09 00:53:06 +00:00
@include light-theme {
color: $color-black;
}
@include dark-theme {
color: $color-gray-05;
}
2022-03-04 21:14:52 +00:00
}
&--timestamp,
&--sending,
&--send_failed {
2022-03-04 21:14:52 +00:00
@include font-body-2;
2023-08-09 00:53:06 +00:00
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
2022-03-04 21:14:52 +00:00
}
&--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(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/error/error-circle.svg',
$color-accent-red
);
}
}
2022-03-04 21:14:52 +00:00
&--replies {
&--others {
@include color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/thread/thread-fill-compact.svg',
2022-03-04 21:14:52 +00:00
$color-gray-25
);
2023-05-04 18:04:22 +00:00
height: 16px;
width: 16px;
2022-03-04 21:14:52 +00:00
}
&--self {
@include color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/reply/reply-fill-compact.svg',
2022-03-04 21:14:52 +00:00
$color-gray-25
);
2023-05-04 18:04:22 +00:00
height: 16px;
width: 16px;
2022-03-04 21:14:52 +00:00
}
}
}
&__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;
}
}
@mixin StoryListItem__Icon($path) {
@include light-theme {
@include color-svg($path, $color-black);
}
@include dark-theme {
@include color-svg($path, $color-white);
2023-08-09 00:53:06 +00:00
}
}
2023-08-09 00:53:06 +00:00
&__icon {
2022-03-04 21:14:52 +00:00
&--chat {
2023-08-09 00:53:06 +00:00
@include StoryListItem__Icon('../images/icons/v3/open/open-compact.svg');
2022-03-04 21:14:52 +00:00
}
2022-07-25 18:55:44 +00:00
&--delete {
2023-08-09 00:53:06 +00:00
@include StoryListItem__Icon(
'../images/icons/v3/trash/trash-compact.svg'
2022-07-25 18:55:44 +00:00
);
}
2022-03-04 21:14:52 +00:00
&--hide {
2023-08-09 00:53:06 +00:00
@include StoryListItem__Icon('../images/icons/v3/x/x-circle-compact.svg');
2022-03-04 21:14:52 +00:00
}
2022-07-25 18:55:44 +00:00
&--info {
2023-08-09 00:53:06 +00:00
@include StoryListItem__Icon('../images/icons/v3/info/info-compact.svg');
2022-07-25 18:55:44 +00:00
}
2022-03-04 21:14:52 +00:00
}
2022-08-25 00:34:17 +00:00
&__chevron::after {
content: '';
display: inline-block;
2023-05-04 18:04:22 +00:00
height: 16px;
margin-inline-start: 2px;
2022-08-25 00:34:17 +00:00
vertical-align: middle;
2023-05-04 18:04:22 +00:00
width: 16px;
@include StoryListItem__Icon(
'../images/icons/v3/chevron/chevron-right-compact-bold.svg'
2023-05-04 18:04:22 +00:00
);
2022-08-25 00:34:17 +00:00
}
2022-03-04 21:14:52 +00:00
}