aboutsummaryrefslogtreecommitdiff
path: root/viewer/src
diff options
context:
space:
mode:
authorpacien2020-02-08 18:40:32 +0100
committerpacien2020-02-10 12:13:45 +0100
commitf71715e6d0221484e3cf40539bd8a9fc514b3d48 (patch)
tree8a443f9cca398375fa5d59bdafb560aa34a2ec40 /viewer/src
parent32abf4e1f82dcb9738bbfc41a84bb38672e14603 (diff)
downloadldgallery-f71715e6d0221484e3cf40539bd8a9fc514b3d48.tar.gz
viewer: styling: use a proper colour palette
Stealing the Material Design Blue Gray palette which should be suitable for most galleries. It has been checked to be consistent across various screens and the text is guaranteed to be legible. GitHub: closes #99
Diffstat (limited to 'viewer/src')
-rw-r--r--viewer/src/assets/scss/palette.scss31
-rw-r--r--viewer/src/assets/scss/theme.scss61
2 files changed, 74 insertions, 18 deletions
diff --git a/viewer/src/assets/scss/palette.scss b/viewer/src/assets/scss/palette.scss
new file mode 100644
index 0000000..f7eab11
--- /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 f46b9f5..d62a823 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,23 +18,47 @@
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: 35px;
23$layout-left: 250px;
24 24
25$panel-top-bgcolor: #225; 25// Buefy components
26$panel-top-txtcolor: white; 26
27$panel-left-bgcolor: $panel-top-bgcolor; 27$primary: $palette-000;
28$panel-left-txtcolor: $panel-top-txtcolor; 28$text: $primary;
29$content-bgcolor: #1e1e1e; 29$text-light: $palette-100;
30$toolbar-color: #d62929; 30$text-strong: $primary;
31$loader-color: #272727; 31$input-color: $text;
32 32$input-placeholder-color: $text-light;
33// Overrides - Buefy 33$input-shadow: none;
34$link: $panel-top-txtcolor; 34$input-border-color: transparent;
35$link-hover: lightblue; 35$input-background-color: $palette-500;
36$disabled-color: #656589; 36$input-focus-box-border-color: $palette-200;
37$control-radius: 0; 37$input-focus-box-shadow-color: transparent;
38$input-radius: 0; 38$link: $primary;
39$loading-background: $panel-top-bgcolor; 39$link-visited: $link;
40$link-hover: $palette-100;
41$disabled-color: $palette-400;
42$radius: 0;
43$loading-background: $palette-800;
44$title-color: $palette-200;
45$title-size: $size-5;
46$tag-background-color: $palette-800;
47
48
49// Custom components
50
51$panel-top-bgcolor: $palette-800;
52$panel-top-txtcolor: $primary;
53$panel-left-bgcolor: $palette-800;
54$panel-left-txtcolor: $primary;
55$content-bgcolor: $palette-900;
56$toolbar-color: $palette-300; // FIXME: should be named "scrollbar"
57$loader-color: $palette-800;
58$input-tag-delete-background-color: $palette-700;
59
60
61// Layout
62
63$layout-top: 45px;
64$layout-left: 250px;