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 NOTIFICATION THUMBNAIL BLUR
Applies the same blur treatment to .notif-thumb Blur is driven by the current mode filter set
when the corresponding blur-active class is 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, /* SFW mode: blur NSFW and NSFL thumbnails */
.blur-sfw-active .notif-thumb[data-mode="sfw"] img, html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfw"] img,
.blur-untagged-active .notif-thumb[data-mode="untagged"] img { html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfl"] img {
filter: blur(8px) !important; filter: blur(8px) !important;
transform: scale(1.08) !important; transform: scale(1.08) !important;
transition: filter 0.2s ease, transform 0.2s ease !important; transition: filter 0.2s ease, transform 0.2s ease !important;
} }
/* Reveal on hover — only when hovering directly on the thumb */ /* NSFW mode: blur NSFL thumbnails */
.notif-thumb[data-mode]:hover img { html[data-notif-filter="nsfw"] .notif-thumb[data-mode="nsfl"] img {
filter: none !important; filter: blur(8px) !important;
transform: scale(1.1) !important; transform: scale(1.08) !important;
transition: filter 0.2s ease, transform 0.2s ease !important;
} }
/* Overlay label */ /* NSFL mode: blur SFW and NSFW thumbnails */
.blur-nsfw-active .notif-thumb[data-mode="nsfw"], html[data-notif-filter="nsfl"] .notif-thumb[data-mode="sfw"] img,
.blur-nsfl-active .notif-thumb[data-mode="nsfl"], html[data-notif-filter="nsfl"] .notif-thumb[data-mode="nsfw"] img {
.blur-sfw-active .notif-thumb[data-mode="sfw"], filter: blur(8px) !important;
.blur-untagged-active .notif-thumb[data-mode="untagged"] { 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; position: relative !important;
} }
.blur-nsfw-active .notif-thumb[data-mode="nsfw"]::after, html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfw"]::after,
.blur-nsfl-active .notif-thumb[data-mode="nsfl"]::after, html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfl"]::after,
.blur-sfw-active .notif-thumb[data-mode="sfw"]::after, html[data-notif-filter="nsfw"] .notif-thumb[data-mode="nsfl"]::after,
.blur-untagged-active .notif-thumb[data-mode="untagged"]::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; content: attr(data-mode) !important;
text-transform: uppercase !important; text-transform: uppercase !important;
position: absolute !important; position: absolute !important;
@@ -15730,18 +15742,21 @@ body.scroller-active #gchat-reopen-bubble {
letter-spacing: 1.5px !important; letter-spacing: 1.5px !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
background: rgba(10, 10, 12, 0.55) !important; background: rgba(10, 10, 12, 0.55) !important;
color: #ffffff !important;
pointer-events: none !important; pointer-events: none !important;
opacity: 1 !important; opacity: 1 !important;
transition: opacity 0.2s ease !important; transition: opacity 0.2s ease !important;
z-index: 2 !important; z-index: 2 !important;
} }
.blur-nsfw-active .notif-thumb[data-mode="nsfw"]::after { color: #ffffff !important; } html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfl"]::after,
.blur-nsfl-active .notif-thumb[data-mode="nsfl"]::after { color: #ff3b30 !important; } html[data-notif-filter="nsfw"] .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; }
/* 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 { .notif-thumb[data-mode]:hover::after {
opacity: 0 !important; opacity: 0 !important;
} }
@@ -15755,7 +15770,7 @@ body.scroller-active #gchat-reopen-bubble {
pointer-events: none !important; 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 { html.mode-all .notif-thumb[data-mode] img {
filter: none !important; filter: none !important;
transform: 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) // Track active mode on <html> for notification thumbnail blur.
if (window.activeMode === 3) htmlEl.classList.add('mode-all'); // 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) => { document.addEventListener('f0ck:modeChanged', (e) => {
if (e.detail?.mode === 3) { _updateNotifFilterClass(e.detail?.mode ?? 3);
htmlEl.classList.add('mode-all');
} else {
htmlEl.classList.remove('mode-all');
}
}); });
// ---- Multi-select Rating Toggles ---- // ---- Multi-select Rating Toggles ----
@@ -6579,19 +6584,14 @@ class NotificationSystem {
const handleNotificationClick = (e) => { const handleNotificationClick = (e) => {
// Blur-reveal intercept: if the tap/click landed on (or inside) a blurred // 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. // 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]'); const tappedThumb = e.target.closest('.notif-thumb[data-mode]');
if (tappedThumb && !tappedThumb.classList.contains('revealed') && window.activeMode !== 3) { if (tappedThumb && !tappedThumb.classList.contains('revealed') && window.activeMode !== 3) {
const mode = tappedThumb.dataset.mode; const itemMode = 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 isBlurred = const isBlurred =
(mode === 'nsfw' && blurNsfw) || (window.activeMode === 0 && (itemMode === 'nsfw' || itemMode === 'nsfl')) ||
(mode === 'nsfl' && blurNsfl) || (window.activeMode === 1 && itemMode === 'nsfl') ||
(mode === 'sfw' && blurSfw) || (window.activeMode === 4 && (itemMode === 'sfw' || itemMode === 'nsfw'));
(mode === 'untagged' && blurUntagged);
if (isBlurred) { if (isBlurred) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();