From 2207e6c48f4d3ea2e1209f3be535538be609aa71 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 20 Dec 2021 07:40:23 +0100
Subject: More compact gallery cards
---
assets/css/components/_card.scss | 40 +++++++++++++++++-----------------------
1 file changed, 17 insertions(+), 23 deletions(-)
(limited to 'assets/css/components')
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);
--
cgit v1.2.3-70-g09d2