From 065220ff29c62c37297257b1de08afa93e8f344b Mon Sep 17 00:00:00 2001 From: lenafx Date: Tue, 25 Nov 2025 21:04:20 +0100 Subject: [PATCH] fixed sidebar on emulator.html and fixed UI bugs on imageboards --- views/emulator.html | 25 +++++++++++++---- views/styles/home.css | 64 +++++++++++++++++++++++++++++++------------ 2 files changed, 66 insertions(+), 23 deletions(-) diff --git a/views/emulator.html b/views/emulator.html index d7b68ec..eb0639e 100644 --- a/views/emulator.html +++ b/views/emulator.html @@ -12,14 +12,29 @@
- +

Extension Emulator

@@ -68,7 +83,7 @@
-
+
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 {