Greasy Fork 还支持 简体中文。

Compact Youtube layout

Corrections to UI of youtube.com: trying to make it more compact like in good old times

  1. // ==UserScript==
  2. // @name Compact Youtube layout
  3. // @description Corrections to UI of youtube.com: trying to make it more compact like in good old times
  4. // @author MK
  5. // @namespace max44
  6. // @homepage https://greasyfork.org/en/users/309172-max44
  7. // @match *://*.youtube.com/*
  8. // @match *://*.youtu.be/*
  9. // @icon https://cdn.icon-icons.com/icons2/1488/PNG/512/5295-youtube-i_102568.png
  10. // @version 2.1.9
  11. // @license MIT
  12. // @require https://openuserjs.org/src/libs/sizzle/GM_config.js
  13. // @grant GM_getValue
  14. // @grant GM_setValue
  15. // @grant GM_registerMenuCommand
  16. // @run-at document-end
  17. // ==/UserScript==
  18.  
  19. (function() {
  20. 'use strict';
  21.  
  22. //Workaround: This document requires 'TrustedHTML' assignment
  23. if (window.trustedTypes && trustedTypes.createPolicy) {
  24. if (!trustedTypes.defaultPolicy) {
  25. const passThroughFn = (x) => x;
  26. trustedTypes.createPolicy('default', {
  27. createHTML: passThroughFn,
  28. createScriptURL: passThroughFn,
  29. createScript: passThroughFn,
  30. });
  31. }
  32. }
  33.  
  34. var css = `
  35. /*=== Home screen ===*/
  36. /*--- Make list of videos narrower and align it to center ---*/
  37. ytd-two-column-browse-results-renderer.grid > #primary {
  38. width: [fldGWidth]% !important;
  39. max-width: [fldGWidth]% !important;
  40. }
  41. ytd-rich-grid-renderer.ytd-two-column-browse-results-renderer {
  42. margin: 0 0 !important;
  43. }
  44. ytd-two-column-browse-results-renderer.grid {
  45. justify-content: center !important;
  46. }
  47. /*--- Remove width for channel's grid of videos ---*/
  48. ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) {
  49. max-width: 100% !important;
  50. }
  51. ytd-two-column-browse-results-renderer.grid-6-columns:not(.foo), .grid-6-columns.ytd-two-column-browse-results-renderer {
  52. max-width: 100% !important;
  53. width: 100% !important;
  54. }
  55. /*--- Align section margin ---*/
  56. ytd-rich-section-renderer > #content {
  57. margin: 0px !important;
  58. }
  59. ytd-rich-section-renderer > #content #contents {
  60. margin: 0px !important;
  61. }
  62. /*--- Decrease font size of video name ---*/
  63. #video-title.ytd-rich-grid-media, #video-title.ytd-rich-grid-slim-media,
  64. .yt-lockup-metadata-view-model-wiz--compact .yt-lockup-metadata-view-model-wiz__title,
  65. #video-title.ytd-grid-video-renderer,
  66. h3.ytd-grid-video-renderer,
  67. ytm-shorts-lockup-view-model h3 { /*Name of playlist*/
  68. font-size: 1.3rem !important;
  69. line-height: 1.6rem !important;
  70. font-weight: 500 !important;
  71. margin-top: 2px !important;
  72. padding-right: 10px !important;
  73. }
  74. ytm-shorts-lockup-view-model h3 {
  75. min-height: unset !important;
  76. }
  77. /*--- Decrease gap between thumbnails ---*/
  78. h3.ytd-rich-grid-media {
  79. margin: 2px 0 4px 0 !important;
  80. }
  81. h3.ytd-rich-grid-slim-media {
  82. padding: 2px 24px 0 0 !important;
  83. }
  84. /*--- Remove avatars ---*/
  85. #avatar-container {
  86. display: [fldRemoveHomeAvatar] !important;
  87. }
  88. /*--- Decrease font size of latest posts name ---*/
  89. ytd-post-renderer[uses-compact-lockup] #home-content-text.ytd-post-renderer {
  90. font-size: 1.3rem !important;
  91. line-height: 1.6rem !important;
  92. }
  93. /*--- Make more space before and less space after header for Shorts and Latest posts ---*/
  94. ytd-browse[page-subtype="home"] #content #rich-shelf-header-container {
  95. margin-top: 30px !important;
  96. /*margin-bottom: 0px !important;*/
  97. }
  98. ytd-browse[page-subtype="home"] ytd-rich-shelf-renderer[standard-shelf-margins][is-shorts][is-show-more-hidden][is-show-less-hidden][is-truncated] #dismissible.ytd-rich-shelf-renderer {
  99. margin-bottom: 0 !important;
  100. }
  101. /*--- Move some videos to the position before Shorts ---*/
  102. ytd-browse[page-subtype="home"] ytd-rich-grid-renderer > div#contents > ytd-rich-item-renderer:nth-child(-n+14) {
  103. order: -1 !important;
  104. }
  105. /*--- Decrease size of menu button ---*/
  106. ytd-rich-item-renderer button yt-icon, .shortsLockupViewModelHostOutsideMetadataMenu button yt-icon,
  107. ytd-browse[page-subtype="channels"] ytd-grid-video-renderer button.yt-icon-button > yt-icon {
  108. position: absolute !important;
  109. width: 18px !important;
  110. height: 18px !important;
  111. margin-right: 0px !important;
  112. margin-top: 0px !important;
  113. }
  114. /*--- Change position of menu button under video ---*/
  115. /*ytd-rich-item-renderer button.yt-spec-button-shape-next yt-icon, ytd-grid-video-renderer button.yt-icon-button > yt-icon {*/
  116. ytd-rich-item-renderer button yt-icon {
  117. top: -1px !important;
  118. right: 2px !important;
  119. }
  120. /*--- Change position of menu button under short ---*/
  121. .shortsLockupViewModelHostOutsideMetadataMenu button yt-icon {
  122. top: -3px !important;
  123. right: -3px !important;
  124. }
  125.  
  126. /*=== Menu ===*/
  127. /*--- Change background color and make selection rectangle less round ---*/
  128. html:not([dark]) ytd-guide-entry-renderer[active] > #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer, html:not([dark]) ytd-guide-entry-renderer[active] > #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover {
  129. background-color: #f00 !important;
  130. border-radius: 3px !important;
  131. }
  132. html:not([dark]) ytd-guide-entry-renderer[active] .title.ytd-guide-entry-renderer {
  133. color: #fff !important;
  134. }
  135. html:not([dark]) ytd-guide-entry-renderer:not([active]) > #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover,
  136. html:not([dark]) ytd-guide-entry-renderer:not([active]) > #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer > tp-yt-paper-item:before {
  137. background-color: #ccc !important;
  138. border-radius: 3px !important;
  139. }
  140. /*--- Decrease font size ---*/
  141. .title.ytd-guide-entry-renderer {
  142. font-size: 13px !important;
  143. }
  144. /*--- Decrease height of menu item ---*/
  145. #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer, #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer > tp-yt-paper-item {
  146. min-height: 25px !important;
  147. max-height: 30px !important;
  148. }
  149. /*--- Leave section menu button intact ---*/
  150. #rich-shelf-header button.yt-icon-button > yt-icon {
  151. width: unset !important;
  152. height: unset !important;
  153. }
  154.  
  155. /*=== Notifications ===*/
  156. /*--- Decrease font size ---*/
  157. .message.ytd-notification-renderer, ytd-commentbox yt-formatted-string#contenteditable-textarea.ytd-commentbox {
  158. font-size: 1.3rem !important;
  159. line-height: 1.6rem !important;
  160. }
  161.  
  162. /*=== Thumbnails ==*/
  163. /*--- Correct overlay data ---*/
  164. ytd-thumbnail-overlay-resume-playback-renderer:not(.foo) {
  165. display: block !important;
  166. opacity: 1 !important;
  167. background: rgba(0, 0, 0, 0) !important;
  168. transition: all 0s ease 0s !important;
  169. z-index: 9 !important;
  170. }
  171. /*--- Correct progress bar ---*/
  172. #progress.ytd-thumbnail-overlay-resume-playback-renderer:not(.foo) {
  173. display: block !important;
  174. background-color: red !important;
  175. opacity: 1 !important;
  176. }
  177. /*--- Correct video duration background ---*/
  178. ytd-thumbnail-overlay-resume-playback-renderer:hover:not(.foo) {
  179. height: inherit !important;
  180. opacity: 1 !important;
  181. }
  182. ytd-app ytd-thumbnail-overlay-time-status-renderer:not(.foo) {
  183. font-size: 12px !important;
  184. height: 12px !important;
  185. line-height: 12px !important;
  186. opacity: 1 !important;
  187. padding: 5px 4px !important;
  188. }
  189. #scroll-container.yt-horizontal-list-renderer ytd-thumbnail-overlay-time-status-renderer:not(.foo) {
  190. top: auto !important;
  191. }
  192. /*--- Make thumbnail corners less round ---*/
  193. ytd-thumbnail[size="large"] a.ytd-thumbnail, ytd-thumbnail[size="large"]::before, .yt-thumbnail-view-model--medium,
  194. .shortsLockupViewModelHostThumbnailContainerRounded, yt-img-shadow, yt-image-banner-view-model,
  195. ytd-reel-video-renderer:not(.foo) .watch-while-engagement-panel.ytd-reel-video-renderer {
  196. border-radius: 3px !important;
  197. }
  198. /*--- Set thumbnail width in search results ---*/
  199. ytd-video-renderer[is-search] ytd-thumbnail.ytd-video-renderer, ytd-video-renderer[use-search-ui] ytd-thumbnail.ytd-video-renderer, ytd-playlist-thumbnail.ytd-radio-renderer, ytd-playlist-thumbnail.ytd-playlist-renderer {
  200. max-width: [fldTWidth]px !important;
  201. min-width: [fldTWidth]px !important;
  202. margin-left: 8px !important;
  203. margin-right: 8px !important;
  204. }
  205.  
  206. /*=== Grid of videos ===*/
  207. /*--- Decrease width of each thumbnail ---*/
  208. ytd-rich-grid-row.style-scope.ytd-rich-grid-renderer > div > ytd-rich-item-renderer {
  209. display: inline-block !important;
  210. width: [fldTWidth]px !important;
  211. contain: none !important;
  212. }
  213. div#contents > ytd-rich-item-renderer ytd-rich-grid-media.ytd-rich-item-renderer, div#contents > ytd-rich-item-renderer[rendered-from-rich-grid],
  214. ytd-browse[page-subtype="channels"] ytd-item-section-renderer ytd-thumbnail, ytd-browse[page-subtype="channels"] ytd-grid-video-renderer {
  215. max-width: [fldTWidth]px !important;
  216. width: [fldTWidth]px !important;
  217. }
  218. ytd-browse[page-subtype="channels"] ytd-item-section-renderer ytd-thumbnail, ytd-browse[page-subtype="channels"] yt-collection-thumbnail-view-model,
  219. ytd-browse[page-subtype="channels"] yt-thumbnail-view-model .yt-thumbnail-view-model__image, .yt-thumbnail-view-model {
  220. height: calc([fldTWidth]px/1.7778) !important;
  221. }
  222. /*--- Keep aspect ratio for thumbnails on channel's home tab ---*/
  223. ytd-browse[page-subtype="channels"] .yt-core-image--content-mode-scale-aspect-fill {
  224. object-fit: unset !important;
  225. }
  226. /*--- Decrease size of channel logo ---*/
  227. #avatar-container.ytd-rich-grid-media {
  228. height: 20px !important;
  229. margin-top: 5px !important;
  230. margin-right: 8px !important;
  231. }
  232. .yt-spec-avatar-shape--avatar-size-medium {
  233. margin: 0px !important;
  234. width: 23px !important;
  235. height: 23px !important;
  236. }
  237. .yt-spec-avatar-shape__button--button-medium {
  238. width: 20px !important;
  239. height: 20px !important;
  240. }
  241. /*--- Decrease size of menu button and shift it to the right ---*/
  242. /*ytd-rich-grid-renderer ytd-menu-renderer .ytd-menu-renderer[style-target="button"],
  243. #container:not(.ytd-search) ytd-section-list-renderer ytd-shelf-renderer .ytd-menu-renderer[style-target="button"] {
  244. --yt-icon-button-icon-width: 18px !important;
  245. --yt-icon-button-icon-height: 18px !important;
  246. width: unset !important;
  247. height: unset !important;
  248. }*/
  249. ytd-section-list-renderer ytd-shelf-renderer ytd-menu-renderer.ytd-grid-video-renderer {
  250. top: 5px !important;
  251. }
  252. ytd-rich-grid-renderer ytd-menu-renderer.ytd-rich-grid-media {
  253. right: -5px !important;
  254. }
  255. ytm-shorts-lockup-view-model button.yt-spec-button-shape-next {
  256. width: 10px !important;
  257. -moz-box-align: unset !important;
  258. align-items: unset !important;
  259. }
  260. /*--- Increase width for title name ---*/
  261. ytm-shorts-lockup-view-model .shortsLockupViewModelHostOutsideMetadata {
  262. padding-right: 22px !important;
  263. padding-top: 0px !important;
  264. }
  265. /*--- Decrease width of each shorts thumbnail ---*/
  266. ytd-rich-shelf-renderer[is-shorts] > #dismissible > div > ytd-rich-item-renderer:not(.foo), div#contents > ytd-rich-item-renderer[is-shorts-grid],
  267. div#contents > ytd-rich-item-renderer[is-slim-media], /*#scroll-container > #items >*/ .shortsLockupViewModelHost {
  268. display: inline-block !important;
  269. width: 145px !important;
  270. contain: none !important;
  271. }
  272. /*--- Decrease width of each shorts thumbnail in suggested videos ---*/
  273. ytd-watch-flexy .shortsLockupViewModelHost {
  274. width: 130px !important;
  275. }
  276. ytd-watch-flexy .shortsLockupViewModelHostThumbnail, ytd-watch-flexy .shortsLockupViewModelHostThumbnailContainer {
  277. width: 130px !important;
  278. height: calc(130px/0.6667) !important;
  279. }
  280. /*--- Decrease width of shorts thumbnail at home tab ---*/
  281. ytd-browse[page-subtype="channels"] #scroll-container > #items > ytd-reel-item-renderer {
  282. width: 145px !important;
  283. margin-right: calc(var(--ytd-rich-grid-item-margin)) !important;
  284. }
  285. /*--- Decrease video menu buttons at home tab and change its position ---*/
  286. ytd-browse[page-subtype="channels"] ytd-grid-video-renderer button.yt-icon-button > yt-icon,
  287. ytd-browse[page-subtype="channels"] .shortsLockupViewModelHostOutsideMetadataMenu button.yt-icon-button > yt-icon {
  288. top: -1px !important;
  289. right: 2px !important;
  290. }
  291. /*--- Position of shorts menu button at home screen and home tab ---*/
  292. /*ytd-browse[page-subtype="channels"] .shortsLockupViewModelHostOutsideMetadataMenu {
  293. position: absolute !important;
  294. top: 4px !important;
  295. right: -2px !important;
  296. }*/
  297. /*--- Make more videos in one row ---*/
  298. ytd-rich-grid-row.style-scope.ytd-rich-grid-renderer {
  299. display: inline !important;
  300. }
  301. /*div#contents.style-scope.ytd-rich-grid-renderer {
  302. display: block !important;
  303. }*/
  304. ytd-rich-grid-row.style-scope.ytd-rich-grid-renderer > div {
  305. display: inline !important;
  306. margin: 0 !important;
  307. }
  308. /*--- Set margin between videos in a row ---*/
  309. ytd-rich-item-renderer, ytd-rich-item-renderer[rendered-from-rich-grid], ytd-rich-item-renderer[is-slim-grid]:first-of-type, ytd-rich-item-renderer[is-slim-grid]:last-of-type,
  310. ytd-rich-item-renderer[rendered-from-rich-grid][is-in-first-column] /*#scroll-container > #items >*/ /*.shortsLockupViewModelHost*/,
  311. ytd-browse[page-subtype="channels"] ytd-grid-video-renderer, ytd-browse[page-subtype="channels"] .shortsLockupViewModelHost {
  312. margin-left: 0 !important;
  313. margin-right: calc(var(--ytd-rich-grid-item-margin)) !important;
  314. }
  315. ytd-browse[page-subtype="channels"] .shortsLockupViewModelHost img, ytd-browse[page-subtype="channels"] .shortsLockupViewModelHostThumbnailContainerCustomDimensions,
  316. ytd-browse[page-subtype="history"] .shortsLockupViewModelHostThumbnailContainerCustomDimensions {
  317. height: calc(145px/0.6667) !important;
  318. }
  319. /*ytd-rich-item-renderer[rendered-from-rich-grid][is-in-first-column] {
  320. margin-left: 0 !important;
  321. }*/
  322. /*--- Set height of each row ---*/
  323. ytd-rich-item-renderer {
  324. margin-bottom: 12px !important;
  325. }
  326. /*--- Set height of each row of playlists (make extra space above for thumbnails stack) ---*/
  327. ytd-rich-item-renderer[items-per-row="4"] {
  328. margin-top: 10px !important;
  329. }
  330. /*--- Font size for channel name and views count ---*/
  331. ytd-video-meta-block #byline-container.ytd-video-meta-block, ytd-video-meta-block #metadata-line.ytd-video-meta-block, .badge.ytd-badge-supported-renderer,
  332. ytm-shorts-lockup-view-model > div > div, #metadata-container.ytd-grid-video-renderer:not(.foo), ytd-grid-video-renderer:not([rich-meta]) #metadata-line.ytd-grid-video-renderer {
  333. font-size: 11px !important;
  334. line-height: 1.4rem !important;
  335. }
  336. /*--- Font size for playlist details ---*/
  337. .yt-content-metadata-view-model-wiz--medium-text .yt-content-metadata-view-model-wiz__metadata-text,
  338. .yt-content-metadata-view-model-wiz .yt-content-metadata-view-model-wiz__metadata-text {
  339. font-size: 11.5px !important;
  340. line-height: 1.4rem !important;
  341. white-space: wrap !important;
  342. }
  343. ytd-browse[page-subtype] .yt-lockup-view-model-wiz__metadata {
  344. padding-right: 24px !important;
  345. }
  346. /*--- No padding under playlist thumbnail ---*/
  347. .yt-lockup-view-model-wiz--vertical .yt-lockup-view-model-wiz__content-image {
  348. padding-bottom: 0px !important;
  349. }
  350.  
  351. /*=== Subscriptions ===*/
  352. /*--- Make bigger gap between header and grid of videos ---*/
  353. ytd-browse[page-subtype="subscriptions"] ytd-shelf-renderer:not([is-shorts]) {
  354. margin-bottom: 20px !important;
  355. }
  356. /*--- Make smaller gap between header and grid of shorts ---*/
  357. ytd-browse[page-subtype="subscriptions"] #rich-shelf-header.ytd-rich-shelf-renderer {
  358. margin-bottom: 14px !important;
  359. margin-left: 0px !important;
  360. }
  361. /*--- Make bigger gap before grid of shorts ---*/
  362. ytd-browse[page-subtype="subscriptions"] ytd-rich-section-renderer {
  363. margin-top: 15px !important;
  364. }
  365. ytd-browse[page-subtype="subscriptions"] .grid-subheader.ytd-shelf-renderer {
  366. margin-top: 0px !important;
  367. }
  368. /*--- Make smaller gap between shorts ---*/
  369. /*ytd-browse[page-subtype="subscriptions"] .shortsLockupViewModelHost {
  370. margin-right: unset !important;
  371. }*/
  372. /*--- Position of shorts menu button at home screen and home tab ---*/
  373. ytd-browse[page-subtype="subscriptions"] .shortsLockupViewModelHostOutsideMetadataMenu {
  374. right: 0px !important;
  375. }
  376.  
  377. /*=== Channel's header ===*/
  378. /*--- Make banner lower ---*/
  379. #header #page-header-banner img {
  380. width: auto !important;
  381. height: auto !important;
  382. max-height: 150px !important;
  383. }
  384. #header #page-header-banner-sizer.ytd-tabbed-page-header {
  385. height: auto !important;
  386. padding-top: 150px !important;
  387. }
  388. /*--- Make avatar smaller ---*/
  389. #header yt-avatar-shape img {
  390. width: auto !important;
  391. height: auto !important;
  392. max-height: 100px !important;
  393. }
  394. /*--- Make channel description more compact ---*/
  395. #header #page-header yt-description-preview-view-model,
  396. #header #page-header yt-flexible-actions-view-model {
  397. margin-top: 6px !important;
  398. }
  399. #header #page-header yt-attribution-view-model {
  400. margin-top: 4px !important;
  401. }
  402. #header #tabs-container.ytd-tabbed-page-header {
  403. height: 33px !important;
  404. }
  405. #header #tabs-container tp-yt-paper-tabs.ytd-tabbed-page-header {
  406. height: 41px !important;
  407. }
  408. #header tp-yt-app-toolbar {
  409. margin-top: -15px !important;
  410. }
  411. /*#header #contentContainer {
  412. margin-top: -15px !important;
  413. }*/
  414.  
  415. /*=== Main player ===*/
  416. /*--- Make player corners less round ---*/
  417. ytd-watch-flexy #ytd-player.ytd-watch-flexy {
  418. border-radius: 3px !important;
  419. }
  420. ytd-thumbnail a.ytd-thumbnail, ytd-thumbnail::before, .yt-video-attribute-view-model--image-large .yt-video-attribute-view-model__hero-section,
  421. #playlist-thumbnail.ytd-structured-description-playlist-lockup-renderer, .player-container.ytd-reel-video-renderer,
  422. ytd-browse[page-subtype="channels"] ytd-player {
  423. border-radius: 3px !important;
  424. }
  425. /*--- Make Shorts comments corners less round ---*/
  426. .anchored-panel.ytd-shorts {
  427. border-radius: 3px !important;
  428. }
  429. /*--- Remove channel avatar, suggested videos and next videos overlay ---*/
  430. ytd-watch-flexy div.ytp-ce-element.ytp-ce-channel, ytd-watch-flexy div.ytp-ce-element.ytp-ce-video, ytd-watch-flexy div.html5-endscreen.ytp-player-content {
  431. display: [fldRemoveSuggested] !important;
  432. }
  433. /*--- Remove autoplay and miniplayer buttons ---*/
  434. .ytp-chrome-controls button[data-tooltip-target-id="ytp-autonav-toggle-button"], .ytp-chrome-controls button.ytp-miniplayer-button {
  435. display: [fldRemoveAutoplay] !important;
  436. }
  437. /*--- Make player icons smaller ---*/
  438. .ytp-chrome-bottom {
  439. height: 35px !important;
  440. padding-top: 0px !important;
  441. }
  442. .ytp-chrome-controls {
  443. height: 35px !important;
  444. line-height: 35px !important;
  445. font-size: 90%;
  446. }
  447. #player #movie_player .ytp-chrome-bottom .ytp-progress-bar-container {
  448. bottom: 36px !important;
  449. }
  450. .ytp-chrome-controls button {
  451. margin-left: -4px !important;
  452. margin-right: -4px !important;
  453. }
  454. /*--- Align chapter title ---*/
  455. .ytp-chrome-controls .ytp-chapter-container > button.ytp-chapter-title {
  456. -webkit-align-items: center !important;
  457. align-items: center !important;
  458. }
  459. .ytp-chrome-controls .ytp-chapter-container {
  460. line-height: unset !important;
  461. }
  462. /*--- Correct size of volume button ---*/
  463. .ytp-left-controls > .ytp-volume-area > button {
  464. height: 45px !important;
  465. margin-top: -5px !important;
  466. }
  467. /*--- Correct font size of time display ---*/
  468. .ytp-chrome-controls .ytp-time-display {
  469. font-size: 120% !important;
  470. line-height: 35px !important;
  471. }
  472. /*--- Correct font size of chapters ---*/
  473. ytd-horizontal-card-list-renderer #endpoint h4 {
  474. font-size: 13px !important;
  475. line-height: 1.3em !important;
  476. }
  477. /*--- Correct font size of description, comments ---*/
  478. ytd-text-inline-expander, #content-text.ytd-comment-renderer, #content-text.ytd-comment-view-model, #expander.ytd-comment-replies-renderer button,
  479. #message.ytd-message-renderer, .more-button.ytd-comment-renderer, .less-button.ytd-comment-renderer {
  480. font-size: 13px !important;
  481. line-height: 1.3em !important;
  482. letter-spacing: 0 !important;
  483. }
  484. ytd-watch-flexy[video-id] .yt-spec-button-shape-next, ytd-watch-flexy[video-id] .animated-rolling-number-wiz,
  485. #grid-container .yt-spec-button-shape-next {
  486. font-size: 13px !important;
  487. }
  488. /*--- Correct font size of Translate, Show more and Show less buttons ---*/
  489. ytd-comment-thread-renderer tp-yt-paper-button, .more-button, .less-button {
  490. font-size: 12px !important;
  491. line-height: 1.3em !important;
  492. letter-spacing: 0 !important;
  493. }
  494. /*--- Make like/dislike buttons in comments smaller ---*/
  495. #like-button yt-button-shape yt-icon, #dislike-button yt-button-shape yt-icon {
  496. width: 18px !important;
  497. height: 18px !important;
  498. }
  499. /*--- Make size of other buttons in description and comments smaller ---*/
  500. div#description-inner .yt-spec-button-shape-next, .ytd-comments div#contents .yt-spec-button-shape-next {
  501. height: 26px;
  502. }
  503. /*--- Correct creator's comment ---*/
  504. ytd-comment-replies-renderer #creator-thumbnail.ytd-comment-replies-renderer yt-img-shadow.ytd-comment-replies-renderer {
  505. width: 18px !important;
  506. height: 18px !important;
  507. }
  508. /*--- Correct font size of suggested videos ---*/
  509. /*ytd-video-meta-block #byline-container.ytd-video-meta-block,*/ /*ytd-video-meta-block #metadata-line.ytd-video-meta-block,*/ /*.badge.ytd-badge-supported-renderer {
  510. font-size: 12px !important;
  511. line-height: 1.4rem !important;
  512. }*/
  513. ytd-app #video-title[class*="renderer"], ytd-compact-video-renderer #video-title.ytd-compact-video-renderer, ytd-two-column-search-results-renderer #channel-title .ytd-channel-name {
  514. /*font-size: 14px !important;*/
  515. line-height: 1.1 !important;
  516. }
  517. /*--- Remove "Infocards" section from video description --*/
  518. div#description #items > ytd-video-description-infocards-section-renderer {
  519. display: none !important;
  520. }
  521. /*--- Remove "Music" section from video description --*/
  522. div#description #items > ytd-horizontal-card-list-renderer {
  523. display: none !important;
  524. }
  525. /*--- Remove "Shorts remixing this video" section from video description --*/
  526. div#description #items > ytd-reel-shelf-renderer {
  527. display: none !important;
  528. }
  529. /*--- Remove "People mentioned" section from video description --*/
  530. div#description #items > yt-video-attributes-section-view-model {
  531. display: none !important;
  532. }
  533. /*--- Remove text around "Show transcript" button ---*/
  534. div#description #items > ytd-video-description-transcript-section-renderer > #header, #items > ytd-video-description-transcript-section-renderer > #sub-header {
  535. display: none !important;
  536. }
  537. /*--- Decrease size and position of menu button near suggested video ---*/
  538. ytd-watch-flexy div#secondary ytd-item-section-renderer button yt-icon,
  539. yt-horizontal-list-renderer .yt-horizontal-list-renderer.arrow button yt-icon {
  540. position: absolute !important;
  541. width: 18px !important;
  542. height: 18px !important;
  543. margin-right: 0px !important;
  544. margin-top: 0px !important;
  545. top: 6px !important;
  546. right: 0px !important;
  547. }
  548. /*--- Decrease size and position of menu button near notifications ---*/
  549. ytd-menu-renderer.ytd-notification-renderer button yt-icon {
  550. width: 18px !important;
  551. height: 18px !important;
  552. }
  553. /*--- Change position of menu button near suggested short ---*/
  554. ytd-watch-flexy div#secondary ytd-item-section-renderer .shortsLockupViewModelHostOutsideMetadataMenu button yt-icon {
  555. top: -4px !important;
  556. right: -4px !important;
  557. }
  558. /*--- Set margin between suggested shorts ---*/
  559. ytd-watch-flexy div#secondary ytd-reel-shelf-renderer .shortsLockupViewModelHost {
  560. margin-left: 0 !important;
  561. margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  562. }
  563. /*--- Change size and position of left/right button of suggested shorts ---*/
  564. ytd-watch-flexy div#secondary ytd-item-section-renderer yt-horizontal-list-renderer button yt-icon,
  565. yt-horizontal-list-renderer .yt-horizontal-list-renderer.arrow button yt-icon {
  566. position: unset !important;
  567. height: unset !important;
  568. margin-top: 3px !important;
  569. }
  570. /*ytd-watch-flexy div#secondary*/ ytd-item-section-renderer yt-horizontal-list-renderer ytd-button-renderer.arrow,
  571. ytd-menu-renderer .ytd-menu-renderer[style-target="button"] {
  572. width: 30px !important;
  573. height: 30px !important;
  574. }
  575.  
  576. /*=== Miniplayer ===*/
  577. /*--- Make player corners less round ---*/
  578. ytd-miniplayer:not(.foo) #player-container.ytd-miniplayer, ytd-miniplayer:not(.foo) #video-container.ytd-miniplayer .video.ytd-miniplayer, ytd-miniplayer:not(.foo) #card.ytd-miniplayer, ytd-miniplayer:not(.foo),
  579. .ytp-player-minimized .html5-main-video, .ytp-player-minimized .ytp-miniplayer-scrim, .ytp-player-minimized.html5-video-player {
  580. border-radius: 3px 3px 0 0 !important;
  581. }
  582.  
  583. /*=== Search box ===*/
  584. /*--- Make corners less round ---*/
  585. .ytSearchboxComponentInputBox {
  586. height: 30px !important;
  587. border-radius: 3px 0 0 3px !important;
  588. padding-top: 0px !important;
  589. padding-bottom: 0px !important;
  590. }
  591. .ytSearchboxComponentSearchButton {
  592. height: 32px !important;
  593. border-radius: 0 3px 3px 0 !important;
  594. }
  595. /*--- Make search box smaller ---*/
  596. /*#search-form.ytd-searchbox, #search-icon-legacy.ytd-searchbox {
  597. height: 30px !important;
  598. }*/
  599. .yt-spec-button-shape-next--icon-only-default {
  600. width: 30px !important;
  601. height: 30px !important;
  602. }
  603. #voice-search-button.ytd-masthead {
  604. margin-top: -8px !important;
  605. }
  606. /*--- Move box to the right ---*/
  607. #center.ytd-masthead {
  608. margin-right: auto !important;
  609. }
  610.  
  611. /*=== Search results ===*/
  612. /*--- Remove channel avatar ---*/
  613. ytd-search #channel-thumbnail.ytd-video-renderer {
  614. display: none !important;
  615. }
  616. /*--- Decrease font size ---*/
  617. ytd-video-renderer #dismissible h3 {
  618. font-size: 1.3rem !important;
  619. line-height: 1.6rem !important;
  620. margin-bottom: 3px !important;
  621. }
  622. /*--- Make thumbnails smaller ---*/
  623. #dismissible.ytd-video-renderer > ytd-thumbnail, yt-lockup-view-model .yt-lockup-view-model-wiz__content-image {
  624. /*margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  625. margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;*/
  626. margin-left: 0px !important;
  627. margin-right: calc(var(--ytd-rich-grid-item-margin)) !important;
  628. width: [fldTWidth]px !important;
  629. }
  630. ytd-search #dismissible ytd-thumbnail, ytd-search #dismissible ytd-thumbnail #thumbnail.ytd-thumbnail {
  631. height: calc([fldTWidth]px/1.7778) !important;
  632. }
  633. ytd-search #dismissible ytd-thumbnail img.yt-core-image--content-mode-scale-aspect-fill {
  634. object-fit: unset !important;
  635. }
  636. .yt-lockup-view-model-wiz--horizontal .yt-lockup-view-model-wiz__content-image {
  637. padding-right: 0px !important;
  638. }
  639. ytd-video-renderer[use-search-ui] ytd-thumbnail.ytd-video-renderer::before {
  640. display: inline !important;
  641. }
  642. /*--- Make channel logo smaller ---*/
  643. yt-img-shadow.ytd-channel-renderer {
  644. height: 85px !important;
  645. width: 85px !important;
  646. }
  647. img.yt-img-shadow {
  648. max-height: var(--yt-img-max-height,100%) !important;
  649. }
  650. ytd-channel-renderer #avatar-section.ytd-channel-renderer {
  651. margin-top: 5px !important;
  652. }
  653. ytd-channel-renderer #info.ytd-channel-renderer {
  654. padding-bottom: 5px !important;
  655. justify-content: unset !important;
  656. }
  657. /*--- Make list of channels more compact ---*/
  658. #grid-container.ytd-expanded-shelf-contents-renderer > .ytd-expanded-shelf-contents-renderer:not(:last-child) {
  659. margin-bottom: 10px !important;
  660. }
  661. /*--- Make shorts smaller ---*/
  662. ytd-search .shortsLockupViewModelHostThumbnailContainerCustomDimensions {
  663. height: calc(145px/0.6667) !important;
  664. }
  665. /*--- Make video name smaller ---*/
  666. #video-title.ytd-video-renderer, #video-title.ytd-radio-renderer, ytd-playlist-renderer #content h3, ytd-playlist-renderer #content h3 #video-title, .yt-lockup-metadata-view-model-wiz--standard.yt-lockup-metadata-view-model-wiz--legacy-typography .yt-lockup-metadata-view-model-wiz__title {
  667. font-size: 1.6rem !important;
  668. font-weight: 500 !important;
  669. }
  670. /*--- Make metadata bigger ---*/
  671. #dismissible.ytd-video-renderer .text-wrapper, #description-text.ytd-video-renderer, .yt-content-metadata-view-model-wiz .yt-content-metadata-view-model-wiz__metadata-text {
  672. font-size: 1.2rem !important;
  673. /*font-size: 11px !important;*/
  674. }
  675. /*--- Align channel avatar ---*/
  676. #avatar-section.ytd-channel-renderer {
  677. max-width: [fldTWidth]px !important;
  678. min-width: [fldTWidth]px !important;
  679. }
  680. /*--- Make bigger gap between filters and list of videos ---*/
  681. ytd-search ytd-search-header-renderer {
  682. margin-bottom: 20px !important;
  683. }
  684.  
  685. /*=== Playlists ===*/
  686. /*--- Decrease font size ---*/
  687. ytd-grid-renderer #details h3 {
  688. font-size: 1.3rem !important;
  689. line-height: 1.6rem !important;
  690. margin-bottom: 3px !important;
  691. }
  692. /*--- Make thumbnail corners less round ---*/
  693. ytd-playlist-thumbnail a.ytd-playlist-thumbnail, ytd-playlist-thumbnail::before {
  694. border-radius: 3px !important;
  695. }
  696. /*--- Make thumbnails smaller ---*/
  697. #items.ytd-grid-renderer > ytd-grid-playlist-renderer.ytd-grid-renderer {
  698. margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  699. margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  700. width: [fldTWidth]px !important;
  701. }
  702. ytd-grid-renderer .yt-thumbnail-view-model {
  703. margin-top: auto !important;
  704. }
  705. ytd-grid-renderer .collections-stack-wiz__collection-stack1--medium {
  706. height: calc([fldTWidth]px/1.7778) !important;
  707. }
  708. ytd-playlist-thumbnail.ytd-grid-playlist-renderer {
  709. width: [fldTWidth]px !important;
  710. }
  711. /*--- Change position of menu button under playlist ---*/
  712. /*ytd-rich-item-renderer button.yt-spec-button-shape-next yt-icon, ytd-grid-video-renderer button.yt-icon-button > yt-icon {*/
  713. ytd-rich-item-renderer yt-lockup-view-model button yt-icon {
  714. top: 8px !important;
  715. right: 5px !important;
  716. }
  717. .yt-thumbnail-view-model--aspect-ratio-16-by-9, .yt-thumbnail-view-model--aspect-ratio-1-by-1 {
  718. padding-top: unset !important;
  719. }
  720.  
  721. /*=== List of uploads in your channel ===*/
  722. /*--- Make thumbnails smaller ---*/
  723. /*#items ytd-grid-video-renderer {
  724. margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  725. margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  726. width: [fldTWidth]px !important;
  727. }*/
  728. /*ytd-thumbnail.ytd-grid-video-renderer {
  729. width: [fldTWidth]px !important;
  730. max-width: [fldTWidth]px !important;
  731. min-width: [fldTWidth]px !important;
  732. height: 118px !important;
  733. }*/
  734.  
  735. /*=== Community posts ===*/
  736. /*--- Decrease font size ---*/
  737. #content-text.ytd-backstage-post-renderer {
  738. font-size: 13px !important;
  739. }
  740.  
  741. /*=== Shorts tab ===*/
  742. /*--- Align thumbnails on top ---*/
  743. ytd-rich-grid-slim-media > #dismissible ytd-thumbnail.ytd-rich-grid-slim-media {
  744. vertical-align: top !important;
  745. display: inline !important;
  746. }
  747. ytd-rich-grid-slim-media > #dismissible ytd-thumbnail.ytd-rich-grid-slim-media::before {
  748. display: inline !important;
  749. }
  750. ytd-rich-grid-slim-media > #dismissible ytd-thumbnail #thumbnail.ytd-thumbnail {
  751. position: relative !important;
  752. }
  753. ytm-shorts-lockup-view-model .shortsLockupViewModelHostOutsideMetadataMenu button yt-icon {
  754. top: -4px !important;
  755. right: -5px !important;
  756. }
  757.  
  758. /*=== Watch history ===*/
  759. /*--- Make thumbnail height smaller ---*/
  760. ytd-video-renderer[is-history]/* > #dismissible >*/ ytd-thumbnail > #thumbnail.ytd-thumbnail {
  761. height: unset !important;
  762. position: relative !important;
  763. }
  764. ytd-video-renderer[is-history]/*:not([use-search-ui]) > #dismissible >*/ ytd-thumbnail.ytd-video-renderer {
  765. height: unset !important;
  766. }
  767. /*--- Make left margin ---*/
  768. ytd-section-list-renderer[page-subtype="history"] #contents.ytd-section-list-renderer {
  769. margin-left: auto !important;
  770. }
  771. ytd-browse[page-subtype="history"] yt-page-header-renderer {
  772. margin-left: 100px !important;
  773. }
  774. /*--- Make smaller gap between header and grid of shorts ---*/
  775. ytd-browse[page-subtype="history"] #contents.ytd-reel-shelf-renderer {
  776. margin-top: 15px !important;
  777. }
  778. /*--- Set margin between shorts in a row ---*/
  779. ytd-browse[page-subtype="history"] .shortsLockupViewModelHost {
  780. margin-left: 0 !important;
  781. margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  782. }
  783. /*--- Position of shorts menu button ---*/
  784. ytd-browse[page-subtype="history"] .shortsLockupViewModelHostOutsideMetadataMenu {
  785. right: 0px !important;
  786. }
  787. /*--- Decrease size of shorts menu button ---*/
  788. ytd-browse[page-subtype="history"] .shortsLockupViewModelHostOutsideMetadataMenu button.yt-spec-button-shape-next yt-icon {
  789. /*width: 18px !important;
  790. height: 18px !important;*/
  791. margin-right: 0px !important;
  792. margin-top: 0px !important;
  793. }
  794. `;
  795.  
  796. var gm_css = `
  797. #compact_youtube_layout * {
  798. font-family: Roboto, Arial, sans-serif !important;
  799. }
  800. #compact_youtube_layout .config_header {
  801. font-size: 20px !important;
  802. font-weight: bold !important;
  803. }
  804. #compact_youtube_layout .field_label {
  805. position: absolute !important;
  806. margin-top: -10px !important;
  807. margin-left: 60px !important;
  808. font-size: 13px !important;
  809. font-weight: 400 !important;
  810. }
  811. #compact_youtube_layout input[type="text"] {
  812. position: absolute !important;
  813. margin-top: -12px !important;
  814. width: 50px !important;
  815. font-size: 12px !important;
  816. font-weight: bold !important;
  817. border-radius: 3px !important;
  818. }
  819. #compact_youtube_layout input[type="checkbox"] {
  820. position: absolute !important;
  821. margin-top: -9px !important;
  822. margin-left: 19px !important;
  823. }
  824. #compact_youtube_layout button {
  825. font-size: 12px !important;
  826. }`;
  827.  
  828. var gm_frameStyle = `border: 2px solid rgb(0, 0, 0); border-radius: 6px; height: 30%; width: 30%; margin: 0px; max-height: 300px; max-width: 95%; min-height: 150px; min-width: 500px; opacity: 1; overflow: auto; padding: 0px; position: fixed; z-index: 9999; display: block;`;
  829.  
  830. GM_config.init({
  831. id: 'compact_youtube_layout',
  832. title: 'Settings for "' + GM_info.script.name + '" script',
  833. css: gm_css,
  834. frameStyle: gm_frameStyle,
  835. fields: {
  836. 'fldTWidth': {
  837. 'label': 'Width of video thumbnail (in pixels, default value 193px):',
  838. 'labelPos': 'above',
  839. 'type': 'unsigned int',
  840. 'min': 50,
  841. 'max': 300,
  842. 'default': 193
  843. },
  844. 'fldGWidth': {
  845. 'label': 'Width of videos grid (in percent, default value 80%):',
  846. 'labelPos': 'above',
  847. 'type': 'unsigned int',
  848. 'min': 20,
  849. 'max': 100,
  850. 'default': 80
  851. },
  852. 'fldRemoveHomeAvatar': {
  853. 'label': 'Home screen: Remove channel avatar',
  854. 'labelPos': 'above',
  855. 'type': 'checkbox',
  856. 'default': false
  857. },
  858. 'fldRemoveSuggested': {
  859. 'label': 'Player: Remove channel avatar, suggested videos and next videos overlay',
  860. 'labelPos': 'above',
  861. 'type': 'checkbox',
  862. 'default': true
  863. },
  864. 'fldRemoveAutoplay': {
  865. 'label': 'Player: Remove autoplay toggle',
  866. 'labelPos': 'above',
  867. 'type': 'checkbox',
  868. 'default': true
  869. }
  870. }
  871. });
  872.  
  873. GM_registerMenuCommand('Settings', () => {
  874. GM_config.open();
  875. });
  876.  
  877. var observerCombineShorts = null;
  878. const callbackCombine = function (mutationsList, observer) {
  879. }
  880.  
  881. var observerBody = null;
  882. const callbackBody = function (mutationsList, observer) {
  883. css = css.replace(/\[fldTWidth\]/g, GM_config.fields['fldTWidth'].value);
  884. css = css.replace(/\[fldGWidth\]/g, GM_config.fields['fldGWidth'].value);
  885. if (GM_config.fields['fldRemoveHomeAvatar'].value) {
  886. css = css.replace(/\[fldRemoveHomeAvatar\]/g, 'none');
  887. } else {
  888. css = css.replace(/\[fldRemoveHomeAvatar\]/g, 'initial');
  889. }
  890. if (GM_config.fields['fldRemoveSuggested'].value) {
  891. css = css.replace(/\[fldRemoveSuggested\]/g, 'none');
  892. } else {
  893. css = css.replace(/\[fldRemoveSuggested\]/g, 'initial');
  894. }
  895. if (GM_config.fields['fldRemoveAutoplay'].value) {
  896. css = css.replace(/\[fldRemoveAutoplay\]/g, 'none');
  897. } else {
  898. css = css.replace(/\[fldRemoveAutoplay\]/g, 'initial');
  899. }
  900.  
  901. if (window.location === window.parent.location) { //Do not apply fixes for embedded video
  902.  
  903. if (typeof GM_addStyle != 'undefined') {
  904. GM_addStyle(css);
  905. } else if (typeof PRO_addStyle != 'undefined') {
  906. PRO_addStyle(css);
  907. } else if (typeof addStyle != 'undefined') {
  908. addStyle(css);
  909. } else {
  910. var node = document.createElement('style');
  911. node.type = 'text/css';
  912. node.appendChild(document.createTextNode(css));
  913. document.documentElement.appendChild(node);
  914. }
  915. }
  916.  
  917. observerBody.disconnect();
  918. }
  919.  
  920. let nodeBody = document.querySelector("body");
  921. if (nodeBody != null) {
  922. observerBody = new MutationObserver(callbackBody);
  923. observerBody.observe(nodeBody, {childList: true, subtree: true, attributes: true, characterData: false});
  924. }
  925.  
  926. })();