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 @@
 @import "buefy_variables";
 
 // 2. Setup your Custom Colors
-// $linkedin: #0077b5;
-// $linkedin-invert: findColorInvert($linkedin);
+@import "@/assets/scss/theme.scss";
 
 @import "~bulma/sass/utilities/derived-variables";
 
@@ -33,12 +32,12 @@
 $addColors: (
   "green": (
     $green,
-    $green-invert
+    $green-invert,
   ),
   "purple": (
     $purple,
-    $purple-invert
-  )
+    $purple-invert,
+  ),
 );
 $colors: map-merge($colors, $addColors);
 
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 @@
 */
 
 // Global CSS
+@import "~@/assets/scss/theme.scss";
 
 // === Forms
 
@@ -26,11 +27,18 @@
   color: red;
 }
 
+button svg + span {
+  margin-left: 7px;
+}
+
 // === Tools
 
 .nowrap {
   white-space: nowrap;
 }
+.no-scroll-x {
+  overflow-x: hidden;
+}
 
 .flex {
   display: flex;
@@ -42,3 +50,62 @@
 .flex-center {
   align-items: center;
 }
+
+// === Links
+
+.link {
+  color: $link;
+  cursor: pointer;
+  text-decoration: none;
+  &:hover {
+    color: $link-hover;
+  }
+}
+
+.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
+
+.scrollbar {
+  overflow: auto;
+}
+.scrollbar::-webkit-scrollbar {
+  width: $scrollbar-width;
+  height: $scrollbar-width;
+}
+.scrollbar::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+.scrollbar::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 1px black;
+  background-color: $scrollbar-color;
+}
+
+// === Effect to apply on lazy-image loading
+
+img {
+  display: block;
+  image-orientation: from-image;
+  &.v-lazy-image {
+    opacity: 0;
+    transition: opacity 0.4s;
+  }
+  &.v-lazy-image-loaded {
+    opacity: 1;
+  }
+}
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 @@
+/* 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 79e14e1..0c351e5 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,13 +18,61 @@
 -- along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-// === Theme
+@import "_buefy_variables.scss";
+@import "palette.scss";
 
-$layout-top: 70px;
-$layout-left: 250px;
+// 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;
+$subtitle-color: $palette-200;
+$subtitle-size: $size-5;
+$tag-background-color: $palette-800;
+$button-color: $palette-100;
+$button-active-color: $palette-100;
+$button-active-border-color: $palette-500;
+$button-background-color: $palette-700;
+$button-border-color: $palette-500;
+$button-focus-color: $button-color;
+$button-focus-border-color: $link;
+$button-focus-box-shadow-size: 0;
+$body-line-height: 1.5;
+
+// Custom components
 
-$panel-top-bgcolor: #225;
-$panel-top-txtcolor: white;
-$panel-left-bgcolor: $panel-top-bgcolor;
-$panel-left-txtcolor: $panel-top-txtcolor;
-$content-bgcolor: #1e1e1e;
+$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;
+$scrollbar-color: $palette-300;
+$scrollbar-width: 10px;
+$loader-color: $palette-800;
+$input-tag-delete-background-color: $palette-700;
+$breadcrumb-margins: 12px;
+$breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px;
+$thumbnail-other-size: $body-line-height * 7em;