gfd

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,

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;
     }