kibi/f0ckm
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

hgf

Browse Source
This commit is contained in:
Kibi Kelburton
2026-06-04 20:42:22 +02:00
parent a868e9f94b
commit 4943a87e13
2 changed files with 57 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
public/s/css/f0ckm.css
View File

@@ -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 <html data-notif-filter="sfw|nsfw|nsfl|all">.
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;

34
public/s/js/f0ckm.js
View File

@@ -504,14 +504,19 @@ window.cancelAnimFrame = (function () {
}
}
// Reflect ALL mode on <html> immediately (controls notif-thumb blur suppression)
if (window.activeMode === 3) htmlEl.classList.add('mode-all');
// Track active mode on <html> 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();