5 files changed, 222 insertions, 13 deletions

diff --git a/viewer/src/assets/defaulticon.svg b/viewer/src/assets/defaulticon.svg
new file mode 100644
index 0000000..cc7f9f9
--- /dev/null
+++ b/viewer/src/assets/defaulticon.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   aria-hidden="true"
+   focusable="false"
+   data-prefix="fas"
+   data-icon="images"
+   class="svg-inline--fa fa-images fa-w-18"
+   role="img"
+   viewBox="0 0 192 192"
+   version="1.1"
+   id="svg3763"
+   sodipodi:docname="images-solid.svg"
+   width="192"
+   height="192"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata3769">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs3767" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1358"
+     inkscape:window-height="745"
+     id="namedview3765"
+     showgrid="false"
+     inkscape:snap-object-midpoints="false"
+     inkscape:zoom="2.2070312"
+     inkscape:cx="138.07797"
+     inkscape:cy="100.54828"
+     inkscape:window-x="0"
+     inkscape:window-y="15"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg3763" />
+  <path
+     d="M 160,149.66667 V 155 c 0,8.83667 -7.16333,16 -16,16 H 16 C 7.1633333,171 0,163.83667 0,155 V 69.66667 c 0,-8.83667 7.1633333,-16 16,-16 h 5.333333 V 123 c 0,14.704 11.962667,26.66667 26.666667,26.66667 z M 192,123 V 37.66667 c 0,-8.83667 -7.16333,-16 -16,-16 H 48 c -8.836667,0 -16,7.16333 -16,16 V 123 c 0,8.83667 7.163333,16 16,16 h 128 c 8.83667,0 16,-7.16333 16,-16 z M 85.333333,53.66667 c 0,8.83666 -7.163333,16 -16,16 -8.836666,0 -16,-7.16334 -16,-16 0,-8.83667 7.163334,-16 16,-16 8.836667,0 16,7.16333 16,16 z m -32,48 18.505,-18.505 c 1.562,-1.562 4.094667,-1.562 5.657,0 L 90.666667,96.33333 135.83833,51.16167 c 1.562,-1.562 4.09467,-1.562 5.657,0 l 29.17134,29.17166 v 37.33334 H 53.333333 Z"
+     id="path3761"
+     inkscape:connector-curvature="0"
+     style="fill:#78909c;stroke-width:0.33333334;fill-opacity:1" />
+</svg>
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 @@