4 files changed, 100 insertions, 17 deletions

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 9444548..c82e1bc 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -36,6 +36,9 @@ button svg + span {
 .nowrap {
   white-space: nowrap;
 }
+.no-scroll {
+  overflow: hidden;
+}
 .no-scroll-x {
   overflow-x: hidden;
 }
@@ -51,6 +54,26 @@ button svg + span {
   align-items: center;
 }
 
+.fill {
+  width: 100%;
+  height: 100%;
+}
+
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
+/**
+ * Class for containers that centers its content vertically and horizontally,
+ * preferably sticking to the container start if the container is smaller than the content.
+ */
+.container-vh-centering {
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 // === Links
 
 .link {
@@ -79,23 +102,6 @@ button svg + span {
   }
 }
 
-// === 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 {
diff --git a/viewer/src/assets/scss/scrollbar.scss b/viewer/src/assets/scss/scrollbar.scss
new file mode 100644
index 0000000..a00b4c2
--- /dev/null
+++ b/viewer/src/assets/scss/scrollbar.scss
@@ -0,0 +1,39 @@
+/* ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2020       Guillaume FOUET
+--
+-- 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/>.
+*/
+
+@import "~@/assets/scss/theme.scss";
+
+// === Scrollbar styling
+
+.scrollbar {
+  overflow: auto;
+  scrollbar-color: $scrollbar-color transparent;
+  scrollbar-width: thin;
+  &::-webkit-scrollbar {
+    width: $scrollbar-width;
+    height: $scrollbar-width;
+  }
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    box-shadow: inset 0 0 1px black;
+    background-color: $scrollbar-color;
+  }
+}
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 0c351e5..19fe673 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -54,6 +54,8 @@ $button-focus-color: $button-color;
 $button-focus-border-color: $link;
 $button-focus-box-shadow-size: 0;
 $body-line-height: 1.5;
+$dropdown-item-color: $palette-900;
+$dropdown-item-active-color: $palette-900;
 
 // Custom components
 
@@ -76,3 +78,7 @@ $proposed-category-bgcolor: $palette-700;
 
 $layout-top: 45px;
 $layout-left: 250px;
+
+// Transitions
+
+$transition-flex-expand: 0.1s;
diff --git a/viewer/src/assets/scss/transition.scss b/viewer/src/assets/scss/transition.scss
new file mode 100644
index 0000000..fb8d2af
--- /dev/null
+++ b/viewer/src/assets/scss/transition.scss
@@ -0,0 +1,32 @@
+/* ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2020       Guillaume FOUET
+--
+-- 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/>.
+*/
+
+@import "~@/assets/scss/theme.scss";
+
+// === Transitions for Vue
+
+.flex-expand-enter-active, .flex-expand-leave-active {
+  transition: max-height $transition-flex-expand linear;
+}
+.flex-expand-enter, .flex-expand-leave-to {
+  max-height: 0%;
+}
+.flex-expand-enter-to, .flex-expand-leave {
+  max-height: 100%;
+}