From 9c9216be8b281471bc7900210cd9587f1cdb2532 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 7 Apr 2020 15:29:31 +0300
Subject: [PATCH] Fixed #253 - Improve DataTable ContextMenu Styling

---
 public/themes/luna-amber/theme.css            | 210 +++++++++++++++---
 public/themes/luna-blue/theme.css             | 210 +++++++++++++++---
 public/themes/luna-green/theme.css            | 210 +++++++++++++++---
 public/themes/luna-pink/theme.css             | 210 +++++++++++++++---
 public/themes/nova-colored/theme.css          | 210 +++++++++++++++---
 public/themes/nova-dark/theme.css             | 210 +++++++++++++++---
 public/themes/nova-light/theme.css            | 210 +++++++++++++++---
 public/themes/nova-vue/theme.css              | 210 +++++++++++++++---
 public/themes/rhea/theme.css                  | 210 +++++++++++++++---
 src/components/datatable/DataTable.d.ts       |   1 +
 src/components/datatable/DataTable.vue        |  15 +-
 src/components/datatable/TableBody.vue        |   6 +-
 .../datatable/DataTableContextMenuDemo.vue    |   4 +-
 src/views/datatable/DataTableDoc.vue          |  10 +-
 14 files changed, 1682 insertions(+), 244 deletions(-)

diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 3f0f17073..8784a6ba7 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1,4 +1,10 @@
 @charset "UTF-8";
+:root {
+  --primaryColor: #FFB300;
+  --primaryTextColor: #212121;
+  --panelContentBorder: 1px solid #191919;
+}
+
 /* open-sans-300 - latin */
 @font-face {
   font-family: "Open Sans";
@@ -2121,10 +2127,6 @@ body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
 body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
   color: #212121;
 }
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #ffd980;
-  color: #212121;
-}
 body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
   box-shadow: inset 0 2px 0 0 #FFB300;
 }
@@ -2159,16 +2161,6 @@ body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-tog
 body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
   color: #212121;
 }
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #ffd980;
-  color: #212121;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #212121;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #212121;
-}
 body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
   cursor: pointer;
   background-color: #4c4c4c;
@@ -3389,11 +3381,8 @@ body .p-steps {
 }
 body .p-steps .p-steps-item {
   background-color: transparent;
-  text-align: center;
 }
 body .p-steps .p-steps-item .p-menuitem-link {
-  display: inline-block;
-  text-align: center;
   background-color: transparent;
   overflow: hidden;
   -moz-transition: box-shadow 0.2s;
@@ -3412,14 +3401,13 @@ body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
   color: #dedede;
   background-color: #191919;
   border: 1px solid #191919;
-  position: relative;
-  top: 16px;
-  margin-bottom: 14px;
-  width: 28px;
+  min-width: 28px;
   height: 28px;
   font-size: 16px;
   line-height: 24px;
   text-align: center;
+  position: relative;
+  z-index: 1;
 }
 body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   display: block;
@@ -3441,17 +3429,15 @@ body .p-steps .p-steps-item.p-highlight .p-steps-title {
   font-weight: 700;
   color: #dedede;
 }
-body .p-steps .p-steps-item:last-child .p-menuitem-link {
-  display: block;
-}
-body .p-steps:before {
+body .p-steps .p-steps-item:before {
   content: " ";
   border-top: 1px solid #191919;
   width: 100%;
-  top: 45%;
+  top: 50%;
   left: 0;
   display: block;
   position: absolute;
+  margin-top: -14px;
 }
 body .p-menu .p-menuitem-link,
 body .p-menubar .p-menuitem-link,
@@ -3969,6 +3955,178 @@ body .p-progressbar .p-progressbar-label {
   color: #dedede;
   line-height: 24px;
 }
+body .p-galleria .p-galleria-close .p-galleria-close-icon {
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
+  color: #FFB300;
+}
+body .p-galleria .p-galleria-header,
+body .p-galleria .p-galleria-footer {
+  background-color: #191919;
+  color: #dedede;
+  border: 1px solid #191919;
+  padding: 0.571em 1em;
+}
+body .p-galleria .p-galleria-header + .p-galleria-content,
+body .p-galleria .p-galleria-footer + .p-galleria-content {
+  border: 1px solid #191919;
+  border-top: 0 none;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
+  color: #FFB300;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  border-radius: 3px;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
+  display: inline-flex;
+  align-items: center;
+  height: 1.5em;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #252525;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
+  content: "";
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #FFB300;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
+  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
+  box-shadow: 0 0 0 0.2em #ffe8b3;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: #FFB300;
+  border: 1px solid #FFB300;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  margin: 0.2em;
+  color: #212121;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: #FFA000;
+  color: #212121;
+  border-color: #FFA000;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
+  opacity: 0.4;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
+  opacity: 1;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
+  opacity: 1;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
+  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
+  box-shadow: 0 0 0 0.2em #ffe8b3;
+}
+body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #ffffff;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #FFB300;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  bottom: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 0;
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  top: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 0;
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  left: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 0;
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  right: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 0;
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+  font-size: 1.2em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: transparent;
+  color: #FFB300;
+  border-color: 0 none;
+}
+body .p-galleria-mask {
+  background-color: black;
+}
 body .p-terminal {
   background-color: #323232;
   color: #dedede;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 6bc4acc9a..392914b27 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1,4 +1,10 @@
 @charset "UTF-8";
+:root {
+  --primaryColor: #1f7ed0;
+  --primaryTextColor: #ffffff;
+  --panelContentBorder: 1px solid #191919;
+}
+
 /* open-sans-300 - latin */
 @font-face {
   font-family: "Open Sans";
@@ -2121,10 +2127,6 @@ body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
 body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #82bbec;
-  color: #ffffff;
-}
 body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
   box-shadow: inset 0 2px 0 0 #1f7ed0;
 }
