Greasy Fork

// ==UserScript==// @name          Compact Youtube layout// @description   Corrections to UI of youtube.com: trying to make it more compact like in good old times// @author        MK// @namespace     max44// @homepage      https://gfork.dahi.icu/en/users/309172-max44// @match         *://*.youtube.com/*// @match         *://*.youtu.be/*// @icon          https://cdn.icon-icons.com/icons2/1488/PNG/512/5295-youtube-i_102568.png// @version       1.0.12// @license       MIT// @require       https://openuserjs.org/src/libs/sizzle/GM_config.js// @grant         GM_getValue// @grant         GM_setValue// @grant         GM_deleteValue// @grant         GM_addStyle// @grant         GM_registerMenuCommand// @run-at        document-idle// ==/UserScript==(function() {'use strict';var css = `/*=== Home screen ===*//*--- Make list of videos narrower and align it to center ---*/ytd-two-column-browse-r###lts-renderer.grid > #primary {width: 80% !important;max-width: 80% !important;}ytd-rich-grid-renderer.ytd-two-column-browse-r###lts-renderer {margin: 0 0 !important;}ytd-two-column-browse-r###lts-renderer.grid {justify-content: center !important;}/*--- Remove width for channel's grid of videos ---*/ytd-two-column-browse-r###lts-renderer.grid:not(.grid-disabled) {max-width: 100% !important;}ytd-two-column-browse-r###lts-renderer.grid-6-columns:not(.foo), .grid-6-columns.ytd-two-column-browse-r###lts-renderer {max-width: 100% !important;width: 100% !important;}/*--- Decrease font size of video name ---*/#video-title.ytd-rich-grid-media, #video-title.ytd-rich-grid-slim-media,.yt-lockup-metadata-view-model-wiz--compact .yt-lockup-metadata-view-model-wiz__title { /*Name of playlist*/font-size: 1.3rem !important;line-height: 1.6rem !important;font-weight: 500 !important;max-height: 3.6rem !important;margin-top: 2px !important;padding-right: 10px !important;}/*--- Decrease gap between thumbnails ---*/h3.ytd-rich-grid-media {margin: 2px 0 4px 0 !important;}h3.ytd-rich-grid-slim-media {padding: 2px 24px 0 0 !important;}/*--- Remove avatars ---*/#avatar-link.ytd-rich-grid-media {display: none !important;}/*--- Decrease font size of latest posts name ---*/ytd-post-renderer[uses-compact-lockup] #home-content-text.ytd-post-renderer {font-size: 1.3rem !important;line-height: 1.6rem !important;}/*--- Make more space before and less space after header for Shorts and Latest posts ---*/#content #rich-shelf-header h2.ytd-rich-shelf-renderer {margin-top: 30px !important;margin-bottom: -10px !important;}/*--- Move some videos to the position before Shorts ---*/ytd-rich-grid-renderer > div#contents > ytd-rich-item-renderer:nth-child(-n+14) {order: -1 !important;}/*=== Menu ===*//*--- Change background color and make selection rectangle less round ---*/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 {background-color: #f00 !important;border-radius: 3px !important;}html:not([dark]) ytd-guide-entry-renderer[active] .title.ytd-guide-entry-renderer {color: #fff !important;}html:not([dark]) ytd-guide-entry-renderer:not([active]) > #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover {background-color: #ccc !important;border-radius: 3px !important;}/*--- Decrease font size ---*/.title.ytd-guide-entry-renderer {font-size: 13px !important;}/*--- Decrease height of menu item ---*/#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer {min-height: 25px !important;max-height: 30px !important;}/*=== Notifications ===*//*--- Decrease font size ---*/.message.ytd-notification-renderer, ytd-commentbox yt-formatted-string#contenteditable-textarea.ytd-commentbox {font-size: 1.3rem !important;line-height: 1.6rem !important;}/*=== Thumbnails ==*//*--- Correct overlay data ---*/ytd-thumbnail-overlay-r###me-playback-renderer:not(.foo) {display: block !important;opacity: 1 !important;background: rgba(0, 0, 0, 0) !important;transition: all 0s ease 0s !important;z-index: 9 !important;}/*--- Correct progress bar ---*/#progress.ytd-thumbnail-overlay-r###me-playback-renderer:not(.foo) {display: block !important;background-color: red !important;opacity: 1 !important;}/*--- Correct video duration background ---*/ytd-thumbnail-overlay-r###me-playback-renderer:hover:not(.foo) {height: inherit !important;opacity: 1 !important;}ytd-app ytd-thumbnail-overlay-time-status-renderer:not(.foo) {font-size: 12px !important;height: 12px !important;line-height: 12px !important;opacity: 1 !important;padding: 5px 4px !important;}#scroll-container.yt-horizontal-list-renderer ytd-thumbnail-overlay-time-status-renderer:not(.foo) {top: auto !important;}/*--- Make thumbnail corners less round ---*/ytd-thumbnail[size="large"] a.ytd-thumbnail, ytd-thumbnail[size="large"]::before, .yt-thumbnail-view-model--medium {border-radius: 3px !important;}/*--- Set thumbnail width in search r###lts ---*/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 {max-width: 193px !important;min-width: 193px !important;margin-left: 8px !important;margin-right: 8px !important;}/*=== Grid of videos ===*//*--- Decrease width of each thumbnail ---*/ytd-rich-grid-row.style-scope.ytd-rich-grid-renderer > div > ytd-rich-item-renderer {display: inline-block !important;width: 193px !important;contain: none !important;}div#contents > ytd-rich-item-renderer ytd-rich-grid-media.ytd-rich-item-renderer, div#contents > ytd-rich-item-renderer[rendered-from-rich-grid] {max-width: 193px !important;width: 193px !important;}/*--- Decrease size of channel logo ---*/#avatar-container.ytd-rich-grid-media {height: 20px !important;margin-top: 5px !important;margin-right: 8px !important;}.yt-spec-avatar-shape--avatar-size-medium {margin: 0px !important;width: 23px !important;height: 23px !important;}.yt-spec-avatar-shape__button--button-medium {width: 20px;height: 20px;}/*--- Decrease size of menu button ---*/ytd-menu-renderer .ytd-menu-renderer[style-target="button"] {--yt-icon-button-icon-width: 18px !important;--yt-icon-button-icon-height: 18px !important;width: unset !important;height: unset !important;}ytd-menu-renderer.ytd-rich-grid-media {right: -5px !important;}/*--- Decrease width of each shorts thumbnail ---*/ytd-rich-shelf-renderer[is-shorts] > #dismissible > div > ytd-rich-item-renderer:not(.foo), div#contents > ytd-rich-item-renderer[is-shorts-grid] {display: inline-block !important;width: 145px !important;contain: none !important;}/*--- Decrease width of shorts thumbnail at home tab ---*/#scroll-container > #items > ytd-reel-item-renderer {width: 145px !important;margin-right: calc(var(--ytd-rich-grid-item-margin)) !important;}/*--- Make more videos in one row ---*/ytd-rich-grid-row.style-scope.ytd-rich-grid-renderer {display: inline !important;}/*div#contents.style-scope.ytd-rich-grid-renderer {display: block !important;}*/ytd-rich-grid-row.style-scope.ytd-rich-grid-renderer > div {display: inline !important;margin: 0 !important;}/*--- Set margin between videos in a row ---*/ytd-rich-item-renderer, ytd-rich-item-renderer[is-slim-grid]:first-of-type, ytd-rich-item-renderer[is-slim-grid]:last-of-type {/*margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;*/margin-left: 0 !important;margin-right: calc(var(--ytd-rich-grid-item-margin)) !important;}/*--- Set height of each row ---*/ytd-rich-item-renderer {margin-bottom: 12px !important;}/*--- Set height of each row of playlists (make extra space above for thumbnails stack) ---*/ytd-rich-item-renderer[items-per-row="4"] {margin-top: 10px !important;}/*--- Font size for channel name and views count ---*/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 {font-size: 11px !important;line-height: 1.4rem !important;}/*--- Font size for playlist details ---*/.yt-content-metadata-view-model-wiz--medium-text .yt-content-metadata-view-model-wiz__metadata-text,.yt-content-metadata-view-model-wiz .yt-content-metadata-view-model-wiz__metadata-text {font-size: 11.5px !important;line-height: 1.4rem !important;white-space: wrap !important;}.yt-lockup-view-model-wiz__metadata {padding-right: 24px !important;}/*--- No padding under playlist thumbnail ---*/.yt-lockup-view-model-wiz--vertical .yt-lockup-view-model-wiz__content-image {padding-bottom: 0px !important;}/*=== Main player ===*//*--- Make player conrers less round ---*/ytd-watch-flexy #ytd-player.ytd-watch-flexy {border-radius: 3px !important;}ytd-thumbnail a.ytd-thumbnail, ytd-thumbnail::before, .yt-video-attribute-view-model--image-large .yt-video-attribute-view-model__hero-section, #playlist-thumbnail.ytd-structured-description-playlist-lockup-renderer {border-radius: 3px !important;}/*--- Remove channel avatar, suggested videos and next videos overlay ---*/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 {display: none !important;}/*--- Remove autoplay and miniplayer buttons ---*/.ytp-chrome-controls button[data-tooltip-target-id="ytp-autonav-toggle-button"], .ytp-chrome-controls button.ytp-miniplayer-button {display: none !important;}/*--- Make player icons smaller ---*/.ytp-chrome-bottom {height: 35px !important;padding-top: 0px !important;}.ytp-chrome-controls {height: 35px !important;line-height: 35px !important;font-size: 90%;}#player #movie_player .ytp-chrome-bottom .ytp-progress-bar-container {bottom: 36px !important;}.ytp-chrome-controls button {margin-left: -4px !important;margin-right: -4px !important;}/*--- Correct size of volume button ---*/.ytp-left-controls > .ytp-volume-area > button {height: 45px !important;margin-top: -5px !important;}/*--- Correct font size of time display ---*/.ytp-chrome-controls .ytp-time-display {font-size: 120% !important;line-height: 35px !important;}/*--- Correct font size of chapters ---*/ytd-horizontal-card-list-renderer #endpoint h4 {font-size: 13px !important;line-height: 1.3em !important;}/*--- Correct font size of description, comments ---*/ytd-text-inline-expander, #content-text.ytd-comment-renderer, #content-text.ytd-comment-view-model, #expander.ytd-comment-replies-renderer /*#content.ytd-expander*/,#message.ytd-message-renderer, .more-button.ytd-comment-renderer, .less-button.ytd-comment-renderer {font-size: 13px !important;line-height: 1.3em !important;letter-spacing: 0 !important;}.yt-spec-button-shape-next {font-size: 13px !important;}/*--- Correct font size of trnslate button ---*/ytd-comment-thread-renderer tp-yt-paper-button {font-size: 12px !important;line-height: 1.3em !important;letter-spacing: 0 !important;}/*--- Make like/dislike buttons in comments smaller ---*/#like-button yt-button-shape yt-icon, #dislike-button yt-button-shape yt-icon {width: 18px !important;height: 18px !important;}/*--- Make size of other buttons in description and comments smaller ---*/div#description-inner .yt-spec-button-shape-next, .ytd-comments div#contents .yt-spec-button-shape-next {height: 26px;}/*--- Correct creator's comment ---*/ytd-comment-replies-renderer #creator-thumbnail.ytd-comment-replies-renderer yt-img-shadow.ytd-comment-replies-renderer {width: 18px !important;height: 18px !important;}/*--- Correct font size of suggested videos ---*//*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 {font-size: 12px !important;line-height: 1.4rem !important;}ytd-app #video-title[class*="renderer"], ytd-compact-video-renderer #video-title.ytd-compact-video-renderer, ytd-two-column-search-r###lts-renderer #channel-title .ytd-channel-name {/*font-size: 14px !important;*/line-height: 1.1 !important;}/*--- Remove "Infocards" section from video description --*/#items > ytd-video-description-infocards-section-renderer {display: none !important;}/*--- Remove "Music" section from video description --*/#items > ytd-horizontal-card-list-renderer {display: none !important;}/*--- Remove "Shorts remixing this video" section from video description --*/#items > ytd-reel-shelf-renderer {display: none !important;}/*--- Remove text around "Show transcript" button ---*/#items > ytd-video-description-transcript-section-renderer > #header, #items > ytd-video-description-transcript-section-renderer > #sub-header {display: none !important;}/*=== Miniplayer ===*//*--- Make player corners less round ---*/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),.ytp-player-minimized .html5-main-video, .ytp-player-minimized .ytp-miniplayer-scrim, .ytp-player-minimized.html5-video-player {border-radius: 3px 3px 0 0 !important;}/*=== Search box ===*//*--- Make corners less round ---*/#container.ytd-searchbox {border-radius: 3px 0 0 3px !important;}#search-icon-legacy.ytd-searchbox {border-radius: 0 3px 3px 0 !important;}/*--- Make search box smaller ---*/#search-form.ytd-searchbox, #search-icon-legacy.ytd-searchbox {height: 30px !important;}.yt-spec-button-shape-next--icon-only-default {width: 30px !important;height: 30px !important;}/*--- Move box to the right ---*/#center.ytd-masthead {margin-right: auto !important;}/*=== Search r###lts ===*//*--- Remove channel avatar ---*/ytd-search #channel-thumbnail.ytd-video-renderer {display: none !important;}/*--- Decrease font size ---*/ytd-video-renderer #dismissible h3 {font-size: 1.3rem !important;line-height: 1.6rem !important;margin-bottom: 3px !important;}/*--- Make thumbnails smaller ---*/#dismissible.ytd-video-renderer > ytd-thumbnail {margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;width: 193px !important;}ytd-video-renderer[use-search-ui] ytd-thumbnail.ytd-video-renderer::before {display: inline !important;}/*--- Make video name smaller ---*/#video-title.ytd-video-renderer, #video-title.ytd-radio-renderer, ytd-playlist-renderer #content h3, ytd-playlist-renderer #content h3 #video-title {font-size: 1.6rem !important;font-weight: 500 !important;}/*--- Make metadata bigger ---*/#dismissible.ytd-video-renderer .text-wrapper, #description-text.ytd-video-renderer {font-size: 1.2rem !important;/*font-size: 11px !important;*/}/*=== Playlists ===*//*--- Decrease font size ---*/ytd-grid-renderer #details h3 {font-size: 1.3rem !important;line-height: 1.6rem !important;margin-bottom: 3px !important;}/*--- Make thumbnail corners less round ---*/ytd-playlist-thumbnail a.ytd-playlist-thumbnail, ytd-playlist-thumbnail::before {border-radius: 3px !important;}/*--- Make thumbnails smaller ---*/#items.ytd-grid-renderer > ytd-grid-playlist-renderer.ytd-grid-renderer {margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;width: 193px !important;}ytd-playlist-thumbnail.ytd-grid-playlist-renderer {width: 193px !important;}/*=== List of uploads in your channel ===*//*--- Make thumbnails smaller ---*/#items ytd-grid-video-renderer {margin-left: calc(var(--ytd-rich-grid-item-margin)/2) !important;margin-right: calc(var(--ytd-rich-grid-item-margin)/2) !important;width: 193px !important;}ytd-thumbnail.ytd-grid-video-renderer {width: 193px !important;height: 118px !important;}/*=== Community posts ===*//*--- Decrease font size ---*/#content-text.ytd-backstage-post-renderer {font-size: 13px !important;}/*=== Shorts tab ===*//*--- Align thumbnails on top ---*/ytd-rich-grid-slim-media > #dismissible ytd-thumbnail.ytd-rich-grid-slim-media {vertical-align: top !important;display: inline !important;}ytd-rich-grid-slim-media > #dismissible ytd-thumbnail.ytd-rich-grid-slim-media::before {display: inline !important;}ytd-rich-grid-slim-media > #dismissible ytd-thumbnail #thumbnail.ytd-thumbnail {position: relative !important;}/*=== History ===*//*--- Make thumbnail height smaller ---*/ytd-video-renderer > #dismissible > ytd-thumbnail > #thumbnail.ytd-thumbnail {height: unset !important;position: relative !important;}ytd-video-renderer:not([use-search-ui]) > #dismissible > ytd-thumbnail.ytd-video-renderer {height: unset !important;}`;var css1 = `/*=== Home screen ===*//*--- Make list of videos narrower and align it to center ---*/ytd-two-column-browse-r###lts-renderer.grid > #primary {max-width: [fldThumbWidth]% !important;}`;var gm_css = `#compact_youtube_layout * {font-family: Roboto, Arial, sans-serif !important;}#compact_youtube_layout .config_header {font-size: 20px !important;font-weight: bold !important;}#compact_youtube_layout .field_label {font-size: 13px !important;font-weight: 400 !important;}#compact_youtube_layout input[type="text"] {width: 50px !important;font-size: 12px !important;font-weight: bold !important;border-radius: 3px !important;}button {font-size: 12px !important;}`;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;`;let gmConfig = new GM_config({id: 'compact_youtube_layout',title: 'Settings for "' + GM_info.script.name + '" script',css: gm_css,frameStyle: gm_frameStyle,fields: {'fldThumbWidth': {'label': 'Width of thumbnail width (in pixels, default value 193px):','labelPos': 'above','type': 'unsigned int','min': 50,'max': 300,'default': 193},'fldGridWidth': {'label': 'Width of grid of videos (in percent, default value 80%):','labelPos': 'above','type': 'unsigned int','min': 20,'max': 100,'default': 80}}});//GM_registerMenuCommand('Settings', () => {//  gmConfig.open();//});//css1 = css1.replace("[fldThumbWidth]", GM_config.fields['fldThumbWidth'].value);//css1 = css1.replace(/\[fldThumbWidth\]/g, "80");//console.log(css1);if (window.location === window.parent.location) { //Do not apply fixes for embedded videoif (typeof GM_addStyle != 'undefined') {GM_addStyle(css);} else if (typeof PRO_addStyle != 'undefined') {PRO_addStyle(css);} else if (typeof addStyle != 'undefined') {addStyle(css);} else {var node = document.createElement('style');node.type = 'text/css';node.appendChild(document.createTextNode(css));document.documentElement.appendChild(node);}}})();