aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/assets
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/assets')
-rw-r--r--viewer/src/assets/scss/global.scss40
-rw-r--r--viewer/src/assets/scss/scrollbar.scss39
-rw-r--r--viewer/src/assets/scss/theme.scss6
-rw-r--r--viewer/src/assets/scss/transition.scss32
4 files changed, 100 insertions, 17 deletions
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 9444548..c82e1bc 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -36,6 +36,9 @@ button svg + span {
36.nowrap { 36.nowrap {
37 white-space: nowrap; 37 white-space: nowrap;
38} 38}
39.no-scroll {
40 overflow: hidden;
41}
39.no-scroll-x { 42.no-scroll-x {
40 overflow-x: hidden; 43 overflow-x: hidden;
41} 44}
@@ -51,6 +54,26 @@ button svg + span {
51 align-items: center; 54 align-items: center;
52} 55}
53 56
57.fill {
58 width: 100%;
59 height: 100%;
60}
61
62.flex-grow-1 {
63 flex-grow: 1;
64}
65
66/**
67 * Class for containers that centers its content vertically and horizontally,
68 * preferably sticking to the container start if the container is smaller than the content.
69 */
70.container-vh-centering {
71 min-height: 100%;
72 display: flex;
73 align-items: center;
74 justify-content: center;
75}
76
54// === Links 77// === Links
55 78
56.link { 79.link {
@@ -79,23 +102,6 @@ button svg + span {
79 } 102 }
80} 103}
81 104
82// === Scrollbar styling
83
84.scrollbar {
85 overflow: auto;
86}
87.scrollbar::-webkit-scrollbar {
88 width: $scrollbar-width;
89 height: $scrollbar-width;
90}
91.scrollbar::-webkit-scrollbar-corner {
92 background-color: transparent;
93}
94.scrollbar::-webkit-scrollbar-thumb {
95 box-shadow: inset 0 0 1px black;
96 background-color: $scrollbar-color;
97}
98
99// === Effect to apply on lazy-image loading 105// === Effect to apply on lazy-image loading
100 106
101img { 107img {
diff --git a/viewer/src/assets/scss/scrollbar.scss b/viewer/src/assets/scss/scrollbar.scss
new file mode 100644
index 0000000..a00b4c2
--- /dev/null
+++ b/viewer/src/assets/scss/scrollbar.scss
@@ -0,0 +1,39 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2020 Guillaume FOUET
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/
19
20@import "~@/assets/scss/theme.scss";
21
22// === Scrollbar styling
23
24.scrollbar {
25 overflow: auto;
26 scrollbar-color: $scrollbar-color transparent;
27 scrollbar-width: thin;
28 &::-webkit-scrollbar {
29 width: $scrollbar-width;
30 height: $scrollbar-width;
31 }
32 &::-webkit-scrollbar-corner {
33 background-color: transparent;
34 }
35 &::-webkit-scrollbar-thumb {
36 box-shadow: inset 0 0 1px black;
37 background-color: $scrollbar-color;
38 }
39}
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 0c351e5..19fe673 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -54,6 +54,8 @@ $button-focus-color: $button-color;
54$button-focus-border-color: $link; 54$button-focus-border-color: $link;
55$button-focus-box-shadow-size: 0; 55$button-focus-box-shadow-size: 0;
56$body-line-height: 1.5; 56$body-line-height: 1.5;
57$dropdown-item-color: $palette-900;
58$dropdown-item-active-color: $palette-900;
57 59
58// Custom components 60// Custom components
59 61
@@ -76,3 +78,7 @@ $proposed-category-bgcolor: $palette-700;
76 78
77$layout-top: 45px; 79$layout-top: 45px;
78$layout-left: 250px; 80$layout-left: 250px;
81
82// Transitions
83
84$transition-flex-expand: 0.1s;
diff --git a/viewer/src/assets/scss/transition.scss b/viewer/src/assets/scss/transition.scss
new file mode 100644
index 0000000..fb8d2af
--- /dev/null
+++ b/viewer/src/assets/scss/transition.scss
@@ -0,0 +1,32 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2020 Guillaume FOUET
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/
19
20@import "~@/assets/scss/theme.scss";
21
22// === Transitions for Vue
23
24.flex-expand-enter-active, .flex-expand-leave-active {
25 transition: max-height $transition-flex-expand linear;
26}
27.flex-expand-enter, .flex-expand-leave-to {
28 max-height: 0%;
29}
30.flex-expand-enter-to, .flex-expand-leave {
31 max-height: 100%;
32}