@@ -2159,16 +2161,6 @@ body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-tog
 body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #82bbec;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #ffffff;
-}
 body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
   cursor: pointer;
   background-color: #4c4c4c;
@@ -3389,11 +3381,8 @@ body .p-steps {
 }
 body .p-steps .p-steps-item {
   background-color: transparent;
-  text-align: center;
 }
 body .p-steps .p-steps-item .p-menuitem-link {
-  display: inline-block;
-  text-align: center;
   background-color: transparent;
   overflow: hidden;
   -moz-transition: box-shadow 0.2s;
@@ -3412,14 +3401,13 @@ body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
   color: #dedede;
   background-color: #191919;
   border: 1px solid #191919;
-  position: relative;
-  top: 16px;
-  margin-bottom: 14px;
-  width: 28px;
+  min-width: 28px;
   height: 28px;
   font-size: 16px;
   line-height: 24px;
   text-align: center;
+  position: relative;
+  z-index: 1;
 }
 body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   display: block;
@@ -3441,17 +3429,15 @@ body .p-steps .p-steps-item.p-highlight .p-steps-title {
   font-weight: 700;
   color: #dedede;
 }
-body .p-steps .p-steps-item:last-child .p-menuitem-link {
-  display: block;
-}
-body .p-steps:before {
+body .p-steps .p-steps-item:before {
   content: " ";
   border-top: 1px solid #191919;
   width: 100%;
-  top: 45%;
+  top: 50%;
   left: 0;
   display: block;
   position: absolute;
+  margin-top: -14px;
 }
 body .p-menu .p-menuitem-link,
 body .p-menubar .p-menuitem-link,
@@ -3969,6 +3955,178 @@ body .p-progressbar .p-progressbar-label {
   color: #dedede;
   line-height: 24px;
 }
+body .p-galleria .p-galleria-close .p-galleria-close-icon {
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
+  color: #1f7ed0;
+}
+body .p-galleria .p-galleria-header,
+body .p-galleria .p-galleria-footer {
+  background-color: #191919;
+  color: #dedede;
+  border: 1px solid #191919;
+  padding: 0.571em 1em;
+}
+body .p-galleria .p-galleria-header + .p-galleria-content,
+body .p-galleria .p-galleria-footer + .p-galleria-content {
+  border: 1px solid #191919;
+  border-top: 0 none;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
+  color: #1f7ed0;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  border-radius: 3px;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
+  display: inline-flex;
+  align-items: center;
+  height: 1.5em;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #252525;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
+  content: "";
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #1f7ed0;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
+  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
+  box-shadow: 0 0 0 0.2em #aed3f3;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: #1f7ed0;
+  border: 1px solid #1f7ed0;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  margin: 0.2em;
+  color: #ffffff;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: #1b71bb;
+  color: #ffffff;
+  border-color: #1b71bb;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
+  opacity: 0.4;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
+  opacity: 1;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
+  opacity: 1;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
+  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
+  box-shadow: 0 0 0 0.2em #aed3f3;
+}
+body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #ffffff;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #1f7ed0;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  bottom: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 0;
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  top: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 0;
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  left: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 0;
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  right: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 0;
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+  font-size: 1.2em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: transparent;
+  color: #1f7ed0;
+  border-color: 0 none;
+}
+body .p-galleria-mask {
+  background-color: black;
+}
 body .p-terminal {
   background-color: #323232;
   color: #dedede;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 795bd4cf8..5e5bd282b 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1,4 +1,10 @@
 @charset "UTF-8";
+:root {
+  --primaryColor: #1ea04c;
+  --primaryTextColor: #ffffff;
+  --panelContentBorder: 1px solid #191919;
+}
+
 /* open-sans-300 - latin */
 @font-face {
   font-family: "Open Sans";
@@ -2121,10 +2127,6 @@ body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
 body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #5de18c;
-  color: #ffffff;
-}
 body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
   box-shadow: inset 0 2px 0 0 #1ea04c;
 }
@@ -2159,16 +2161,6 @@ body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-tog
 body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #5de18c;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #ffffff;
-}
 body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
   cursor: pointer;
   background-color: #4c4c4c;
@@ -3389,11 +3381,8 @@ body .p-steps {
 }
 body .p-steps .p-steps-item {
   background-color: transparent;
-  text-align: center;
 }
 body .p-steps .p-steps-item .p-menuitem-link {
-  display: inline-block;
-  text-align: center;
   background-color: transparent;
   overflow: hidden;
   -moz-transition: box-shadow 0.2s;
@@ -3412,14 +3401,13 @@ body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
   color: #dedede;
   background-color: #191919;
   border: 1px solid #191919;
-  position: relative;
-  top: 16px;
-  margin-bottom: 14px;
-  width: 28px;
+  min-width: 28px;
   height: 28px;
   font-size: 16px;
   line-height: 24px;
   text-align: center;
+  position: relative;
+  z-index: 1;
 }
 body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   display: block;
