aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/assets/scss
diff options
context:
space:
mode:
authorZero~Informatique2020-01-29 04:53:35 +0100
committerNotkea2020-01-29 21:59:12 +0100
commit8d543ab94d3678728466d3627e0d419ec00f3010 (patch)
tree69cc8bcba4314a30aba2cf7db4312155ef2bf76c /viewer/src/assets/scss
parent084c509fad0fdf2415587e0e3af8e86fd306447a (diff)
downloadldgallery-8d543ab94d3678728466d3627e0d419ec00f3010.tar.gz
viewer: finalized the thumbnails view layouts. implemented thumbnails lazy-loading
Diffstat (limited to 'viewer/src/assets/scss')
-rw-r--r--viewer/src/assets/scss/global.scss36
-rw-r--r--viewer/src/assets/scss/theme.scss4
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 @@
18*/ 18*/
19 19
20// Global CSS 20// Global CSS
21@import "@/assets/scss/theme.scss";
21 22
22// === Forms 23// === Forms
23 24
@@ -42,3 +43,38 @@
42.flex-center { 43.flex-center {
43 align-items: center; 44 align-items: center;
44} 45}
46
47// === Scrollbar styling
48
49.scrollbar {
50 overflow-y: auto;
51}
52.scrollbar::-webkit-scrollbar {
53 width: 12px;
54}
55.scrollbar::-webkit-scrollbar-thumb {
56 box-shadow: inset 0 0 6px black;
57 background-color: $toolbar-color;
58}
59
60// === Thumbnail tiles alignment
61
62.thumbnail-tiles {
63 display: flex;
64 flex-wrap: wrap;
65 align-items: center;
66 justify-content: space-between;
67 & > div {
68 margin: 1px;
69 }
70}
71
72// === Effect to apply on lazy-image loading
73
74.v-lazy-image {
75 opacity: 0;
76 transition: opacity 0.4s;
77}
78.v-lazy-image-loaded {
79 opacity: 1;
80}
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;
27$panel-left-bgcolor: $panel-top-bgcolor; 27$panel-left-bgcolor: $panel-top-bgcolor;
28$panel-left-txtcolor: $panel-top-txtcolor; 28$panel-left-txtcolor: $panel-top-txtcolor;
29$content-bgcolor: #1e1e1e; 29$content-bgcolor: #1e1e1e;
30
31$toolbar-color: #d62929;
32
33$loader-color: #119;