diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index ddbddd98c..c120bb87a 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 1px #93cbf9;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 1px #93cbf9;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3737,10 +3759,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
@@ -3821,10 +3839,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #383838;
   color: rgba(255, 255, 255, 0.87);
@@ -5061,12 +5075,46 @@
   box-shadow: 0 0 0 1px #93cbf9;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5136,10 +5184,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #383838;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index d60f19e69..6122394d3 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 1px #a7d8a9;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 1px #a7d8a9;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3737,10 +3759,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
@@ -3821,10 +3839,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #383838;
   color: rgba(255, 255, 255, 0.87);
@@ -5061,12 +5075,46 @@
   box-shadow: 0 0 0 1px #a7d8a9;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5136,10 +5184,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #383838;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 33bb2e617..6bd021dd6 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 1px #ffe284;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 1px #ffe284;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3737,10 +3759,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
@@ -3821,10 +3839,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #383838;
   color: rgba(255, 255, 255, 0.87);
@@ -5061,12 +5075,46 @@
   box-shadow: 0 0 0 1px #ffe284;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5136,10 +5184,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #383838;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 18c14f6ce..e5f9443c1 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 1px #cf95d9;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 1px #cf95d9;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3737,10 +3759,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
@@ -3821,10 +3839,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #383838;
   color: rgba(255, 255, 255, 0.87);
@@ -5061,12 +5075,46 @@
   box-shadow: 0 0 0 1px #cf95d9;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5136,10 +5184,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #383838;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 53bc5b1f6..27dd80032 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.15s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 1px #e3f3fe;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f3f8ff;
   --blue-100:#c5dcff;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 1px #e3f3fe;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3749,10 +3771,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
@@ -3833,10 +3851,6 @@
   padding: 1.25rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #3f4b5b;
   color: rgba(255, 255, 255, 0.87);
@@ -5073,12 +5087,46 @@
   box-shadow: 0 0 0 1px #e3f3fe;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: color 0.15s, box-shadow 0.15s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: color 0.15s, box-shadow 0.15s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5148,10 +5196,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #3f4b5b;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 3f2ca3a05..bda96eca2 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.15s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 1px #f0e6f5;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f3f8ff;
   --blue-100:#c5dcff;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 1px #f0e6f5;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3749,10 +3771,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
@@ -3833,10 +3851,6 @@
   padding: 1.25rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #3f4b5b;
   color: rgba(255, 255, 255, 0.87);
@@ -5073,12 +5087,46 @@
   box-shadow: 0 0 0 1px #f0e6f5;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: color 0.15s, box-shadow 0.15s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: color 0.15s, box-shadow 0.15s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5148,10 +5196,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #3f4b5b;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 90daf9330..578677869 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.15s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f3f8ff;
   --blue-100:#c5dcff;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3749,10 +3771,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: #212529;
@@ -3833,10 +3851,6 @@
   padding: 1.25rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #212529;
   color: #ffffff;
@@ -5073,12 +5087,46 @@
   box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: box-shadow 0.15s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: box-shadow 0.15s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5148,10 +5196,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #dee2e6;
   color: #212529;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 3cb21c2bb..d3bc40f93 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.15s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f3f8ff;
   --blue-100:#c5dcff;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3749,10 +3771,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: #212529;
@@ -3833,10 +3851,6 @@
   padding: 1.25rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #212529;
   color: #ffffff;
@@ -5073,12 +5087,46 @@
   box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: box-shadow 0.15s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: box-shadow 0.15s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5148,10 +5196,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #dee2e6;
   color: #212529;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 90fb10312..c9400db8e 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: inset 0 0 0 1px #605e5c;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f3f8fc;
   --blue-100:#c6dcef;
@@ -455,10 +481,6 @@
   box-shadow: inset 0 0 0 1px #605e5c;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3712,10 +3734,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: #323130;
@@ -3796,10 +3814,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #ffffff;
   color: #323130;
