sidebar blurring

This commit is contained in:
2026-05-23 18:22:46 +02:00
parent c480b82db6
commit dbe0859750
5 changed files with 73 additions and 17 deletions

View File

@@ -14410,10 +14410,10 @@ body.scroller-active #gchat-reopen-bubble {
/* Filter badge style on navbar */
.filter-badge {
position: absolute;
bottom: -13px;
font-size: 8px;
bottom: -14px;
font-size: 9px;
font-weight: 800;
padding: 1px 4px;
padding: 2px 4px;
line-height: 1;
text-transform: uppercase;
color: #fff !important;
@@ -14705,4 +14705,10 @@ body.scroller-active #gchat-reopen-bubble {
padding: 0 !important;
font-size: 11px !important;
line-height: 1 !important;
}
/* Sidebar activity thumbnails blur support (SFW/Untagged only; NSFW/NSFL use pre-blurred static images directly) */
.blur-sfw-active .sidebar-thumb-link[data-mode="sfw"] img,
.blur-untagged-active .sidebar-thumb-link[data-mode="untagged"] img {
filter: blur(8px) contrast(0.85) brightness(0.85);
}

View File

@@ -397,13 +397,30 @@
let itemPreview = '';
if (c.item_id) {
let mediaHtml = '';
const rClass = c.item_rating_class || 'untagged';
const blurNsfw = localStorage.getItem('blurNsfw') === 'true';
const blurNsfl = localStorage.getItem('blurNsfl') === 'true';
const blurSfw = localStorage.getItem('blurSfw') === 'true';
const blurUntagged = localStorage.getItem('blurUntagged') === 'true';
let isBlurred = false;
if (rClass === 'nsfw' && blurNsfw) isBlurred = true;
else if (rClass === 'nsfl' && blurNsfl) isBlurred = true;
else if (rClass === 'sfw' && blurSfw) isBlurred = true;
else if (rClass === 'untagged' && blurUntagged) isBlurred = true;
let thumbUrl = `/t/${c.item_id}.webp`;
if (isBlurred && (rClass === 'nsfw' || rClass === 'nsfl')) {
thumbUrl = `/t/${c.item_id}_blur.webp`;
}
if (window.applyThumbCacheBust) thumbUrl = window.applyThumbCacheBust(thumbUrl);
mediaHtml = `<img src="${thumbUrl}" style="width: 32px; height: 32px; object-fit: cover; border-radius: 2px;" loading="lazy" onerror="this.style.display='none'" />`;
itemPreview = `
<div class="item-preview">
<a href="/${c.item_id}">${mediaHtml}</a>
<a href="/${c.item_id}" class="sidebar-thumb-link" data-mode="${rClass}">${mediaHtml}</a>
<a href="/${c.item_id}#c${c.id}" style="font-size: 0.8em; color: var(--accent); text-decoration: none;">${(window.f0ckI18n && window.f0ckI18n.sidebar_view) || 'View'} &raquo;</a>
</div>`;
}