From 16d319ac092aea56ac9f872129d23fface4b379d Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Thu, 30 Jan 2020 18:34:34 +0100 Subject: viewer: thumbnail loader styling --- viewer/src/assets/scss/theme.scss | 2 +- viewer/src/views/GalleryThumbnail.vue | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) (limited to 'viewer') diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss index efd5d79..3f2b623 100644 --- a/viewer/src/assets/scss/theme.scss +++ b/viewer/src/assets/scss/theme.scss @@ -30,4 +30,4 @@ $content-bgcolor: #1e1e1e; $toolbar-color: #d62929; -$loader-color: #119; +$loader-color: #272727; diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue index 7ceea4f..433a673 100644 --- a/viewer/src/views/GalleryThumbnail.vue +++ b/viewer/src/views/GalleryThumbnail.vue @@ -57,16 +57,14 @@ export default class GalleryThumbnail extends Vue { max-height: 250px; } .preload { - background: linear-gradient(to right, rgba(0, 0, 0, 0) 8%, $loader-color 18%, rgba(0, 0, 0, 0) 33%); - background-size: 200% 50px; - animation: preloadAnimation 2s infinite linear; + animation: preloadAnimation 1s infinite ease-in-out alternate; } @keyframes preloadAnimation { from { - background-position: -200px 0; + background-color: $content-bgcolor; } to { - background-position: 200px 0; + background-color: $loader-color; } } // Temporary size until we get the true thumbnail size -- cgit v1.2.3