@@ -5012,12 +5026,46 @@
   box-shadow: inset 0 0 0 1px #605e5c;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5087,10 +5135,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #edebe9;
   color: #323130;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index bdfdaedb6..c3620c32f 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f3f8fc;
   --blue-100:#c6dcef;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3724,10 +3746,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #323232;
   color: #dedede;
@@ -3808,10 +3826,6 @@
   padding: 0.571rem 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #4c4c4c;
   color: #dedede;
@@ -5024,12 +5038,46 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5099,10 +5147,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #4b4b4b;
   color: #dedede;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 6a84c44b8..eadac9f44 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f3f8fc;
   --blue-100:#c6dcef;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3724,10 +3746,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #323232;
   color: #dedede;
@@ -3808,10 +3826,6 @@
   padding: 0.571rem 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #4c4c4c;
   color: #dedede;
@@ -5024,12 +5038,46 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5099,10 +5147,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #4b4b4b;
   color: #dedede;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 10645f9af..95a5cc534 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f3f8fc;
   --blue-100:#c6dcef;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3724,10 +3746,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #323232;
   color: #dedede;
@@ -3808,10 +3826,6 @@
   padding: 0.571rem 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #4c4c4c;
   color: #dedede;
@@ -5024,12 +5038,46 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5099,10 +5147,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #4b4b4b;
   color: #dedede;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 4687fbffc..03168b697 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f3f8fc;
   --blue-100:#c6dcef;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3724,10 +3746,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #323232;
   color: #dedede;
@@ -3808,10 +3826,6 @@
   padding: 0.571rem 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #4c4c4c;
   color: #dedede;
@@ -5024,12 +5038,46 @@
   box-shadow: 0 0 0 0.1rem white;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5099,10 +5147,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #4b4b4b;
   color: #dedede;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 09bf33ac7..2340fe687 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -80,6 +80,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.32);
 }
 
 .p-disabled, .p-component:disabled {
@@ -109,6 +110,31 @@
   box-shadow: none;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -479,10 +505,6 @@
   box-shadow: none;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3761,10 +3783,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.32);
-}
-
 .p-overlaypanel {
   background: #262626;
   color: rgba(255, 255, 255, 0.87);
@@ -3845,10 +3863,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #444444;
   color: rgba(255, 255, 255, 0.87);
@@ -5085,12 +5099,46 @@
   box-shadow: none;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5160,10 +5208,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-chip {
   background-color: rgba(255, 255, 255, 0.12);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index cf8ec210e..5b23219d2 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -80,6 +80,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.32);
 }
 
 .p-disabled, .p-component:disabled {
@@ -109,6 +110,31 @@
   box-shadow: none;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -479,10 +505,6 @@
   box-shadow: none;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3761,10 +3783,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.32);
-}
-
 .p-overlaypanel {
   background: #262626;
   color: rgba(255, 255, 255, 0.87);
@@ -3845,10 +3863,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #444444;
   color: rgba(255, 255, 255, 0.87);
@@ -5085,12 +5099,46 @@
   box-shadow: none;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5160,10 +5208,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-chip {
   background-color: rgba(255, 255, 255, 0.12);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index e85450166..4340c5128 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -80,6 +80,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.32);
 }
 
 .p-disabled, .p-component:disabled {
@@ -109,6 +110,31 @@
   box-shadow: none;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -479,10 +505,6 @@
   box-shadow: none;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3761,10 +3783,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.32);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
@@ -3845,10 +3863,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-tooltip .p-tooltip-text {
   background: rgba(97, 97, 97, 0.9);
   color: #ffffff;
@@ -5085,12 +5099,46 @@
   box-shadow: none;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5160,10 +5208,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-chip {
   background-color: rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.87);
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index ee22a6e5e..edc3e4f67 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -80,6 +80,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.32);
 }
 
 .p-disabled, .p-component:disabled {
@@ -109,6 +110,31 @@
   box-shadow: none;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -479,10 +505,6 @@
   box-shadow: none;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3761,10 +3783,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.32);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
