signal-desktop/stylesheets/components/Lightbox.scss
2023-05-23 19:09:48 +02:00

365 lines
6.6 KiB
SCSS

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.Lightbox {
&__container {
background-color: $color-black;
bottom: 0;
inset-inline: 0;
position: absolute;
top: var(--titlebar-height);
z-index: $z-index-popup;
}
&__animated {
bottom: 0;
inset-inline: 0;
position: absolute;
top: 0;
display: flex;
flex-direction: column;
}
&__main-container {
display: flex;
flex-direction: column;
flex-grow: 1;
// To ensure that a large image doesn't overflow the flex layout
min-height: 50px;
outline: none;
}
&__buttons {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 56px;
}
&__thumbnails {
align-items: center;
display: flex;
justify-content: center;
inset-inline-start: 50%;
position: absolute;
&--container {
height: 44px;
position: relative;
}
}
&__thumbnail {
@include button-reset;
position: relative;
border-radius: 6px;
height: 44px;
margin-inline-end: 8px;
overflow: hidden;
width: 44px;
img {
height: 100%;
object-fit: contain;
width: 100%;
opacity: 0.8;
}
&--selected::after {
position: absolute;
top: 0;
inset-inline-start: 0;
content: '';
width: 100%;
height: 100%;
border-radius: 6px;
box-shadow: inset 0px 0px 0px 2px $color-white;
}
&--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;
// Using this so that the zoom cleanly goes over the footer
z-index: $z-index-base;
&--zoom {
backface-visibility: hidden;
}
}
&--video {
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
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-block: 0;
margin-inline: 40px;
}
&__zoom-button {
@include button-reset;
max-height: 100%;
max-width: 100%;
cursor: zoom-in;
}
&__object--container--zoom,
&__object--container--fill {
.Lightbox__zoom-button {
cursor: zoom-out;
}
}
&__caption {
@include font-body-2;
color: $color-white;
margin-block: 12px;
margin-inline: 0;
text-align: center;
}
&__countdown {
padding: 8px;
}
&__timestamp {
@include font-body-1;
background-color: $color-black;
border-radius: 15px;
color: #eeefef;
padding-block: 6px;
padding-inline: 18px;
text-align: center;
}
&__nav-next,
&__nav-prev {
--height: 224px;
position: absolute;
top: calc(50% - var(--height) / 2);
width: 25%;
max-width: 96px;
height: var(--height);
// We need this so that the buttons stack above the container
z-index: $z-index-above-base;
}
&__nav-next {
inset-inline-end: 0;
align-items: end;
}
&__nav-prev {
inset-inline-start: 0;
align-items: start;
}
&__header {
align-items: center;
display: flex;
height: 52px;
justify-content: space-between;
margin-top: var(--title-bar-drag-area-height);
margin-bottom: 16px;
min-height: 52px;
opacity: 1;
padding-block: 0;
padding-inline: 16px;
transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
&--container {
display: flex;
}
&--avatar {
margin-inline-end: 10px;
}
&--name {
@include font-body-2-bold;
color: $color-white;
}
&--timestamp {
@include font-caption;
color: $color-gray-25;
}
}
&__footer {
opacity: 1;
padding-block: 16px 24px;
padding-inline: 16px;
transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
}
&__container--zoom {
.Lightbox__header,
.Lightbox__footer {
opacity: 0;
}
}
&__controls {
display: flex;
gap: 32px;
}
&__button {
@include button-reset;
border-radius: 4px;
display: inline-block;
height: 24px;
width: 24px;
&::before {
content: '';
display: block;
height: 100%;
width: 100%;
}
&:focus {
outline: 4px solid $color-ultramarine;
}
&:disabled {
&::before {
background: $color-gray-65;
}
}
&--forward {
&::before {
@include color-svg(
'../images/icons/v3/forward/forward.svg',
$color-gray-15
);
}
}
&--save {
&::before {
@include color-svg('../images/icons/v3/save/save.svg', $color-gray-15);
}
}
&--close {
&::before {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
}
}
&--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;
-webkit-filter: drop-shadow(0 0 4px $color-black-alpha-40);
content: '';
display: block;
background-size: 100%;
}
&:hover {
opacity: 1;
}
outline: none;
&:focus {
outline: none;
}
@include keyboard-mode {
&:focus {
opacity: 1;
}
}
@include button-focus-outline;
}
&--previous {
justify-content: start;
padding-inline-start: 16px;
&::before {
background-image: url('../images/icons/v3/chevron/chevron-left-white.svg');
}
}
&--next {
justify-content: end;
padding-inline-end: 16px;
&::before {
background-image: url('../images/icons/v3/chevron/chevron-right-white.svg');
}
}
}
}