hgfhfd

public/s/css/f0ckm.css

@@ -2918,11 +2918,6 @@ body.sidebar-right-hidden #sidebar-drag-zone {
     overflow: visible !important;
   }
 
-  body.layout-legacy .login-placeholder {
-    border-left: 1px solid var(--nav-border-color) !important;
-    border-right: 1px solid var(--nav-border-color) !important;
-  }
-
   body.layout-legacy.sidebar-right-hidden .item-layout-container {
     grid-template-columns: 1fr;
   }
@@ -4357,7 +4352,7 @@ html[theme='95'] .sidebar-video-title {
   margin-bottom: 5px;
   padding: 5px;
   font-size: 1em;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid var(--nav-border-color);
   contain: layout style;
   margin: 0px;
 }
@@ -11344,6 +11339,7 @@ input#s_avatar {
   min-width: 50px;
   justify-content: center;
   opacity: 0.8;
+  height: 32px;
 }
 
 /* Avatar-style button variant */
@@ -11973,13 +11969,6 @@ html[theme='paper'] .char-counter,
   color: #888;
 }
 
-.login-placeholder {
-  padding: 15px;
-  text-align: center;
-  background: var(--bg);
-  border-bottom: 1px solid var(--nav-link-hover-bg);
-}
-
 /* Markdown Styles */
 .comment-content .greentext {
   color: #789922;
@@ -12660,7 +12649,6 @@ span.badge.badge-current {
 }
 
 #help-button {
-  padding: 5px;
   cursor: pointer;
 }
 
@@ -12991,8 +12979,17 @@ html[theme='paper'] .steuerung.steuerung-icon button:hover,
 }
 
 @media (max-width: 999px) {
+  /* Only once the reader is far enough down for it to help (f0ckm.js toggles .is-visible) */
   .mobile-scroll-to-top {
     display: block;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
+  }
+  .mobile-scroll-to-top.is-visible {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.2s ease, visibility 0s;
   }
 }
 
@@ -13376,7 +13373,6 @@ body > nav.navbar {
   gap: 5px;
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
   cursor: pointer;
   padding: 4px;
   flex-shrink: 0;
@@ -13438,8 +13434,10 @@ body > nav.navbar {
   z-index: 10000 !important;
 }
 
+/* At least as wide as the toggle button (.nav-user-dropdown is sized by it), wider only if an entry needs it */
 #nav-visitor-menu {
-  min-width: max-content;
+  box-sizing: border-box;
+  min-width: 100%;
   width: max-content;
   white-space: nowrap;
 }
@@ -13491,7 +13489,7 @@ body > nav.navbar {
 
   /* On mobile: right group stays in the single top row */
   .nav-right-group {
-    gap: 15px;
+    gap: 5px;
     padding: 0 4px;
     margin-left: auto;
   }
@@ -13518,6 +13516,12 @@ body > nav.navbar {
     animation: navFadeIn 0.2s ease-out;
   }
 
+  /* Guests: menu items aligned right, next to the thumb and the visitor menu */
+  .nav-collapse-guest,
+  .nav-collapse-guest .nav-links {
+    justify-content: flex-end;
+  }
+
   @keyframes navFadeIn {
     from {
       opacity: 0;
@@ -15522,7 +15526,9 @@ body.layout-modern .tag-ac-input {
 .item-sidebar-right-footer,
 .global-sidebar-right-footer {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr auto;
+  /* One equal column per item, however many links the footer has */
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
   align-items: center;
   align-content: center;
   border-top: 1px solid var(--nav-border-color);
@@ -22973,4 +22979,36 @@ div#flash,
 }
 .chan-rehost-edit-btn:hover {
   background: rgba(255, 255, 255, 0.2) !important;
-}
+}
+/* Tap-to-activate sliders on touch devices (see f0ckm.js): locked sliders let touches through to the page,
+   so scrolling over them can't change a value; a tap unlocks one */
+html.range-tap-lock input[type="range"]:not(.v0ck input):not(#volume-slider):not([data-no-tap-lock]):not(.range-unlocked) {
+  pointer-events: none;
+  opacity: 0.7;
+}
+html.range-tap-lock input[type="range"].range-unlocked {
+  opacity: 1;
+  outline: 1px solid var(--accent);
+  outline-offset: 4px;
+}
+
+/* Header close (×) for modals whose header has no other close control; full screen on phones, so it must
+   always be visible. Clicks the modal's own Cancel button so closing behaves exactly the same. */
+.modal-x {
+  position: absolute; top: 12px; right: 12px; z-index: 1;
+  width: 36px; height: 36px; margin: 0; padding: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: none; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0 !important;
+  color: var(--text-color, #fff); font-size: 1.6em; line-height: 1; cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+.modal-x:hover { color: var(--accent); border-color: var(--accent); }
+
+/* Guest comment box (comments.js renderGuestInput): looks exactly like the real input, but inert.
+   Clicks fall through to the wrapper, which opens the login modal. */
+.comment-input.is-guest { cursor: pointer; }
+.comment-input.is-guest textarea,
+.comment-input.is-guest .submit-comment {
+  pointer-events: none;
+  user-select: none;
+}