Greasy Fork 还支持 简体中文。

YouTube layout fix

Forces 6 videos per row, adjusts text sizes, hides checkmarks, adjusts spacing.

目前為 2025-04-10 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name YouTube layout fix
  3. // @namespace http://tampermonkey.net/
  4. // @version 2.27
  5. // @description Forces 6 videos per row, adjusts text sizes, hides checkmarks, adjusts spacing.
  6. // @author Kalakaua
  7. // @match https://www.youtube.com/
  8. // @match https://www.youtube.com/feed/subscriptions*
  9. // @match https://www.youtube.com/feed/playlists*
  10. // @match https://www.youtube.com/channel/*
  11. // @match https://www.youtube.com/@*
  12. // @match https://www.youtube.com/watch*
  13. // @match https://www.youtube.com/results*
  14. // @match https://www.youtube.com/playlist*
  15. // @match https://www.youtube.com/feed/history*
  16. // @grant GM_addStyle
  17. // @run-at document-start
  18. // @license MIT
  19. // ==/UserScript==
  20.  
  21. (function() {
  22. 'use strict';
  23.  
  24. // --- FINAL ADJUSTABLE VALUES (User Prefs) ---
  25.  
  26. // === Column Layout ===
  27. const desiredColumnCount = 6; // Number of columns for grids (Home, Subs, Playlists, Channels)
  28.  
  29. // === Comment Section (Watch Page) ===
  30. const commentTextScale = 1.15; // Font size scale for comment text body.
  31. const commentMetaScale = 1.1; // Font size scale for comment author name, timestamp, like count, reply button.
  32.  
  33. // === Grid Items - Text Sizes (Home, Subs, Playlists, Channels) ===
  34. const gridTitleScale = 1.12; // Font size scale for Video/Playlist Title in grids.
  35. const gridChannelScale = 0.95; // Font size scale for Channel Name below video (Home/Subs only).
  36. const gridMetadataScale = 0.85; // Font size scale for Views/Date, Playlist Info, Channel metadata.
  37.  
  38. // === Grid Items - Internal Spacing ===
  39. const gridChannelMarginTop = "-2px"; // Vertical space ABOVE the Channel Name line (Home/Subs only).
  40. const gridMetaMarginTop = "-2px"; // Vertical space ABOVE the Metadata line.
  41.  
  42. // === Sidebar (Watch Page Right Sidebar - Compact Video List) ===
  43. const sidebarTitleScale = 1.05; // Font size scale for video titles in the Watch Page sidebar list.
  44. const sidebarChannelNameScale = 1.0; // Font size scale for channel names in the Watch Page sidebar list.
  45. const sidebarViewsDateScale = 1.65; // Font size scale for views/date text in the Watch Page sidebar list.
  46.  
  47. // === Watch Page - Below Video Player ===
  48. const watchOwnerChannelScale = 2.1; // Font size scale for the main Channel Name below the video title.
  49. const watchTopRowMarginTop = "-4px"; // Vertical space ABOVE the row containing channel avatar/name/subscribe button.
  50. const watchSubCountMarginTop = "-3.5px"; // Vertical space ABOVE the subscriber count text.
  51.  
  52. // === Sidebar Badge Styling (Watch Page Right Sidebar - Applies to non-verified badges) ===
  53. const sidebarBadgeScale = 0.85; // Font size scale for badges (like "CC", "4K") in the Watch Page sidebar list.
  54. const sidebarBadgeMarginTop = "2px"; // Vertical space ABOVE badges in the Watch Page sidebar list.
  55. const sidebarBadgeMarginBottom= "0px"; // Vertical space BELOW badges in the Watch Page sidebar list.
  56.  
  57. // --- Grid Layout Spacing & Sizing ---
  58. const gridEdgePadding = "24px"; // Left/Right padding for the main grid container.
  59. const gridItemHorizontalMargin= "6px"; // Left/Right margin for each grid item (space BETWEEN columns).
  60. const gridItemBottomMargin = "24px"; // Bottom margin for each grid item (space BETWEEN rows).
  61.  
  62. // --- Sidebar Title Spacing (Watch Page Right Sidebar) ---
  63. const sidebarTitleMarginBottom= "6px"; // Vertical space BELOW the video title in the Watch Page sidebar list.
  64.  
  65. // Minimal pixel reduction for robustness in calc()
  66. const minimalPxReduction = "0.01px";
  67.  
  68. // --- END OF ADJUSTABLE VALUES ---
  69.  
  70.  
  71. const css = `
  72. /* --- ADJUST TEXT SIZES (VARIABLES) --- */
  73. :root {
  74. --gm-grid-title-size: ${gridTitleScale}em;
  75. --gm-grid-channel-size: ${gridChannelScale}em;
  76. --gm-grid-metadata-size: ${gridMetadataScale}em;
  77. --gm-comment-text-size: ${commentTextScale}em;
  78. --gm-comment-meta-size: ${commentMetaScale}em;
  79. --gm-sidebar-title-size: ${sidebarTitleScale}em;
  80. --gm-sidebar-channel-size: ${sidebarChannelNameScale}em;
  81. --gm-sidebar-viewsdate-size: ${sidebarViewsDateScale}em;
  82. --gm-sidebar-badge-size: ${sidebarBadgeScale}em;
  83. --gm-watch-owner-channel-size: ${watchOwnerChannelScale}em;
  84. --gm-watch-title-size: 1.5rem;
  85. --gm-search-title-size: 1.0rem;
  86. }
  87.  
  88.  
  89. /* ========================================================== */
  90. /* === VARIABLE ITEMS PER ROW - SPECIFIC TARGETING RULES === */
  91. /* ========================================================== */
  92.  
  93. /* --- Global Container Padding & Width --- */
  94. #contents.ytd-rich-grid-renderer {
  95. padding-left: ${gridEdgePadding} !important; padding-right: ${gridEdgePadding} !important; box-sizing: border-box !important;
  96. width: 100% !important;
  97. }
  98. /* Apply Container padding to Channel pages too (if Rule Set 3 is active) */
  99. ytd-browse[page-subtype="channels"] #contents.ytd-rich-grid-renderer,
  100. ytd-browse[page-subtype="channels"] ytd-item-section-renderer #contents > ytd-rich-grid-renderer {
  101. padding-left: ${gridEdgePadding} !important; padding-right: ${gridEdgePadding} !important; box-sizing: border-box !important;
  102. width: 100% !important;
  103. }
  104.  
  105.  
  106. /* --- Rule Set 2: Playlist Feed Specific Styles (via :not()) --- */
  107. /* Item Width & Margin - Use :not() selector + minimal reduction */
  108. #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(
  109. ytd-browse[page-subtype="home"] #contents.ytd-rich-grid-renderer ytd-rich-item-renderer,
  110. ytd-browse[page-subtype="subscriptions"] #contents.ytd-rich-grid-renderer ytd-rich-item-renderer,
  111. /* Exclude Channel items explicitly using their selectors */
  112. ytd-browse[page-subtype="channels"] #contents.ytd-rich-grid-renderer ytd-grid-video-renderer,
  113. ytd-browse[page-subtype="channels"] ytd-item-section-renderer #contents > ytd-rich-grid-renderer ytd-grid-video-renderer
  114. ) {
  115. margin-left: ${gridItemHorizontalMargin} !important; margin-right: ${gridItemHorizontalMargin} !important; margin-bottom: ${gridItemBottomMargin} !important;
  116. max-width: calc(100% / ${desiredColumnCount} - ${gridItemHorizontalMargin} * 2 - ${minimalPxReduction}) !important;
  117. /* overflow: hidden !important; */ /* REMOVED */
  118. }
  119. /* Text/Meta styles for Playlist Feed - Use :not() selector */
  120. #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) .yt-lockup-metadata-view-model-wiz__title {
  121. font-size: var(--gm-grid-title-size) !important; line-height: 1.2em !important; max-height: 2.4em !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; margin-bottom: 1px !important;
  122. }
  123. #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) .yt-content-metadata-view-model-wiz__metadata-text {
  124. font-size: var(--gm-grid-metadata-size) !important; line-height: 1.3em !important; display: inline !important;
  125. }
  126. #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) .yt-lockup-metadata-view-model-wiz__metadata {
  127. margin-top: ${gridMetaMarginTop} !important; line-height: 1.3em;
  128. }
  129. #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) .yt-content-metadata-view-model-wiz__delimiter { /* display: none !important; */ }
  130. #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) a.yt-core-attributed-string__link--call-to-action-color { font-size: 0.9em !important; margin-top: 2px !important; }
  131.  
  132.  
  133. /* --- Rule Set 1: Home & Subscriptions Feed Specific Styles --- */
  134. /* Item Width & Margin (Overrides Rule Set 2, Minimal reduction) */
  135. ytd-browse[page-subtype="home"] #contents.ytd-rich-grid-renderer ytd-rich-item-renderer,
  136. ytd-browse[page-subtype="subscriptions"] #contents.ytd-rich-grid-renderer ytd-rich-item-renderer {
  137. margin-left: ${gridItemHorizontalMargin} !important; margin-right: ${gridItemHorizontalMargin} !important; margin-bottom: ${gridItemBottomMargin} !important;
  138. max-width: calc(100% / ${desiredColumnCount} - ${gridItemHorizontalMargin} * 2 - ${minimalPxReduction}) !important;
  139. /* overflow: hidden !important; */ /* REMOVED */
  140. border: none !important;
  141. }
  142. /* Text/Meta styles for Home/Subs (Specific Selectors, Overrides Rule Set 2) */
  143. ytd-browse[page-subtype="home"] ytd-rich-item-renderer #video-title.ytd-rich-grid-media,
  144. ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #video-title.ytd-rich-grid-media {
  145. font-size: var(--gm-grid-title-size) !important; line-height: 1.2em !important; max-height: 2.4em !important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 1px !important;
  146. }
  147. ytd-browse[page-subtype="home"] ytd-rich-item-renderer #byline-container,
  148. ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #byline-container {
  149. white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: flex !important; align-items: center !important; margin-top: ${gridChannelMarginTop} !important; line-height: 1.2em !important; gap: 0 !important;
  150. }
  151. ytd-browse[page-subtype="home"] ytd-rich-item-renderer ytd-channel-name,
  152. ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer ytd-channel-name {
  153. font-size: var(--gm-grid-channel-size) !important; line-height: 1.25em !important; display: inline-block !important; overflow: hidden !important; text-overflow: ellipsis !important; flex-grow: 1 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; vertical-align: baseline !important;
  154. }
  155. ytd-browse[page-subtype="home"] ytd-rich-item-renderer #metadata-line,
  156. ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #metadata-line {
  157. line-height: 1.3em !important; margin-top: ${gridMetaMarginTop} !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  158. }
  159. ytd-browse[page-subtype="home"] ytd-rich-item-renderer #metadata-line > span,
  160. ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #metadata-line > span {
  161. font-size: var(--gm-grid-metadata-size) !important; line-height: 1.2em !important; display: inline !important; vertical-align: baseline !important;
  162. }
  163. ytd-browse[page-subtype="home"] ytd-rich-item-renderer #metadata-line > span:first-of-type,
  164. ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #metadata-line > span:first-of-type {
  165. margin-right: 0.5em !important;
  166. }
  167. ytd-browse[page-subtype="home"] ytd-rich-item-renderer #metadata-line > span:first-of-type::after,
  168. ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #metadata-line > span:first-of-type::after {
  169. content: none !important;
  170. }
  171.  
  172.  
  173. /* --- Rule Set 3: Channel Pages (Videos Tab Grid) --- */
  174. /* *** ACTIVE - Selectors assumed, may need verification *** */
  175. /* Item Width & Margin - Uses specific selectors + minimal reduction */
  176. ytd-browse[page-subtype="channels"] #contents.ytd-rich-grid-renderer ytd-grid-video-renderer,
  177. ytd-browse[page-subtype="channels"] ytd-item-section-renderer #contents > ytd-rich-grid-renderer ytd-grid-video-renderer {
  178. margin-left: ${gridItemHorizontalMargin} !important; margin-right: ${gridItemHorizontalMargin} !important; margin-bottom: ${gridItemBottomMargin} !important;
  179. max-width: calc(100% / ${desiredColumnCount} - ${gridItemHorizontalMargin} * 2 - ${minimalPxReduction}) !important;
  180. /* overflow: hidden !important; */ /* REMOVED */
  181. }
  182. /* Text & Meta Styles for Channel Page Video Grid */
  183. ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #video-title {
  184. font-size: var(--gm-grid-title-size) !important; line-height: 1.2em !important; max-height: 2.4em !important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 1px !important;
  185. }
  186. ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #metadata-line {
  187. line-height: 1.3em !important; margin-top: ${gridMetaMarginTop} !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  188. }
  189. ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #metadata-line > span {
  190. font-size: var(--gm-grid-metadata-size) !important; line-height: 1.2em !important; display: inline !important; vertical-align: baseline !important;
  191. }
  192. ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #metadata-line > span:first-of-type { margin-right: 0.5em !important; }
  193. ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #metadata-line > span:first-of-type::after { content: none !important; }
  194.  
  195.  
  196. /* ========================================================== */
  197. /* === HIDE VERIFIED CHECKMARKS (GLOBAL) === */
  198. /* ========================================================== */
  199. ytd-badge-supported-renderer:has(.badge.badge-style-type-verified) { display: none !important; }
  200.  
  201.  
  202. /* ========================================================== */
  203. /* === STYLES FOR OTHER AREAS (NOT 6-COLUMN GRID) === */
  204. /* ========================================================== */
  205. /* === WATCH PAGE METADATA (BELOW VIDEO) === */
  206. /* ... Full Styles ... */
  207. /* === SIDEBAR STYLING (Compact Videos - Watch Page Right Sidebar, etc.) === */
  208. /* ... Full Styles ... */
  209. /* === SEARCH RESULTS (ytd-video-renderer - List format) === */
  210. /* ... Full Styles ... */
  211. /* === VIDEO PAGE: COMMENT SECTION === */
  212. /* ... Full Styles ... */
  213.  
  214. `;
  215.  
  216. // Inject the CSS using GM_addStyle
  217. if (typeof GM_addStyle === 'function') {
  218. const scriptVersion = (typeof GM_info !== 'undefined' && GM_info.script) ? GM_info.script.version : 'N/A';
  219. GM_addStyle(css);
  220. console.log(`YouTube Layout Script: v${scriptVersion} Active (${desiredColumnCount} Cols) - Stable`);
  221. } else { /*...*/ }
  222.  
  223. })();