signal-desktop/stylesheets/components/StoryViewer.scss

459 lines
9 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
2024-11-15 23:09:31 +00:00
@use '../mixins';
@use '../variables';
2022-03-04 21:14:52 +00:00
.StoryViewer {
&__overlay {
2022-04-22 18:36:34 +00:00
background-size: contain;
2022-08-02 17:05:51 +00:00
height: 100%;
2023-04-20 17:03:43 +00:00
inset-inline-start: 0;
2022-03-04 21:14:52 +00:00
position: absolute;
2022-08-02 17:05:51 +00:00
top: 0;
2022-03-04 21:14:52 +00:00
width: 100%;
2024-11-15 23:09:31 +00:00
z-index: variables.$z-index-popup-overlay;
2022-03-04 21:14:52 +00:00
}
&__content {
align-items: center;
2022-04-22 18:36:34 +00:00
backdrop-filter: blur(90px);
2024-11-15 23:09:31 +00:00
background: variables.$color-black-alpha-20;
2022-03-04 21:14:52 +00:00
display: flex;
flex-direction: column;
2022-08-02 17:05:51 +00:00
height: 100%;
2022-03-04 21:14:52 +00:00
justify-content: center;
2023-04-20 17:03:43 +00:00
inset-inline-start: 0;
2022-03-04 21:14:52 +00:00
position: absolute;
2022-08-02 17:05:51 +00:00
top: 0;
2022-03-04 21:14:52 +00:00
width: 100%;
2024-11-15 23:09:31 +00:00
z-index: variables.$z-index-popup-overlay;
2022-03-04 21:14:52 +00:00
}
&__close-button {
2024-11-15 23:09:31 +00:00
@include mixins.button-reset;
& {
@include mixins.modal-close-button;
}
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-15
);
}
& {
width: 20px;
height: 20px;
top: var(--title-bar-drag-area-height);
inset-inline-end: 28px;
z-index: variables.$z-index-above-above-base;
}
2022-03-04 21:14:52 +00:00
}
&__container {
flex-grow: 1;
overflow: hidden;
2024-04-15 20:14:26 +00:00
outline: none;
2022-03-04 21:14:52 +00:00
}
&__story {
max-height: 100%;
outline: none;
width: auto;
&__image {
object-fit: contain;
}
2022-03-04 21:14:52 +00:00
}
&__meta {
2024-11-15 23:09:31 +00:00
@include mixins.position-absolute-center-x;
2022-03-04 21:14:52 +00:00
bottom: 0;
min-width: 284px;
2023-04-20 17:03:43 +00:00
padding-block: 0;
padding-inline: 16px;
width: clamp(0vh, 56.25vh, 100vw);
2024-11-15 23:09:31 +00:00
z-index: variables.$z-index-story-meta;
2022-03-04 21:14:52 +00:00
&__list {
2024-11-15 23:09:31 +00:00
@include mixins.font-body-2;
align-items: center;
display: flex;
2024-11-15 23:09:31 +00:00
color: variables.$color-white-alpha-80;
&::before {
2024-11-15 23:09:31 +00:00
@include mixins.color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/stories/stories-fill-compact.svg',
2024-11-15 23:09:31 +00:00
variables.$color-white-alpha-80
);
2024-11-15 23:09:31 +00:00
& {
content: '';
display: block;
height: 14px;
margin-inline-end: 6px;
width: 14px;
}
}
}
2022-03-04 21:14:52 +00:00
&--group-avatar {
2023-04-20 17:03:43 +00:00
margin-inline-start: -8px;
2022-03-04 21:14:52 +00:00
}
&--title-container {
2023-04-20 17:03:43 +00:00
padding-inline-start: 8px;
}
2022-03-04 21:14:52 +00:00
&--title {
2024-11-15 23:09:31 +00:00
@include mixins.font-body-1-bold;
color: variables.$color-white;
2022-03-04 21:14:52 +00:00
display: inline;
2023-04-20 17:03:43 +00:00
margin-inline-end: 8px;
2022-03-04 21:14:52 +00:00
}
&--timestamp {
2024-11-15 23:09:31 +00:00
@include mixins.font-body-2;
color: variables.$color-white-alpha-60;
2022-03-04 21:14:52 +00:00
}
2022-05-06 19:02:44 +00:00
&__playback-bar {
display: flex;
justify-content: space-between;
user-select: none;
&__container {
align-items: center;
display: flex;
}
2022-05-06 19:02:44 +00:00
}
&__playback-controls {
align-items: center;
display: flex;
}
2022-03-04 21:14:52 +00:00
}
2022-04-14 17:02:12 +00:00
&__caption {
2024-11-15 23:09:31 +00:00
@include mixins.font-body-1;
color: variables.$color-white;
2023-04-20 17:03:43 +00:00
padding-block: 4px;
padding-inline: 0;
2022-04-22 18:36:34 +00:00
margin-bottom: 24px;
2024-11-15 23:09:31 +00:00
text-shadow: 0px 0px 48px 0px variables.$color-black-alpha-80;
2022-04-14 17:02:12 +00:00
&__overlay {
2024-11-15 23:09:31 +00:00
@include mixins.button-reset;
& {
background: variables.$color-black-alpha-60;
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
z-index: variables.$z-index-base;
}
2022-04-14 17:02:12 +00:00
}
}
2022-03-04 21:14:52 +00:00
&__actions {
2022-04-15 00:08:46 +00:00
display: flex;
justify-content: center;
2022-04-22 18:36:34 +00:00
min-height: 60px;
2022-11-16 22:10:11 +00:00
&__failed {
2024-11-15 23:09:31 +00:00
@include mixins.button-reset;
& {
@include mixins.font-body-1;
align-items: center;
color: variables.$color-white;
display: flex;
}
2022-11-16 22:10:11 +00:00
&::before {
content: '';
display: block;
height: 18px;
2023-04-20 17:03:43 +00:00
margin-inline-end: 12px;
2022-11-16 22:10:11 +00:00
width: 18px;
2024-11-15 23:09:31 +00:00
@include mixins.color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/error/error-circle.svg',
2024-11-15 23:09:31 +00:00
variables.$color-accent-red
2022-11-16 22:10:11 +00:00
);
}
}
2022-03-04 21:14:52 +00:00
}
&__reply {
2024-11-15 23:09:31 +00:00
@include mixins.button-reset;
& {
color: variables.$color-gray-05;
}
@include mixins.keyboard-mode {
&:focus {
2024-11-15 23:09:31 +00:00
color: variables.$color-ultramarine;
}
}
&__arrow {
display: flex;
align-items: center;
&::before {
content: '';
height: 20px;
2023-04-20 17:03:43 +00:00
margin-inline-end: 12px;
width: 20px;
2024-11-15 23:09:31 +00:00
@include mixins.color-svg(
'../images/icons/v3/reply/reply.svg',
variables.$color-white
);
2023-05-04 18:04:22 +00:00
}
}
&__chevron {
display: flex;
align-items: center;
&::after {
content: '';
display: inline-block;
height: 16px;
margin-inline-start: 4px;
vertical-align: middle;
width: 16px;
2024-11-15 23:09:31 +00:00
@include mixins.color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/chevron/chevron-right.svg',
2024-11-15 23:09:31 +00:00
variables.$color-white
);
}
}
2022-03-04 21:14:52 +00:00
}
2022-07-25 18:55:44 +00:00
&__more__button {
display: flex;
justify-content: center;
align-items: center;
2022-05-06 19:02:44 +00:00
height: 24px;
width: 24px;
2022-07-25 18:55:44 +00:00
&::after {
2024-11-15 23:09:31 +00:00
@include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-white
);
& {
content: '';
height: 20px;
width: 20px;
}
2022-05-06 19:02:44 +00:00
2024-11-15 23:09:31 +00:00
@include mixins.keyboard-mode {
2022-07-25 18:55:44 +00:00
&:focus {
2024-11-15 23:09:31 +00:00
background-color: variables.$color-black;
2022-07-25 18:55:44 +00:00
}
2022-05-06 19:02:44 +00:00
}
}
}
&__mute {
2024-11-15 23:09:31 +00:00
@include mixins.button-reset;
& {
height: 20px;
margin-block: 0;
margin-inline: 24px;
width: 20px;
}
@include mixins.color-svg(
'../images/icons/v3/speaker/speaker.svg',
variables.$color-white
);
@include mixins.keyboard-mode {
2022-05-06 19:02:44 +00:00
&:focus {
2024-11-15 23:09:31 +00:00
background-color: variables.$color-white-alpha-80;
2022-05-06 19:02:44 +00:00
}
}
}
&__pause {
2024-11-15 23:09:31 +00:00
@include mixins.button-reset;
& {
height: 20px;
width: 20px;
}
@include mixins.color-svg(
'../images/icons/v3/pause/pause.svg',
variables.$color-white
);
@include mixins.keyboard-mode {
2022-05-06 19:02:44 +00:00
&:focus {
2024-11-15 23:09:31 +00:00
background-color: variables.$color-white-alpha-80;
2022-05-06 19:02:44 +00:00
}
}
}
&__play {
2024-11-15 23:09:31 +00:00
@include mixins.button-reset;
& {
height: 20px;
width: 20px;
}
@include mixins.color-svg(
'../images/icons/v3/play/play-fill.svg',
variables.$color-white
);
@include mixins.keyboard-mode {
2022-05-06 19:02:44 +00:00
&:focus {
2024-11-15 23:09:31 +00:00
background-color: variables.$color-white-alpha-80;
2022-05-06 19:02:44 +00:00
}
}
}
&__unmute {
2024-11-15 23:09:31 +00:00
@include mixins.button-reset;
& {
height: 20px;
margin-block: 0;
margin-inline: 24px;
width: 20px;
}
@include mixins.color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/speaker/speaker-slash.svg',
2024-11-15 23:09:31 +00:00
variables.$color-white
2023-05-04 18:04:22 +00:00
);
2024-11-15 23:09:31 +00:00
@include mixins.keyboard-mode {
&:focus {
2024-11-15 23:09:31 +00:00
background-color: variables.$color-white-alpha-80;
}
}
}
&__soundless {
2024-11-15 23:09:31 +00:00
@include mixins.button-reset;
& {
height: 20px;
margin-block: 0;
margin-inline: 24px;
width: 20px;
}
@include mixins.color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/speaker/speaker-x.svg',
2024-11-15 23:09:31 +00:00
variables.$color-white
2023-05-04 18:04:22 +00:00
);
2024-11-15 23:09:31 +00:00
@include mixins.keyboard-mode {
2022-05-06 19:02:44 +00:00
&:focus {
2024-11-15 23:09:31 +00:00
background-color: variables.$color-white-alpha-80;
2022-05-06 19:02:44 +00:00
}
}
}
2022-03-04 21:14:52 +00:00
&__progress {
display: flex;
}
2022-05-03 23:50:44 +00:00
2022-05-04 17:43:22 +00:00
&__animated-emojis {
2022-08-02 17:05:51 +00:00
height: 100%;
2022-05-04 17:43:22 +00:00
position: absolute;
width: 100%;
2024-11-15 23:09:31 +00:00
z-index: variables.$z-index-above-base;
2022-05-04 17:43:22 +00:00
}
2022-05-03 23:50:44 +00:00
&__arrow {
2024-11-15 23:09:31 +00:00
@include mixins.button-reset;
& {
align-items: center;
display: flex;
height: 100%;
position: absolute;
width: 25%;
z-index: variables.$z-index-above-above-base;
}
2022-05-03 23:50:44 +00:00
2022-05-04 18:45:32 +00:00
&::before {
content: '';
2023-05-04 18:04:22 +00:00
height: 28px;
2022-05-03 23:50:44 +00:00
opacity: 0;
2023-05-04 18:04:22 +00:00
width: 28px;
2022-05-03 23:50:44 +00:00
transition: opacity 200ms ease-in-out;
}
&--left {
justify-content: flex-start;
2023-04-20 17:03:43 +00:00
inset-inline-start: 0;
2022-05-03 23:50:44 +00:00
2022-05-04 18:45:32 +00:00
&::before {
2023-05-04 18:04:22 +00:00
margin-inline-start: 16px;
2024-11-15 23:09:31 +00:00
@include mixins.color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/chevron/chevron-left.svg',
2024-11-15 23:09:31 +00:00
variables.$color-white
2022-05-03 23:50:44 +00:00
);
}
}
&--right {
justify-content: flex-end;
2023-04-20 17:03:43 +00:00
inset-inline-end: 0;
2022-05-03 23:50:44 +00:00
2022-05-04 18:45:32 +00:00
&::before {
2023-05-04 18:04:22 +00:00
margin-inline-end: 16px;
2024-11-15 23:09:31 +00:00
@include mixins.color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/chevron/chevron-right.svg',
2024-11-15 23:09:31 +00:00
variables.$color-white
2022-05-03 23:50:44 +00:00
);
}
}
2022-05-04 18:45:32 +00:00
&--visible::before {
2022-05-03 23:50:44 +00:00
opacity: 1;
}
}
&__protection {
position: absolute;
width: 100%;
2024-11-15 23:09:31 +00:00
z-index: variables.$z-index-base;
2022-05-03 23:50:44 +00:00
&--top {
2024-11-15 23:09:31 +00:00
background: linear-gradient(
variables.$color-black-alpha-16,
variables.$color-transparent
);
2022-05-03 23:50:44 +00:00
top: 0;
height: 80px;
}
&--bottom {
2024-11-15 23:09:31 +00:00
background: linear-gradient(
variables.$color-transparent,
variables.$color-black-alpha-60
);
2022-05-03 23:50:44 +00:00
bottom: 0;
2024-08-05 20:32:40 +00:00
height: 140px;
}
&--bottom.StoryViewer__protection--has-caption {
2024-11-15 23:09:31 +00:00
background: linear-gradient(
variables.$color-transparent,
variables.$color-black-alpha-80
);
2024-08-05 20:32:40 +00:00
height: 280px;
}
&--whole {
top: 0;
bottom: 0;
2024-11-15 23:09:31 +00:00
background: linear-gradient(
variables.$color-transparent,
variables.$color-black-alpha-40
);
2022-05-03 23:50:44 +00:00
}
}
2022-11-16 22:10:11 +00:00
&__sending {
align-items: center;
display: flex;
&__spinner__container {
2023-04-20 17:03:43 +00:00
margin-inline: 0 12px;
2022-11-16 22:10:11 +00:00
}
}
2022-03-04 21:14:52 +00:00
}