diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index 268b2aa..41d592b 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -12,6 +12,29 @@ --bg: #111; --text: #fff; --gray: #262626; + --accent: #9f0; + --accent-rgb: 153, 255, 0; + --emoji-fav-color: #f5c518; + --nav-bg: #2b2b2b; + --nav-brand-border: inset 1px #242424; + --nav-brand-bg: #171717; + --navigation-links-bg: #2b2b2b; + --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0); + --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5); + --navigation-links-box-shadow: rgba(255, 255, 255, .05); + --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0); + --nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1); + --nav-link-hover-bg: #333; + --nav-border-color: rgba(255, 255, 255, .05); + --dropdown-bg: #232323; + --dropdown-item-hover: #0d0d0d; + --nav-brand-font: 'VCR'; + --font: monospace; + --pagination-background: #2b2b2b; + --metadata-bg: #2b2b2b; + --badge-bg: #171717; + --posts-meta-bg: #000000b8; + --x2154: #215483; } html, body { @@ -5190,7 +5213,7 @@ div.posts>a:not(.notif-item).touch-active::after { .navbar.scrolled { - background: var(--nav-bg) !important; + background: var(--nav-bg, #2b2b2b) !important; /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);*/ } @@ -5675,6 +5698,81 @@ body.layout-modern.sidebar-right-hidden .pagination-container-fluid { grid-template-columns: 0fr 1fr 0fr; position: relative; max-width: 100%; + animation: contentSlideIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; + will-change: transform, opacity; +} + +.content.slide-next { + animation: contentSlideInRight 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; +} + +.content.slide-prev { + animation: contentSlideInLeft 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; +} + +.content.slide-out-left { + animation: contentSlideOutLeft 0.26s cubic-bezier(0.4, 0, 0.8, 1) forwards !important; + pointer-events: none; +} + +.content.slide-out-right { + animation: contentSlideOutRight 0.26s cubic-bezier(0.4, 0, 0.8, 1) forwards !important; + pointer-events: none; +} + +@keyframes contentSlideIn { + 0% { + opacity: 0; + transform: translateY(16px) scale(0.98); + } + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes contentSlideInRight { + 0% { + opacity: 0; + transform: translateX(55px) scale(0.98); + } + 100% { + opacity: 1; + transform: translateX(0) scale(1); + } +} + +@keyframes contentSlideInLeft { + 0% { + opacity: 0; + transform: translateX(-55px) scale(0.98); + } + 100% { + opacity: 1; + transform: translateX(0) scale(1); + } +} + +@keyframes contentSlideOutLeft { + 0% { + opacity: 1; + transform: translateX(0) scale(1); + } + 100% { + opacity: 0; + transform: translateX(-55px) scale(0.98); + } +} + +@keyframes contentSlideOutRight { + 0% { + opacity: 1; + transform: translateX(0) scale(1); + } + 100% { + opacity: 0; + transform: translateX(55px) scale(0.98); + } } .container { @@ -12531,7 +12629,8 @@ div.posts>a::after { .navbar { background: rgba(0, 0, 0, 0.2); - border-bottom: 1px solid var(--nav-border-color); + border-bottom: 1px solid var(--nav-bg); + box-shadow: 1px 1px 1px #000; } body.layout-modern .navbar-header, diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js index f27ebd9..4c56e13 100644 --- a/public/s/js/f0ckm.js +++ b/public/s/js/f0ckm.js @@ -3909,6 +3909,13 @@ 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'); + } + } } if (useOnara) { @@ -4115,6 +4122,13 @@ 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'); + } + } // Note: Prefetching video src immediately after DOM injection has been removed // because concurrent media requests to the same URL in Chromium-based browsers @@ -4446,10 +4460,22 @@ window.cancelAnimFrame = (function () { // Standard item links e.preventDefault(); + const isNext = link.id === 'next' || link.classList.contains('nav-next'); + const isPrev = link.id === 'prev' || link.classList.contains('nav-prev'); + 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'); + } + } + if (link.href.match(/\/p\/\d+/) || link.href.match(/[?&]page=\d+/)) { loadPageAjax(link.href); } else { - loadItemAjax(link.href, true); + loadItemAjax(link.href, true, { direction }); } return; }