@@ -3441,17 +3429,15 @@ body .p-steps .p-steps-item.p-highlight .p-steps-title {
   font-weight: 700;
   color: #dedede;
 }
-body .p-steps .p-steps-item:last-child .p-menuitem-link {
-  display: block;
-}
-body .p-steps:before {
+body .p-steps .p-steps-item:before {
   content: " ";
   border-top: 1px solid #191919;
   width: 100%;
-  top: 45%;
+  top: 50%;
   left: 0;
   display: block;
   position: absolute;
+  margin-top: -14px;
 }
 body .p-menu .p-menuitem-link,
 body .p-menubar .p-menuitem-link,
@@ -3969,6 +3955,178 @@ body .p-progressbar .p-progressbar-label {
   color: #dedede;
   line-height: 24px;
 }
+body .p-galleria .p-galleria-close .p-galleria-close-icon {
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
+  color: #1ea04c;
+}
+body .p-galleria .p-galleria-header,
+body .p-galleria .p-galleria-footer {
+  background-color: #191919;
+  color: #dedede;
+  border: 1px solid #191919;
+  padding: 0.571em 1em;
+}
+body .p-galleria .p-galleria-header + .p-galleria-content,
+body .p-galleria .p-galleria-footer + .p-galleria-content {
+  border: 1px solid #191919;
+  border-top: 0 none;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
+  color: #1ea04c;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  border-radius: 3px;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
+  display: inline-flex;
+  align-items: center;
+  height: 1.5em;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #252525;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
+  content: "";
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #1ea04c;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
+  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
+  box-shadow: 0 0 0 0.2em #88e9aa;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: #1ea04c;
+  border: 1px solid #1ea04c;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  margin: 0.2em;
+  color: #ffffff;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: #1b9044;
+  color: #ffffff;
+  border-color: #1b9044;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
+  opacity: 0.4;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
+  opacity: 1;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
+  opacity: 1;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
+  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
+  box-shadow: 0 0 0 0.2em #88e9aa;
+}
+body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #ffffff;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #1ea04c;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  bottom: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 0;
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  top: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 0;
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  left: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 0;
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  right: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 0;
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+  font-size: 1.2em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: transparent;
+  color: #1ea04c;
+  border-color: 0 none;
+}
+body .p-galleria-mask {
+  background-color: black;
+}
 body .p-terminal {
   background-color: #323232;
   color: #dedede;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 16230918f..e9149263c 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1,4 +1,10 @@
 @charset "UTF-8";
+:root {
+  --primaryColor: #cc285c;
+  --primaryTextColor: #ffffff;
+  --panelContentBorder: 1px solid #191919;
+}
+
 /* open-sans-300 - latin */
 @font-face {
   font-family: "Open Sans";
@@ -2121,10 +2127,6 @@ body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
 body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #e88ba9;
-  color: #ffffff;
-}
 body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
   box-shadow: inset 0 2px 0 0 #cc285c;
 }
@@ -2159,16 +2161,6 @@ body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-tog
 body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #e88ba9;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #ffffff;
-}
 body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
   cursor: pointer;
   background-color: #4c4c4c;
@@ -3389,11 +3381,8 @@ body .p-steps {
 }
 body .p-steps .p-steps-item {
   background-color: transparent;
-  text-align: center;
 }
 body .p-steps .p-steps-item .p-menuitem-link {
-  display: inline-block;
-  text-align: center;
   background-color: transparent;
   overflow: hidden;
   -moz-transition: box-shadow 0.2s;
@@ -3412,14 +3401,13 @@ body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
   color: #dedede;
   background-color: #191919;
   border: 1px solid #191919;
-  position: relative;
-  top: 16px;
-  margin-bottom: 14px;
-  width: 28px;
+  min-width: 28px;
   height: 28px;
   font-size: 16px;
   line-height: 24px;
   text-align: center;
+  position: relative;
+  z-index: 1;
 }
 body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   display: block;
@@ -3441,17 +3429,15 @@ body .p-steps .p-steps-item.p-highlight .p-steps-title {
   font-weight: 700;
   color: #dedede;
 }
-body .p-steps .p-steps-item:last-child .p-menuitem-link {
-  display: block;
-}
-body .p-steps:before {
+body .p-steps .p-steps-item:before {
   content: " ";
   border-top: 1px solid #191919;
   width: 100%;
-  top: 45%;
+  top: 50%;
   left: 0;
   display: block;
   position: absolute;
+  margin-top: -14px;
 }
 body .p-menu .p-menuitem-link,
 body .p-menubar .p-menuitem-link,
@@ -3969,6 +3955,178 @@ body .p-progressbar .p-progressbar-label {
   color: #dedede;
   line-height: 24px;
 }
+body .p-galleria .p-galleria-close .p-galleria-close-icon {
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
+  color: #cc285c;
+}
+body .p-galleria .p-galleria-header,
+body .p-galleria .p-galleria-footer {
+  background-color: #191919;
+  color: #dedede;
+  border: 1px solid #191919;
+  padding: 0.571em 1em;
+}
+body .p-galleria .p-galleria-header + .p-galleria-content,
+body .p-galleria .p-galleria-footer + .p-galleria-content {
+  border: 1px solid #191919;
+  border-top: 0 none;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
+  color: #cc285c;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  border-radius: 3px;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
+  display: inline-flex;
+  align-items: center;
+  height: 1.5em;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #252525;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
+  content: "";
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #cc285c;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
+  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
+  box-shadow: 0 0 0 0.2em #f1b6c8;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: #cc285c;
+  border: 1px solid #cc285c;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  margin: 0.2em;
+  color: #ffffff;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: #b72452;
+  color: #ffffff;
+  border-color: #b72452;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
+  opacity: 0.4;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
+  opacity: 1;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
+  opacity: 1;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
+  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
+  box-shadow: 0 0 0 0.2em #f1b6c8;
+}
+body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #ffffff;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #cc285c;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  bottom: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 0;
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  top: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 0;
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  left: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 0;
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  right: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 0;
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+  font-size: 1.2em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: transparent;
+  color: #cc285c;
+  border-color: 0 none;
+}
+body .p-galleria-mask {
+  background-color: black;
+}
 body .p-terminal {
   background-color: #323232;
   color: #dedede;
diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
index 092f2f457..222d22468 100644
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@@ -1,4 +1,10 @@
 @charset "UTF-8";
+:root {
+  --primaryColor: #007ad9;
+  --primaryTextColor: #ffffff;
+  --panelContentBorder: 1px solid #c8c8c8;
+}
+
 /* open-sans-300 - latin */
 @font-face {
   font-family: "Open Sans";
@@ -2121,10 +2127,6 @@ body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
 body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #f093b3;
-  color: #ffffff;
-}
 body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
   box-shadow: inset 0 2px 0 0 #e02365;
 }
