diff --git a/src/app/shared/gallery/components/gallery-inline/gallery-inline.component.html b/src/app/shared/gallery/components/gallery-inline/gallery-inline.component.html
index 07c8073..9be3b88 100644
--- a/src/app/shared/gallery/components/gallery-inline/gallery-inline.component.html
+++ b/src/app/shared/gallery/components/gallery-inline/gallery-inline.component.html
@@ -1,9 +1,20 @@
+
-
+ [ngStyle]="{
+ 'width': 'auto',
+ 'height': image.thumbnailHeightPx + ' px',
+ 'aspect-ratio': image.aspectRatio - 0.001
+ }"
+ class="gallery-item skeleton">
+
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 09f5c5a..4e05024 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -197,13 +197,6 @@ ul li::before {
opacity: 1;
}
-.skeleton {
- background-color: variables.$medium-color;
- background-image: linear-gradient(90deg, variables.$medium-color-filter 0px, variables.$medium-color 40px, variables.$medium-color-filter 80px);
- background-size: 100%;
- animation: skeleton 1.5s ease-in-out infinite;
-}
-
.skeleton {
// handle opacity here, otherwise the whole element will be transparent
background: repeating-linear-gradient(
@@ -221,7 +214,8 @@ ul li::before {
-moz-animation: skeleton 5s ease-in-out infinite;
animation: skeleton 5s ease-in-out infinite;
- box-shadow: 0 0 0 0.1rem variables.$medium-color inset;
+ box-shadow: 0 0 0 0.1rem color.adjust(variables.$medium-color, $alpha:-0.85) inset;
+ border-radius: variables.$border-radius * 2;
}
@-webkit-keyframes skeleton {