diff --git a/views/styles/home.css b/views/styles/home.css
index d9e092e..4076668 100644
--- a/views/styles/home.css
+++ b/views/styles/home.css
@@ -306,7 +306,6 @@ a:active {
border-radius: var(--radius-md);
overflow: hidden;
position: relative;
- background: var(--bg-surface);
break-inside: avoid;
transition: transform 0.2s;
cursor: zoom-in;
@@ -333,21 +332,38 @@ a:active {
min-height: unset;
}
+.image-entry::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity 0.25s ease;
+ z-index: 1;
+ border-radius: var(--radius-md);
+}
+
.image-buttons {
position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- padding: 2rem 1rem 1rem 1rem;
- background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
+ bottom: 0.75rem;
+ right: 0.75rem;
+ left: auto;
display: flex;
- justify-content: flex-end;
gap: 0.5rem;
+ z-index: 2;
opacity: 0;
- transition: 0.2s;
- top: auto;
- right: auto;
- flex-direction: row;
+ transition: opacity 0.25s ease;
+ pointer-events: none;
+}
+
+.image-buttons button {
+ pointer-events: all;
+}
+
+.image-entry:hover::before,
+.image-entry:hover .image-buttons {
+ opacity: 1;
}
.image-entry:hover .image-buttons {
@@ -720,7 +736,7 @@ input[type="radio"] {
.gallery-masonry {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
- gap: 0.75rem;
+ gap: 0.85rem;
}
.image-entry:not([data-type="book"]):hover {
@@ -728,18 +744,30 @@ input[type="radio"] {
}
.image-buttons {
- opacity: 0.8;
- padding: 1.5rem 0.75rem 0.75rem 0.75rem;
+ opacity: 1 !important;
+ bottom: 8%;
+ right: 10px;
+ left: 10px;
+ justify-content: flex-end;
+ gap: 10px;
+ pointer-events: all;
}
.image-buttons button {
- width: 36px;
- height: 36px;
+ width: 44px;
+ height: 44px;
+ background: rgba(0, 0, 0, 0.7);
+ border-width: 2px;
}
.image-buttons button svg {
- width: 18px;
- height: 18px;
+ width: 20px;
+ height: 20px;
+ }
+
+ .image-buttons button:active {
+ transform: scale(0.95);
+ background: var(--accent);
}
#source-list {