@@ -3845,10 +3863,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-tooltip .p-tooltip-text {
   background: rgba(97, 97, 97, 0.9);
   color: #ffffff;
@@ -5085,12 +5099,46 @@
   box-shadow: none;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5160,10 +5208,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-chip {
   background-color: rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.87);
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 3b3709617..81841c158 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -80,6 +80,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.32);
 }
 
 .p-disabled, .p-component:disabled {
@@ -109,6 +110,31 @@
   box-shadow: none;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -479,10 +505,6 @@
   box-shadow: none;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3761,10 +3783,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.32);
-}
-
 .p-overlaypanel {
   background: #262626;
   color: rgba(255, 255, 255, 0.87);
@@ -3845,10 +3863,6 @@
   padding: 0.75rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #444444;
   color: rgba(255, 255, 255, 0.87);
@@ -5085,12 +5099,46 @@
   box-shadow: none;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5160,10 +5208,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-chip {
   background-color: rgba(255, 255, 255, 0.12);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 2a9fd26be..b4e2f63f5 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -80,6 +80,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.32);
 }
 
 .p-disabled, .p-component:disabled {
@@ -109,6 +110,31 @@
   box-shadow: none;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -479,10 +505,6 @@
   box-shadow: none;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3761,10 +3783,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.32);
-}
-
 .p-overlaypanel {
   background: #262626;
   color: rgba(255, 255, 255, 0.87);
@@ -3845,10 +3863,6 @@
   padding: 0.75rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #444444;
   color: rgba(255, 255, 255, 0.87);
@@ -5085,12 +5099,46 @@
   box-shadow: none;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5160,10 +5208,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-chip {
   background-color: rgba(255, 255, 255, 0.12);
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 00acc283c..42a985d8e 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -80,6 +80,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.32);
 }
 
 .p-disabled, .p-component:disabled {
@@ -109,6 +110,31 @@
   box-shadow: none;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -479,10 +505,6 @@
   box-shadow: none;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3761,10 +3783,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.32);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
@@ -3845,10 +3863,6 @@
   padding: 0.75rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-tooltip .p-tooltip-text {
   background: rgba(97, 97, 97, 0.9);
   color: #ffffff;
@@ -5085,12 +5099,46 @@
   box-shadow: none;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5160,10 +5208,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-chip {
   background-color: rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.87);
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 8faf991c5..8856ed4a7 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -80,6 +80,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.32);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.32);
 }
 
 .p-disabled, .p-component:disabled {
@@ -109,6 +110,31 @@
   box-shadow: none;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -479,10 +505,6 @@
   box-shadow: none;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3761,10 +3783,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.32);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
