Greasy Fork is available in English.

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.0.11
  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. /*--- Decrease font size of video name ---*/
  56. #video-title.ytd-rich-grid-media, #video-title.ytd-rich-grid-slim-media,
  57. .yt-lockup-metadata-view-model-wiz--compact .yt-lockup-metadata-view-model-wiz__title,
  58. ytm-shorts-lockup-view-model h3 { /*Name of playlist*/
  59. font-size: 1.3rem !important;
  60. line-height: 1.6rem !important;
  61. font-weight: 500 !important;
  62. margin-top: 2px !important;
  63. padding-right: 10px !important;
  64. }
  65. ytm-shorts-lockup-view-model h3 {
  66. min-height: unset !important;
  67. }
  68. /*--- Decrease gap between thumbnails ---*/
  69. h3.ytd-rich-grid-media {
  70. margin: 2px 0 4px 0 !important;
  71. }
  72. h3.ytd-rich-grid-slim-media {
  73. padding: 2px 24px 0 0 !important;
  74. }
  75. /*--- Remove avatars ---*/
  76. #avatar-container {
  77. display: [fldRemoveHomeAvatar] !important;
  78. }
  79. /*--- Decrease font size of latest posts name ---*/
  80. ytd-post-renderer[uses-compact-lockup] #home-content-text.ytd-post-renderer {
  81. font-size: 1.3rem !important;
  82. line-height: 1.6rem !important;
  83. }
  84. /*--- Make more space before and less space after header for Shorts and Latest posts ---*/
  85. #content #rich-shelf-header h2.ytd-rich-shelf-renderer {
  86. margin-top: 30px !important;
  87. margin-bottom: -10px !important;
  88. }
  89. /*--- Move some videos to the position before Shorts ---*/
  90. ytd-rich-grid-renderer > div#contents > ytd-rich-item-renderer:nth-child(-n+14) {
  91. order: -1 !important;
  92. }
  93.  
  94. /*=== Menu ===*/
  95. /*--- Change background color and make selection rectangle less round ---*/
  96. 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 {
  97. background-color: #f00 !important;
  98. border-radius: 3px !important;
  99. }
  100. html:not([dark]) ytd-guide-entry-renderer[active] .title.ytd-guide-entry-renderer {
  101. color: #fff !important;
  102. }
  103. html:not([dark]) ytd-guide-entry-renderer:not([active]) > #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover {
  104. background-color: #ccc !important;
  105. border-radius: 3px !important;
  106. }
  107. /*--- Decrease font size ---*/
  108. .title.ytd-guide-entry-renderer {
  109. font-size: 13px !important;
  110. }
  111. /*--- Decrease height of menu item ---*/
  112. #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer {
  113. min-height: 25px !important;
  114. max-height: 30px !important;
  115. }
  116.  
  117. /*=== Notifications ===*/
  118. /*--- Decrease font size ---*/
  119. .message.ytd-notification-renderer, ytd-commentbox yt-formatted-string#contenteditable-textarea.ytd-commentbox {
  120. font-size: 1.3rem !important;
  121. line-height: 1.6rem !important;
  122. }
  123.  
  124. /*=== Thumbnails ==*/
  125. /*--- Correct overlay data ---*/
  126. ytd-thumbnail-overlay-resume-playback-renderer:not(.foo) {
  127. display: block !important;
  128. opacity: 1 !important;
  129. background: rgba(0, 0, 0, 0) !important;
  130. transition: all 0s ease 0s !important;
  131. z-index: 9 !important;
  132. }
  133. /*--- Correct progress bar ---*/
  134. #progress.ytd-thumbnail-overlay-resume-playback-renderer:not(.foo) {
  135. display: block !important;
  136. background-color: red !important;
  137. opacity: 1 !important;
  138. }
  139. /*--- Correct video duration background ---*/
  140. ytd-thumbnail-overlay-resume-playback-renderer:hover:not(.foo) {
  141. height: inherit !important;
  142. opacity: 1 !important;
  143. }
  144. ytd-app ytd-thumbnail-overlay-time-status-renderer:not(.foo) {
  145. font-size: 12px !important;
  146. height: 12px !important;
  147. line-height: 12px !important;
  148. opacity: 1 !important;
  149. padding: 5px 4px !important;
  150. }
  151. #scroll-container.yt-horizontal-list-renderer ytd-thumbnail-overlay-time-status-renderer:not(.foo) {
  152. top: auto !important;
  153. }
  154. /*--- Make thumbnail corners less round ---*/
  155. ytd-thumbnail[size="large"] a.ytd-thumbnail, ytd-thumbnail[size="large"]::before, .yt-thumbnail-view-model--medium, .shortsLockupViewModelHostThumbnailContainerRounded {
  156. border-radius: 3px !important;
  157. }
  158. /*--- Set thumbnail width in search results ---*/
  159. 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 {
  160. max-width: [fldTWidth]px !important;
  161. min-width: [fldTWidth]px !important;
  162. margin-left: 8px !important;
  163. margin-right: 8px !important;
  164. }
  165.  
  166. /*=== Grid of videos ===*/
  167. /*--- Decrease width of each thumbnail ---*/
  168. ytd-rich-grid-row.style-scope.ytd-rich-grid-renderer > div > ytd-rich-item-renderer {
  169. display: inline-block !important;
  170. width: [fldTWidth]px !important;
  171. contain: none !important;
  172. }
  173. div#contents > ytd-rich-item-renderer ytd-rich-grid-media.ytd-rich-item-renderer, div#contents > ytd-rich-item-renderer[rendered-from-rich-grid] {
  174. max-width: [fldTWidth]px !important;
  175. width: [fldTWidth]px !important;
  176. }
  177. /*--- Decrease size of channel logo ---*/
  178. #avatar-container.ytd-rich-grid-media {
  179. height: 20px !important;
  180. margin-top: 5px !important;
  181. margin-right: 8px !important;
  182. }
  183. .yt-spec-avatar-shape--avatar-size-medium {
  184. margin: 0px !important;
  185. width: 23px !important;
  186. height: 23px !important;
  187. }
  188. .yt-spec-avatar-shape__button--button-medium {
  189. width: 20px !important;
  190. height: 20px !important;
  191. }
  192. /*--- Decrease size of menu button and shift it to the right ---*/
  193. ytd-menu-renderer .ytd-menu-renderer[style-target="button"] {
  194. --yt-icon-button-icon-width: 18px !important;
  195. --yt-icon-button-icon-height: 18px !important;
  196. width: unset !important;
  197. height: unset !important;
  198. }
  199. ytm-shorts-lockup-view-model button.yt-spec-button-shape-next yt-icon {
  200. width: 18px !important;
  201. height: 18px !important;
  202. }
  203. ytd-menu-renderer.ytd-rich-grid-media {
  204. right: -5px !important;
  205. }
  206. ytm-shorts-lockup-view-model button.yt-spec-button-shape-next {
  207. width: 10px !important;
  208. }
  209. /*--- Increase width for title name ---*/
  210. ytm-shorts-lockup-view-model .shortsLockupViewModelHostOutsideMetadata {
  211. padding-right: 22px !important;
  212. }
  213.  
  214. /*--- Decrease width of each shorts thumbnail ---*/
  215. ytd-rich-shelf-renderer[is-shorts] > #dismissible > div > ytd-rich-item-renderer:not(.foo), div#contents > ytd-rich-item-renderer[is-shorts-grid], div#contents > ytd-rich-item-renderer[is-slim-media] {
  216. display: inline-block !important;
  217. width: 145px !important;
  218. contain: none !important;
  219. }
  220. /*--- Decrease width of shorts thumbnail at home tab ---*/
  221. #scroll-container > #items > ytd-reel-item-renderer {
  222. width: 145px !important;
  223. margin-right: calc(var(--ytd-rich-grid-item-margin)) !important;
  224. }
  225. /*--- Make more videos in one row ---*/
  226. ytd-rich-grid-row.style-scope.ytd-rich-grid-renderer {
  227. display: inline !important;
  228. }
  229. /*div#contents.style-scope.ytd-rich-grid-renderer {
  230. display: block !important;
  231. }*/
  232. ytd-rich-grid-row.style-scope.ytd-rich-grid-renderer > div {
  233. display: inline !important;
  234. margin: 0 !important;
  235. }
  236. /*--- Set margin between videos in a row ---*/
  237. ytd-rich-item-renderer, ytd-rich-item-renderer[is-slim-grid]:first-of-type, ytd-rich-item-renderer[is-slim-grid]:last-of-type {
  238. /*margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  239. margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;*/
  240. margin-left: 0 !important;
  241. margin-right: calc(var(--ytd-rich-grid-item-margin)) !important;
  242. }
  243. /*--- Set height of each row ---*/
  244. ytd-rich-item-renderer {
  245. margin-bottom: 12px !important;
  246. }
  247. /*--- Set height of each row of playlists (make extra space above for thumbnails stack) ---*/
  248. ytd-rich-item-renderer[items-per-row="4"] {
  249. margin-top: 10px !important;
  250. }
  251. /*--- Font size for channel name and views count ---*/
  252. 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,
  253. ytm-shorts-lockup-view-model > div > div {
  254. font-size: 11px !important;
  255. line-height: 1.4rem !important;
  256. }
  257. /*--- Font size for playlist details ---*/
  258. .yt-content-metadata-view-model-wiz--medium-text .yt-content-metadata-view-model-wiz__metadata-text,
  259. .yt-content-metadata-view-model-wiz .yt-content-metadata-view-model-wiz__metadata-text {
  260. font-size: 11.5px !important;
  261. line-height: 1.4rem !important;
  262. white-space: wrap !important;
  263. }
  264. .yt-lockup-view-model-wiz__metadata {
  265. padding-right: 24px !important;
  266. }
  267. /*--- No padding under playlist thumbnail ---*/
  268. .yt-lockup-view-model-wiz--vertical .yt-lockup-view-model-wiz__content-image {
  269. padding-bottom: 0px !important;
  270. }
  271.  
  272. /*=== Main player ===*/
  273. /*--- Make player corners less round ---*/
  274. ytd-watch-flexy #ytd-player.ytd-watch-flexy {
  275. border-radius: 3px !important;
  276. }
  277. ytd-thumbnail a.ytd-thumbnail, ytd-thumbnail::before, .yt-video-attribute-view-model--image-large .yt-video-attribute-view-model__hero-section,
  278. #playlist-thumbnail.ytd-structured-description-playlist-lockup-renderer, .player-container.ytd-reel-video-renderer {
  279. border-radius: 3px !important;
  280. }
  281. /*--- Remove channel avatar, suggested videos and next videos overlay ---*/
  282. 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 {
  283. display: [fldRemoveSuggested] !important;
  284. }
  285. /*--- Remove autoplay and miniplayer buttons ---*/
  286. .ytp-chrome-controls button[data-tooltip-target-id="ytp-autonav-toggle-button"], .ytp-chrome-controls button.ytp-miniplayer-button {
  287. display: none !important;
  288. }
  289. /*--- Make player icons smaller ---*/
  290. .ytp-chrome-bottom {
  291. height: 35px !important;
  292. padding-top: 0px !important;
  293. }
  294. .ytp-chrome-controls {
  295. height: 35px !important;
  296. line-height: 35px !important;
  297. font-size: 90%;
  298. }
  299. #player #movie_player .ytp-chrome-bottom .ytp-progress-bar-container {
  300. bottom: 36px !important;
  301. }
  302. .ytp-chrome-controls button {
  303. margin-left: -4px !important;
  304. margin-right: -4px !important;
  305. }
  306. /*--- Correct size of volume button ---*/
  307. .ytp-left-controls > .ytp-volume-area > button {
  308. height: 45px !important;
  309. margin-top: -5px !important;
  310. }
  311. /*--- Correct font size of time display ---*/
  312. .ytp-chrome-controls .ytp-time-display {
  313. font-size: 120% !important;
  314. line-height: 35px !important;
  315. }
  316. /*--- Correct font size of chapters ---*/
  317. ytd-horizontal-card-list-renderer #endpoint h4 {
  318. font-size: 13px !important;
  319. line-height: 1.3em !important;
  320. }
  321. /*--- Correct font size of description, comments ---*/
  322. ytd-text-inline-expander, #content-text.ytd-comment-renderer, #content-text.ytd-comment-view-model, #expander.ytd-comment-replies-renderer /*#content.ytd-expander*/,
  323. #message.ytd-message-renderer, .more-button.ytd-comment-renderer, .less-button.ytd-comment-renderer {
  324. font-size: 13px !important;
  325. line-height: 1.3em !important;
  326. letter-spacing: 0 !important;
  327. }
  328. .yt-spec-button-shape-next {
  329. font-size: 13px !important;
  330. }
  331. /*--- Correct font size of Translate, Show more and Show less buttons ---*/
  332. ytd-comment-thread-renderer tp-yt-paper-button, .more-button, .less-button {
  333. font-size: 12px !important;
  334. line-height: 1.3em !important;
  335. letter-spacing: 0 !important;
  336. }
  337. /*--- Make like/dislike buttons in comments smaller ---*/
  338. #like-button yt-button-shape yt-icon, #dislike-button yt-button-shape yt-icon {
  339. width: 18px !important;
  340. height: 18px !important;
  341. }
  342. /*--- Make size of other buttons in description and comments smaller ---*/
  343. div#description-inner .yt-spec-button-shape-next, .ytd-comments div#contents .yt-spec-button-shape-next {
  344. height: 26px;
  345. }
  346. /*--- Correct creator's comment ---*/
  347. ytd-comment-replies-renderer #creator-thumbnail.ytd-comment-replies-renderer yt-img-shadow.ytd-comment-replies-renderer {
  348. width: 18px !important;
  349. height: 18px !important;
  350. }
  351. /*--- Correct font size of suggested videos ---*/
  352. /*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 {
  353. font-size: 12px !important;
  354. line-height: 1.4rem !important;
  355. }
  356. 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 {
  357. /*font-size: 14px !important;*/
  358. line-height: 1.1 !important;
  359. }
  360. /*--- Remove "Infocards" section from video description --*/
  361. div#description #items > ytd-video-description-infocards-section-renderer {
  362. display: none !important;
  363. }
  364. /*--- Remove "Music" section from video description --*/
  365. div#description #items > ytd-horizontal-card-list-renderer {
  366. display: none !important;
  367. }
  368. /*--- Remove "Shorts remixing this video" section from video description --*/
  369. div#description #items > ytd-reel-shelf-renderer {
  370. display: none !important;
  371. }
  372. /*--- Remove "People mentioned" section from video description --*/
  373. div#description #items > yt-video-attributes-section-view-model {
  374. display: none !important;
  375. }
  376. /*--- Remove text around "Show transcript" button ---*/
  377. div#description #items > ytd-video-description-transcript-section-renderer > #header, #items > ytd-video-description-transcript-section-renderer > #sub-header {
  378. display: none !important;
  379. }
  380.  
  381. /*=== Miniplayer ===*/
  382. /*--- Make player corners less round ---*/
  383. 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),
  384. .ytp-player-minimized .html5-main-video, .ytp-player-minimized .ytp-miniplayer-scrim, .ytp-player-minimized.html5-video-player {
  385. border-radius: 3px 3px 0 0 !important;
  386. }
  387.  
  388. /*=== Search box ===*/
  389. /*--- Make corners less round ---*/
  390. #container.ytd-searchbox {
  391. border-radius: 3px 0 0 3px !important;
  392. }
  393. #search-icon-legacy.ytd-searchbox {
  394. border-radius: 0 3px 3px 0 !important;
  395. }
  396. /*--- Make search box smaller ---*/
  397. #search-form.ytd-searchbox, #search-icon-legacy.ytd-searchbox {
  398. height: 30px !important;
  399. }
  400. .yt-spec-button-shape-next--icon-only-default {
  401. width: 30px !important;
  402. height: 30px !important;
  403. }
  404. /*--- Move box to the right ---*/
  405. #center.ytd-masthead {
  406. margin-right: auto !important;
  407. }
  408.  
  409. /*=== Search results ===*/
  410. /*--- Remove channel avatar ---*/
  411. ytd-search #channel-thumbnail.ytd-video-renderer {
  412. display: none !important;
  413. }
  414. /*--- Decrease font size ---*/
  415. ytd-video-renderer #dismissible h3 {
  416. font-size: 1.3rem !important;
  417. line-height: 1.6rem !important;
  418. margin-bottom: 3px !important;
  419. }
  420. /*--- Make thumbnails smaller ---*/
  421. #dismissible.ytd-video-renderer > ytd-thumbnail, yt-lockup-view-model .yt-lockup-view-model-wiz__content-image {
  422. margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  423. margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  424. width: [fldTWidth]px !important;
  425. }
  426. .yt-lockup-view-model-wiz--horizontal .yt-lockup-view-model-wiz__content-image {
  427. padding-right: 0px !important;
  428. }
  429. ytd-video-renderer[use-search-ui] ytd-thumbnail.ytd-video-renderer::before {
  430. display: inline !important;
  431. }
  432. /*--- Make video name smaller ---*/
  433. #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 {
  434. font-size: 1.6rem !important;
  435. font-weight: 500 !important;
  436. }
  437. /*--- Make metadata bigger ---*/
  438. #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 {
  439. font-size: 1.2rem !important;
  440. /*font-size: 11px !important;*/
  441. }
  442.  
  443. /*=== Playlists ===*/
  444. /*--- Decrease font size ---*/
  445. ytd-grid-renderer #details h3 {
  446. font-size: 1.3rem !important;
  447. line-height: 1.6rem !important;
  448. margin-bottom: 3px !important;
  449. }
  450. /*--- Make thumbnail corners less round ---*/
  451. ytd-playlist-thumbnail a.ytd-playlist-thumbnail, ytd-playlist-thumbnail::before {
  452. border-radius: 3px !important;
  453. }
  454. /*--- Make thumbnails smaller ---*/
  455. #items.ytd-grid-renderer > ytd-grid-playlist-renderer.ytd-grid-renderer {
  456. margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  457. margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  458. width: [fldTWidth]px !important;
  459. }
  460. ytd-playlist-thumbnail.ytd-grid-playlist-renderer {
  461. width: [fldTWidth]px !important;
  462. }
  463.  
  464. /*=== List of uploads in your channel ===*/
  465. /*--- Make thumbnails smaller ---*/
  466. #items ytd-grid-video-renderer {
  467. margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  468. margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  469. width: [fldTWidth]px !important;
  470. }
  471. ytd-thumbnail.ytd-grid-video-renderer {
  472. width: [fldTWidth]px !important;
  473. height: 118px !important;
  474. }
  475.  
  476. /*=== Community posts ===*/
  477. /*--- Decrease font size ---*/
  478. #content-text.ytd-backstage-post-renderer {
  479. font-size: 13px !important;
  480. }
  481.  
  482. /*=== Shorts tab ===*/
  483. /*--- Align thumbnails on top ---*/
  484. ytd-rich-grid-slim-media > #dismissible ytd-thumbnail.ytd-rich-grid-slim-media {
  485. vertical-align: top !important;
  486. display: inline !important;
  487. }
  488. ytd-rich-grid-slim-media > #dismissible ytd-thumbnail.ytd-rich-grid-slim-media::before {
  489. display: inline !important;
  490. }
  491. ytd-rich-grid-slim-media > #dismissible ytd-thumbnail #thumbnail.ytd-thumbnail {
  492. position: relative !important;
  493. }
  494.  
  495. /*=== History ===*/
  496. /*--- Make thumbnail height smaller ---*/
  497. ytd-video-renderer > #dismissible > ytd-thumbnail > #thumbnail.ytd-thumbnail {
  498. height: unset !important;
  499. position: relative !important;
  500. }
  501. ytd-video-renderer:not([use-search-ui]) > #dismissible > ytd-thumbnail.ytd-video-renderer {
  502. height: unset !important;
  503. }
  504. `;
  505.  
  506. var gm_css = `
  507. #compact_youtube_layout * {
  508. font-family: Roboto, Arial, sans-serif !important;
  509. }
  510. #compact_youtube_layout .config_header {
  511. font-size: 20px !important;
  512. font-weight: bold !important;
  513. }
  514. #compact_youtube_layout .field_label {
  515. font-size: 13px !important;
  516. font-weight: 400 !important;
  517. }
  518. #compact_youtube_layout input[type="text"] {
  519. width: 50px !important;
  520. font-size: 12px !important;
  521. font-weight: bold !important;
  522. border-radius: 3px !important;
  523. }
  524. #compact_youtube_layout button {
  525. font-size: 12px !important;
  526. }`;
  527.  
  528. var gm_frameStyle = `border: 2px solid rgb(0, 0, 0); border-radius: 6px; height: 50%; width: 30%; margin: 0px; max-height: 300px; max-width: 95%; min-height: 200px; min-width: 500px; opacity: 1; overflow: auto; padding: 0px; position: fixed; z-index: 9999; display: block;`;
  529.  
  530. GM_config.init({
  531. id: 'compact_youtube_layout',
  532. title: 'Settings for "' + GM_info.script.name + '" script',
  533. css: gm_css,
  534. frameStyle: gm_frameStyle,
  535. fields: {
  536. 'fldTWidth': {
  537. 'label': 'Width of video thumbnail (in pixels, default value 193px):',
  538. 'labelPos': 'above',
  539. 'type': 'unsigned int',
  540. 'min': 50,
  541. 'max': 300,
  542. 'default': 193
  543. },
  544. 'fldGWidth': {
  545. 'label': 'Width of videos grid (in percent, default value 80%):',
  546. 'labelPos': 'above',
  547. 'type': 'unsigned int',
  548. 'min': 20,
  549. 'max': 100,
  550. 'default': 80
  551. },
  552. 'fldRemoveHomeAvatar': {
  553. 'label': 'Home screen: Remove channel avatar',
  554. 'labelPos': 'above',
  555. 'type': 'checkbox',
  556. 'default': false
  557. },
  558. 'fldRemoveSuggested': {
  559. 'label': 'Player: Remove channel avatar, suggested videos and next videos overlay',
  560. 'labelPos': 'above',
  561. 'type': 'checkbox',
  562. 'default': true
  563. }
  564. }
  565. });
  566.  
  567. GM_registerMenuCommand('Settings', () => {
  568. GM_config.open();
  569. });
  570.  
  571. var observerCombineShorts = null;
  572. const callbackCombine = function (mutationsList, observer) {
  573. }
  574.  
  575. var observerBody = null;
  576. const callbackBody = function (mutationsList, observer) {
  577. css = css.replace(/\[fldTWidth\]/g, GM_config.fields['fldTWidth'].value);
  578. css = css.replace(/\[fldGWidth\]/g, GM_config.fields['fldGWidth'].value);
  579. if (GM_config.fields['fldRemoveHomeAvatar'].value) {
  580. css = css.replace(/\[fldRemoveHomeAvatar\]/g, 'none');
  581. } else {
  582. css = css.replace(/\[fldRemoveHomeAvatar\]/g, 'initial');
  583. }
  584. if (GM_config.fields['fldRemoveSuggested'].value) {
  585. css = css.replace(/\[fldRemoveSuggested\]/g, 'none');
  586. } else {
  587. css = css.replace(/\[fldRemoveSuggested\]/g, 'initial');
  588. }
  589.  
  590. if (window.location === window.parent.location) { //Do not apply fixes for embedded video
  591.  
  592. if (typeof GM_addStyle != 'undefined') {
  593. GM_addStyle(css);
  594. } else if (typeof PRO_addStyle != 'undefined') {
  595. PRO_addStyle(css);
  596. } else if (typeof addStyle != 'undefined') {
  597. addStyle(css);
  598. } else {
  599. var node = document.createElement('style');
  600. node.type = 'text/css';
  601. node.appendChild(document.createTextNode(css));
  602. document.documentElement.appendChild(node);
  603. }
  604. }
  605.  
  606. observerBody.disconnect();
  607. }
  608.  
  609. let nodeBody = document.querySelector("body");
  610. if (nodeBody != null) {
  611. observerBody = new MutationObserver(callbackBody);
  612. observerBody.observe(nodeBody, {childList: true, subtree: true, attributes: true, characterData: false});
  613. }
  614.  
  615. })();