signal-desktop/stylesheets/components/StoryViewer.scss
2024-04-15 13:14:26 -07:00

412 lines
8 KiB
SCSS

// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.StoryViewer {
&__overlay {
background-size: contain;
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
z-index: $z-index-popup-overlay;
}
&__content {
align-items: center;
backdrop-filter: blur(90px);
background: $color-black-alpha-20;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
z-index: $z-index-popup-overlay;
}
&__close-button {
@include button-reset;
@include modal-close-button;
@include light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
}
width: 20px;
height: 20px;
top: var(--title-bar-drag-area-height);
inset-inline-end: 28px;
z-index: $z-index-above-above-base;
}
&__container {
flex-grow: 1;
overflow: hidden;
outline: none;
}
&__story {
max-height: 100%;
outline: none;
width: auto;
&__image {
object-fit: contain;
}
}
&__meta {
@include position-absolute-center-x;
bottom: 0;
min-width: 284px;
padding-block: 0;
padding-inline: 16px;
width: clamp(0vh, 56.25vh, 100vw);
z-index: $z-index-story-meta;
&__list {
@include font-body-2;
align-items: center;
display: flex;
color: $color-white-alpha-80;
&::before {
@include color-svg(
'../images/icons/v3/stories/stories-fill-compact.svg',
$color-white-alpha-80
);
content: '';
display: block;
height: 14px;
margin-inline-end: 6px;
width: 14px;
}
}
&--group-avatar {
margin-inline-start: -8px;
}
&--title-container {
padding-inline-start: 8px;
}
&--title {
@include font-body-1-bold;
color: $color-white;
display: inline;
margin-inline-end: 8px;
}
&--timestamp {
@include font-body-2;
color: $color-white-alpha-60;
}
&__playback-bar {
display: flex;
justify-content: space-between;
user-select: none;
&__container {
align-items: center;
display: flex;
}
}
&__playback-controls {
align-items: center;
display: flex;
}
}
&__caption {
@include font-body-1;
color: $color-white;
padding-block: 4px;
padding-inline: 0;
margin-bottom: 24px;
&__overlay {
@include button-reset;
background: $color-black-alpha-60;
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
z-index: $z-index-base;
}
}
&__actions {
display: flex;
justify-content: center;
min-height: 60px;
&__failed {
@include button-reset;
@include font-body-1;
align-items: center;
color: $color-white;
display: flex;
&::before {
content: '';
display: block;
height: 18px;
margin-inline-end: 12px;
width: 18px;
@include color-svg(
'../images/icons/v3/error/error-circle.svg',
$color-accent-red
);
}
}
}
&__reply {
@include button-reset;
color: $color-gray-05;
@include keyboard-mode {
&:focus {
color: $color-ultramarine;
}
}
&__arrow {
display: flex;
align-items: center;
&::before {
content: '';
height: 20px;
margin-inline-end: 12px;
width: 20px;
@include color-svg('../images/icons/v3/reply/reply.svg', $color-white);
}
}
&__chevron {
display: flex;
align-items: center;
&::after {
content: '';
display: inline-block;
height: 16px;
margin-inline-start: 4px;
vertical-align: middle;
width: 16px;
@include color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$color-white
);
}
}
}
&__more__button {
display: flex;
justify-content: center;
align-items: center;
height: 24px;
width: 24px;
&::after {
@include color-svg('../images/icons/v3/more/more.svg', $color-white);
content: '';
height: 20px;
width: 20px;
@include keyboard-mode {
&:focus {
background-color: $color-black;
}
}
}
}
&__mute {
@include button-reset;
height: 20px;
margin-block: 0;
margin-inline: 24px;
width: 20px;
@include color-svg('../images/icons/v3/speaker/speaker.svg', $color-white);
@include keyboard-mode {
&:focus {
background-color: $color-white-alpha-80;
}
}
}
&__pause {
@include button-reset;
height: 20px;
width: 20px;
@include color-svg('../images/icons/v3/pause/pause.svg', $color-white);
@include keyboard-mode {
&:focus {
background-color: $color-white-alpha-80;
}
}
}
&__play {
@include button-reset;
height: 20px;
width: 20px;
@include color-svg('../images/icons/v3/play/play-fill.svg', $color-white);
@include keyboard-mode {
&:focus {
background-color: $color-white-alpha-80;
}
}
}
&__unmute {
@include button-reset;
height: 20px;
margin-block: 0;
margin-inline: 24px;
width: 20px;
@include color-svg(
'../images/icons/v3/speaker/speaker-slash.svg',
$color-white
);
@include keyboard-mode {
&:focus {
background-color: $color-white-alpha-80;
}
}
}
&__soundless {
@include button-reset;
height: 20px;
margin-block: 0;
margin-inline: 24px;
width: 20px;
@include color-svg(
'../images/icons/v3/speaker/speaker-x.svg',
$color-white
);
@include keyboard-mode {
&:focus {
background-color: $color-white-alpha-80;
}
}
}
&__progress {
display: flex;
&--container {
background: $color-white-alpha-40;
border-radius: 2px;
height: 2px;
margin-block: 12px 0;
margin-inline: 1px;
overflow: hidden;
width: 100%;
}
&--bar {
background: $color-white;
border-radius: 2px;
height: 100%;
&:dir(ltr) {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translateX(-100%);
}
&:dir(rtl) {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translateX(100%);
}
}
}
&__animated-emojis {
height: 100%;
position: absolute;
width: 100%;
z-index: $z-index-above-base;
}
&__arrow {
@include button-reset;
align-items: center;
display: flex;
height: 100%;
position: absolute;
width: 25%;
z-index: $z-index-above-above-base;
&::before {
content: '';
height: 28px;
opacity: 0;
width: 28px;
transition: opacity 200ms ease-in-out;
}
&--left {
justify-content: flex-start;
inset-inline-start: 0;
&::before {
margin-inline-start: 16px;
@include color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-white
);
}
}
&--right {
justify-content: flex-end;
inset-inline-end: 0;
&::before {
margin-inline-end: 16px;
@include color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$color-white
);
}
}
&--visible::before {
opacity: 1;
}
}
&__protection {
position: absolute;
width: 100%;
z-index: $z-index-base;
&--top {
background: linear-gradient($color-black-alpha-16, $color-transparent);
top: 0;
height: 80px;
}
&--bottom {
background: linear-gradient($color-transparent, $color-black-alpha-60);
bottom: 0;
height: 256px;
}
}
&__sending {
align-items: center;
display: flex;
&__spinner__container {
margin-inline: 0 12px;
}
}
}