@@ -2159,16 +2161,6 @@ body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-tog
 body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #f093b3;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #ffffff;
-}
 body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
   cursor: pointer;
   background-color: #eaeaea;
@@ -3389,11 +3381,8 @@ body .p-steps {
 }
 body .p-steps .p-steps-item {
   background-color: transparent;
-  text-align: center;
 }
 body .p-steps .p-steps-item .p-menuitem-link {
-  display: inline-block;
-  text-align: center;
   background-color: transparent;
   overflow: hidden;
   -moz-transition: box-shadow 0.2s;
@@ -3412,14 +3401,13 @@ body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
   color: #333333;
   background-color: #ffffff;
   border: 1px solid #c8c8c8;
-  position: relative;
-  top: 16px;
-  margin-bottom: 14px;
-  width: 28px;
+  min-width: 28px;
   height: 28px;
   font-size: 16px;
   line-height: 24px;
   text-align: center;
+  position: relative;
+  z-index: 1;
 }
 body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   display: block;
@@ -3441,17 +3429,15 @@ body .p-steps .p-steps-item.p-highlight .p-steps-title {
   font-weight: 700;
   color: #333333;
 }
-body .p-steps .p-steps-item:last-child .p-menuitem-link {
-  display: block;
-}
-body .p-steps:before {
+body .p-steps .p-steps-item:before {
   content: " ";
   border-top: 1px solid #c8c8c8;
   width: 100%;
-  top: 45%;
+  top: 50%;
   left: 0;
   display: block;
   position: absolute;
+  margin-top: -14px;
 }
 body .p-menu .p-menuitem-link,
 body .p-menubar .p-menuitem-link,
@@ -3969,6 +3955,178 @@ body .p-progressbar .p-progressbar-label {
   color: #333333;
   line-height: 24px;
 }
+body .p-galleria .p-galleria-close .p-galleria-close-icon {
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
+  color: #007ad9;
+}
+body .p-galleria .p-galleria-header,
+body .p-galleria .p-galleria-footer {
+  background-color: #007ad9;
+  color: #ffffff;
+  border: 1px solid #007ad9;
+  padding: 0.571em 1em;
+}
+body .p-galleria .p-galleria-header + .p-galleria-content,
+body .p-galleria .p-galleria-footer + .p-galleria-content {
+  border: 1px solid #007ad9;
+  border-top: 0 none;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
+  color: #007ad9;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  border-radius: 3px;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
+  display: inline-flex;
+  align-items: center;
+  height: 1.5em;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #b2c1cd;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
+  content: "";
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #007ad9;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
+  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
+  box-shadow: 0 0 0 0.2em #8dcdff;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: #ffffff;
+  border: solid 1px rgba(178, 193, 205, 0.64);
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  margin: 0.2em;
+  color: #333333;
+  -moz-transition: color 0.2s;
+  -o-transition: color 0.2s;
+  -webkit-transition: color 0.2s;
+  transition: color 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: #ffffff;
+  color: #007ad9;
+  border-color: rgba(178, 193, 205, 0.64);
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
+  opacity: 0.4;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
+  opacity: 1;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
+  opacity: 1;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
+  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
+  box-shadow: 0 0 0 0.2em #8dcdff;
+}
+body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #ffffff;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #007ad9;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  bottom: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 0;
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  top: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 0;
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  left: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 0;
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  right: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 0;
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+  font-size: 1.2em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: transparent;
+  color: #007ad9;
+  border-color: 0 none;
+}
+body .p-galleria-mask {
+  background-color: black;
+}
 body .p-terminal {
   background-color: #ffffff;
   color: #333333;
diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
index 4dc9681fb..f0bf37a67 100644
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@@ -1,4 +1,10 @@
 @charset "UTF-8";
+:root {
+  --primaryColor: #007ad9;
+  --primaryTextColor: #ffffff;
+  --panelContentBorder: 1px solid #c8c8c8;
+}
+
 /* open-sans-300 - latin */
 @font-face {
   font-family: "Open Sans";
@@ -2121,10 +2127,6 @@ body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
 body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #5ab7ff;
-  color: #ffffff;
-}
 body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
   box-shadow: inset 0 2px 0 0 #007ad9;
 }
