viewer: finalized the thumbnails view layouts. implemented thumbnails lazy-loading

2 files changed, 40 insertions, 0 deletions

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 7afca8c..ff57775 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -18,6 +18,7 @@
 */
 
 // Global CSS
+@import "@/assets/scss/theme.scss";
 
 // === Forms
 
@@ -42,3 +43,38 @@
 .flex-center {
   align-items: center;
 }
+
+// === Scrollbar styling
+
+.scrollbar {
+  overflow-y: auto;
+}
+.scrollbar::-webkit-scrollbar {
+  width: 12px;
+}
+.scrollbar::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 6px black;
+  background-color: $toolbar-color;
+}
+
+// === Thumbnail tiles alignment
+
+.thumbnail-tiles {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  & > div {
+    margin: 1px;
+  }
+}
+
+// === Effect to apply on lazy-image loading
+
+.v-lazy-image {
+  opacity: 0;
+  transition: opacity 0.4s;
+}
+.v-lazy-image-loaded {
+  opacity: 1;
+}
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 79e14e1..efd5d79 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -27,3 +27,7 @@ $panel-top-txtcolor: white;
 $panel-left-bgcolor: $panel-top-bgcolor;
 $panel-left-txtcolor: $panel-top-txtcolor;
 $content-bgcolor: #1e1e1e;
+
+$toolbar-color: #d62929;
+
+$loader-color: #119;