☰

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.8
  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.6356) !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.5625) !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.5625) !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.     /*--- Change position of menu button near suggested short ---*/
  549.     ytd-watch-flexy div#secondary ytd-item-section-renderer .shortsLockupViewModelHostOutsideMetadataMenu button yt-icon {
  550.       top: -4px !important;
  551.       right: -4px !important;
  552.     }
  553.     /*--- Set margin between suggested shorts ---*/
  554.     ytd-watch-flexy div#secondary ytd-reel-shelf-renderer .shortsLockupViewModelHost {
  555.       margin-left: 0 !important;
  556.       margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  557.     }
  558.     /*--- Change size and position of left/right button of suggested shorts ---*/
  559.     ytd-watch-flexy div#secondary ytd-item-section-renderer yt-horizontal-list-renderer button yt-icon,
  560.     yt-horizontal-list-renderer .yt-horizontal-list-renderer.arrow button yt-icon {
  561.       position: unset !important;
  562.       height: unset !important;
  563.       margin-top: 3px !important;
  564.     }
  565.     /*ytd-watch-flexy div#secondary*/ ytd-item-section-renderer yt-horizontal-list-renderer ytd-button-renderer.arrow {
  566.       width: 30px !important;
  567.       height: 30px !important;
  568.     }
  569.  
  570.   /*=== Miniplayer ===*/
  571.     /*--- Make player corners less round ---*/
  572.     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),
  573.     .ytp-player-minimized .html5-main-video, .ytp-player-minimized .ytp-miniplayer-scrim, .ytp-player-minimized.html5-video-player {
  574.       border-radius: 3px 3px 0 0 !important;
  575.     }
  576.  
  577.   /*=== Search box ===*/
  578.     /*--- Make corners less round ---*/
  579.     .ytSearchboxComponentInputBox {
  580.       height: 30px !important;
  581.       border-radius: 3px 0 0 3px !important;
  582.       padding-top: 0px !important;
  583.       padding-bottom: 0px !important;
  584.     }
  585.     .ytSearchboxComponentSearchButton {
  586.       height: 32px !important;
  587.       border-radius: 0 3px 3px 0 !important;
  588.     }
  589.     /*--- Make search box smaller ---*/
  590.     /*#search-form.ytd-searchbox, #search-icon-legacy.ytd-searchbox {
  591.       height: 30px !important;
  592.     }*/
  593.     .yt-spec-button-shape-next--icon-only-default {
  594.       width: 30px !important;
  595.       height: 30px !important;
  596.     }
  597.     #voice-search-button.ytd-masthead {
  598.       margin-top: -8px !important;
  599.     }
  600.     /*--- Move box to the right ---*/
  601.     #center.ytd-masthead {
  602.       margin-right: auto !important;
  603.     }
  604.  
  605.   /*=== Search results ===*/
  606.     /*--- Remove channel avatar ---*/
  607.     ytd-search #channel-thumbnail.ytd-video-renderer {
  608.       display: none !important;
  609.     }
  610.     /*--- Decrease font size ---*/
  611.     ytd-video-renderer #dismissible h3 {
  612.       font-size: 1.3rem !important;
  613.       line-height: 1.6rem !important;
  614.       margin-bottom: 3px !important;
  615.     }
  616.     /*--- Make thumbnails smaller ---*/
  617.     #dismissible.ytd-video-renderer > ytd-thumbnail, yt-lockup-view-model .yt-lockup-view-model-wiz__content-image {
  618.       /*margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  619.       margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;*/
  620.       margin-left: 0px !important;
  621.       margin-right: calc(var(--ytd-rich-grid-item-margin)) !important;
  622.       width: [fldTWidth]px !important;
  623.     }
  624.     ytd-search #dismissible ytd-thumbnail, ytd-search #dismissible ytd-thumbnail #thumbnail.ytd-thumbnail {
  625.       height: calc([fldTWidth]px/1.6356) !important;
  626.     }
  627.     ytd-search #dismissible ytd-thumbnail img.yt-core-image--content-mode-scale-aspect-fill {
  628.       object-fit: unset !important;
  629.     }
  630.     .yt-lockup-view-model-wiz--horizontal .yt-lockup-view-model-wiz__content-image {
  631.       padding-right: 0px !important;
  632.     }
  633.     ytd-video-renderer[use-search-ui] ytd-thumbnail.ytd-video-renderer::before {
  634.       display: inline !important;
  635.     }
  636.     /*--- Make channel logo smaller ---*/
  637.     yt-img-shadow.ytd-channel-renderer {
  638.       height: 85px !important;
  639.       width: 85px !important;
  640.     }
  641.     img.yt-img-shadow {
  642.       max-height: var(--yt-img-max-height,100%) !important;
  643.     }
  644.     ytd-channel-renderer #avatar-section.ytd-channel-renderer {
  645.       margin-top: 5px !important;
  646.     }
  647.     ytd-channel-renderer #info.ytd-channel-renderer {
  648.       padding-bottom: 5px !important;
  649.       justify-content: unset !important;
  650.     }
  651.     /*--- Make list of channels more compact ---*/
  652.     #grid-container.ytd-expanded-shelf-contents-renderer > .ytd-expanded-shelf-contents-renderer:not(:last-child) {
  653.       margin-bottom: 10px !important;
  654.     }
  655.     /*--- Make shorts smaller ---*/
  656.     ytd-search .shortsLockupViewModelHostThumbnailContainerCustomDimensions {
  657.       height: calc(145px/0.5625) !important;
  658.     }
  659.     /*--- Make video name smaller ---*/
  660.     #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 {
  661.       font-size: 1.6rem !important;
  662.       font-weight: 500 !important;
  663.     }
  664.     /*--- Make metadata bigger ---*/
  665.     #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 {
  666.       font-size: 1.2rem !important;
  667.       /*font-size: 11px !important;*/
  668.     }
  669.     /*--- Align channel avatar ---*/
  670.     #avatar-section.ytd-channel-renderer {
  671.       max-width: [fldTWidth]px !important;
  672.       min-width: [fldTWidth]px !important;
  673.     }
  674.     /*--- Make bigger gap between filters and list of videos ---*/
  675.     ytd-search ytd-search-header-renderer {
  676.       margin-bottom: 20px !important;
  677.     }
  678.  
  679.   /*=== Playlists ===*/
  680.     /*--- Decrease font size ---*/
  681.     ytd-grid-renderer #details h3 {
  682.       font-size: 1.3rem !important;
  683.       line-height: 1.6rem !important;
  684.       margin-bottom: 3px !important;
  685.     }
  686.     /*--- Make thumbnail corners less round ---*/
  687.     ytd-playlist-thumbnail a.ytd-playlist-thumbnail, ytd-playlist-thumbnail::before {
  688.       border-radius: 3px !important;
  689.     }
  690.     /*--- Make thumbnails smaller ---*/
  691.     #items.ytd-grid-renderer > ytd-grid-playlist-renderer.ytd-grid-renderer {
  692.       margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  693.       margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  694.       width: [fldTWidth]px !important;
  695.     }
  696.     ytd-grid-renderer .yt-thumbnail-view-model {
  697.       margin-top: auto !important;
  698.     }
  699.     ytd-grid-renderer .collections-stack-wiz__collection-stack1--medium {
  700.       height: calc([fldTWidth]px/1.6356) !important;
  701.     }
  702.     ytd-playlist-thumbnail.ytd-grid-playlist-renderer {
  703.       width: [fldTWidth]px !important;
  704.     }
  705.     /*--- Change position of menu button under playlist ---*/
  706.     /*ytd-rich-item-renderer button.yt-spec-button-shape-next yt-icon, ytd-grid-video-renderer button.yt-icon-button > yt-icon {*/
  707.     ytd-rich-item-renderer yt-lockup-view-model button yt-icon {
  708.       top: 8px !important;
  709.       right: 5px !important;
  710.     }
  711.     .yt-thumbnail-view-model--aspect-ratio-16-by-9, .yt-thumbnail-view-model--aspect-ratio-1-by-1 {
  712.       padding-top: unset !important;
  713.     }
  714.  
  715.   /*=== List of uploads in your channel ===*/
  716.     /*--- Make thumbnails smaller ---*/
  717.     /*#items ytd-grid-video-renderer {
  718.       margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  719.       margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  720.       width: [fldTWidth]px !important;
  721.     }*/
  722.     /*ytd-thumbnail.ytd-grid-video-renderer {
  723.       width: [fldTWidth]px !important;
  724.       max-width: [fldTWidth]px !important;
  725.       min-width: [fldTWidth]px !important;
  726.       height: 118px !important;
  727.     }*/
  728.  
  729.   /*=== Community posts ===*/
  730.     /*--- Decrease font size ---*/
  731.     #content-text.ytd-backstage-post-renderer {
  732.       font-size: 13px !important;
  733.     }
  734.  
  735.   /*=== Shorts tab ===*/
  736.     /*--- Align thumbnails on top ---*/
  737.     ytd-rich-grid-slim-media > #dismissible ytd-thumbnail.ytd-rich-grid-slim-media {
  738.       vertical-align: top !important;
  739.       display: inline !important;
  740.     }
  741.     ytd-rich-grid-slim-media > #dismissible ytd-thumbnail.ytd-rich-grid-slim-media::before {
  742.       display: inline !important;
  743.     }
  744.     ytd-rich-grid-slim-media > #dismissible ytd-thumbnail #thumbnail.ytd-thumbnail {
  745.       position: relative !important;
  746.     }
  747.     ytm-shorts-lockup-view-model .shortsLockupViewModelHostOutsideMetadataMenu button yt-icon {
  748.       top: -4px !important;
  749.       right: -5px !important;
  750.     }
  751.  
  752.   /*=== Watch history ===*/
  753.     /*--- Make thumbnail height smaller ---*/
  754.     ytd-video-renderer[is-history]/* > #dismissible >*/ ytd-thumbnail > #thumbnail.ytd-thumbnail {
  755.       height: unset !important;
  756.       position: relative !important;
  757.     }
  758.     ytd-video-renderer[is-history]/*:not([use-search-ui]) > #dismissible >*/ ytd-thumbnail.ytd-video-renderer {
  759.       height: unset !important;
  760.     }
  761.     /*--- Make left margin ---*/
  762.     ytd-section-list-renderer[page-subtype="history"] #contents.ytd-section-list-renderer {
  763.       margin-left: auto !important;
  764.     }
  765.     ytd-browse[page-subtype="history"] yt-page-header-renderer {
  766.       margin-left: 100px !important;
  767.     }
  768.     /*--- Make smaller gap between header and grid of shorts ---*/
  769.     ytd-browse[page-subtype="history"] #contents.ytd-reel-shelf-renderer {
  770.       margin-top: 15px !important;
  771.     }
  772.     /*--- Set margin between shorts in a row ---*/
  773.     ytd-browse[page-subtype="history"] .shortsLockupViewModelHost {
  774.       margin-left: 0 !important;
  775.       margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;
  776.     }
  777.     /*--- Position of shorts menu button ---*/
  778.     ytd-browse[page-subtype="history"] .shortsLockupViewModelHostOutsideMetadataMenu {
  779.       right: 0px !important;
  780.     }
  781.     /*--- Decrease size of shorts menu button ---*/
  782.     ytd-browse[page-subtype="history"] .shortsLockupViewModelHostOutsideMetadataMenu button.yt-spec-button-shape-next yt-icon {
  783.       /*width: 18px !important;
  784.       height: 18px !important;*/
  785.       margin-right: 0px !important;
  786.       margin-top: 0px !important;
  787.     }
  788.   `;
  789.  
  790.   var gm_css = `
  791.   #compact_youtube_layout * {
  792.     font-family: Roboto, Arial, sans-serif !important;
  793.   }
  794.   #compact_youtube_layout .config_header {
  795.     font-size: 20px !important;
  796.     font-weight: bold !important;
  797.   }
  798.   #compact_youtube_layout .field_label {
  799.     position: absolute !important;
  800.     margin-top: -10px !important;
  801.     margin-left: 60px !important;
  802.     font-size: 13px !important;
  803.     font-weight: 400 !important;
  804.   }
  805.   #compact_youtube_layout input[type="text"] {
  806.     position: absolute !important;
  807.     margin-top: -12px !important;
  808.     width: 50px !important;
  809.     font-size: 12px !important;
  810.     font-weight: bold !important;
  811.     border-radius: 3px !important;
  812.   }
  813.   #compact_youtube_layout input[type="checkbox"] {
  814.     position: absolute !important;
  815.     margin-top: -9px !important;
  816.     margin-left: 19px !important;
  817.   }
  818.   #compact_youtube_layout button {
  819.     font-size: 12px !important;
  820.   }`;
  821.  
  822.   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;`;
  823.  
  824.   GM_config.init({
  825.     id: 'compact_youtube_layout',
  826.     title: 'Settings for "' + GM_info.script.name + '" script',
  827.     css: gm_css,
  828.     frameStyle: gm_frameStyle,
  829.     fields: {
  830.       'fldTWidth': {
  831.         'label': 'Width of video thumbnail (in pixels, default value 193px):',
  832.         'labelPos': 'above',
  833.         'type': 'unsigned int',
  834.         'min': 50,
  835.         'max': 300,
  836.         'default': 193
  837.       },
  838.       'fldGWidth': {
  839.         'label': 'Width of videos grid (in percent, default value 80%):',
  840.         'labelPos': 'above',
  841.         'type': 'unsigned int',
  842.         'min': 20,
  843.         'max': 100,
  844.         'default': 80
  845.       },
  846.       'fldRemoveHomeAvatar': {
  847.         'label': 'Home screen: Remove channel avatar',
  848.         'labelPos': 'above',
  849.         'type': 'checkbox',
  850.         'default': false
  851.       },
  852.       'fldRemoveSuggested': {
  853.         'label': 'Player: Remove channel avatar, suggested videos and next videos overlay',
  854.         'labelPos': 'above',
  855.         'type': 'checkbox',
  856.         'default': true
  857.       },
  858.       'fldRemoveAutoplay': {
  859.         'label': 'Player: Remove autoplay toggle',
  860.         'labelPos': 'above',
  861.         'type': 'checkbox',
  862.         'default': true
  863.       }
  864.     }
  865.   });
  866.  
  867.   GM_registerMenuCommand('Settings', () => {
  868.     GM_config.open();
  869.   });
  870.  
  871.   var observerCombineShorts = null;
  872.   const callbackCombine = function (mutationsList, observer) {
  873.   }
  874.  
  875.   var observerBody = null;
  876.   const callbackBody = function (mutationsList, observer) {
  877.     css = css.replace(/\[fldTWidth\]/g, GM_config.fields['fldTWidth'].value);
  878.     css = css.replace(/\[fldGWidth\]/g, GM_config.fields['fldGWidth'].value);
  879.     if (GM_config.fields['fldRemoveHomeAvatar'].value) {
  880.       css = css.replace(/\[fldRemoveHomeAvatar\]/g, 'none');
  881.     } else {
  882.       css = css.replace(/\[fldRemoveHomeAvatar\]/g, 'initial');
  883.     }
  884.     if (GM_config.fields['fldRemoveSuggested'].value) {
  885.       css = css.replace(/\[fldRemoveSuggested\]/g, 'none');
  886.     } else {
  887.       css = css.replace(/\[fldRemoveSuggested\]/g, 'initial');
  888.     }
  889.     if (GM_config.fields['fldRemoveAutoplay'].value) {
  890.       css = css.replace(/\[fldRemoveAutoplay\]/g, 'none');
  891.     } else {
  892.       css = css.replace(/\[fldRemoveAutoplay\]/g, 'initial');
  893.     }
  894.  
  895.     if (window.location === window.parent.location) { //Do not apply fixes for embedded video
  896.  
  897.       if (typeof GM_addStyle != 'undefined') {
  898.         GM_addStyle(css);
  899.       } else if (typeof PRO_addStyle != 'undefined') {
  900.         PRO_addStyle(css);
  901.       } else if (typeof addStyle != 'undefined') {
  902.         addStyle(css);
  903.       } else {
  904.         var node = document.createElement('style');
  905.         node.type = 'text/css';
  906.         node.appendChild(document.createTextNode(css));
  907.         document.documentElement.appendChild(node);
  908.       }
  909.     }
  910.  
  911.     observerBody.disconnect();
  912.   }
  913.  
  914.   let nodeBody = document.querySelector("body");
  915.   if (nodeBody != null) {
  916.     observerBody = new MutationObserver(callbackBody);
  917.     observerBody.observe(nodeBody, {childList: true, subtree: true, attributes: true, characterData: false});
  918.   }
  919.  
  920. })();