From 90791333f78f8fb1820cab081dbdb6ae240fe41d Mon Sep 17 00:00:00 2001 From: Kibi Kelburton Date: Fri, 11 Sep 2026 16:44:11 +0200 Subject: [PATCH] fdsfasdfasdfasd --- public/s/css/f0ckm.css | 72 +++++++++++++++++++++++++++------- public/s/js/f0ckm.js | 88 ++++++++++++++++++++++++++++-------------- 2 files changed, 119 insertions(+), 41 deletions(-) diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index 0ff5d33..8a7eeb7 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -2550,7 +2550,6 @@ html[theme='95'] .item-main-content .metadata { z-index: 900 !important; /* below navbar dropdowns (1000+) but above page content */ transition: right 0.3s ease-in-out, visibility 0.3s !important; - box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5) !important; overflow: visible !important; /* iOS Safari: allow vertical scroll but let JS handle horizontal swipe-to-close */ touch-action: pan-y; @@ -5716,32 +5715,61 @@ body.layout-modern.sidebar-right-hidden .pagination-container-fluid { } } +.content, +._204863, +.item_title { + animation: contentSlideIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; + will-change: transform, opacity; +} + .content { display: grid; justify-content: space-around; grid-template-columns: 0fr 1fr 0fr; position: relative; max-width: 100%; - animation: contentSlideIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; +} + +.content.slide-next, +._204863.slide-next, +.item_title.slide-next, +#onara-modal .content.slide-next, +#onara-modal ._204863.slide-next, +#onara-modal .item_title.slide-next { + animation: contentSlideInRight 0.45s cubic-bezier(0.16, 1, 0.3, 1) both !important; will-change: transform, opacity; } -.content.slide-next { - animation: contentSlideInRight 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; +.content.slide-prev, +._204863.slide-prev, +.item_title.slide-prev, +#onara-modal .content.slide-prev, +#onara-modal ._204863.slide-prev, +#onara-modal .item_title.slide-prev { + animation: contentSlideInLeft 0.45s cubic-bezier(0.16, 1, 0.3, 1) both !important; + will-change: transform, opacity; } -.content.slide-prev { - animation: contentSlideInLeft 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; -} - -.content.slide-out-left { +.content.slide-out-left, +._204863.slide-out-left, +.item_title.slide-out-left, +#onara-modal .content.slide-out-left, +#onara-modal ._204863.slide-out-left, +#onara-modal .item_title.slide-out-left { animation: contentSlideOutLeft 0.22s cubic-bezier(0.3, 0, 0.8, 1) forwards !important; pointer-events: none; + will-change: transform, opacity; } -.content.slide-out-right { +.content.slide-out-right, +._204863.slide-out-right, +.item_title.slide-out-right, +#onara-modal .content.slide-out-right, +#onara-modal ._204863.slide-out-right, +#onara-modal .item_title.slide-out-right { animation: contentSlideOutRight 0.22s cubic-bezier(0.3, 0, 0.8, 1) forwards !important; pointer-events: none; + will-change: transform, opacity; } @keyframes contentSlideIn { @@ -7743,7 +7771,7 @@ input { div#flash { position: fixed; bottom: -28px; - z-index: 999; + z-index: 100200 !important; left: 0; width: 100%; text-align: center; @@ -8963,7 +8991,7 @@ div.posts>a.thumb > p { img#f0ck-image, div.imageDoor, video { - animation: 0.4s ease-out 0s 1 fadeInFX; + animation: 0.35s ease-out 0s 1 both fadeInFX; } .settings { @@ -9708,7 +9736,7 @@ input#s_avatar { transform: translateX(-50%); width: 90%; max-width: 600px; - z-index: 10001; + z-index: 100200 !important; display: flex; flex-direction: column; gap: 10px; @@ -19000,6 +19028,13 @@ body.layout-modern #onara-modal .item-layout-container .item-main-content { margin-right: auto !important; } +#onara-modal .content:not(.slide-next):not(.slide-prev):not(.slide-out-left):not(.slide-out-right), +#onara-modal ._204863:not(.slide-next):not(.slide-prev):not(.slide-out-left):not(.slide-out-right), +#onara-modal .item_title:not(.slide-next):not(.slide-prev):not(.slide-out-left):not(.slide-out-right) { + animation: contentSlideIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both !important; + will-change: transform, opacity; +} + #onara-modal .item-main-content .metadata { width: 100% !important; max-width: 600px !important; @@ -19063,6 +19098,17 @@ body.onara-modal-open #gchat-img-modal { z-index: 100100 !important; } +/* Toast and flash notifications must always float in front of Onara modal and all overlays */ +#f0ck-flash-container, +#flash-container, +div#flash, +#share-toast, +.emoji-fav-toast, +.flash-message, +.toast { + z-index: 100200 !important; +} + #onara-modal:fullscreen { overflow: hidden !important; background: #000 !important; diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js index 6795b8a..01881ad 100644 --- a/public/s/js/f0ckm.js +++ b/public/s/js/f0ckm.js @@ -362,12 +362,19 @@ window.cancelAnimFrame = (function () { window.flashMessage = (text, duration = 2000, type = 'info') => { // Ensure the stacking container exists + const fsEl = document.fullscreenElement; + const targetParent = fsEl || document.body; let container = document.getElementById('f0ck-flash-container'); if (!container) { container = document.createElement('div'); container.id = 'f0ck-flash-container'; - container.style.cssText = 'position:fixed;bottom:20px;left:20px;z-index:9999;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;'; - document.body.appendChild(container); + container.style.cssText = 'position:fixed;bottom:20px;left:20px;z-index:100200;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;'; + targetParent.appendChild(container); + } else { + container.style.zIndex = '100200'; + if (container.parentElement !== targetParent) { + targetParent.appendChild(container); + } } const flash = document.createElement('div'); @@ -4060,11 +4067,11 @@ window.cancelAnimFrame = (function () { } else { _container.insertAdjacentHTML('beforeend', _html); if (options.direction) { - const _newContent = _container.querySelector('.content'); - if (_newContent) { - _newContent.classList.remove('slide-next', 'slide-prev'); - _newContent.classList.add(options.direction === 'next' ? 'slide-next' : 'slide-prev'); - } + const _newEls = _container.querySelectorAll('.content, ._204863, .item_title'); + _newEls.forEach(el => { + el.classList.remove('slide-next', 'slide-prev', 'slide-out-left', 'slide-out-right'); + el.classList.add(options.direction === 'next' ? 'slide-next' : 'slide-prev'); + }); } } @@ -4274,11 +4281,11 @@ window.cancelAnimFrame = (function () { } else { container.insertAdjacentHTML('beforeend', html); if (options.direction) { - const newContent = container.querySelector('.content'); - if (newContent) { - newContent.classList.remove('slide-next', 'slide-prev'); - newContent.classList.add(options.direction === 'next' ? 'slide-next' : 'slide-prev'); - } + const newEls = container.querySelectorAll('.content, ._204863, .item_title'); + newEls.forEach(el => { + el.classList.remove('slide-next', 'slide-prev', 'slide-out-left', 'slide-out-right'); + el.classList.add(options.direction === 'next' ? 'slide-next' : 'slide-prev'); + }); } // Note: Prefetching video src immediately after DOM injection has been removed @@ -4616,11 +4623,11 @@ window.cancelAnimFrame = (function () { const direction = isNext ? 'next' : (isPrev ? 'prev' : null); if (direction) { - const curContent = document.querySelector('.content'); - if (curContent) { - curContent.classList.remove('slide-out-left', 'slide-out-right', 'slide-next', 'slide-prev'); - curContent.classList.add(direction === 'next' ? 'slide-out-left' : 'slide-out-right'); - } + const outEls = document.querySelectorAll('.content, ._204863, .item_title'); + outEls.forEach(el => { + el.classList.remove('slide-out-left', 'slide-out-right', 'slide-next', 'slide-prev'); + el.classList.add(direction === 'next' ? 'slide-out-left' : 'slide-out-right'); + }); } if (link.href.match(/\/p\/\d+/) || link.href.match(/[?&]page=\d+/)) { @@ -5341,22 +5348,47 @@ window.cancelAnimFrame = (function () { // // + let lastNavWheelTime = 0; const wheelEventListener = function (event) { - // User preference: enabled wheel navigation - if (localStorage.getItem('wheelNavEnabled') !== 'true') return; - // Block interaction if content warning is visible const cwModal = document.getElementById('content-warning-modal'); if (cwModal && cwModal.style.display !== 'none') return; - if (event.target.closest('.media-object') && !event.target.closest('#favs')) { - event.preventDefault(); // Prevent default scroll - if (event.deltaY < 0) { - const el = document.getElementById('prev'); - if (el && el.href && !el.href.endsWith('#')) el.click(); - } else if (event.deltaY > 0) { - const el = document.getElementById('next'); - if (el && el.href && !el.href.endsWith('#')) el.click(); + // Block if image modal / lightbox is open + const imageModal = document.getElementById('image-modal'); + if (imageModal && imageModal.classList.contains('visible')) return; + + const navBtn = event.target.closest('.nav-next, .nav-prev'); + const isNavHover = !!navBtn; + const isMediaHover = !isNavHover && !!event.target.closest('.media-object') && !event.target.closest('#favs'); + + // For media-object, user preference 'wheelNavEnabled' must be enabled. + // For .nav-next / .nav-prev, scrolling always triggers next/prev navigation directly. + if (!isNavHover && (!isMediaHover || localStorage.getItem('wheelNavEnabled') !== 'true')) { + return; + } + + // Always prevent default page scroll when scrolling over nav-next / nav-prev or media + event.preventDefault(); + + // Prevent rapid multi-firing while navigating or during throttle cooldown + const now = Date.now(); + if (isNavigating || now - lastNavWheelTime < 250) return; + + const delta = Math.abs(event.deltaY) >= Math.abs(event.deltaX) ? event.deltaY : event.deltaX; + if (delta === 0) return; + + if (delta < 0) { + const el = document.querySelector("#prev:not([href='#']), .nav-prev:not([href='#'])") || document.getElementById('prev') || document.querySelector('.nav-prev'); + if (el && el.href && !el.href.endsWith('#')) { + lastNavWheelTime = now; + el.click(); + } + } else if (delta > 0) { + const el = document.querySelector("#next:not([href='#']), .nav-next:not([href='#'])") || document.getElementById('next') || document.querySelector('.nav-next'); + if (el && el.href && !el.href.endsWith('#')) { + lastNavWheelTime = now; + el.click(); } } };