Fixes a small issue showing few thumbnails

pedropalau · Jul 10, 2020 · 43f3d6e · 43f3d6e
1 parent bfc106e
commit 43f3d6e
Showing 1 changed file with 28 additions and 21 deletions.
diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -311,6 +311,9 @@
 
     .caption-thumbnails {
       position: absolute;
+      min-width: 100%;
+      margin-left: -4px;
+      margin-right: -4px;
 
       ul.thumbnails-list {
         position: absolute;
@@ -343,7 +346,6 @@
             display: block;
             overflow: hidden;
             background: transparent;
-            border: 4px solid transparent;
             margin: 0;
             padding: 0;
 
@@ -361,6 +363,26 @@
               border-radius: 50%;
             }
 
+            div.picture {
+              border-radius: 4px;
+              border: 4px solid transparent;
+              overflow: hidden;
+
+              img.thumbnail {
+                width: 100%;
+                height: 100%;
+                display: block;
+                position: relative;
+                z-index: 1;
+                opacity: 0.3;
+                filter: alpha(opacity=30);
+                backface-visibility: hidden;
+                object-fit: cover;
+                border-radius: 4px;
+                transition: 0.1s ease opacity;
+              }
+            }
+
             div.loading-spinner {
               position: absolute;
               z-index: 1001;
@@ -375,27 +397,12 @@
               border-left-width: 0.15em;
               transform: translate(-50%, -50%);
             }
-          }
-
-          img.thumbnail {
-            width: 100%;
-            height: 100%;
-            display: block;
-            border-width: 0;
-            position: relative;
-            z-index: 1;
-            opacity: 0.3;
-            filter: alpha(opacity=30);
-            backface-visibility: hidden;
-            object-fit: cover;
-            border-radius: 4px;
-            transition: 0.1s ease opacity;
-          }
 
-          button.thumbnail-button.active img,
-          button.thumbnail-button:hover img {
-            opacity: 1;
-            filter: alpha(opacity=100);
+            &:hover div.picture img.thumbnail,
+            &.active div.picture img.thumbnail {
+              opacity: 1;
+              filter: alpha(opacity=100);
+            }
           }
         }
       }