signal-desktop/stylesheets/components/Lightbox.scss

380 lines
6.6 KiB
SCSS
Raw Normal View History

2021-08-23 23:14:53 +00:00
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.Lightbox {
&__container {
2023-03-07 17:32:00 +00:00
background-color: $color-black;
2021-08-23 23:14:53 +00:00
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: var(--titlebar-height);
2021-12-01 23:13:09 +00:00
z-index: $z-index-popup;
}
&__animated {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: column;
2021-08-23 23:14:53 +00:00
}
&__main-container {
display: flex;
flex-direction: column;
flex-grow: 1;
2022-02-09 20:33:19 +00:00
// To ensure that a large image doesn't overflow the flex layout
2021-08-23 23:14:53 +00:00
min-height: 50px;
outline: none;
}
&__buttons {
2021-08-23 23:14:53 +00:00
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 56px;
}
&__thumbnails {
align-items: center;
display: flex;
justify-content: center;
left: 50%;
position: absolute;
&--container {
2023-03-03 18:41:42 +00:00
height: 44px;
2021-08-23 23:14:53 +00:00
position: relative;
}
}
&__thumbnail {
@include button-reset;
2023-03-03 18:41:42 +00:00
position: relative;
border-radius: 6px;
height: 44px;
2021-08-23 23:14:53 +00:00
margin-right: 8px;
overflow: hidden;
2023-03-03 18:41:42 +00:00
width: 44px;
2021-08-23 23:14:53 +00:00
img {
height: 100%;
object-fit: contain;
width: 100%;
2023-03-03 18:41:42 +00:00
opacity: 0.8;
2021-08-23 23:14:53 +00:00
}
2023-03-03 18:41:42 +00:00
&--selected::after {
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
border-radius: 6px;
box-shadow: inset 0px 0px 0px 2px $color-white;
2021-08-23 23:14:53 +00:00
}
&--unavailable {
@include color-svg('../images/image.svg', $color-gray-25);
height: 100%;
width: 100%;
}
}
&__object {
&--container {
display: inline-flex;
flex-grow: 1;
justify-content: center;
overflow: hidden;
position: relative;
2021-12-01 23:13:09 +00:00
// Using this so that the zoom cleanly goes over the footer
z-index: $z-index-base;
&--zoom {
backface-visibility: hidden;
}
2021-08-23 23:14:53 +00:00
}
2022-07-07 21:07:00 +00:00
&--video {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
2021-08-23 23:14:53 +00:00
height: auto;
max-height: 100%;
max-width: 100%;
object-fit: contain;
outline: none;
width: auto;
}
&__unsupported {
@include button-reset;
flex-grow: 1;
height: 100%;
max-width: 200px;
width: 100%;
&--image {
@include color-svg('../images/image.svg', $color-gray-25);
}
&--video {
@include color-svg('../images/movie.svg', $color-gray-25);
}
&--file {
@include color-svg('../images/file.svg', $color-gray-25);
}
&--missing {
@include color-svg(
'../images/full-screen-flow/alert-outline.svg',
$color-gray-25
);
}
}
&__zoomable-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 40px;
}
2021-08-23 23:14:53 +00:00
&__zoom-button {
@include button-reset;
max-height: 100%;
max-width: 100%;
2021-08-23 23:14:53 +00:00
cursor: zoom-in;
}
&__object--container--zoom,
&__object--container--fill {
2021-08-23 23:14:53 +00:00
.Lightbox__zoom-button {
cursor: zoom-out;
}
}
&__caption {
@include font-body-2;
color: $color-white;
margin: 12px 0;
text-align: center;
}
&__countdown {
padding: 8px;
}
&__timestamp {
@include font-body-1;
background-color: $color-black;
border-radius: 15px;
color: #eeefef;
padding: 6px 18px;
text-align: center;
}
2021-12-01 23:13:09 +00:00
&__nav-next,
&__nav-prev {
2021-08-23 23:14:53 +00:00
position: absolute;
2023-03-03 18:41:42 +00:00
top: 0;
width: 25%;
height: 100%;
2021-12-01 23:13:09 +00:00
// We need this so that the buttons stack above the container
z-index: $z-index-above-base;
}
&__nav-next {
2023-03-03 18:41:42 +00:00
right: 0;
padding-right: 16px;
2021-08-23 23:14:53 +00:00
}
&__nav-prev {
2023-03-03 18:41:42 +00:00
left: 0;
padding-left: 16px;
2021-08-23 23:14:53 +00:00
}
&__header {
align-items: center;
display: flex;
2023-03-07 17:32:00 +00:00
height: 52px;
2021-08-23 23:14:53 +00:00
justify-content: space-between;
2023-03-07 17:32:00 +00:00
margin-top: var(--title-bar-drag-area-height);
margin-bottom: 16px;
min-height: 52px;
opacity: 1;
padding: 0 16px;
transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
2021-08-23 23:14:53 +00:00
&--container {
display: flex;
}
&--avatar {
2023-03-03 18:41:42 +00:00
margin-right: 10px;
2021-08-23 23:14:53 +00:00
}
&--name {
@include font-body-2-bold;
color: $color-white;
}
&--timestamp {
@include font-caption;
color: $color-gray-25;
}
}
&__footer {
opacity: 1;
2023-03-07 17:32:00 +00:00
padding: 16px 16px 24px 16px;
transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
}
&__container--zoom {
.Lightbox__header,
.Lightbox__footer {
opacity: 0;
}
}
2023-03-07 17:32:00 +00:00
&__container--has-controls {
.Lightbox__nav-next,
.Lightbox__nav-prev {
// Give some room for <video/>'s controls.
$controls-height: 64px;
padding-top: $controls-height;
height: calc(100% - $controls-height);
}
}
2023-03-03 18:41:42 +00:00
&__controls {
display: flex;
gap: 32px;
}
2021-08-23 23:14:53 +00:00
&__button {
@include button-reset;
border-radius: 4px;
display: inline-block;
height: 24px;
width: 24px;
&::before {
content: '';
display: block;
height: 100%;
width: 100%;
}
&:hover {
&::before {
background: $color-white;
}
}
&:focus {
outline: 4px solid $color-ultramarine;
}
&:disabled {
&::before {
background: $color-gray-65;
}
}
&--forward {
&::before {
@include color-svg(
2023-03-03 18:41:42 +00:00
'../images/icons/v2/forward-outline-24.svg',
2021-08-23 23:14:53 +00:00
$color-gray-15
);
}
}
&--save {
&::before {
@include color-svg(
2023-03-03 18:41:42 +00:00
'../images/icons/v2/download-outline-24.svg',
2021-08-23 23:14:53 +00:00
$color-gray-15
);
}
}
&--close {
&::before {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
}
}
2023-03-03 18:41:42 +00:00
&--previous,
&--next {
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 200ms ease-in-out;
display: flex;
flex-direction: row;
align-items: center;
&::before {
width: 32px;
height: 32px;
}
&:hover {
opacity: 1;
}
outline: none;
&:focus {
outline: none;
}
@include keyboard-mode {
&:focus {
opacity: 1;
}
}
@include button-focus-outline;
}
2021-08-23 23:14:53 +00:00
&--previous {
2023-03-03 18:41:42 +00:00
justify-content: start;
2021-08-23 23:14:53 +00:00
&::before {
@include color-svg(
2023-03-03 18:41:42 +00:00
'../images/icons/v2/arrow-left-32.svg',
$color-gray-05
2021-08-23 23:14:53 +00:00
);
}
}
&--next {
2023-03-03 18:41:42 +00:00
justify-content: end;
2021-08-23 23:14:53 +00:00
&::before {
@include color-svg(
2023-03-03 18:41:42 +00:00
'../images/icons/v2/arrow-right-32.svg',
$color-gray-05
2021-08-23 23:14:53 +00:00
);
}
}
}
}