feat: better css, wip hide vertical scrollbar in fullscreen mode

Author: d-oit

dist/slideshow-gallery.scss

@@ -65,16 +65,13 @@
 /* Caption Container - Now between image and thumbnails */
 .slideshow-caption-container {
     width: 100%;
-    //background: linear-gradient(to bottom, #222222, #6f6f6f); /* Gradient: Black to Dark Gray */
     background: #222;
-    color: #ddd; /* Light gray text */
+    color: #ddd;
     text-align: center;
     padding: 10px;
     font: 14px / 1.5 sans-serif;
-    //opacity: 0.8; /* Adjust opacity */
 }
 
-
 .slideshow-caption-container .lightbox-title {
   color: #fff;
 }
@@ -88,6 +85,7 @@
   overflow-x: auto;
   overflow-y: hidden;
   background-color: #222;
+  padding: 10px 0;
 }
 
 .slideshow-thumbnail-column {
@@ -98,7 +96,7 @@
 
 .slideshow-thumbnail-column img {
   width: 100%;
-  height: auto;
+  height: 100px;
   object-fit: cover;
   opacity: 0.6;
   transition: opacity 0.3s;
@@ -108,19 +106,21 @@
 .slideshow-thumbnail-column img.active,
 .slideshow-thumbnail-column img:hover {
   opacity: 1;
+  outline: 2px solid white;
 }
 
 /* Fullscreen Mode */
 .slideshow-gallery.fullscreen {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  // width: 100vw;
+  height: 100vh;
   z-index: 9999;
   background-color: black;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .slideshow-gallery.fullscreen .lightbox-current-index {
@@ -131,14 +131,18 @@
 
 .slideshow-gallery.fullscreen .lightbox-viewport {
   flex-grow: 1;
-  min-height: 0; /* Allow shrinking */
+  min-height: 0;
 }
 
 .slideshow-gallery.fullscreen .slideshow-lightbox-container {
   flex-grow: 1;
   overflow: hidden;
 }
 
+.slideshow-gallery.fullscreen .slideshow-thumbnail-row {
+  padding: 15px 0;
+}
+
 /* Navigation Buttons */
 .slideshow-prev-button, .slideshow-next-button, .slideshow-fullscreen-button {
   position: absolute;
@@ -183,4 +187,4 @@ span.title-caption.additional-lines {
   font-weight: normal;
   font-size: 0.8em;
   opacity: 0.9;
-}
+}