Tampermonkey_scripts/Chaturbate/chaturbate-thumbnails-2x.user.js

// ==UserScript==
// @name         Chaturbate 缩略图放大 2 倍
// @namespace    https://chaturbate.com/
// @version      0.3.5
// @description  通过放大 grid 最小列宽来放大房间列表缩略图，保留原站填满行为
// @match        https://chaturbate.com/*
// @match        https://*.chaturbate.com/*
// @run-at       document-start
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  // ========== 配置项 ==========
  // 最小列宽倍数（原站约 174px / 180px，乘以该倍数后作为新的 minmax 最小值，1fr 仍填满整行）
  const SCALE = 2;
  // Discover 轮播容器高度倍数（< SCALE 可减少空白，文字区未等比放大）
  const CONTAINER_HEIGHT_SCALE = 1.75;
  // ===========================

  const MIN_COL_MAIN = 174;   // #main 下的 min
  const MIN_COL_ROOT = 180;   // #roomlist_root、频道页下方(180×101) 的 min
  const minMain = Math.round(MIN_COL_MAIN * SCALE);
  const minRoot = Math.round(MIN_COL_ROOT * SCALE);
  // Discover 原高：triple 550/534, double 366/350, single 182/166
  const h = (ul, arrow) => ({ ul: Math.round(ul * CONTAINER_HEIGHT_SCALE), arrow: Math.round(arrow * CONTAINER_HEIGHT_SCALE) });
  const triple = h(550, 534), double = h(366, 350), single = h(182, 166);

  const style = document.createElement("style");
  style.id = "tm-thumb-scale-style";
  style.textContent = `
    #main #roomlist_root .roomlist_container ul.list,
    #main #roomlist_root .placeholder_roomlist_container ul.list {
      grid-template-columns: repeat(auto-fill, minmax(${minMain}px, 1fr)) !important;
    }
    #roomlist_root .roomlist_container ul.list,
    #roomlist_root .placeholder_roomlist_container ul.list {
      grid-template-columns: repeat(auto-fill, minmax(${minRoot}px, 1fr)) !important;
    }
    /* 频道页下方：列表在 .BaseRoomContents 内，统一用该祖先即可 */
    .BaseRoomContents ul.list {
      display: grid !important;
      grid-gap: 0.6em 0.75em !important;
      grid-template-columns: repeat(auto-fill, minmax(${minRoot}px, 1fr)) !important;
    }
    .BaseRoomContents ul.list li {
      width: auto !important;
      max-width: none !important;
      max-height: none !important;
    }
    .BaseRoomContents ul.list .room_thumbnail_container {
      display: block !important;
      width: 100% !important;
    }
    .BaseRoomContents ul.list .room_thumbnail_container img {
      width: 100% !important;
      height: auto !important;
      display: block !important;
      max-width: none !important;
    }
    /* 关注页：只给下拉层设一次 min-width，避免与父级重复放大导致只显示一列 */
    .followedDropdown.dropdown {
      min-width: calc(2 * ${minRoot}px + 2em) !important;
    }
    /* 强制两列，避免 auto-fill 在窄容器里排成单列导致单格过宽（看起来像放大两次） */
    .followRecommendedContainer .followRoomTable {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(${minRoot}px, 1fr)) !important;
      grid-gap: 0.6em 0.75em !important;
    }
    .followRecommendedContainer .followRoomTable > div,
    .followRecommendedContainer .followRoomTable > div > div {
      display: contents !important;
    }
    /* 卡片与图片固定为 minRoot 宽（只放大一次），覆盖站点内联 width:180 height:126 */
    .followRecommendedContainer .roomElement {
      width: ${minRoot}px !important;
      min-width: ${minRoot}px !important;
      max-width: ${minRoot}px !important;
      height: auto !important;
    }
    .followRecommendedContainer .roomElementAnchor {
      width: 100% !important;
      height: auto !important;
      display: block !important;
    }
    .followRecommendedContainer .room_thumbnail {
      width: 100% !important;
      height: auto !important;
      display: block !important;
    }
    /* Discover 页：轮播缩略图 + 容器高度（CONTAINER_HEIGHT_SCALE 倍，默认 1.75） */
    .carousel-root .triple-rows ul.list,
    #discover_root .triple-rows ul.list {
      height: ${triple.ul}px !important;
    }
    .carousel-root .triple-rows .carousel-arrow-container,
    #discover_root .triple-rows .carousel-arrow-container {
      height: ${triple.arrow}px !important;
    }
    .carousel-root .double-rows ul.list,
    #discover_root .double-rows ul.list {
      height: ${double.ul}px !important;
    }
    .carousel-root .double-rows .carousel-arrow-container,
    #discover_root .double-rows .carousel-arrow-container {
      height: ${double.arrow}px !important;
    }
    .carousel-root .single-row ul.list,
    #discover_root .single-row ul.list {
      height: ${single.ul}px !important;
    }
    .carousel-root .single-row .carousel-arrow-container,
    #discover_root .single-row .carousel-arrow-container {
      height: ${single.arrow}px !important;
    }
    .carousel-root .room-list-carousel ul.list > li,
    #discover_root .room-list-carousel ul.list > li {
      width: ${minRoot}px !important;
      min-width: ${minRoot}px !important;
      max-width: ${minRoot}px !important;
      flex: 0 0 ${minRoot}px !important;
    }
    .carousel-root .room-list-carousel .room_thumbnail_container,
    #discover_root .room-list-carousel .room_thumbnail_container {
      display: block !important;
      width: 100% !important;
    }
    .carousel-root .room-list-carousel .room_thumbnail_container img,
    .carousel-root .room-list-carousel .room_thumbnail,
    #discover_root .room-list-carousel .room_thumbnail_container img,
    #discover_root .room-list-carousel .room_thumbnail {
      width: 100% !important;
      height: auto !important;
      display: block !important;
      max-width: none !important;
    }
  `;

  const inject = () => {
    if (!document.getElementById("tm-thumb-scale-style"))
      (document.head || document.documentElement).appendChild(style);
  };
  if (document.head) inject();
  else document.addEventListener("DOMContentLoaded", inject);
})();