Corrections to UI of youtube.com: trying to make it more compact like in good old times
目前為
// ==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://greasyfork.org/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.1
// @license MIT
// @run-at document-start
// ==/UserScript==
(function() {
'use strict';
var css = `
/*=== Home screen ===*/
/*--- Make list of videos narrower ---*/
ytd-two-column-browse-results-renderer {
max-width: 80% !important;
}
/*--- Decrease font size of video name ---*/
#video-title.ytd-rich-grid-media, #video-title.ytd-rich-grid-slim-media {
font-size: 1.3rem !important;
line-height: 1.6rem !important;
font-weight: 500 !important;
max-height: 3.6rem !important;
margin-top: 2px !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;
}
/*=== 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-resume-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-resume-playback-renderer:not(.foo) {
display: block !important;
background-color: red !important;
opacity: 1 !important;
}
/*--- Correct video duration background ---*/
ytd-thumbnail-overlay-resume-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 {
border-radius: 3px !important;
}
/*--- Set thumbnail width in search results ---*/
ytd-video-renderer[is-search] ytd-thumbnail.ytd-video-renderer {
max-width: 240px !important;
}
/*=== Grid of videos ===*/
/*--- Decrease width of each thumbnail ---*/
ytd-rich-grid-row.style-scope.ytd-rich-grid-renderer > div > ytd-rich-item-renderer, ytd-rich-shelf-renderer[is-shorts] > #dismissible > div > ytd-rich-item-renderer:not(.foo) {
display: inline-block !important;
width: 193px !important;
contain: none !important;
}
/*--- Decrease width of shorts thumbnail at home tab ---*/
#scroll-container > #items > ytd-reel-item-renderer {
width: 193px !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;
}
/*=== 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%;
}
.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, #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;
}
/*--- 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: 11px !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-results-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 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 conrers 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 results ===*/
/*--- Remove channel avatar ---*/
ytd-search #channel-thumbnail.ytd-video-renderer {
display: none !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;
}
`;
if (window.location === window.parent.location) { //Do not apply fixes for embedded video
if (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);
}
}
})();