@@ -2159,16 +2161,6 @@ body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-tog
 body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #5ab7ff;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #ffffff;
-}
 body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
   cursor: pointer;
   background-color: #eaeaea;
@@ -3389,11 +3381,8 @@ body .p-steps {
 }
 body .p-steps .p-steps-item {
   background-color: transparent;
-  text-align: center;
 }
 body .p-steps .p-steps-item .p-menuitem-link {
-  display: inline-block;
-  text-align: center;
   background-color: transparent;
   overflow: hidden;
   -moz-transition: box-shadow 0.2s;
@@ -3412,14 +3401,13 @@ body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
   color: #333333;
   background-color: #ffffff;
   border: 1px solid #c8c8c8;
-  position: relative;
-  top: 16px;
-  margin-bottom: 14px;
-  width: 28px;
+  min-width: 28px;
   height: 28px;
   font-size: 16px;
   line-height: 24px;
   text-align: center;
+  position: relative;
+  z-index: 1;
 }
 body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   display: block;
@@ -3441,17 +3429,15 @@ body .p-steps .p-steps-item.p-highlight .p-steps-title {
   font-weight: 700;
   color: #333333;
 }
-body .p-steps .p-steps-item:last-child .p-menuitem-link {
-  display: block;
-}
-body .p-steps:before {
+body .p-steps .p-steps-item:before {
   content: " ";
   border-top: 1px solid #c8c8c8;
   width: 100%;
-  top: 45%;
+  top: 50%;
   left: 0;
   display: block;
   position: absolute;
+  margin-top: -14px;
 }
 body .p-menu .p-menuitem-link,
 body .p-menubar .p-menuitem-link,
@@ -3969,6 +3955,178 @@ body .p-progressbar .p-progressbar-label {
   color: #333333;
   line-height: 24px;
 }
+body .p-galleria .p-galleria-close .p-galleria-close-icon {
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
+  color: #007ad9;
+}
+body .p-galleria .p-galleria-header,
+body .p-galleria .p-galleria-footer {
+  background-color: #333333;
+  color: #ffffff;
+  border: 1px solid #333333;
+  padding: 0.571em 1em;
+}
+body .p-galleria .p-galleria-header + .p-galleria-content,
+body .p-galleria .p-galleria-footer + .p-galleria-content {
+  border: 1px solid #333333;
+  border-top: 0 none;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
+  color: #007ad9;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  border-radius: 3px;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
+  display: inline-flex;
+  align-items: center;
+  height: 1.5em;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #b2c1cd;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
+  content: "";
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #007ad9;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
+  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
+  box-shadow: 0 0 0 0.2em #8dcdff;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: #ffffff;
+  border: solid 1px rgba(178, 193, 205, 0.64);
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  margin: 0.2em;
+  color: #333333;
+  -moz-transition: color 0.2s;
+  -o-transition: color 0.2s;
+  -webkit-transition: color 0.2s;
+  transition: color 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: #ffffff;
+  color: #007ad9;
+  border-color: rgba(178, 193, 205, 0.64);
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
+  opacity: 0.4;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
+  opacity: 1;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
+  opacity: 1;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
+  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
+  box-shadow: 0 0 0 0.2em #8dcdff;
+}
+body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #ffffff;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #007ad9;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  bottom: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 0;
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  top: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 0;
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  left: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 0;
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  right: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 0;
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+  font-size: 1.2em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: transparent;
+  color: #007ad9;
+  border-color: 0 none;
+}
+body .p-galleria-mask {
+  background-color: black;
+}
 body .p-terminal {
   background-color: #ffffff;
   color: #333333;
diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index ce63b7fbe..d12095b75 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -1,4 +1,10 @@
 @charset "UTF-8";
+:root {
+  --primaryColor: #007ad9;
+  --primaryTextColor: #ffffff;
+  --panelContentBorder: 1px solid #c8c8c8;
+}
+
 /* open-sans-300 - latin */
 @font-face {
   font-family: "Open Sans";
@@ -2121,10 +2127,6 @@ body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
 body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #5ab7ff;
-  color: #ffffff;
-}
 body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
   box-shadow: inset 0 2px 0 0 #007ad9;
 }
@@ -2159,16 +2161,6 @@ body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-tog
 body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #5ab7ff;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #ffffff;
-}
 body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
   cursor: pointer;
   background-color: #eaeaea;
@@ -3389,11 +3381,8 @@ body .p-steps {
 }
 body .p-steps .p-steps-item {
   background-color: transparent;
-  text-align: center;
 }
 body .p-steps .p-steps-item .p-menuitem-link {
-  display: inline-block;
-  text-align: center;
   background-color: transparent;
   overflow: hidden;
   -moz-transition: box-shadow 0.2s;
@@ -3412,14 +3401,13 @@ body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
   color: #333333;
   background-color: #ffffff;
   border: 1px solid #c8c8c8;
-  position: relative;
-  top: 16px;
-  margin-bottom: 14px;
-  width: 28px;
+  min-width: 28px;
   height: 28px;
   font-size: 16px;
   line-height: 24px;
   text-align: center;
+  position: relative;
+  z-index: 1;
 }
 body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   display: block;
@@ -3441,17 +3429,15 @@ body .p-steps .p-steps-item.p-highlight .p-steps-title {
   font-weight: 700;
   color: #333333;
 }
