signal-desktop/stylesheets/components/Stories.scss

176 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
.Stories {
background: $color-gray-95;
display: flex;
height: var(--window-height);
2022-03-04 21:14:52 +00:00
left: 0;
position: absolute;
2022-06-23 15:40:21 +00:00
top: 0;
2022-03-04 21:14:52 +00:00
user-select: none;
width: 100%;
2022-04-08 18:50:26 +00:00
z-index: $z-index-stories;
2022-03-04 21:14:52 +00:00
&__pane {
background: $color-gray-80;
border-right: 1px solid $color-gray-65;
display: flex;
flex-direction: column;
height: 100%;
width: 380px;
2022-07-05 16:44:53 +00:00
padding-top: calc(14px + var(--title-bar-drag-area-height));
2022-03-04 21:14:52 +00:00
2022-07-25 18:55:44 +00:00
&__settings__button {
margin-left: 24px;
opacity: 1;
2022-07-22 01:38:27 +00:00
position: absolute;
right: 12px;
top: -6px;
&::after {
@include dark-theme {
@include color-svg(
'../images/icons/v2/more-horiz-24.svg',
$color-white
);
}
}
}
2022-03-04 21:14:52 +00:00
&__header {
align-items: center;
display: flex;
justify-content: space-between;
padding: 0 16px;
2022-07-22 01:38:27 +00:00
position: relative;
2022-03-04 21:14:52 +00:00
&--centered {
justify-content: flex-start;
}
&--title {
@include font-body-1-bold;
2022-03-09 19:33:43 +00:00
color: $color-gray-05;
2022-03-04 21:14:52 +00:00
display: flex;
flex: 1;
justify-content: center;
}
&--centered .Stories__pane__header--title {
text-align: center;
width: 100%;
}
&--camera {
@include button-reset;
@include color-svg(
'../images/icons/v2/camera-outline-24.svg',
$color-white
);
height: 22px;
2022-07-22 01:38:27 +00:00
position: absolute;
right: 63px;
2022-03-04 21:14:52 +00:00
width: 22px;
}
&--back {
@include button-reset;
height: 24px;
2022-07-22 01:38:27 +00:00
position: absolute;
2022-03-04 21:14:52 +00:00
width: 24px;
2022-07-22 01:38:27 +00:00
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',
$color-white
);
2022-03-04 21:14:52 +00:00
@include keyboard-mode {
&:hover {
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',
$color-ultramarine-light
);
}
}
}
}
&__list {
@include scrollbar;
flex: 1;
overflow-y: overlay;
2022-07-29 00:17:30 +00:00
padding: 0 14px;
2022-03-04 21:14:52 +00:00
&--empty {
@include font-body-1;
align-items: center;
color: $color-gray-45;
display: flex;
flex-direction: column;
justify-content: center;
}
}
}
&__search__container {
margin: 14px 16px 8px 16px;
}
&__placeholder {
align-items: center;
2022-05-06 16:18:02 +00:00
color: $color-gray-45;
2022-03-04 21:14:52 +00:00
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
&__stories {
height: 56px;
margin-bottom: 22px;
width: 56px;
@include color-svg(
'../images/icons/v2/stories-outline-56.svg',
2022-05-06 16:18:02 +00:00
$color-gray-45
2022-03-04 21:14:52 +00:00
);
}
}
2022-04-15 22:31:18 +00:00
&__hidden-stories {
@include button-reset;
@include font-body-1-bold;
align-items: center;
color: $color-gray-05;
display: flex;
justify-content: space-between;
padding: 12px 24px;
position: relative;
width: 100%;
&::after {
@include color-svg(
'../images/icons/v2/chevron-right-24.svg',
$color-gray-05
);
content: '';
height: 16px;
width: 16px;
}
&--expanded {
&::after {
@include color-svg(
'../images/icons/v2/chevron-down-24.svg',
$color-gray-05
);
}
}
}
2022-07-01 00:52:03 +00:00
&__my-stories {
padding: 0 10px;
}
2022-03-04 21:14:52 +00:00
}