8 files changed, 154 insertions, 52 deletions

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 4acaf13..ed69841 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -60,6 +60,20 @@
 
 .disabled {
   color: $disabled-color !important;
+  cursor: initial;
+}
+
+// Disable sticky hover styling on touch devices,
+// on which the virtual cursor doesn't leave the element after being tapped.
+// The fix can be applied to `a` elements by using the .link class.
+@media (hover:none), (hover:on-demand) {
+  .link:hover {
+    color: $link !important;
+  }
+
+  .disabled:hover {
+    color: $disabled-color !important;
+  }
 }
 
 // === Scrollbar styling
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 <https://www.gnu.org/licenses/>.
+*/
+
+// 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..7972d48 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,48 @@
 -- along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-// === 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;
+$command-buttons-bgcolor: $palette-700;
+$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;
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..7590ea7 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -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
@@ -19,16 +20,21 @@
 
 <template>
   <div class="flex command-btns">
-    <div class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
-      <fa-icon :icon="commandTagsIcon()" size="lg" />
-    </div>
-    <router-link to="/" :class="{'disabled': isRoot()}" :title="$t('title.home')">
+    <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
+      <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" />
+    </a>
+    <router-link
+      to="/"
+      class="command-secondary"
+      :class="{'disabled': isRoot()}"
+      :title="$t('command.home')"
+    >
       <fa-icon icon="home" size="lg" />
     </router-link>
-    <div class="link" :title="$t('title.back')" @click="$router.go(-1)">
+    <a class="link command-secondary" :title="$t('command.back')" @click="$router.go(-1)">
       <fa-icon icon="arrow-left" size="lg" />
-    </div>
-    <router-link :class="{'disabled': isRoot()}" :title="$t('title.parent')" :to="parent()">
+    </a>
+    <router-link :class="{'disabled': isRoot()}" :title="$t('command.parent')" :to="parent()">
       <fa-icon icon="folder" size="xs" />
       <fa-icon icon="level-up-alt" size="lg" />
     </router-link>
@@ -41,8 +47,8 @@ import { RawLocation } from "vue-router";
 
 @Component
 export default class LdCommand extends Vue {
-  commandTagsIcon(): string {
-    return this.$uiStore.fullWidth ? "tags" : "window-close";
+  commandToggleSearchPanelIcon(): string {
+    return this.$uiStore.fullWidth ? "search" : "angle-double-left";
   }
 
   isRoot(): boolean {
@@ -57,18 +63,30 @@ export default class LdCommand extends Vue {
 </script>
 
 <style lang="scss">
+@import "@/assets/scss/_buefy_variables.scss";
 @import "@/assets/scss/theme.scss";
 
 .command-btns {
+  background-color: $command-buttons-bgcolor;
   justify-content: space-around;
   vertical-align: middle;
   align-items: center;
-  width: $layout-left;
-  > * {
+  flex: 0 0 $layout-left;
+