gfdgfds

public/s/css/f0ckm.css

@@ -2916,8 +2916,9 @@ body.sidebar-right-hidden #sidebar-drag-zone::after {
     overflow: visible !important;
   }
 
+  /* Same track count as the open state so the sidebar toggle can animate the columns (f0ckm.js) */
   body.layout-legacy.sidebar-right-hidden .item-layout-container {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr) 0px;
   }
 
   body.layout-legacy .item-layout-container .item-main-content {
@@ -3473,6 +3474,7 @@ body.sidebar-right-hidden #sidebar-drag-zone::after {
   width: 320px;
   max-height: 80vh;
   overflow-y: auto;
+  scrollbar-width: none;
   background: rgba(18, 18, 22, 0.95);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
@@ -3495,19 +3497,17 @@ body.sidebar-right-hidden #sidebar-drag-zone::after {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+  scrollbar-width: none;
   padding: 0;
   touch-action: pan-y;
 }
 
-.sidebar-tuner-container::-webkit-scrollbar {
-  width: 5px;
-}
-
-.sidebar-tuner-container::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 4px;
+/* Tuner scrolls (floating panel or sidebar container) but without a visible scrollbar */
+.sidebar-tuner-container::-webkit-scrollbar,
+.f0ck-audio-tuner-panel::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
 }
 
 .sidebar-tuner-container.active {
@@ -4351,7 +4351,7 @@ html[theme='95'] .sidebar-video-title {
   font-size: 1em;
   border-bottom: 1px solid var(--nav-border-color);
   contain: layout style;
-  margin: 0px;
+  margin-bottom: 5px;
 }
 
 .sidebar-activity .comment-content-inner {
@@ -4833,7 +4833,7 @@ body.layout-legacy .comment-input {
 }
 
 .admin-pin-btn:hover,
-.admin-edit-btn:hover {^
+.admin-edit-btn:hover {
   color: var(--accent);
 }
 
@@ -5418,6 +5418,14 @@ body.layout-legacy .blahlol {
   border-top: 1px solid var(--nav-border-color);
 }
 
+/* Comments hidden ("c"): nothing below closes the box, so it gets its own bottom border.
+   comments-sliding = the comments are sliding up behind it or back down (comments.js); the border
+   stays for the whole slide in both directions */
+body.layout-legacy.comments-hidden .blahlol,
+body.layout-legacy.comments-sliding .blahlol {
+  border-bottom: 1px solid var(--nav-border-color);
+}
+
 body.layout-legacy .comments-list:not(:has(.comment)) {
   border: none;
 }
@@ -6540,9 +6548,9 @@ html[res="fullscreen"] span#favs {
 }
 
 /* Linux Firefox "thin" is often too small and hard to see. Use auto there. */
-html.is-linux.is-firefox *:not(html):not(body) {
+/* html.is-linux.is-firefox *:not(html):not(body) {
   scrollbar-width: auto;
-}
+} */
 
 /* Strictly hide root body and html scrollbar everywhere - eliminates gutter spacing */
 html,
@@ -10623,12 +10631,15 @@ div.favs div.posts {
   top: 0;
   left: 0;
   bottom: 0;
-  width: calc(100vw - var(--sidebar-w, 300px));
+  /* Always full width, shifted left by half the sidebar so it stays centred under the content. The size
+     never changes with the sidebar, so the drawing is never stretched or redrawn: the sidebar toggle only
+     moves it (transform, GPU), see toggleSidebarRight() in f0ckm.js */
+  width: 100vw;
   height: 100%;
-  transform: translate3d(0, 0, 0) scale(var(--bg-canvas-zoom, 1.38));
+  transform: translate3d(calc(var(--sidebar-w, 300px) / -2), 0, 0) scale(var(--bg-canvas-zoom, 1.38));
   transform-origin: center center;
   z-index: -2;
-  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease-in-out;
+  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.45, 0, 0.2, 1);
   opacity: var(--bg-canvas-opacity, 0.81);
   filter: var(--bg-canvas-filter, none);
   -webkit-filter: var(--bg-canvas-filter, none);
@@ -15526,7 +15537,6 @@ body.layout-modern .tag-ac-input {
   min-height: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding: 0 18px;
   scrollbar-width: none;
 }
 
@@ -15540,7 +15550,6 @@ body.layout-modern .tag-ac-input {
   /* Above everything the form layers inside the panel (badges 5-100, tag input 9998, emoji picker 10000);
      all of it lives in the panel's own stacking context, so these numbers don't leak outside */
   z-index: 10001;
-  margin: 0 -18px 12px;
   padding: 16px 62px 12px 18px;
   background: var(--bg, #111);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@@ -15672,12 +15681,15 @@ nav.navbar #nav-upload-link.is-active {
   box-shadow: inset 0 -2px 0 var(--accent);
 }
 
-nav.navbar #nav-upload-link.is-active i {
+nav.navbar #nav-upload-link i {
   display: inline-block;
-  transform: rotate(180deg);
   transition: transform 0.15s;
 }
 
+nav.navbar #nav-upload-link.is-active i {
+  transform: rotate(180deg);
+}
+
 /* Navbar entries (settings gear, user/anon menu "Settings") whose page is open in the page modal */
 nav.navbar a[data-page-modal].is-active,
 nav.navbar a[data-page-modal].is-active i {
@@ -21485,7 +21497,7 @@ body.onara-modal-open:not(.onara-modal-closing) #bg,
 body.onara-modal-open:not(.onara-modal-closing) #bg.fader-in {
   z-index: 51 !important;
   cursor: pointer !important;
-  transition: width 0.3s ease-in-out !important;
+  transition: transform 0.6s cubic-bezier(0.45, 0, 0.2, 1) !important;
   animation: none !important;
   opacity: var(--bg-canvas-opacity, 1.0) !important;
 }