aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/assets
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/assets')
-rw-r--r--viewer/src/assets/defaulticon.svg63
-rw-r--r--viewer/src/assets/scss/buefy.scss9
-rw-r--r--viewer/src/assets/scss/global.scss67
-rw-r--r--viewer/src/assets/scss/palette.scss31
-rw-r--r--viewer/src/assets/scss/theme.scss65
5 files changed, 222 insertions, 13 deletions
diff --git a/viewer/src/assets/defaulticon.svg b/viewer/src/assets/defaulticon.svg
new file mode 100644
index 0000000..cc7f9f9
--- /dev/null
+++ b/viewer/src/assets/defaulticon.svg
@@ -0,0 +1,63 @@
1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2<svg
3 xmlns:dc="http://purl.org/dc/elements/1.1/"
4 xmlns:cc="http://creativecommons.org/ns#"
5 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
6 xmlns:svg="http://www.w3.org/2000/svg"
7 xmlns="http://www.w3.org/2000/svg"
8 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
9 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10 aria-hidden="true"
11 focusable="false"
12 data-prefix="fas"
13 data-icon="images"
14 class="svg-inline--fa fa-images fa-w-18"
15 role="img"
16 viewBox="0 0 192 192"
17 version="1.1"
18 id="svg3763"
19 sodipodi:docname="images-solid.svg"
20 width="192"
21 height="192"
22 inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
23 <metadata
24 id="metadata3769">
25 <rdf:RDF>
26 <cc:Work
27 rdf:about="">
28 <dc:format>image/svg+xml</dc:format>
29 <dc:type
30 rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
31 <dc:title></dc:title>
32 </cc:Work>
33 </rdf:RDF>
34 </metadata>
35 <defs
36 id="defs3767" />
37 <sodipodi:namedview
38 pagecolor="#ffffff"
39 bordercolor="#666666"
40 borderopacity="1"
41 objecttolerance="10"
42 gridtolerance="10"
43 guidetolerance="10"
44 inkscape:pageopacity="0"
45 inkscape:pageshadow="2"
46 inkscape:window-width="1358"
47 inkscape:window-height="745"
48 id="namedview3765"
49 showgrid="false"
50 inkscape:snap-object-midpoints="false"
51 inkscape:zoom="2.2070312"
52 inkscape:cx="138.07797"
53 inkscape:cy="100.54828"
54 inkscape:window-x="0"
55 inkscape:window-y="15"
56 inkscape:window-maximized="0"
57 inkscape:current-layer="svg3763" />
58 <path
59 d="M 160,149.66667 V 155 c 0,8.83667 -7.16333,16 -16,16 H 16 C 7.1633333,171 0,163.83667 0,155 V 69.66667 c 0,-8.83667 7.1633333,-16 16,-16 h 5.333333 V 123 c 0,14.704 11.962667,26.66667 26.666667,26.66667 z M 192,123 V 37.66667 c 0,-8.83667 -7.16333,-16 -16,-16 H 48 c -8.836667,0 -16,7.16333 -16,16 V 123 c 0,8.83667 7.163333,16 16,16 h 128 c 8.83667,0 16,-7.16333 16,-16 z M 85.333333,53.66667 c 0,8.83666 -7.163333,16 -16,16 -8.836666,0 -16,-7.16334 -16,-16 0,-8.83667 7.163334,-16 16,-16 8.836667,0 16,7.16333 16,16 z m -32,48 18.505,-18.505 c 1.562,-1.562 4.094667,-1.562 5.657,0 L 90.666667,96.33333 135.83833,51.16167 c 1.562,-1.562 4.09467,-1.562 5.657,0 l 29.17134,29.17166 v 37.33334 H 53.333333 Z"
60 id="path3761"
61 inkscape:connector-curvature="0"
62 style="fill:#78909c;stroke-width:0.33333334;fill-opacity:1" />
63</svg>
diff --git a/viewer/src/assets/scss/buefy.scss b/viewer/src/assets/scss/buefy.scss
index 7fdb883..2bc4985 100644
--- a/viewer/src/assets/scss/buefy.scss
+++ b/viewer/src/assets/scss/buefy.scss
@@ -24,8 +24,7 @@
24@import "buefy_variables"; 24@import "buefy_variables";
25 25
26// 2. Setup your Custom Colors 26// 2. Setup your Custom Colors
27// $linkedin: #0077b5; 27@import "@/assets/scss/theme.scss";
28// $linkedin-invert: findColorInvert($linkedin);
29 28
30@import "~bulma/sass/utilities/derived-variables"; 29@import "~bulma/sass/utilities/derived-variables";
31 30
@@ -33,12 +32,12 @@
33$addColors: ( 32$addColors: (
34 "green": ( 33 "green": (
35 $green, 34 $green,
36 $green-invert 35 $green-invert,
37 ), 36 ),
38 "purple": ( 37 "purple": (
39 $purple, 38 $purple,
40 $purple-invert 39 $purple-invert,
41 ) 40 ),
42); 41);
43$colors: map-merge($colors, $addColors); 42$colors: map-merge($colors, $addColors);
44 43
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 7afca8c..9444548 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
@@ -26,11 +27,18 @@
26 color: red; 27 color: red;
27} 28}
28 29
30button svg + span {
31 margin-left: 7px;
32}
33
29// === Tools 34// === Tools
30 35
31.nowrap { 36.nowrap {
32 white-space: nowrap; 37 white-space: nowrap;
33} 38}
39.no-scroll-x {
40 overflow-x: hidden;
41}
34 42
35.flex { 43.flex {
36 display: flex; 44 display: flex;
@@ -42,3 +50,62 @@
42.flex-center { 50.flex-center {
43 align-items: center; 51 align-items: center;
44} 52}
53
54// === Links
55
56.link {
57 color: $link;
58 cursor: pointer;
59 text-decoration: none;
60 &:hover {
61 color: $link-hover;
62 }
63}
64
65.disabled {
66 color: $disabled-color !important;
67 cursor: initial;
68}
69
70// Disable sticky hover styling on touch devices,
71// on which the virtual cursor doesn't leave the element after being tapped.
72// The fix can be applied to `a` elements by using the .link class.
73@media (hover: none), (hover: on-demand) {
74 .link:hover {
75 color: $link !important;
76 }
77 .disabled:hover {
78 color: $disabled-color !important;
79 }
80}
81
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
100
101img {
102 display: block;
103 image-orientation: from-image;
104 &.v-lazy-image {
105 opacity: 0;
106 transition: opacity 0.4s;
107 }
108 &.v-lazy-image-loaded {
109 opacity: 1;
110 }
111}
diff --git a/viewer/src/assets/scss/palette.scss b/viewer/src/assets/scss/palette.scss
new file mode 100644
index 0000000..e70e8a1
--- /dev/null
+++ b/viewer/src/assets/scss/palette.scss
@@ -0,0 +1,31 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2020 Pacien TRAN-GIRARD
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// Material Design Blue Gray colour palette
21$palette-000: #ffffff;
22$palette-050: #eceff1;
23$palette-100: #cfd8dc;
24$palette-200: #b0bec5;
25$palette-300: #90a4ae;
26$palette-400: #78909c;
27$palette-500: #607d8b;
28$palette-600: #546e7a;
29$palette-700: #455a64;
30$palette-800: #37474f;
31$palette-900: #263238;
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 79e14e1..0c351e5 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -2,6 +2,7 @@
2-- pictures into a searchable web gallery.