Greasy Fork is available in English.
調整已觀看進度條樣式與網格間距；依螢幕寬度動態調整每行影片數量；拓寬頻道頁面內容寬度。adjusted watched progress bar overlay and grid margins; dynamically adjusted grid items per row based on screen width; expanded channel page width.
/* ==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;
}
}
}