More compact gallery cards

1 files changed, 17 insertions, 23 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 5d36e7e..7fa54e5 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -73,15 +73,17 @@
                     color: prop(--colors --hover --fg);
                 }
 
+                @include element('row') {
+                    @include modifier('hidden') {
+                        opacity: 1;
+                    }
+                }
+
                 @include element('block') {
                     @include modifier('indicator') {
                         color: prop(--colors --hover --fg);
                     }
                 }
-
-                /*@include element('row') {
-                    border-top-color: transparent;
-                }*/
             }
         }
 
@@ -111,22 +113,28 @@
             align-items: center;
             padding:     prop(--dims --pad-y) prop(--dims --pad-x);
             gap:         prop(--dims --pad-x);
-            //transition:  border-top-color .2s;
 
             @include modifier('flush') {
                 padding: 0;
             }
 
-            /*@include next-twin-element {
-                border-top: 1px solid prop(--colors --border);
-            }*/
+            @include modifier('hidden') {
+                position:         absolute;
+                z-index:          10;
+                right:            0;
+                bottom:           0;
+                left:             0;
+                transition:       opacity .2s;
+                opacity:          0;
+                background-color: prop(--colors --hover --bg);
+            }
         }
 
         @include element('thumbnail') {
             position:    relative;
             width:       100%;
             height:      2em;
-            padding-top: 40%;
+            padding-top: 46%;
         }
 
         @include element('thumbnail-img') {
@@ -149,20 +157,6 @@
                 width:       100%;
             }
 
-            /*@include modifier('separator') {
-                align-self:     stretch;
-                padding-top:    0;
-                padding-bottom: 0;
-
-                &::before {
-                    content:          '';
-                    display:          block;
-                    width:            1px;
-                    height:           100%;
-                    background-color: prop(--colors --border);
-                }
-            }*/
-
             @include modifier('indicator') {
                 transition: color .2s;
                 color:      prop(--colors --unread);