Signal-Desktop/stylesheets/components/StoryImage.scss

70 lines
1.2 KiB
SCSS

// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.StoryImage {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
overflow: hidden;
position: relative;
width: 100%;
z-index: $z-index-base;
&--thumbnail {
height: 72px;
width: 46px;
}
&__image {
height: 100%;
object-fit: cover;
width: 100%;
}
&__overlay-container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
&__error {
@include color-svg(
'../images/full-screen-flow/alert-outline.svg',
$color-white
);
align-items: center;
display: flex;
height: 32px;
justify-content: center;
width: 32px;
}
&__spinner-bubble {
align-items: center;
background-color: $color-gray-75;
border-radius: 32px;
display: flex;
height: 32px;
justify-content: center;
width: 32px;
}
&__spinner {
@include dark-theme {
&__circle {
background-color: $color-white;
}
&__arc {
background-color: $color-gray-75;
}
}
}
}