From f71715e6d0221484e3cf40539bd8a9fc514b3d48 Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 8 Feb 2020 18:40:32 +0100
Subject: 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
---
viewer/src/assets/scss/palette.scss | 31 +++++++++++++++++++
viewer/src/assets/scss/theme.scss | 61 ++++++++++++++++++++++++++-----------
2 files changed, 74 insertions(+), 18 deletions(-)
create mode 100644 viewer/src/assets/scss/palette.scss
(limited to 'viewer')
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 @@
+/* ldgallery - A static generator which turns a collection of tagged
+-- pictures into a searchable web gallery.
+--
+-- Copyright (C) 2020 Pacien TRAN-GIRARD
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program. If not, see .
+*/
+
+// Material Design Blue Gray colour palette
+$palette-000: #FFFFFF;
+$palette-050: #ECEFF1;
+$palette-100: #CFD8DC;
+$palette-200: #B0BEC5;
+$palette-300: #90A4AE;
+$palette-400: #78909C;
+$palette-500: #607D8B;
+$palette-600: #546E7A;
+$palette-700: #455A64;
+$palette-800: #37474F;
+$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 @@
-- pictures into a searchable web gallery.
--
-- Copyright (C) 2019-2020 Guillaume FOUET
+-- 2020 Pacien TRAN-GIRARD
--
-- This program is free software: you can redistribute it and/or modify
-- it under the terms of the GNU Affero General Public License as
@@ -17,23 +18,47 @@
-- along with this program. If not, see .
*/
-// === Theme
+@import '_buefy_variables.scss';
+@import 'palette.scss';
-$layout-top: 35px;
-$layout-left: 250px;
-$panel-top-bgcolor: #225;
-$panel-top-txtcolor: white;
-$panel-left-bgcolor: $panel-top-bgcolor;
-$panel-left-txtcolor: $panel-top-txtcolor;
-$content-bgcolor: #1e1e1e;
-$toolbar-color: #d62929;
-$loader-color: #272727;
-
-// Overrides - Buefy
-$link: $panel-top-txtcolor;
-$link-hover: lightblue;
-$disabled-color: #656589;
-$control-radius: 0;
-$input-radius: 0;
-$loading-background: $panel-top-bgcolor;
+// Buefy components
+
+$primary: $palette-000;
+$text: $primary;
+$text-light: $palette-100;
+$text-strong: $primary;
+$input-color: $text;
+$input-placeholder-color: $text-light;
+$input-shadow: none;
+$input-border-color: transparent;
+$input-background-color: $palette-500;
+$input-focus-box-border-color: $palette-200;
+$input-focus-box-shadow-color: transparent;
+$link: $primary;
+$link-visited: $link;
+$link-hover: $palette-100;
+$disabled-color: $palette-400;
+$radius: 0;
+$loading-background: $palette-800;
+$title-color: $palette-200;
+$title-size: $size-5;
+$tag-background-color: $palette-800;
+
+
+// Custom components
+
+$panel-top-bgcolor: $palette-800;
+$panel-top-txtcolor: $primary;
+$panel-left-bgcolor: $palette-800;
+$panel-left-txtcolor: $primary;
+$content-bgcolor: $palette-900;
+$toolbar-color: $palette-300; // FIXME: should be named "scrollbar"
+$loader-color: $palette-800;
+$input-tag-delete-background-color: $palette-700;
+
+
+// Layout
+
+$layout-top: 45px;
+$layout-left: 250px;
--
cgit v1.2.3
From ec5bda34f9d2714db19d61cd9e82fb45cc15bfc1 Mon Sep 17 00:00:00 2001
From: pacien
Date: Mon, 10 Feb 2020 12:18:32 +0100
Subject: viewer: use a different background to separate command buttons and
breadcrumbs
---
viewer/src/assets/scss/theme.scss | 1 +
viewer/src/components/LdBreadcrumb.vue | 1 -
viewer/src/components/LdCommand.vue | 1 +
3 files changed, 2 insertions(+), 1 deletion(-)
(limited to 'viewer')
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index d62a823..7972d48 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -52,6 +52,7 @@ $panel-top-bgcolor: $palette-800;
$panel-top-txtcolor: $primary;
$panel-left-bgcolor: $palette-800;
$panel-left-txtcolor: $primary;
+$command-buttons-bgcolor: $palette-700;
$content-bgcolor: $palette-900;
$toolbar-color: $palette-300; // FIXME: should be named "scrollbar"
$loader-color: $palette-800;
diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 171e96a..ebefc50 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -45,7 +45,6 @@ export default class LdBreadcrumb extends Vue {
@import "@/assets/scss/theme.scss";
.ld-breadcrumb {
- border-left: 1px solid $disabled-color;
padding-left: 15px;
display: flex;
list-style: none;
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 8c6ccfc..54b602c 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -60,6 +60,7 @@ export default class LdCommand extends Vue {
@import "@/assets/scss/theme.scss";
.command-btns {
+ background-color: $command-buttons-bgcolor;
justify-content: space-around;
vertical-align: middle;
align-items: center;
--
cgit v1.2.3