@@ -3845,10 +3863,6 @@
   padding: 0.75rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-tooltip .p-tooltip-text {
   background: rgba(97, 97, 97, 0.9);
   color: #ffffff;
@@ -5085,12 +5099,46 @@
   box-shadow: none;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5160,10 +5208,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
 .p-chip {
   background-color: rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.87);
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 61e7e9c68..7b616ddb1 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f3f8fc;
   --blue-100:#c6dcef;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0.25rem;
@@ -3712,10 +3734,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: #333333;
@@ -3796,10 +3814,6 @@
   padding: 0.571rem 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #333333;
   color: #ffffff;
@@ -5012,12 +5026,46 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5087,10 +5135,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #c8c8c8;
   color: #333333;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 105cf7f30..9d2b5cb40 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f3f8fc;
   --blue-100:#c6dcef;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0.25rem;
@@ -3724,10 +3746,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: #333333;
@@ -3808,10 +3826,6 @@
   padding: 0.571rem 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #333333;
   color: #ffffff;
@@ -5024,12 +5038,46 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5099,10 +5147,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #c8c8c8;
   color: #333333;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 3b2e1f74f..607017902 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.2rem #c2e9d8;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f3f8fc;
   --blue-100:#c6dcef;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.2rem #c2e9d8;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0.25rem;
@@ -3724,10 +3746,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: #333333;
@@ -3808,10 +3826,6 @@
   padding: 0.571rem 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #333333;
   color: #ffffff;
@@ -5024,12 +5038,46 @@
   box-shadow: 0 0 0 0.2rem #c2e9d8;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5099,10 +5147,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #c8c8c8;
   color: #333333;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index be02ff645..e1d5824bb 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f3f8fc;
   --blue-100:#c6dcef;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0.25rem;
@@ -3724,10 +3746,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: #333333;
@@ -3808,10 +3826,6 @@
   padding: 0.571rem 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #333333;
   color: #ffffff;
@@ -5024,12 +5038,46 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5099,10 +5147,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #c8c8c8;
   color: #333333;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index ba32b26f2..8a5d72b21 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.2rem #e4e9ec;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f6fbfe;
   --blue-100:#d4edfb;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.2rem #e4e9ec;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0.25rem;
@@ -3712,10 +3734,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: #666666;
@@ -3796,10 +3814,6 @@
   padding: 0.571rem 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #AFD3C8;
   color: #385048;
@@ -5012,12 +5026,46 @@
   box-shadow: 0 0 0 0.2rem #e4e9ec;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5087,10 +5135,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #dadada;
   color: #666666;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 53209f9ad..46e33f4bf 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.2rem #a6d5fa;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.2rem #a6d5fa;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3737,10 +3759,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: #495057;
@@ -3821,10 +3839,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #495057;
   color: #ffffff;
@@ -5061,12 +5075,46 @@
   box-shadow: 0 0 0 0.2rem #a6d5fa;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5136,10 +5184,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #dee2e6;
   color: #495057;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 7bf649d8e..3ff1c96bb 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.2rem #b7e0b8;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.2rem #b7e0b8;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3737,10 +3759,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: #495057;
@@ -3821,10 +3839,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #495057;
   color: #ffffff;
@@ -5061,12 +5075,46 @@
   box-shadow: 0 0 0 0.2rem #b7e0b8;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5136,10 +5184,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #dee2e6;
   color: #495057;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 48c31e7c5..df8fab9cc 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.2rem #ffe69c;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.2rem #ffe69c;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3737,10 +3759,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: #495057;
@@ -3821,10 +3839,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #495057;
   color: #ffffff;
@@ -5061,12 +5075,46 @@
   box-shadow: 0 0 0 0.2rem #ffe69c;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5136,10 +5184,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #dee2e6;
   color: #495057;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index e6e238ddc..215f98101 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 0.2rem #df9eea;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 0.2rem #df9eea;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3737,10 +3759,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #ffffff;
   color: #495057;
@@ -3821,10 +3839,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #495057;
   color: #ffffff;
@@ -5061,12 +5075,46 @@
   box-shadow: 0 0 0 0.2rem #df9eea;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5136,10 +5184,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #dee2e6;
   color: #495057;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index fffaf56e0..5dd276de9 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 1px #93cbf9;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 1px #93cbf9;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3737,10 +3759,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
@@ -3821,10 +3839,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #304562;
   color: rgba(255, 255, 255, 0.87);
@@ -5061,12 +5075,46 @@
   box-shadow: 0 0 0 1px #93cbf9;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5136,10 +5184,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #304562;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 7e3b30a9f..a42ba6ed0 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 1px #a7d8a9;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 1px #a7d8a9;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3737,10 +3759,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
@@ -3821,10 +3839,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #304562;
   color: rgba(255, 255, 255, 0.87);
@@ -5061,12 +5075,46 @@
   box-shadow: 0 0 0 1px #a7d8a9;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5136,10 +5184,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #304562;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index dca152e77..13d55d5a6 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 1px #ffe284;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 1px #ffe284;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3737,10 +3759,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
@@ -3821,10 +3839,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #304562;
   color: rgba(255, 255, 255, 0.87);
@@ -5061,12 +5075,46 @@
   box-shadow: 0 0 0 1px #ffe284;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5136,10 +5184,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #304562;
   color: rgba(255, 255, 255, 0.87);
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index bf9a858aa..abfc7aefa 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -56,6 +56,7 @@
 .p-component-overlay {
   background-color: rgba(0, 0, 0, 0.4);
   transition-duration: 0.2s;
+  --maskbg: rgba(0, 0, 0, 0.4);
 }
 
 .p-disabled, .p-component:disabled {
@@ -85,6 +86,31 @@
   box-shadow: 0 0 0 1px #cf95d9;
 }
 
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
 :root {
   --blue-50:#f4fafe;
   --blue-100:#cae6fc;
@@ -455,10 +481,6 @@
   box-shadow: 0 0 0 1px #cf95d9;
 }
 
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @media screen and (max-width: 769px) {
   .p-datepicker table th, .p-datepicker table td {
     padding: 0;
@@ -3737,10 +3759,6 @@
   margin-left: 1rem;
 }
 
-.p-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
 .p-overlaypanel {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
@@ -3821,10 +3839,6 @@
   padding: 1rem;
 }
 
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-tooltip .p-tooltip-text {
   background: #304562;
   color: rgba(255, 255, 255, 0.87);
@@ -5061,12 +5075,46 @@
   box-shadow: 0 0 0 1px #cf95d9;
 }
 
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
+.p-galleria-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
 }
 
-.p-image-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
+.p-image-mask {
+  --maskbg: rgba(0, 0, 0, 0.9);
+}
+
+.p-image-preview-indicator {
+  background-color: transparent;
+  color: #f8f9fa;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.p-image-toolbar {
+  padding: 1rem;
+}
+
+.p-image-action.p-link {
+  color: #f8f9fa;
+  background-color: transparent;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  margin-right: 0.5rem;
+}
+.p-image-action.p-link:last-child {
+  margin-right: 0;
+}
+.p-image-action.p-link:hover {
+  color: #f8f9fa;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.p-image-action.p-link i {
+  font-size: 1.5rem;
 }
 
 .p-avatar {
@@ -5136,10 +5184,6 @@
   line-height: 3rem;
 }
 
-.p-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.4);
-}
-
 .p-chip {
   background-color: #304562;
   color: rgba(255, 255, 255, 0.87);
diff --git a/src/components/blockui/BlockUI.vue b/src/components/blockui/BlockUI.vue
index 69bbda76f..5e6c60c41 100755
--- a/src/components/blockui/BlockUI.vue
+++ b/src/components/blockui/BlockUI.vue
@@ -44,25 +44,21 @@ export default {
     },
     methods: {
         block() {
+            let styleClass = 'p-blockui p-component-overlay p-component-overlay-enter';
             if (this.fullScreen) {
+                styleClass += ' p-blockui-document';
                 this.mask = document.createElement('div');
-                this.mask.setAttribute('class', 'p-blockui p-blockui-document');
+                this.mask.setAttribute('class', styleClass);
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
                 document.activeElement.blur();
             }
             else {
                 this.mask = document.createElement('div');
-                this.mask.setAttribute('class', 'p-blockui');
+                this.mask.setAttribute('class', styleClass);
                 this.$refs.container.appendChild(this.mask);
             }
 
-            if (this.mask) {
-                setTimeout(() => {
-                    DomHandler.addClass(this.mask, 'p-component-overlay');
-                }, 1);
-            }
-
             if (this.autoZIndex) {
                 ZIndexUtils.set('modal', this.mask, this.baseZIndex + this.$primevue.config.zIndex.modal);
             }
@@ -70,7 +66,7 @@ export default {
             this.$emit('block');
         },
         unblock() {
-            DomHandler.addClass(this.mask, 'p-blockui-leave');
+            DomHandler.addClass(this.mask, 'p-component-overlay-leave');
             this.mask.addEventListener('transitionend', () => {
                 this.removeMask();
             });
@@ -102,8 +98,6 @@ export default {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: transparent;
-    transition-property: background-color;
 }
 
 .p-blockui.p-component-overlay {
@@ -113,8 +107,4 @@ export default {
 .p-blockui-document.p-component-overlay {
     position: fixed;
 }
-
-.p-blockui.p-blockui-leave.p-component-overlay {
-    background-color: transparent;
-}
 </style>
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index da698324e..f15dce81c 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -1291,7 +1291,7 @@ export default {
             if (!this.mask) {
                 this.mask = document.createElement('div');
                 this.mask.style.zIndex = String(parseInt(this.overlay.style.zIndex, 10) - 1);
-                DomHandler.addMultipleClasses(this.mask, 'p-datepicker-mask p-datepicker-mask-scrollblocker');
+                DomHandler.addMultipleClasses(this.mask, 'p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay p-component-overlay-enter');
 
                 this.maskClickListener = () => {
                     this.overlayVisible = false;
@@ -1300,16 +1300,12 @@ export default {
 
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
-
-                setTimeout(() => {
-                    DomHandler.addClass(this.mask, 'p-component-overlay');
-                }, 1);
             }
         },
         disableModality() {
             if (this.mask) {
-                DomHandler.addClass(this.mask, 'p-datepicker-mask-leave');
-                this.mask.addEventListener('transitionend', () => {
+                DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+                this.mask.addEventListener('animationend', () => {
                     this.destroyMask();
                 });
             }
@@ -2332,13 +2328,4 @@ export default {
     min-width: 80vw;
     transform: translate(-50%, -50%);
 }
-
-.p-datepicker-mask {
-    background-color: transparent;
-    transition-property: background-color;
-}
-
-.p-datepicker-mask.p-datepicker-mask-leave.p-component-overlay {
-    background-color: transparent;
-}
 </style>
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index aca3976f3..4e0d5f422 100755
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -156,7 +156,7 @@ export default {
             this.bindGlobalListeners();
         },
         onBeforeLeave() {
-            DomHandler.addClass(this.mask, 'p-dialog-mask-leave');
+            DomHandler.addClass(this.mask, 'p-component-overlay-leave');
         },
         onLeave() {
 
@@ -376,7 +376,7 @@ export default {
     },
     computed: {
         maskClass() {
-            return ['p-dialog-mask', {'p-component-overlay': this.modal}, this.getPositionClass()];
+            return ['p-dialog-mask', {'p-component-overlay p-component-overlay-enter': this.modal}, this.getPositionClass()];
         },
         dialogClass() {
             return ['p-dialog p-component', {
@@ -427,8 +427,6 @@ export default {
     justify-content: center;
     align-items: center;
     pointer-events: none;
-    background-color: transparent;
-    transition-property: background-color;
 }
 
 .p-dialog-mask.p-component-overlay {
@@ -490,10 +488,6 @@ export default {
     transform: scale(0.7);
 }
 
-.p-dialog-mask.p-dialog-mask-leave {
-    background-color: transparent;
-}
-
 /* Top, Bottom, Left, Right, Top* and Bottom* */
 .p-dialog-top .p-dialog,
 .p-dialog-bottom .p-dialog,
diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
index 002f3fd80..ba30b8ca7 100755
--- a/src/components/galleria/Galleria.vue
+++ b/src/components/galleria/Galleria.vue
@@ -147,7 +147,7 @@ export default {
             DomHandler.addClass(document.body, 'p-overflow-hidden');
         },
         onBeforeLeave() {
-            DomHandler.addClass(this.mask, 'p-galleria-mask-leave');
+            DomHandler.addClass(this.mask, 'p-component-overlay-leave');
         },
         onAfterLeave(el) {
             ZIndexUtils.clear(el);
@@ -171,7 +171,7 @@ export default {
     },
     computed: {
         maskContentClass() {
-            return ['p-galleria-mask p-component-overlay', this.maskClass, {
+            return ['p-galleria-mask p-component-overlay p-component-overlay-enter', this.maskClass, {
                 'p-input-filled': this.$primevue.config.inputStyle === 'filled',
                 'p-ripple-disabled': this.$primevue.config.ripple === false
             }];
@@ -420,8 +420,6 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: transparent;
-    transition-property: background-color;
 }
 
 .p-galleria-close {
@@ -459,10 +457,6 @@ export default {
     opacity: 0;
 }
 
-.p-galleria-mask.p-galleria-mask-leave {
-    background-color: transparent;
-}
-
 /* Keyboard Support */
 .p-items-hidden .p-galleria-thumbnail-item {
     visibility: hidden;
diff --git a/src/components/image/Image.vue b/src/components/image/Image.vue
index 200b09f0d..8fede53fb 100644
--- a/src/components/image/Image.vue
+++ b/src/components/image/Image.vue
@@ -110,13 +110,12 @@ export default {
         },
         onBeforeEnter() {
             ZIndexUtils.set('modal', this.mask, this.$primevue.config.zIndex.modal);
-            DomHandler.addClass(this.mask, 'p-component-overlay');
         },
         onEnter() {
             this.$emit('show');
         },
         onBeforeLeave() {
-            DomHandler.addClass(this.mask, 'p-image-mask-leave');
+            DomHandler.addClass(this.mask, 'p-component-overlay-leave');
         },
         onLeave() {
             this.$emit('hide');
@@ -133,7 +132,7 @@ export default {
             }];
         },
         maskClass() {
-            return ['p-image-mask'];
+            return ['p-image-mask p-component-overlay p-component-overlay-enter'];
         },
         rotateClass() {
             return 'p-image-preview-rotate-' + this.rotate;
@@ -153,12 +152,6 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: transparent;
-    transition-property: background-color;
-}
-
-.p-image-mask.p-component-overlay.p-image-mask-leave {
-    background-color: transparent;
 }
 
 .p-image-preview-container {
@@ -176,9 +169,7 @@ export default {
     align-items: center;
     justify-content: center;
     opacity: 0;
-    background-color: rgba(0,0,0,.5);
     transition: opacity .3s;
-    color: #ffffff;
 }
 
 .p-image-preview-icon {
@@ -202,10 +193,9 @@ export default {
 }
 
 .p-image-action.p-link {
-    padding: 1rem;
-    color: #ffffff;
-    margin-right: .5rem;
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .p-image-preview {
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index 5523ac4c8..069924060 100755
--- a/src/components/sidebar/Sidebar.vue
+++ b/src/components/sidebar/Sidebar.vue
@@ -104,23 +104,19 @@ export default {
         enableModality() {
             if (!this.mask) {
                 this.mask = document.createElement('div');
-                this.mask.setAttribute('class', 'p-sidebar-mask');
+                this.mask.setAttribute('class', 'p-sidebar-mask p-component-overlay p-component-overlay-enter');
                 this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
                 if (this.dismissable) {
                     this.bindMaskClickListener();
                 }
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
-
-                setTimeout(() => {
-                    DomHandler.addClass(this.mask, 'p-component-overlay');
-                }, 1);
             }
         },
         disableModality() {
             if (this.mask) {
-                DomHandler.addClass(this.mask, 'p-sidebar-mask-leave');
-                this.mask.addEventListener('transitionend', () => {
+                DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+                this.mask.addEventListener('animationend', () => {
                     this.destroyModal();
                 });
             }
@@ -194,15 +190,6 @@ export default {
     justify-content: center;
 }
 
-.p-sidebar-mask {
-    background-color: transparent;
-    transition-property: background-color;
-}
-
-.p-sidebar-mask.p-sidebar-mask-leave.p-component-overlay {
-    background-color: transparent;
-}
-
 .p-sidebar-left {
     top: 0;
     left: 0;