Youtube Watched

調整已觀看進度條樣式與網格間距；依螢幕寬度動態調整每行影片數量；拓寬頻道頁面內容寬度。adjusted watched progress bar overlay and grid margins; dynamically adjusted grid items per row based on screen width; expanded channel page width.

Installeren als gebruikersstijl ?

Stel een vraag, plaats een beoordeling of rapporteer dit script.

Regels afbreken

/* ==UserStyle==
@name         Youtube Watched
@version      20260710
@namespace    https://userstyles.world/user/dxzy
@description  調整已觀看進度條樣式與網格間距；依螢幕寬度動態調整每行影片數量；拓寬頻道頁面內容寬度。adjusted watched progress bar overlay and grid margins; dynamically adjusted grid items per row based on screen width; expanded channel page width.
@author       dxzy
@license      MIT
==/UserStyle== */

@-moz-document url-prefix("https://www.youtube.com/feed/subscriptions"),
url-prefix("https://www.youtube.com/@"),
url("https://www.youtube.com/") {

  /* 調整已觀看/播放進度條的覆蓋層樣式 */
  ytd-rich-grid-renderer #contents.ytd-rich-grid-renderer ytd-rich-item-renderer ytd-thumbnail ytd-thumbnail-overlay-resume-playback-renderer {
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 100%;
    width: 100%;
    pointer-events: none;
    text-align: center;
  }

  /* 進度條覆蓋層的垂直置中輔助 */
  ytd-rich-grid-renderer #contents.ytd-rich-grid-renderer ytd-rich-item-renderer ytd-thumbnail ytd-thumbnail-overlay-resume-playback-renderer::before {
    content: "";
    height: 96%;
    display: inline-block;
  }

  /* 調整網格項目的外距 */
  ytd-rich-item-renderer {
    margin: 4px 4px 8px;
  }

  /* 拓寬頻道頁面所有內容的寬度 */
  ytd-browse[page-subtype="channels"] ytd-two-column-browse-results-renderer,yt-horizontal-list-renderer {
    max-width: 100% !important;
    width: 99% !important;  }

  /* 根據螢幕寬度調整每行顯示的項目數量 */
  @media (min-width: 1910px) {
    .ytd-rich-shelf-renderer.style-scope {
      --ytd-rich-grid-items-per-row: 7 !important;
    }
  }

  @media (max-width: 2570px) {
    ytd-rich-grid-renderer {
      --ytd-rich-grid-items-per-row: 6 !important;
    }
  }

  @media (max-width: 2000px) {
    ytd-rich-grid-renderer {
      --ytd-rich-grid-items-per-row: 5 !important;
    }
  }

  @media (max-width: 1800px) {
    ytd-rich-grid-renderer {
      --ytd-rich-grid-items-per-row: 4 !important;
    }
  }

  @media (max-width: 1500px) {
    ytd-rich-grid-renderer {
      --ytd-rich-grid-items-per-row: 3 !important;
    }
  }

  @media (max-width: 1000px) {
    ytd-rich-grid-renderer {
      --ytd-rich-grid-items-per-row: 2 !important;
    }
  }

  @media (max-width: 500px) {
    ytd-rich-grid-renderer {
      --ytd-rich-grid-items-per-row: 1 !important;
    }
  }
}