danielkrause/BSN-Chatsystem
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects Releases Wiki Activity

hover: rest der seite leicht unscharf (blur 1.8px) via :has()-selector

Browse Source
This commit is contained in:
Hermes Agent
2026-06-17 23:23:26 +02:00
parent 5487012605
commit d0d6454f2f
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+6 -1
View File
@@ -1901,8 +1901,13 @@ def public_frontend():
.card-link:hover .story-card { transform:scale(1.03); box-shadow:0 18px 50px rgba(0,0,0,0.35),0 5px 20px rgba(0,0,0,0.18); } .card-link:hover .story-card { transform:scale(1.03); box-shadow:0 18px 50px rgba(0,0,0,0.35),0 5px 20px rgba(0,0,0,0.18); }
/* Card — masonry tiles, compact */ /* Card — masonry tiles, compact */
.story-card { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,0.10),0 1px 4px rgba(0,0,0,0.05); transition:box-shadow 0.35s ease,transform 0.35s ease; display:inline-block; width:100%; margin-bottom:1.2rem; break-inside:avoid; } .story-card { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,0.10),0 1px 4px rgba(0,0,0,0.05); transition:box-shadow 0.35s ease,transform 0.35s ease,filter 0.35s ease; display:inline-block; width:100%; margin-bottom:1.2rem; break-inside:avoid; }
.story-card:hover { transform:scale(1.03); box-shadow:0 18px 50px rgba(0,0,0,0.35),0 5px 20px rgba(0,0,0,0.18); } .story-card:hover { transform:scale(1.03); box-shadow:0 18px 50px rgba(0,0,0,0.35),0 5px 20px rgba(0,0,0,0.18); }
/* Blur the rest when hovering a card */
.main-grid:has(.story-card:hover) .story-card:not(:hover) { filter:blur(1.8px); }
body:has(.story-card:hover) .site-header,
body:has(.story-card:hover) .site-footer { filter:blur(1.8px); transition:filter 0.35s ease; }
a.card-link .story-card { margin-bottom:0; } a.card-link .story-card { margin-bottom:0; }
.story-card img { width:100%; height:100%; object-fit:cover; display:block; } .story-card img { width:100%; height:100%; object-fit:cover; display:block; }
.story-card video { width:100%; height:auto; max-height:600px; object-fit:contain; display:block; background:#000; } .story-card video { width:100%; height:auto; max-height:600px; object-fit:contain; display:block; background:#000; }