-body .p-steps .p-steps-item:last-child .p-menuitem-link {
-  display: block;
-}
-body .p-steps:before {
+body .p-steps .p-steps-item:before {
   content: " ";
   border-top: 1px solid #c8c8c8;
   width: 100%;
-  top: 45%;
+  top: 50%;
   left: 0;
   display: block;
   position: absolute;
+  margin-top: -14px;
 }
 body .p-menu .p-menuitem-link,
 body .p-menubar .p-menuitem-link,
@@ -3969,6 +3955,178 @@ body .p-progressbar .p-progressbar-label {
   color: #333333;
   line-height: 24px;
 }
+body .p-galleria .p-galleria-close .p-galleria-close-icon {
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
+  color: #007ad9;
+}
+body .p-galleria .p-galleria-header,
+body .p-galleria .p-galleria-footer {
+  background-color: #f4f4f4;
+  color: #333333;
+  border: 1px solid #c8c8c8;
+  padding: 0.571em 1em;
+}
+body .p-galleria .p-galleria-header + .p-galleria-content,
+body .p-galleria .p-galleria-footer + .p-galleria-content {
+  border: 1px solid #c8c8c8;
+  border-top: 0 none;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
+  color: #007ad9;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  border-radius: 3px;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
+  display: inline-flex;
+  align-items: center;
+  height: 1.5em;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #b2c1cd;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
+  content: "";
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #007ad9;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
+  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
+  box-shadow: 0 0 0 0.2em #8dcdff;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: #ffffff;
+  border: solid 1px rgba(178, 193, 205, 0.64);
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  margin: 0.2em;
+  color: #333333;
+  -moz-transition: color 0.2s;
+  -o-transition: color 0.2s;
+  -webkit-transition: color 0.2s;
+  transition: color 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: #ffffff;
+  color: #007ad9;
+  border-color: rgba(178, 193, 205, 0.64);
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
+  opacity: 0.4;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
+  opacity: 1;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
+  opacity: 1;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
+  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
+  box-shadow: 0 0 0 0.2em #8dcdff;
+}
+body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #ffffff;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #007ad9;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  bottom: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 0;
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  top: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 0;
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  left: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 0;
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  right: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 0;
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+  font-size: 1.2em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: transparent;
+  color: #007ad9;
+  border-color: 0 none;
+}
+body .p-galleria-mask {
+  background-color: black;
+}
 body .p-terminal {
   background-color: #ffffff;
   color: #333333;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index f1f720e74..b722fa21a 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1,4 +1,10 @@
 @charset "UTF-8";
+:root {
+  --primaryColor: #41b883;
+  --primaryTextColor: #ffffff;
+  --panelContentBorder: 1px solid #c8c8c8;
+}
+
 /* open-sans-300 - latin */
 @font-face {
   font-family: "Open Sans";
@@ -2121,10 +2127,6 @@ body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
 body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #9cdcc0;
-  color: #ffffff;
-}
 body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
   box-shadow: inset 0 2px 0 0 #41b883;
 }
@@ -2159,16 +2161,6 @@ body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-tog
 body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
   color: #ffffff;
 }
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #9cdcc0;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #ffffff;
-}
 body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
   cursor: pointer;
   background-color: #eaeaea;
@@ -3389,11 +3381,8 @@ body .p-steps {
 }
 body .p-steps .p-steps-item {
   background-color: transparent;
-  text-align: center;
 }
 body .p-steps .p-steps-item .p-menuitem-link {
-  display: inline-block;
-  text-align: center;
   background-color: transparent;
   overflow: hidden;
   -moz-transition: box-shadow 0.2s;
@@ -3412,14 +3401,13 @@ body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
   color: #333333;
   background-color: #ffffff;
   border: 1px solid #c8c8c8;
-  position: relative;
-  top: 16px;
-  margin-bottom: 14px;
-  width: 28px;
+  min-width: 28px;
   height: 28px;
   font-size: 16px;
   line-height: 24px;
   text-align: center;
+  position: relative;
+  z-index: 1;
 }
 body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   display: block;
@@ -3441,17 +3429,15 @@ body .p-steps .p-steps-item.p-highlight .p-steps-title {
   font-weight: 700;
   color: #333333;
 }
