From 3a15d7134e989443ba3f6ae8a4b7cc1385dbd5fd Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Tue, 13 Jan 2026 19:12:31 -0500
Subject: [PATCH] image

---
 shaarli-pro/css/style.css | 49 +++++++++++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css
index 83e4484..900fdfe 100644
--- a/shaarli-pro/css/style.css
+++ b/shaarli-pro/css/style.css
@@ -878,6 +878,7 @@ input:checked+.theme-slider:before {
     padding: 3.5rem 1.25rem 1.25rem;
     transition: all 0.2s ease;
     position: relative;
+    overflow: hidden;
 }
 
 /* Link card hover states - same for both public and private */
@@ -945,13 +946,25 @@ input:checked+.theme-slider:before {
 
 /* Link thumbnail */
 .link-thumbnail {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
-    height: 160px;
-    background: var(--border-light);
-    border-radius: 0.5rem;
-    margin-bottom: 1rem;
-    overflow: hidden;
+    height: 60%;
+    margin: 0;
+    background: transparent;
+    border-radius: 0;
+    border: none;
+    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+    z-index: 0;
+    pointer-events: none;
+    filter: brightness(0.6);
+}
+
+.link-content {
     position: relative;
+    z-index: 2;
 }
 
 .link-thumbnail img {
@@ -1162,6 +1175,8 @@ input:checked+.theme-slider:before {
 
 /* ===== List View Specific ===== */
 .view-list .link-outer {
+    position: relative;
+    overflow: hidden;
     display: flex;
     align-items: flex-start;
     gap: 1rem;
@@ -1192,21 +1207,31 @@ input:checked+.theme-slider:before {
     transform: none;
     background: var(--bg-card);
     border: 1px solid var(--border);
+    z-index: 10;
 }
 
 .view-list .link-thumbnail {
-    width: 100px;
-    height: 75px;
-    flex-shrink: 0;
-    margin-bottom: 0;
-    border-radius: 0.5rem;
-    overflow: hidden;
-    border: 1px solid var(--border-light);
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 300px;
+    height: 100%;
+    margin: 0;
+    border-radius: 0;
+    border: none;
+    background: transparent;
+    mask-image: linear-gradient(to right, black 20%, transparent 100%);
+    -webkit-mask-image: linear-gradient(to right, black 20%, transparent 100%);
+    z-index: 0;
+    pointer-events: none;
 }
 
 .view-list .link-content {
     flex: 1;
     min-width: 0;
+    position: relative;
+    z-index: 2;
 }
 
 .view-list .link-header {