210 lines
4.1 KiB
SCSS
210 lines
4.1 KiB
SCSS
// Copyright 2022 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
.StoryListItem {
|
|
&__button {
|
|
@include button-reset;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
height: 96px;
|
|
min-height: 96px;
|
|
padding-block: 0;
|
|
padding-inline: 10px;
|
|
width: 100%;
|
|
|
|
@include keyboard-mode {
|
|
&:focus {
|
|
@include light-theme {
|
|
background: $color-gray-15;
|
|
}
|
|
@include dark-theme {
|
|
background: $color-gray-65;
|
|
}
|
|
}
|
|
}
|
|
|
|
// highlighted on hover and when it has triggered a context menu
|
|
// that has not been closed yet (active)
|
|
&:hover,
|
|
&--active {
|
|
@include light-theme {
|
|
background: $color-gray-15;
|
|
}
|
|
@include dark-theme {
|
|
background: $color-gray-65;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--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;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
justify-content: center;
|
|
margin-inline: 12px;
|
|
|
|
&--title {
|
|
@include font-body-1-bold;
|
|
display: flex;
|
|
align-items: center;
|
|
@include light-theme {
|
|
color: $color-black;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-05;
|
|
}
|
|
}
|
|
|
|
&--timestamp,
|
|
&--sending,
|
|
&--send_failed {
|
|
@include font-body-2;
|
|
@include light-theme {
|
|
color: $color-gray-60;
|
|
}
|
|
@include dark-theme {
|
|
color: $color-gray-25;
|
|
}
|
|
}
|
|
|
|
&--send_failed {
|
|
display: flex;
|
|
align-items: center;
|
|
&::before {
|
|
content: '';
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
height: 12px;
|
|
width: 12px;
|
|
margin-inline-end: 8px;
|
|
@include color-svg(
|
|
'../images/icons/v3/error/error-circle.svg',
|
|
$color-accent-red
|
|
);
|
|
}
|
|
}
|
|
|
|
&--replies {
|
|
&--others {
|
|
@include color-svg(
|
|
'../images/icons/v3/thread/thread-fill-compact.svg',
|
|
$color-gray-25
|
|
);
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
&--self {
|
|
@include color-svg(
|
|
'../images/icons/v3/reply/reply-fill-compact.svg',
|
|
$color-gray-25
|
|
);
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__previews {
|
|
height: 72px;
|
|
position: relative;
|
|
width: 46px;
|
|
|
|
&--image {
|
|
@include button-reset;
|
|
|
|
align-items: center;
|
|
background-color: $color-gray-60;
|
|
background-size: cover;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
height: 72px;
|
|
justify-content: center;
|
|
inset-inline-start: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
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);
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
&--chat {
|
|
@include StoryListItem__Icon('../images/icons/v3/open/open-compact.svg');
|
|
}
|
|
|
|
&--delete {
|
|
@include StoryListItem__Icon(
|
|
'../images/icons/v3/trash/trash-compact.svg'
|
|
);
|
|
}
|
|
|
|
&--hide {
|
|
@include StoryListItem__Icon('../images/icons/v3/x/x-circle-compact.svg');
|
|
}
|
|
|
|
&--info {
|
|
@include StoryListItem__Icon('../images/icons/v3/info/info-compact.svg');
|
|
}
|
|
}
|
|
|
|
&__chevron::after {
|
|
content: '';
|
|
display: inline-block;
|
|
height: 16px;
|
|
margin-inline-start: 2px;
|
|
vertical-align: middle;
|
|
width: 16px;
|
|
@include StoryListItem__Icon(
|
|
'../images/icons/v3/chevron/chevron-right-compact-bold.svg'
|
|
);
|
|
}
|
|
}
|