-body .p-steps .p-steps-item:last-child .p-menuitem-link {
-  display: block;
-}
-body .p-steps:before {
+body .p-steps .p-steps-item:before {
   content: " ";
   border-top: 1px solid #c8c8c8;
   width: 100%;
-  top: 45%;
+  top: 50%;
   left: 0;
   display: block;
   position: absolute;
+  margin-top: -14px;
 }
 body .p-menu .p-menuitem-link,
 body .p-menubar .p-menuitem-link,
@@ -3969,6 +3955,178 @@ body .p-progressbar .p-progressbar-label {
   color: #333333;
   line-height: 24px;
 }
+body .p-galleria .p-galleria-close .p-galleria-close-icon {
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
+  color: #41b883;
+}
+body .p-galleria .p-galleria-header,
+body .p-galleria .p-galleria-footer {
+  background-color: #f4f4f4;
+  color: #333333;
+  border: 1px solid #c8c8c8;
+  padding: 0.571em 1em;
+}
+body .p-galleria .p-galleria-header + .p-galleria-content,
+body .p-galleria .p-galleria-footer + .p-galleria-content {
+  border: 1px solid #c8c8c8;
+  border-top: 0 none;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
+  color: #41b883;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  border-radius: 3px;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
+  display: inline-flex;
+  align-items: center;
+  height: 1.5em;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #b2c1cd;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
+  content: "";
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #41b883;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #c2e9d8;
+  -moz-box-shadow: 0 0 0 0.2em #c2e9d8;
+  box-shadow: 0 0 0 0.2em #c2e9d8;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: #ffffff;
+  border: solid 1px rgba(178, 193, 205, 0.64);
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  margin: 0.2em;
+  color: #333333;
+  -moz-transition: color 0.2s;
+  -o-transition: color 0.2s;
+  -webkit-transition: color 0.2s;
+  transition: color 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: #ffffff;
+  color: #41b883;
+  border-color: rgba(178, 193, 205, 0.64);
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
+  opacity: 0.4;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
+  opacity: 1;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
+  opacity: 1;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #c2e9d8;
+  -moz-box-shadow: 0 0 0 0.2em #c2e9d8;
+  box-shadow: 0 0 0 0.2em #c2e9d8;
+}
+body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #ffffff;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #41b883;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  bottom: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 0;
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  top: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 0;
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  left: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 0;
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  right: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 0;
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+  font-size: 1.2em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: transparent;
+  color: #41b883;
+  border-color: 0 none;
+}
+body .p-galleria-mask {
+  background-color: black;
+}
 body .p-terminal {
   background-color: #ffffff;
   color: #333333;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index a840737c0..5bf4529eb 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1,4 +1,10 @@
 @charset "UTF-8";
+:root {
+  --primaryColor: #7B95A3;
+  --primaryTextColor: #ffffff;
+  --panelContentBorder: 1px solid #dadada;
+}
+
 /* open-sans-300 - latin */
 @font-face {
   font-family: "Open Sans";
@@ -2121,10 +2127,6 @@ body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
 body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
   color: #385048;
 }
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: white;
-  color: #385048;
-}
 body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
   box-shadow: inset 0 2px 0 0 #AFD3C8;
 }
@@ -2159,16 +2161,6 @@ body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-tog
 body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
   color: #385048;
 }
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: white;
-  color: #385048;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #385048;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #385048;
-}
 body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
   cursor: pointer;
   background-color: #eaeaea;
@@ -3389,11 +3381,8 @@ body .p-steps {
 }
 body .p-steps .p-steps-item {
   background-color: transparent;
-  text-align: center;
 }
 body .p-steps .p-steps-item .p-menuitem-link {
-  display: inline-block;
-  text-align: center;
   background-color: transparent;
   overflow: hidden;
   -moz-transition: box-shadow 0.2s;
@@ -3412,14 +3401,13 @@ body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
   color: #a6a6a6;
   background-color: #ffffff;
   border: 1px solid #c8c8c8;
-  position: relative;
-  top: 16px;
-  margin-bottom: 14px;
-  width: 28px;
+  min-width: 28px;
   height: 28px;
   font-size: 16px;
   line-height: 24px;
   text-align: center;
+  position: relative;
+  z-index: 1;
 }
 body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   display: block;
@@ -3441,17 +3429,15 @@ body .p-steps .p-steps-item.p-highlight .p-steps-title {
   font-weight: 700;
   color: #666666;
 }
