esifawafwu

public/s/css/f0ckm.css

@@ -3829,6 +3829,25 @@ body.sidebar-right-hidden #sidebar-drag-zone {
   margin-right: 8px;
 }
 
+/* Sub-tab nav + background mode bar: scroll horizontally inside themselves instead of overflowing the sidebar */
+.f0ck-tuner-subtabs-nav,
+.f0ck-tuner-mode-bar {
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+.f0ck-tuner-subtabs-nav::-webkit-scrollbar,
+.f0ck-tuner-mode-bar::-webkit-scrollbar { height: 4px; }
+.f0ck-tuner-subtabs-nav::-webkit-scrollbar-thumb,
+.f0ck-tuner-mode-bar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
+/* Buttons keep their natural width (grow to fill when there is room); mode-bar buttons set flex:1 inline */
+.f0ck-tuner-subtabs-nav > .f0ck-tuner-subtab-btn { flex: 1 0 auto; }
+.f0ck-tuner-mode-bar > .f0ck-tuner-mode-btn { flex: 1 0 auto !important; }
+.f0ck-tuner-header > .f0ck-tuner-close { flex-shrink: 0; }
+
 .f0ck-tuner-subtab-btn,
 .f0ck-tuner-mode-btn {
   flex: 1;
@@ -3958,6 +3977,112 @@ body.sidebar-right-hidden #sidebar-drag-zone {
   color: #fff;
 }
 
+/* ── Tuner: style guide (square, flat, theme colours, no glow) + touch-friendly sliders ── */
+.f0ck-audio-tuner-panel,
+.f0ck-audio-tuner-panel *,
+.f0ck-audio-tuner-panel *::before,
+.f0ck-audio-tuner-panel *::after { border-radius: 0 !important; }
+
+.f0ck-audio-tuner-panel:not(.in-sidebar) {
+  background: var(--bg, #111);
+  border: 1px solid var(--accent, #99ff00);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+.f0ck-audio-tuner-panel { font-family: inherit; color: var(--text-color, var(--white, #e6e6e6)); }
+
+.f0ck-audio-tuner-panel .f0ck-tuner-header { border-bottom-color: rgba(255, 255, 255, 0.1); }
+.f0ck-audio-tuner-panel .f0ck-tuner-section-title {
+  color: var(--text-muted, #8a8f98);
+  letter-spacing: 0.12em;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex; align-items: center; gap: 6px;
+}
+.f0ck-audio-tuner-panel .f0ck-tuner-section-title::before {
+  content: ''; width: 3px; height: 10px; background: var(--accent, #99ff00); flex-shrink: 0;
+}
+
+/* Sub-tabs + mode switch: segmented control, active = solid accent, no glow */
+.f0ck-audio-tuner-panel .f0ck-tuner-subtabs-nav,
+.f0ck-audio-tuner-panel .f0ck-tuner-mode-bar {
+  background: rgba(0, 0, 0, 0.35) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.f0ck-audio-tuner-panel .f0ck-tuner-subtab-btn,
+.f0ck-audio-tuner-panel .f0ck-tuner-mode-btn { color: var(--text-muted, #8e8e93); }
+.f0ck-audio-tuner-panel .f0ck-tuner-subtab-btn:hover,
+.f0ck-audio-tuner-panel .f0ck-tuner-mode-btn:hover { color: var(--text-color, #fff); background: rgba(255, 255, 255, 0.06); }
+.f0ck-audio-tuner-panel .f0ck-tuner-subtab-btn.active,
+.f0ck-audio-tuner-panel .f0ck-tuner-mode-btn.active { background: var(--accent, #99ff00); color: #000; box-shadow: none; }
+
+/* Panels / cards */
+.f0ck-audio-tuner-panel :is(.f0ck-tuner-presets-bar, .f0ck-danmaku-debug-card) {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Inputs & selects */
+.f0ck-audio-tuner-panel :is(.f0ck-tuner-preset-select, .f0ck-tuner-preset-input, input[type="text"], input[type="number"], select) {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: var(--text-color, #fff);
+  min-height: 30px;
+}
+.f0ck-audio-tuner-panel :is(.f0ck-tuner-preset-select, .f0ck-tuner-preset-input, input[type="text"], input[type="number"], select):focus {
+  border-color: var(--accent, #99ff00); outline: none;
+}
+
+/* Buttons: primary = solid accent (outline on hover), the rest outlined; no glows */
+.f0ck-audio-tuner-panel :is(.f0ck-tuner-btn-copy, .f0ck-danmaku-debug-btn.btn-primary) {
+  background: var(--accent, #99ff00); border: 1px solid var(--accent, #99ff00); color: #000; filter: none;
+}
+.f0ck-audio-tuner-panel :is(.f0ck-tuner-btn-copy, .f0ck-danmaku-debug-btn.btn-primary):hover {
+  background: transparent; color: var(--accent, #99ff00); filter: none;
+}
+.f0ck-audio-tuner-panel .f0ck-tuner-btn-save-default { background: transparent; border-color: var(--accent, #99ff00); }
+.f0ck-audio-tuner-panel .f0ck-tuner-btn-save-default:hover { box-shadow: none; }
+.f0ck-audio-tuner-panel :is(button, select, input):focus-visible { outline: 2px solid var(--accent, #99ff00); outline-offset: 1px; }
+
+/* Value readout next to each label */
+.f0ck-audio-tuner-panel .f0ck-tuner-row-label { color: var(--text-muted, #bbb); }
+.f0ck-audio-tuner-panel .f0ck-tuner-row-label span:last-child {
+  color: var(--accent, #99ff00); font-variant-numeric: tabular-nums;
+}
+
+/* Sliders: flat track, square accent thumb, generous hit area.
+   touch-action pan-y: vertical drags still scroll the panel, horizontal drags move the slider. */
+.f0ck-audio-tuner-panel input[type="range"] {
+  -webkit-appearance: none; appearance: none;
+  width: 100%; height: 22px; margin: 0; padding: 0;
+  background: transparent; cursor: pointer; touch-action: pan-y; display: block;
+}
+.f0ck-audio-tuner-panel input[type="range"]::-webkit-slider-runnable-track {
+  height: 4px; background: rgba(255, 255, 255, 0.15); border: 0;
+}
+.f0ck-audio-tuner-panel input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none;
+  width: 14px; height: 14px; margin-top: -5px;
+  background: var(--accent, #99ff00); border: 0; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.45);
+  transition: transform 0.1s;
+}
+.f0ck-audio-tuner-panel input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
+.f0ck-audio-tuner-panel input[type="range"]::-moz-range-track { height: 4px; background: rgba(255, 255, 255, 0.15); border: 0; }
+.f0ck-audio-tuner-panel input[type="range"]::-moz-range-progress { height: 4px; background: var(--accent, #99ff00); }
+.f0ck-audio-tuner-panel input[type="range"]::-moz-range-thumb {
+  width: 14px; height: 14px; background: var(--accent, #99ff00); border: 0; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.45);
+}
+.f0ck-audio-tuner-panel input[type="range"]:focus { outline: none; }
+.f0ck-audio-tuner-panel input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--text-color, #fff); outline-offset: 1px; }
+
+/* Touch screens: bigger thumb and row so the slider is easy to grab */
+@media (pointer: coarse) {
+  .f0ck-audio-tuner-panel input[type="range"] { height: 34px; }
+  .f0ck-audio-tuner-panel input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
+  .f0ck-audio-tuner-panel input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
+  .f0ck-audio-tuner-panel .f0ck-tuner-row { margin-bottom: 6px; }
+}
+
 .sidebar-video-details {
   display: flex;
   margin-top: 8px;
@@ -5281,6 +5406,7 @@ body.layout-legacy .blahlol {
   background: var(--bg);
   border-left: 1px solid var(--nav-border-color);
   border-right: 1px solid var(--nav-border-color);
+  border-top: 1px solid var(--nav-border-color);
 }
 
 body.layout-legacy .comments-list:not(:has(.comment)) {