updated files preview ui

ui/src/scss/_base.scss

@@ -485,7 +485,7 @@ a,
 }
 
 .thumb {
-    --thumbSize: 44px;
+    --thumbSize: 40px;
 
     flex-shrink: 0;
     position: relative;
@@ -498,7 +498,7 @@ a,
     background: var(--baseAlt2Color);
     border-radius: var(--baseRadius);
     color: var(--txtPrimaryColor);
-    font-size: 1.2rem;
+    font-size: 1.16rem;
     @include shadowize();
     i {
         font-size: inherit;
@@ -511,7 +511,7 @@ a,
     }
     &.thumb-sm {
         --thumbSize: 32px;
-        font-size: 0.85rem;
+        font-size: 0.92rem;
     }
     &.thumb-lg {
         --thumbSize: 60px;
@@ -528,6 +528,13 @@ a,
         box-shadow: 0px 0px 0px 2px var(--primaryColor);
     }
 }
+a.thumb:not(.thumb-active) {
+    transition: box-shadow var(--baseAnimationSpeed);
+    &:hover,
+    &:focus {
+        @include shadowize(0px 2px 4px 1px var(--shadowColor));
+    }
+}
 
 .section-title {
     display: flex;

ui/src/scss/_overlay_panel.scss

@@ -238,28 +238,41 @@
             align-items: center;
             justify-content: center;
         }
-    }
-    &.image-preview {
-        width: auto;
-        min-width: 300px;
-        min-height: 250px;
-        max-width: 70%;
-        max-height: 90%;
+
+        // preview elements
         img {
             max-width: 100%;
             border-top-left-radius: var(--baseRadius);
             border-top-right-radius: var(--baseRadius);
         }
-    }
-    &.pdf-preview {
-        width: 70%;
-        height: 90%;
         object {
-            position:absolute;
-            left:0;
-            top:0;
-            width:100%;
-            height:100%;
+            position: absolute;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        // preview variants
+        &.preview-image {
+            width: auto;
+            min-width: 320px;
+            min-height: 300px;
+            max-width: 75%;
+            max-height: 90%;
+        }
+
+        &.preview-document,
+        &.preview-video {
+            width: 75%;
+            height: 90%;
+        }
+        &.preview-audio {
+            min-width: 320px;
+            min-height: 300px;
+            max-width: 90%;
+            max-height: 90%;
         }
     }