aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/assets/scss
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/assets/scss')
-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
4 files changed, 159 insertions, 13 deletions
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. 2-- pictures into a searchable web gallery.
3-- 3--
4-- Copyright (C) 2019-2020 Guillaume FOUET 4-- Copyright (C) 2019-2020 Guillaume FOUET
5-- 2020 Pacien TRAN-GIRARD
5-- 6--
6-- This program is free software: you can redistribute it and/or modify 7-- 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-- it under the terms of the GNU Affero General Public License as
@@ -17,13 +18,61 @@
17-- along with this program. If not, see <https://www.gnu.org/licenses/>. 18-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/ 19*/
19 20
20// === Theme 21@import "_buefy_variables.scss";
22@import "palette.scss";
21 23
22$layout-top: 70px; 24// Buefy components
23$layout-left: 250px; 25
26$primary: $palette-000;
27$text: $primary;
28$text-light: $palette-100;
29$text-strong: $primary;
30$input-color: $text;
31$input-placeholder-color: $text-light;
32$input-shadow: none;
33$input-border-color: transparent;
34$input-background-color: $palette-500;
35$input-focus-box-border-color: $palette-200;
36$input-focus-box-shadow-color: transparent;
37$link: $primary;
38$link-visited: $link;
39$link-hover: $palette-100;
40$disabled-color: $palette-400;
41$radius: 0;
42$loading-background: $palette-800;
43$title-color: $palette-200;
44$title-size: $size-5;
45$subtitle-color: $palette-200;
46$subtitle-size: $size-5;
47$tag-background-color: $palette-800;
48$button-color: $palette-100;
49$button-active-color: $palette-100;
50$button-active-border-color: $palette-500;
51$button-background-color: $palette-700;
52$button-border-color: $palette-500;
53$button-focus-color: $button-color;
54$button-focus-border-color: $link;
55$button-focus-box-shadow-size: 0;
56$body-line-height: 1.5;
57
58// Custom components
24 59
25$panel-top-bgcolor: #225; 60$panel-top-bgcolor: $palette-800;
26$panel-top-txtcolor: white; 61$panel-top-txtcolor: $primary;
27$panel-left-bgcolor: $panel-top-bgcolor; 62$panel-left-bgcolor: $palette-800;
28$panel-left-txtcolor: $panel-top-txtcolor; 63$panel-left-txtcolor: $primary;
29$content-bgcolor: #1e1e1e; 64$command-buttons-bgcolor: $palette-700;
65$content-bgcolor: $palette-900;
66$scrollbar-color: $palette-300;
67$scrollbar-width: 10px;
68$loader-color: $palette-800;