diff options
author | pacien | 2020-09-25 16:01:49 +0200 |
---|---|---|
committer | pacien | 2020-09-25 16:01:49 +0200 |
commit | e93f7b1eb84c083d67567115284c0002a3a7d5fc (patch) | |
tree | 8d373e8f7f571485e1330928f43b090ed004c525 /viewer/src/assets/scss | |
parent | 8e3ac8fe44bebb38e1882ca7f06b8100078ad88d (diff) | |
parent | fd542f75a1d94ee5f804d0925823276b97f38581 (diff) | |
download | ldgallery-2.0.tar.gz |
Merge branch 'develop' for release v2.0v2.0
Diffstat (limited to 'viewer/src/assets/scss')
-rw-r--r-- | viewer/src/assets/scss/global.scss | 40 | ||||
-rw-r--r-- | viewer/src/assets/scss/scrollbar.scss | 39 | ||||
-rw-r--r-- | viewer/src/assets/scss/theme.scss | 6 | ||||
-rw-r--r-- | viewer/src/assets/scss/transition.scss | 32 |
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 | ||
101 | img { | 107 | img { |
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 | } | ||