-body .p-steps .p-steps-item:last-child .p-menuitem-link {
-  display: block;
-}
-body .p-steps:before {
+body .p-steps .p-steps-item:before {
   content: " ";
   border-top: 1px solid #dadada;
   width: 100%;
-  top: 45%;
+  top: 50%;
   left: 0;
   display: block;
   position: absolute;
+  margin-top: -14px;
 }
 body .p-menu .p-menuitem-link,
 body .p-menubar .p-menuitem-link,
@@ -3969,6 +3955,178 @@ body .p-progressbar .p-progressbar-label {
   color: #666666;
   line-height: 1.714em;
 }
+body .p-galleria .p-galleria-close .p-galleria-close-icon {
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
+  color: #7B95A3;
+}
+body .p-galleria .p-galleria-header,
+body .p-galleria .p-galleria-footer {
+  background-color: #7B95A3;
+  color: #ffffff;
+  border: 1px solid #7B95A3;
+  padding: 0.571em 1em;
+}
+body .p-galleria .p-galleria-header + .p-galleria-content,
+body .p-galleria .p-galleria-footer + .p-galleria-content {
+  border: 1px solid #7B95A3;
+  border-top: 0 none;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
+  color: #7B95A3;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  color: #ffffff;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  border-radius: 3px;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
+  display: inline-flex;
+  align-items: center;
+  height: 1.5em;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #b2c1cd;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
+  content: "";
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #7B95A3;
+}
+body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
+  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
+  box-shadow: 0 0 0 0.2em #e4e9ec;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: #7B95A3;
+  border: 1px solid #617c8a;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  margin: 0.2em;
+  color: #ffffff;
+  -moz-transition: background-color 0.2s, box-shadow 0.2s;
+  -o-transition: background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, box-shadow 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: #6c8999;
+  color: #ffffff;
+  border-color: #6c8999;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
+  opacity: 0.4;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
+  opacity: 1;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
+  opacity: 1;
+}
+body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
+  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
+  box-shadow: 0 0 0 0.2em #e4e9ec;
+}
+body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
+  color: #ffffff;
+}
+body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
+  color: #7B95A3;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  bottom: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-top: 0;
+  padding-bottom: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  top: 0;
+  height: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-bottom: 0;
+  padding-top: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-start;
+  left: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-right: 0;
+  padding-left: 1em;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
+  display: flex;
+  align-items: flex-end;
+  right: 0;
+  width: 30%;
+}
+body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
+  padding-left: 0;
+  padding-right: 1em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  background-color: transparent;
+  border: 0 none;
+  color: #ffffff;
+  font-size: 1.2em;
+}
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
+body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
+  background-color: transparent;
+  color: #7B95A3;
+  border-color: 0 none;
+}
+body .p-galleria-mask {
+  background-color: black;
+}
 body .p-terminal {
   background-color: #ffffff;
   color: #666666;
diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
index f1dc7bc67..293c8bcd7 100644
--- a/src/components/datatable/DataTable.d.ts
+++ b/src/components/datatable/DataTable.d.ts
@@ -28,6 +28,7 @@ export declare class DataTable extends Vue {
     selectionMode?: string;
     compareSelectionBy?: string;
     metaKeySelection?: boolean;
+    contextMenu?: boolean;
     contextMenuSelection?: any;
     rowHover?: boolean;
     csvSeparator?: string;
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 3d7978e23..8d2c3c9b7 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -27,7 +27,7 @@
                         @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)"
                         @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
                         @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
-                <DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
+                <DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                     :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                     :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                     :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots" :loading="loading"
@@ -50,7 +50,7 @@
                         @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
                 </template>
                 <template #body>
-                    <DTTableBody :value="dataToRender" :columns="frozenColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
+                    <DTTableBody :value="dataToRender" :columns="frozenColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                         :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                         :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                         :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
@@ -61,7 +61,7 @@
                         @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
                 </template>
                 <template #frozenbody>
-                    <DTTableBody v-if="frozenValue" :value="frozenValue" :columns="frozenColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
+                    <DTTableBody v-if="frozenValue" :value="frozenValue" :columns="frozenColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                         :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                         :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                         :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
@@ -86,7 +86,7 @@
                         @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
                 </template>
                 <template #body>
-                    <DTTableBody :value="dataToRender" :columns="scrollableColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
+                    <DTTableBody :value="dataToRender" :columns="scrollableColumns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                         :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                         :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                         :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
@@ -97,7 +97,7 @@
                         @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
                 </template>
                 <template #frozenbody>
-                    <DTTableBody  v-if="frozenValue" :value="frozenValue" :columns="scrollableColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenuSelection="contextMenuSelection"
+                    <DTTableBody  v-if="frozenValue" :value="frozenValue" :columns="scrollableColumns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                         :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                         :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                         :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
@@ -242,6 +242,10 @@ export default {
             type: Boolean,
             default: true
         },
+        contextMenu: {
+            type: Boolean,
+            default: false
+        },
         contextMenuSelection: {
             type: Object,
             default: null
@@ -702,6 +706,7 @@ export default {
         },
         onRowRightClick(event) {
             DomHandler.clearSelection();
+            event.originalEvent.target.focus();
 
             this.$emit('update:contextMenuSelection', event.data);
             this.$emit('row-contextmenu', event);
diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
index f3b612ba4..f51bd640f 100644
--- a/src/components/datatable/TableBody.vue
+++ b/src/components/datatable/TableBody.vue
@@ -12,7 +12,7 @@
                 </tr>
                 <tr :class="getRowClass(rowData)" :key="getRowKey(rowData, index)"
                     v-if="expandableRowGroups ? isRowGroupExpanded(rowData): true"
-                    @click="onRowClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null"
+                    @click="onRowClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode || contextMenu ? '0' : null"
                     @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
                     <template v-for="(col,i) of columns">
                         <DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
@@ -152,6 +152,10 @@ export default {
             type: String,
             default: null
         },
+        contextMenu: {
+            type: Boolean,
+            default: false
+        },
         contextMenuSelection: {
             type: Object,
             default: null
diff --git a/src/views/datatable/DataTableContextMenuDemo.vue b/src/views/datatable/DataTableContextMenuDemo.vue
index 32052139e..646ac7edb 100644
--- a/src/views/datatable/DataTableContextMenuDemo.vue
+++ b/src/views/datatable/DataTableContextMenuDemo.vue
@@ -10,7 +10,7 @@
 		</div>
 
 		<div class="content-section implementation">
-			<DataTable :value="cars" :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
+			<DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
                 <Column field="vin" header="Vin"></Column>
                 <Column field="year" header="Year"></Column>
                 <Column field="brand" header="Brand"></Column>
@@ -25,7 +25,7 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars" :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
+&lt;DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 11935593d..2a8e54d5d 100644
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -1408,10 +1408,10 @@ export default {
 </CodeHighlight>
 
                 <h3>ContextMenu</h3>
-                <p>DataTable provides exclusive integration with the ContextMenu component using <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.
+                <p>DataTable provides exclusive integration with the ContextMenu component using, <i>contextMenu</i>, <i>contextMenuSelection</i> property along with the <i>row-contextmenu</i> event.
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars" :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
+&lt;DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu"&gt;
     &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
     &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
     &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
@@ -1852,6 +1852,12 @@ export default {
                                     when set to false selection of each item
                                     can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
                             </tr>
+                            <tr>
+                                <td>contextMenu</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Enables context menu integration.</td>
+                            </tr>
                             <tr>
                                 <td>contextMenuSelection</td>
                                 <td>object</td>