From 4943a87e13fc924ac35e77a8182b7affb09d24b2 Mon Sep 17 00:00:00 2001 From: Kibi Kelburton Date: Thu, 4 Jun 2026 20:42:22 +0200 Subject: [PATCH] hgf --- public/s/css/f0ckm.css | 65 ++++++++++++++++++++++++++---------------- public/s/js/f0ckm.js | 34 +++++++++++----------- 2 files changed, 57 insertions(+), 42 deletions(-) diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index c480034..61d7795 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -15688,36 +15688,48 @@ body.scroller-active #gchat-reopen-bubble { /* ============================================= NOTIFICATION THUMBNAIL BLUR - Applies the same blur treatment to .notif-thumb - when the corresponding blur-active class is set. + Blur is driven by the current mode filter set + on . + No extra settings required. ============================================= */ -.blur-nsfw-active .notif-thumb[data-mode="nsfw"] img, -.blur-nsfl-active .notif-thumb[data-mode="nsfl"] img, -.blur-sfw-active .notif-thumb[data-mode="sfw"] img, -.blur-untagged-active .notif-thumb[data-mode="untagged"] img { + +/* SFW mode: blur NSFW and NSFL thumbnails */ +html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfw"] img, +html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfl"] img { filter: blur(8px) !important; transform: scale(1.08) !important; transition: filter 0.2s ease, transform 0.2s ease !important; } -/* Reveal on hover — only when hovering directly on the thumb */ -.notif-thumb[data-mode]:hover img { - filter: none !important; - transform: scale(1.1) !important; +/* NSFW mode: blur NSFL thumbnails */ +html[data-notif-filter="nsfw"] .notif-thumb[data-mode="nsfl"] img { + filter: blur(8px) !important; + transform: scale(1.08) !important; + transition: filter 0.2s ease, transform 0.2s ease !important; } -/* Overlay label */ -.blur-nsfw-active .notif-thumb[data-mode="nsfw"], -.blur-nsfl-active .notif-thumb[data-mode="nsfl"], -.blur-sfw-active .notif-thumb[data-mode="sfw"], -.blur-untagged-active .notif-thumb[data-mode="untagged"] { +/* NSFL mode: blur SFW and NSFW thumbnails */ +html[data-notif-filter="nsfl"] .notif-thumb[data-mode="sfw"] img, +html[data-notif-filter="nsfl"] .notif-thumb[data-mode="nsfw"] img { + filter: blur(8px) !important; + transform: scale(1.08) !important; + transition: filter 0.2s ease, transform 0.2s ease !important; +} + +/* Overlay label — SFW mode */ +html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfw"], +html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfl"], +html[data-notif-filter="nsfw"] .notif-thumb[data-mode="nsfl"], +html[data-notif-filter="nsfl"] .notif-thumb[data-mode="sfw"], +html[data-notif-filter="nsfl"] .notif-thumb[data-mode="nsfw"] { position: relative !important; } -.blur-nsfw-active .notif-thumb[data-mode="nsfw"]::after, -.blur-nsfl-active .notif-thumb[data-mode="nsfl"]::after, -.blur-sfw-active .notif-thumb[data-mode="sfw"]::after, -.blur-untagged-active .notif-thumb[data-mode="untagged"]::after { +html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfw"]::after, +html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfl"]::after, +html[data-notif-filter="nsfw"] .notif-thumb[data-mode="nsfl"]::after, +html[data-notif-filter="nsfl"] .notif-thumb[data-mode="sfw"]::after, +html[data-notif-filter="nsfl"] .notif-thumb[data-mode="nsfw"]::after { content: attr(data-mode) !important; text-transform: uppercase !important; position: absolute !important; @@ -15730,18 +15742,21 @@ body.scroller-active #gchat-reopen-bubble { letter-spacing: 1.5px !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important; background: rgba(10, 10, 12, 0.55) !important; + color: #ffffff !important; pointer-events: none !important; opacity: 1 !important; transition: opacity 0.2s ease !important; z-index: 2 !important; } -.blur-nsfw-active .notif-thumb[data-mode="nsfw"]::after { color: #ffffff !important; } -.blur-nsfl-active .notif-thumb[data-mode="nsfl"]::after { color: #ff3b30 !important; } -.blur-sfw-active .notif-thumb[data-mode="sfw"]::after { color: #30d158 !important; } -.blur-untagged-active .notif-thumb[data-mode="untagged"]::after { color: #ff9f0a !important; } +html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfl"]::after, +html[data-notif-filter="nsfw"] .notif-thumb[data-mode="nsfl"]::after { color: #ff3b30 !important; } -/* Hide overlay on hover — only when hovering directly on the thumb */ +/* Reveal on hover — only when hovering directly on the thumb */ +.notif-thumb[data-mode]:hover img { + filter: none !important; + transform: scale(1.1) !important; +} .notif-thumb[data-mode]:hover::after { opacity: 0 !important; } @@ -15755,7 +15770,7 @@ body.scroller-active #gchat-reopen-bubble { pointer-events: none !important; } -/* ALL mode: suppress all notification thumbnail blur immediately */ +/* ALL mode: no blur on notification thumbnails */ html.mode-all .notif-thumb[data-mode] img { filter: none !important; transform: none !important; diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js index 794b42c..afce3e8 100644 --- a/public/s/js/f0ckm.js +++ b/public/s/js/f0ckm.js @@ -504,14 +504,19 @@ window.cancelAnimFrame = (function () { } } - // Reflect ALL mode on immediately (controls notif-thumb blur suppression) - if (window.activeMode === 3) htmlEl.classList.add('mode-all'); + // Track active mode on for notification thumbnail blur. + // data-notif-filter is set to the current mode string so CSS can blur + // thumbnails whose rating doesn't match the active filter. + const _updateNotifFilterClass = (mode) => { + const modeNames = { 0: 'sfw', 1: 'nsfw', 2: 'untagged', 3: 'all', 4: 'nsfl' }; + htmlEl.setAttribute('data-notif-filter', modeNames[mode] || 'all'); + // Keep mode-all class in sync (used by existing CSS override) + if (mode === 3) htmlEl.classList.add('mode-all'); + else htmlEl.classList.remove('mode-all'); + }; + _updateNotifFilterClass(window.activeMode ?? 3); document.addEventListener('f0ck:modeChanged', (e) => { - if (e.detail?.mode === 3) { - htmlEl.classList.add('mode-all'); - } else { - htmlEl.classList.remove('mode-all'); - } + _updateNotifFilterClass(e.detail?.mode ?? 3); }); // ---- Multi-select Rating Toggles ---- @@ -6579,19 +6584,14 @@ class NotificationSystem { const handleNotificationClick = (e) => { // Blur-reveal intercept: if the tap/click landed on (or inside) a blurred // notif-thumb that hasn't been revealed yet, reveal it and stop navigation. - // Skip entirely in ALL mode — nothing is blurred. + // Blur is mode-based: SFW mode blurs NSFW/NSFL, NSFW mode blurs NSFL, ALL = no blur. const tappedThumb = e.target.closest('.notif-thumb[data-mode]'); if (tappedThumb && !tappedThumb.classList.contains('revealed') && window.activeMode !== 3) { - const mode = tappedThumb.dataset.mode; - const blurNsfw = localStorage.getItem('blurNsfw') === 'true'; - const blurNsfl = localStorage.getItem('blurNsfl') === 'true'; - const blurSfw = localStorage.getItem('blurSfw') === 'true'; - const blurUntagged = localStorage.getItem('blurUntagged') === 'true'; + const itemMode = tappedThumb.dataset.mode; const isBlurred = - (mode === 'nsfw' && blurNsfw) || - (mode === 'nsfl' && blurNsfl) || - (mode === 'sfw' && blurSfw) || - (mode === 'untagged' && blurUntagged); + (window.activeMode === 0 && (itemMode === 'nsfw' || itemMode === 'nsfl')) || + (window.activeMode === 1 && itemMode === 'nsfl') || + (window.activeMode === 4 && (itemMode === 'sfw' || itemMode === 'nsfw')); if (isBlurred) { e.preventDefault(); e.stopPropagation();