Merge branch 'dev'

10 files changed, 1252 insertions, 0 deletions

diff --git a/src/site/assets/images/background.jpg b/src/site/assets/images/background.jpg
new file mode 100644
index 0000000..d3e1862
--- /dev/null
+++ b/src/site/assets/images/background.jpg
diff --git a/src/site/assets/images/blank.png b/src/site/assets/images/blank.png
new file mode 100644
index 0000000..f1ea2eb
--- /dev/null
+++ b/src/site/assets/images/blank.png
diff --git a/src/site/assets/images/blank2.jpg b/src/site/assets/images/blank2.jpg
new file mode 100644
index 0000000..dbf57ad
--- /dev/null
+++ b/src/site/assets/images/blank2.jpg
diff --git a/src/site/assets/images/blank_darker.png b/src/site/assets/images/blank_darker.png
new file mode 100644
index 0000000..61f2944
--- /dev/null
+++ b/src/site/assets/images/blank_darker.png
diff --git a/src/site/assets/images/logo.png b/src/site/assets/images/logo.png
new file mode 100644
index 0000000..f72de04
--- /dev/null
+++ b/src/site/assets/images/logo.png
diff --git a/src/site/assets/styles/_bulma_colors_extender.scss b/src/site/assets/styles/_bulma_colors_extender.scss
new file mode 100644
index 0000000..ce406c4
--- /dev/null
+++ b/src/site/assets/styles/_bulma_colors_extender.scss
@@ -0,0 +1,16 @@
+// Import the initial variables
+@import "../../../../node_modules/bulma/sass/utilities/initial-variables";
+@import "../../../../node_modules/bulma/sass/utilities/functions";
+
+// Setup our custom colors
+$chibisafe: #323846;
+$chibisafe-invert: findColorInvert($chibisafe);
+
+// XXX: EXPERIMENTAL, CHECK IF WE NEED ORIGINAL PRIMARY ANYWHERE
+// $primary: $chibisafe;
+// $primary-invert: $chibisafe-invert;
+
+// declare custom colors
+$custom-colors: (
+  "chibisafe":($chibisafe, $chibisafe-invert)
+);
diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss
new file mode 100644
index 0000000..e8b17c4
--- /dev/null
+++ b/src/site/assets/styles/_colors.scss
@@ -0,0 +1,83 @@
+// $basePink: #EC1A55;
+$base-1: #292e39;
+$base-2: #2e3440;
+$base-3: #3b4252;
+$base-4: #434c5e;
+$base-5: #4c566a;
+
+$background: #1e2430;
+$backgroundAccent: #20222b;
+$backgroundAccentLighter: #53555e;
+$backgroundLight1: #f5f6f8;
+
+$scheme-main: $background;
+$scheme-main-bis: $backgroundAccent;
+$scheme-main-ter: $backgroundAccentLighter;
+
+// customize navbar
+$navbar-background-color: $backgroundAccent;
+$navbar-item-color: #f5f6f8;
+
+// $defaultTextColor: #4a4a4a;
+$defaultTextColor: rgb(236, 239, 244);
+$textColor: #c7ccd8;
+$textColorHighlight: white;
+
+$input-hover-color: $textColor;
+
+$basePink: #ff015b;
+$basePinkHover: rgb(196, 4, 71);
+$baseBlue: #30a9ed;
+$baseBlueHover: rgb(21, 135, 201);
+
+$uploaderDropdownColor: #797979;
+
+$boxShadow: 0 10px 15px rgba(4, 39, 107, 0.2);
+$boxShadowLight: rgba(15, 17, 21, 0.35) 0px 6px 9px 0px;
+
+// pagination
+$pagination-color: $defaultTextColor;
+
+$pagination-focus-color: $textColorHighlight;
+$pagination-focus-border-color: $textColorHighlight;
+
+$pagination-active-color: $textColorHighlight;
+$pagination-active-border-color: $textColorHighlight;
+
+$pagination-hover-color: $textColorHighlight;
+$pagination-hover-border-color: $textColorHighlight;
+
+$pagination-current-background-color: $base-3;
+$pagination-current-border-color: $base-2;
+
+// loading
+$loading-background: rgba(0, 0, 0, 0.8);
+$loading-background: rgba(40, 40, 40, 0.66);
+
+// dialogs
+$modal-card-title-color: $textColor;
+$modal-card-body-background-color: $background;
+$modal-card-head-background-color: $backgroundAccent;
+$modal-card-head-border-bottom: 1px solid rgba(255, 255, 255, 0.1098);
+$modal-card-foot-border-top: 1px solid rgba(255, 255, 255, 0.1098);
+
+// sidebar
+$sidebar-background: $base-1;
+$sidebar-box-shadow: none;
+
+//
+$menu-item-color: $textColor;
+$menu-item-hover-color: $textColorHighlight;
+$menu-item-active-background-color: $backgroundAccent;
+
+// dropdown 
+$dropdown-content-background-color: $background;
+$dropdown-item-hover-background-color: $backgroundAccentLighter;
+$dropdown-item-color: $textColor;
+$dropdown-item-hover-color: $textColorHighlight;
+$dropdown-item-active-color: $textColorHighlight;
+$dropdown-item-active-background-color: hsl(171, 100%, 41%); // $primary
+
+// tags
+$tag-background-color: $base-2;
+$tag-color: $textColor;
diff --git a/src/site/assets/styles/bulma-divider.scss b/src/site/assets/styles/bulma-divider.scss
new file mode 100644
index 0000000..713c7e4
--- /dev/null
+++ b/src/site/assets/styles/bulma-divider.scss
@@ -0,0 +1,164 @@
+/*! @creativebulma/bulma-divider v1.1.0 | (c) 2020 Gaetan | MIT License | https://github.com/CreativeBulma/bulma-divider */
+@-webkit-keyframes spinAround {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+@keyframes spinAround {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+/* line 17, src/sass/app.sass */
+.divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  text-transform: uppercase;
+  color: #7a7a7a;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: .5px;
+  margin: 25px 0;
+}
+
+/* line 28, src/sass/app.sass */
+.divider::after, .divider::before {
+  content: '';
+  display: block;
+  flex: 1;
+  height: 1px;
+  background-color: #dbdbdb;
+}
+
+/* line 37, src/sass/app.sass */
+.divider:not(.is-right)::after {
+  margin-left: 10px;
+}
+
+/* line 41, src/sass/app.sass */
+.divider:not(.is-left)::before {
+  margin-right: 10px;
+}
+
+/* line 45, src/sass/app.sass */
+.divider.is-left::before {
+  display: none;
+}
+
+/* line 49, src/sass/app.sass */
+.divider.is-right::after {
+  display: none;
+}
+
+/* line 52, src/sass/app.sass */
+.divider.is-vertical {
+  flex-direction: column;
+  margin: 0 25px;
+}
+
+/* line 56, src/sass/app.sass */
+.divider.is-vertical::after, .divider.is-vertical::before {
+  height: auto;
+  width: 1px;
+}
+
+/* line 61, src/sass/app.sass */
+.divider.is-vertical::after {
+  margin-left: 0;
+  margin-top: 10px;
+}
+
+/* line 65, src/sass/app.sass */
+.divider.is-vertical::before {
+  margin-right: 0;
+  margin-bottom: 10px;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-white::after, .divider.is-white::before {
+  background-color: white;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-black::after, .divider.is-black::before {
+  background-color: #0a0a0a;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-light::after, .divider.is-light::before {
+  background-color: whitesmoke;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-dark::after, .divider.is-dark::before {
+  background-color: #363636;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-primary::after, .divider.is-primary::before {
+  background-color: #00d1b2;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-primary.is-light::after, .divider.is-primary.is-light::before {
+  background-color: #ebfffc;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-link::after, .divider.is-link::before {
+  background-color: #3273dc;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-link.is-light::after, .divider.is-link.is-light::before {
+  background-color: #eef3fc;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-info::after, .divider.is-info::before {
+  background-color: #3298dc;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-info.is-light::after, .divider.is-info.is-light::before {
+  background-color: #eef6fc;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-success::after, .divider.is-success::before {
+  background-color: #48c774;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-success.is-light::after, .divider.is-success.is-light::before {
+  background-color: #effaf3;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-warning::after, .divider.is-warning::before {
+  background-color: #ffdd57;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-warning.is-light::after, .divider.is-warning.is-light::before {
+  background-color: #fffbeb;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-danger::after, .divider.is-danger::before {
+  background-color: #f14668;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-danger.is-light::after, .divider.is-danger.is-light::before {
+  background-color: #feecf0;
+}
diff --git a/src/site/assets/styles/dropzone.scss b/src/site/assets/styles/dropzone.scss
new file mode 100644
index 0000000..cff1223
--- /dev/null
+++ b/src/site/assets/styles/dropzone.scss
@@ -0,0 +1,575 @@
+/*
+ * The MIT License
+ * Copyright (c) 2012 Matias Meno <[email protected]>
+ */
+
+ @-webkit-keyframes passing-through {
+	0% {
+		opacity: 0;
+		transform: translateY(40px);
+	}
+	30%,
+	70% {
+		opacity: 1;
+		transform: translateY(0px);
+	}
+	100% {
+		opacity: 0;
+		transform: translateY(-40px);
+	}
+}
+@-moz-keyframes passing-through {
+	0% {
+		opacity: 0;
+		transform: translateY(40px);
+	}
+	30%,
+	70% {
+		opacity: 1;
+		transform: translateY(0px);
+	}
+	100% {
+		opacity: 0;
+		transform: translateY(-40px);
+	}
+}
+@keyframes passing-through {
+	0% {
+		opacity: 0;
+		transform: translateY(40px);
+	}
+	30%,
+	70% {
+		opacity: 1;
+		transform: translateY(0px);
+	}
+	100% {
+		opacity: 0;
+		transform: translateY(-40px);
+	}
+}
+@-webkit-keyframes slide-in {
+	0% {
+		opacity: 0;
+		transform: translateY(40px);
+	}
+	30% {
+		opacity: 1;
+		transform: translateY(0px);
+	}
+}
+@-moz-keyframes slide-in {
+	0% {
+		opacity: 0;
+		transform: translateY(40px);
+	}
+	30% {
+		opacity: 1;
+		transform: translateY(0px);
+	}
+}
+@keyframes slide-in {
+	0% {
+		opacity: 0;
+		transform: translateY(40px);
+	}
+	30% {
+		opacity: 1;
+		transform: translateY(0px);
+	}
+}
+@-webkit-keyframes pulse {
+	0% {
+		transform: scale(1);
+	}
+	10% {
+		transform: scale(1.1);
+	}
+	20% {
+		transform: scale(1);
+	}
+}
+@-moz-keyframes pulse {
+	0% {
+		transform: scale(1);
+	}
+	10% {
+		transform: scale(1.1);
+	}
+	20% {
+		transform: scale(1);
+	}
+}
+@keyframes pulse {
+	0% {
+		transform: scale(1);
+	}
+	10% {
+		transform: scale(1.1);
+	}
+	20% {
+		transform: scale(1);
+	}
+}
+.dropzone,
+.dropzone * {
+	box-sizing: border-box;
+}
+.dropzone {
+	min-height: 75px;
+	border: 1px solid #00000061;
+	background: rgba(0, 0, 0, 0.15);
+	border-radius: .3em;
+}
+.dropzone.dz-clickable {
+	cursor: pointer;
+}
+.dropzone.dz-clickable * {
+	cursor: default;
+}
+.dropzone.dz-clickable .dz-message,
+.dropzone.dz-clickable .dz-message * {
+	cursor: pointer;
+}
+.dropzone.dz-started .dz-message {
+	display: none;
+}
+.dropzone.dz-drag-hover {
+	border-style: solid;
+}
+.dropzone.dz-drag-hover .dz-message {
+	opacity: 0.5;
+}
+.dropzone .dz-message {
+	text-align: center;
+	margin: 2em 0;
+	font-size: .875em;
+	font-weight: 400;
+	line-height: 1.5;
+}
+.dropzone .dz-preview {
+	position: relative;
+	display: inline-block;
+	vertical-align: top;
+	min-height: 40px;
+	margin: 1em;
+	margin-bottom: 0.5em;
+	width: calc(100% - 2em);
+	background: #808080;
+	border-radius: .3em;
+}
+
+.dropzone .dz-preview:not(:nth-child(2)) {
+	margin-top: 0px;
+}
+
+.dropzone .dz-preview:last-child {
+	margin-bottom: 1em;
+}
+.dropzone .dz-preview:hover {
+	z-index: 1000;
+}
+.dropzone .dz-preview:hover .dz-details {
+	opacity: 1;
+}
+.dropzone .dz-preview.dz-file-preview .dz-image {
+	border-radius: 20px;
+	background: #999;
+	background: linear-gradient(to bottom, #eee, #ddd);
+}
+.dropzone .dz-preview.dz-file-preview .dz-details {
+	opacity: 1;
+}
+.dropzone .dz-preview.dz-image-preview {
+	background: white;
+}
+.dropzone .dz-preview.dz-image-preview .dz-details {
+	transition: opacity 0.2s linear;
+}
+.dropzone .dz-preview .dz-remove {
+	font-size: 14px;
+	text-align: center;
+	display: block;
+	cursor: pointer;
+	border: none;
+}
+.dropzone .dz-preview .dz-remove:hover {
+	text-decoration: underline;
+}
+.dropzone .dz-preview:hover .dz-details {
+	opacity: 1;
+}
+.dropzone .dz-preview .dz-details {
+	z-index: 20;
+	position: absolute;
+	top: 0;
+	left: 0;
+	opacity: 0;
+	font-size: 13px;
+	min-width: 100%;
+	max-width: 100%;
+	// padding: 2em 1em;
+	text-align: center;
+	color: rgba(0, 0, 0, 0.9);
+	line-height: 150%;
+}
+.dropzone .dz-preview .dz-details .dz-size {
+	// margin-bottom: 1em;
+	font-size: 12px !important;
+	transform: translateY(-5px);
+}
+.dropzone .dz-preview .dz-details .dz-filename {
+	white-space: nowrap;
+	font-size: .75em;
+	line-height: 1.5;
+	width: 225px;
+	margin-top: 3px;
+}
+.dropzone .dz-preview .dz-details .dz-filename:hover span {
+	border: 1px solid rgba(200, 200, 200, 0.8);
+	background-color: rgba(255, 255, 255, 0.8);
+}
+.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
+	border: 1px solid transparent;
+}
+.dropzone .dz-preview .dz-details .dz-filename span,
+.dropzone .dz-preview .dz-details .dz-size span {
+	/*
+	background-color: rgba(255, 255, 255, 0.4);
+	padding: 0 0.4em;
+	border-radius: 3px;
+	*/
+}
+.dropzone .dz-preview .result a {
+	cursor: pointer;
+	color: white;
+	text-transform: uppercase;
+	line-height: 30px;
+	&:hover {
+		color: white;
+		text-decoration: underline;;
+	}
+}
+.dropzone .dz-preview:hover .dz-image img {
+	transform: scale(1.05, 1.05);
+	filter: blur(8px);
+}
+.dropzone .dz-preview .dz-image {
+	border-radius: 20px;
+	overflow: hidden;
+	width: 120px;
+	height: 120px;
+	position: relative;
+	display: block;
+	z-index: 10;
+}
+.dropzone .dz-preview .dz-image img {
+	display: block;
+}
+.dropzone .dz-preview.dz-success .dz-success-mark {
+	animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+}
+.dropzone .dz-preview.dz-error .dz-error-mark {
+	opacity: 1;
+	animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+}
+.dropzone .dz-preview .dz-success-mark,
+.dropzone .dz-preview .dz-error-mark {
+	pointer-events: none;
+	opacity: 0;
+	z-index: 500;
+	position: absolute;
+	display: block;
+	top: 50%;
+	left: 50%;
+	margin-left: -27px;
+	margin-top: -27px;
+}
+.dropzone .dz-preview .dz-success-mark svg,
+.dropzone .dz-preview .dz-error-mark svg {
+	display: block;
+	width: 54px;
+	height: 54px;
+}
+.dropzone .dz-preview.dz-processing .dz-progress {
+	opacity: 1;
+	transition: all 0.2s linear;
+}
+.dropzone .dz-preview.dz-complete .dz-progress {
+	opacity: 0;
+	transition: opacity 0.4s ease-in;
+}
+.dropzone .dz-preview:not(.dz-processing) .dz-progress {
+	animation: pulse 6s ease infinite;
+}
+.dropzone .dz-preview .dz-progress {
+	opacity: 1;
+	z-index: 1000;
+	pointer-events: none;
+	position: absolute;
+	margin-top: -8px;
+	width: 80px;
+	margin-left: -40px;
+	background: rgba(255, 255, 255, 0.9);
+	transform: scale(1);
+	border-radius: 8px;
+	overflow: hidden;
+	right: 10px;
+	left: initial;
+	margin: 0px;
+	height: 5px;
+	top: 17px;
+}
+.dropzone .dz-preview .dz-progress .dz-upload {
+	// background: #333;
+	// background: linear-gradient(to bottom, #666, #444);
+	background: #0b6312;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 0;
+	transition: width 300ms ease-in-out;
+}
+.dropzone .dz-preview.dz-error .dz-error-message {
+	display: block;
+}
+.dropzone .dz-preview.dz-error:hover .dz-error-message {
+	opacity: 1;
+	pointer-events: auto;
+}
+.dropzone .dz-preview .dz-error-message {
+	pointer-events: none;
+	z-index: 1000;
+	position: absolute;
+	display: block;
+	display: none;
+	opacity: 0;
+	transition: opacity 0.3s ease;
+	border-radius: 8px;
+	font-size: 13px;
+	top: 130px;
+	left: -10px;
+	width: 140px;
+	background: #be2626;
+	background: linear-gradient(to bottom, #be2626, #a92222);
+	padding: 0.5em 1.2em;
+	color: white;
+}
+.dropzone .dz-preview .dz-error-message:after {
+	content: '';
+	position: absolute;
+	top: -6px;
+	left: 64px;
+	width: 0;
+	height: 0;
+	border-left: 6px solid transparent;
+	border-right: 6px solid transparent;
+	border-bottom: 6px solid #be2626;
+}
+/*
+.vue-dropzone {
+	border: 2px solid #E5E5E5;
+	font-family: 'Arial', sans-serif;
+	letter-spacing: 0.2px;
+	color: #777;
+	transition: background-color 0.2s linear;
+}
+.vue-dropzone:hover {
+	background-color: #F6F6F6;
+}
+*/
+.vue-dropzone i {
+	color: #CCC;
+}
+.vue-dropzone .dz-preview .dz-image {
+	border-radius: 0;
+	width: 100%;
+	height: 100%;
+}
+.vue-dropzone .dz-preview .dz-image img:not([src]) {
+	width: 200px;
+	height: 200px;
+}
+.vue-dropzone .dz-preview .dz-image:hover img {
+	transform: none;
+	-webkit-filter: none;
+}
+.vue-dropzone .dz-preview .dz-details {
+	bottom: 0;
+	top: 0;
+	color: white;
+	background-color: transparent;
+	// background-color: rgba(33, 150, 243, 0.8);
+	// transition: opacity .2s linear;
+	transition: background-color .2s linear;
+	text-align: left;
+	border-radius: .3em;
+	height: 40px;
+	padding-left: 15px;
+}
+
+.vue-dropzone .dz-preview.dz-success .dz-details {
+	background-color: #22a061;
+}
+
+.vue-dropzone .dz-preview.dz-error .dz-details {
+	background-color: #c44e47;
+}
+
+.vue-dropzone .dz-preview .dz-details .dz-filename {
+	overflow: hidden;
+}
+
+.vue-dropzone .dz-preview .dz-details .dz-filename span {
+	font-size: 1.25em;
+}
+.vue-dropzone .dz-preview .dz-details .dz-filename span,
+.vue-dropzone .dz-preview .dz-details .dz-size span {
+	background-color: transparent;
+	// font-size: .625em;
+	// opacity: .5;
+	opacity: 1;
+	transition: opacity .25s ease-in-out;
+	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+}
+
+.vue-dropzone .dz-preview .dz-details .dz-size span,
+.vue-dropzone .dz-preview .dz-details .dz-size span strong {
+	opacity: .75;
+	color: white;
+	font-size: .625em;
+}
+.vue-dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
+	border: none;
+}
+.vue-dropzone .dz-preview .dz-details .dz-filename:hover span {
+	background-color: transparent;
+	border: none;
+}
+.vue-dropzone .dz-preview .dz-progress .dz-upload {
+	// background: #cccccc;
+	background: #8bc34a;
+}
+.vue-dropzone .dz-preview .dz-remove {
+	position: absolute;
+	z-index: 30;
+	color: white;
+	margin-left: 15px;
+	padding: 10px;
+	top: inherit;
+	bottom: 15px;
+	border: 2px white solid;
+	text-decoration: none;
+	text-transform: uppercase;
+	font-size: 0.8rem;
+	font-weight: 800;
+	letter-spacing: 1.1px;
+	opacity: 0;
+}
+.vue-dropzone .dz-preview:hover .dz-remove {
+	opacity: 1;
+}
+.vue-dropzone .dz-preview .dz-success-mark,
+.vue-dropzone .dz-preview .dz-error-mark {
+	margin-left: auto;
+	margin-top: auto;
+	width: 100%;
+	top: 35%;
+	left: 0;
+}
+.vue-dropzone .dz-preview .dz-success-mark svg,
+.vue-dropzone .dz-preview .dz-error-mark svg {
+	margin-left: auto;
+	margin-right: auto;
+}
+.vue-dropzone .dz-preview .dz-error-message {
+	top: calc(15%);
+	margin-left: auto;
+	margin-right: auto;
+	left: 0;
+	width: 100%;
+}
+.vue-dropzone .dz-preview .dz-error-message:after {
+	bottom: -6px;
+	top: initial;
+	border-top: 6px solid #a92222;
+	border-bottom: none;
+}
+
+.dz-size span, .dz-size span strong {
+	font-size: 0.9em !important;
+}
+
+.vue-dropzone .dz-preview .result,
+.vue-dropzone .dz-preview .error {
+	display: none;
+}
+.vue-dropzone .dz-preview.dz-success .result,
+.vue-dropzone .dz-preview.dz-error .error {
+	display: inline-block;
+	position: absolute;
+	z-index: 50;
+	right: 5px;
+	top: 6px;
+	transition: display 0.2s linear;
+	cursor: pointer;
+
+	> div {
+		margin-right: 5px;
+		display: inline-block;
+		cursor: pointer;
+		span {
+			width: 2em;
+			height: 2em;
+			color: #fff;
+			outline: none;
+			border-radius: 50%;
+			background-color: rgba(0,0,0,.5);
+			display: block;
+			cursor: pointer;
+			a { cursor: pointer; }
+			i {
+				color: white;
+				position: absolute;
+				top: 4px;
+				left: 4px;
+				cursor: pointer;
+			}
+		}
+	}
+}
+
+.vue-dropzone .dz-preview.dz-error .error {
+	span.error-message {
+		display: none;
+		width: 250px;
+		background-color: black;
+		color: #fff;
+		text-align: center;
+		padding: 5px 0;
+		border-radius: 6px;
+		top: -8px;
+		height: auto;
+		left: 60px;
+		position: absolute;
+		transition: display 0.2s linear;
+	}
+
+	> div > span {
+		position: relative;
+		&:hover {
+			span.error-message {
+				display: inline-table;
+			}
+		}
+	}
+	i {
+		top: 3px !important;
+		left: 5px !important;
+	}
+}
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
new file mode 100644
index 0000000..1152f43
--- /dev/null
+++ b/src/site/assets/styles/style.scss
@@ -0,0 +1,414 @@
+// Let's first take care of having the customized colors ready.
+@import './_bulma_colors_extender.scss';
+@import './_colors.scss';
+
+// Bulma/Buefy customization
+@import '../../../../node_modules/bulma/sass/utilities/_all.sass';
+
+$body-size: 14px !default;
+$family-primary: 'Nunito', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+	'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+$size-normal: 1rem;
+
+/* @import '../../../node_modules/bulma/bulma.sass';
+@import '../../../node_modules/buefy/src/scss/buefy.scss'; */
+
+@import "~bulma";
+@import "~buefy/src/scss/buefy";
+
+@import '@mdi/font/css/materialdesignicons.css';
+
+@import './bulma-divider.scss';
+
+html, body, #__nuxt, #__layout, .default-body, #app {
+	// height: 100% !important;
+}
+
+html {
+	// font-size: 100%;
+	font-size: 14px;
+	background-color: $base-1;
+}
+
+a {
+	color: #5e81ac;
+	&:hover {
+		color: #81a1c1;
+		text-decoration: underline;
+	}
+}
+body,
+p,
+h1,
+h1.title,
+h2.subtitle,
+label.label,
+strong {
+	color: $textColor;
+}
+label.label {
+	font-weight: 400;
+}
+
+h4 {
+	font-size: 2em;
+	font-weight: 700;
+	line-height: 1.25em;
+}
+
+@for $i from 1 through 10 {
+	.mt#{$i} {
+		margin-top: $i + em !important;
+	}
+	.mb#{$i} {
+		margin-bottom: $i + em !important;
+	}
+	.ml#{$i} {
+		margin-left: $i + em !important;
+	}
+	.mr#{$i} {
+		margin-right: $i + em !important;
+	}
+}
+
+.text-center {
+	text-align: center;
+}
+
+hr {
+	background-color: #c7c7c757;
+	height: 1px;
+}
+// Bulma color changes.
+.tooltip.is-top.is-primary:before {
+	border-top: 5px solid #20222b;
+}
+.tooltip.is-primary:after {
+	background: #20222b;
+}
+
+div#drag-overlay {
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	z-index: 100;
+	div.background {
+		background: rgba(0, 0, 0, 0.9);
+		position: absolute;
+		top: 3%;
+		left: 3%;
+		width: 94%;
+		height: 94%;
+		border: 2px dashed #fff;
+		border-radius: 10px;
+		box-shadow: 0 0 0 4px #ffffff00, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
+	}
+
+	div.drop {
+		width: 100%;
+		color: white;
+		position: absolute;
+		height: 100%;
+		align-items: center;
+		display: flex;
+		justify-content: center;
+		font-size: 2em;
+	}
+}
+
+section.hero {
+	&.dashboard {
+		// background-color: $backgroundLight1 !important;
+		div.hero-body {
+			align-items: baseline;
+		}
+	}
+}
+
+section input,
+section a.button {
+	font-size: 14px !important;
+}
+section input,
+section p.control a.button {
+	border-left: 0px !important;
+	border-top: 0px !important;
+	border-right: 0px !important;
+	border-radius: 0px !important;
+	box-shadow: 0 0 0 !important;
+}
+
+section p.control a.button {
+	margin-left: 10px !important;
+}
+section p.control button {
+	height: 100%;
+	font-size: 12px;
+}
+
+.switch input[type='checkbox'] + .check:before {
+	background: #fbfbfb;
+}
+
+/*
+	Register and Login forms
+*/
+
+section.hero.is-login,
+section.hero.is-register {
+	a {
+		font-size: 1.25em;
+		line-height: 2.5em;
+
+		&.button {
+			font-size: 14px !important;
+		}
+	}
+	input {
+		background: #323846;
+		border-radius: 0 !important;
+	}
+}
+/*
+section#login,
+section#register { background-color: $backgroundLight1 !important; }
+section#login input,
+section#register input,
+section#login a.button,
+section#register a.button {
+	font-size: 14px !important;
+}
+section#login input,
+section#register input,
+section#login p.control a.button,
+section#register p.control a.button {
+	border-left: 0px !important;
+	border-top: 0px !important;
+	border-right: 0px !important;
+	border-radius: 0px !important;
+	box-shadow: 0 0 0 !important;
+}
+
+section#login p.control a.button,
+section#register p.control a.button { margin-left: 10px !important; }
+section#login p.control a#loginBtn,
+section#register p.control a#loginBtn { border-right: 0px !important; }
+section#login p.control a#registerBtn,
+section#register p.control a#registerBtn { border-left: 0px !important; }
+
+section#login a.is-text,
+section#register a.is-text {
+	font-size: 1.25em;
+	line-height: 2.5em;
+}
+
+.modal-card-head, .modal-card-foot {
+	background: $backgroundLight1;
+}
+*/
+
+.switch {
+	margin-top: 5px;
+}
+
+/* button.button.is-primary {
+	background-color: #323846;
+	border: 2px solid #21252d;
+	color: $textColor;
+	font-size: 1rem;
+	border-top: 0;
+	border-left: 0;
+	border-right: 0;
+	&:hover {
+		background-color: $base-2;
+	}
+	&.big {
+		font-size: 1.25rem;
+	}
+} */
+svg.waves {
+	display: block;
+	bottom: -1px;
+	left: 0px;
+	right: 0px;
+	width: 100%;
+	background-color: transparent;
+	pointer-events: none;
+	user-select: none;
+	overflow: hidden;
+}
+div.field-body > div.field {
+	text-align: left;
+}
+table.table {
+	background: $base-2;
+	color: $textColor;
+	border: 0;
+	thead {
+		th,
+		td {
+			color: $textColor;
+		}
+	}
+	tfoot {
+		background: $base-1;
+		tr.table-footer {
+			.wrapper {
+				display: flex;
+				color: $textColor;
+				justify-content: space-evenly;
+			}
+		}
+	}
+	th,
+	td {
+		border-color: #ffffff1c;
+	}
+}
+
+.chibisafe-input input,
+.chibisafe-select select,
+.chibisafe-textarea textarea {
+	border: 2px solid #21252d;
+	border-radius: 0.3em !important;
+	background: rgba(0, 0, 0, 0.15);
+	padding: 1rem;
+	color: $textColor;
+	height: 3rem;
+	&:focus,
+	&:hover {
+		border: 2px solid #21252d;
+	}
+	&::placeholder {
+		color: $textColor;
+	}
+}
+
+.chibisafe-input .icon {
+	color: #323846 !important;
+}
+
+
+// vue-bar
+.vb > .vb-dragger {
+	z-index: 5;
+	width: 12px;
+	right: 0;
+}
+
+.vb > .vb-dragger > .vb-dragger-styler {
+	backface-visibility: hidden;
+	transform: rotate3d(0, 0, 0, 0);
+	transition: background-color 100ms ease-out, margin 100ms ease-out, height 100ms ease-out;
+	background-color: $backgroundAccent;
+	margin: 5px 5px 5px 0;
+	border-radius: 20px;
+	height: calc(100% - 10px);
+	display: block;
+}
+
+.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
+	background-color: $backgroundAccentLighter;
+}
+
+.vb > .vb-dragger:hover > .vb-dragger-styler {
+	background-color: $backgroundAccentLighter;
+	margin: 0px;
+	height: 100%;
+}
+
+.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
+	background-color: $backgroundAccentLighter;
+	margin: 0px;
+	height: 100%;
+}
+
+.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
+	background-color: $backgroundAccentLighter;
+}
+
+.vb-content {
+	overflow: auto !important;
+}
+
+// helpers
+.has-text-default {
+	color: $textColor;
+}
+
+.has-text-default-highlight {
+	color: $textColorHighlight;
+}
+
+.is-height-max-content {
+	height: max-content;
+}
+
+.pagination a,
+.pagination a:hover {
+	text-decoration: none;
+}
+
+// fix control icons
+.control.has-icons-left .icon, .control.has-icons-right .icon {
+	height: 3rem;
+	padding-right: 1rem;
+}
+
+.is-marginless {
+	margin: 0 !important;
+}
+
+.has-centered-items {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.chibisafe-on-border.field.is-floating-label .label:before {
+	background-color: $chibisafe;
+}
+
+.is-chibisafe.divider::after, .is-chibisafe.divider::before {
+	background-color: #21252d;
+}
+
+.chibisafe.taginput {
+	.taginput-container {
+		background-color: #21252d;
+		border: 2px solid #21252d;
+		border-radius: 0.3em !important;
+
+		input {
+			background-color: #21252d;
+			color: $textColor;
+			&::placeholder {
+				color: $textColor;
+			}
+		}
+
+		.icon {
+			padding-left: 15px;
+		}
+
+		&:focus,
+		&:hover,
+		&:active {
+			border: 2px solid #21252d;
+		}
+	}
+}
+
+.dropdown-content a {
+	text-decoration: none;
+}
+
+.button {
+	color: $textColor;
+	&:hover {
+		color: white;
+	}
+}