Adds compact CSS style for mobile and desktop site YouTube
目前為
// ==UserScript==
// @name YouTube CSS
// @namespace http://tampermonkey.net/
// @version 2.0
// @description Adds compact CSS style for mobile and desktop site YouTube
// @author Agreasyforkuser
// @match https://*.youtube.com/*
// @exclude https://*.youtube.com/tv*
// @icon https://www.google.com/s2/favicons?domain=youtube.com
// @grant GM_addStyle
// ==/UserScript==
var currentURL = window.location.href;
//--------------------------------------------------------------------------------------------------------------------------------
if (currentURL.startsWith("https://www.youtube.com")) {
GM_addStyle(`
ytd-thumbnail a.ytd-thumbnail, #avatar, #author-thumbnail.ytd-comment-view-model yt-img-shadow.ytd-comment-view-model, #author-photo.yt-live-chat-text-message-renderer, #ytd-player, yt-img-shadow.ytd-video-renderer {border-radius:0px !important}
.downloadbutton:before {content: "Download 🡇" !important}
.downloadbutton {background-color: black !important; border-radius: 6px !important}
/* transparent searchbar */
#masthead-container {z-index:0 !important}
/* placeholder text in searchbar */
::-moz-placeholder {color:transparent !important}
::-webkit-input-placeholder {color:transparent !important}
#logo.ytd-masthead:not(:hover) {opacity:0}
#buttons.ytd-masthead:not(:hover) {opacity:0}
#chips-wrapper.ytd-feed-filter-chip-bar-renderer:not(:hover) {opacity:0}
yt-chip-cloud-chip-renderer.yt-chip-cloud-renderer {margin-top: 0 !important; margin-bottom: 0 !important}
#contents.ytd-rich-grid-renderer {padding-top:0 !important}
ytd-comments-header-renderer {margin: 0 !important}
ytd-mini-guide-entry-renderer[system-icons]:not(:hover) .title.ytd-mini-guide-entry-renderer {opacity:0}
/* hide comment input field */
ytd-comment-simplebox-renderer:not(:hover) {opacity:0}
#reply-button-end.ytd-comment-engagement-bar:not(:hover) {opacity:0 !important}
#dislike-button.ytd-comment-engagement-bar:not(:hover) {opacity:0 !important}
#comment #action-menu:not(:hover) {opacity:0 !important}
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline {display:none}
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}
/* Channel page transparent upper bar */
#contentContainer.tp-yt-app-header:not(:hover) {opacity:0.9}
.html5-video-player {width:100%}
.ytp-time-separator {opacity: 0 !important}
.ytp-title {display: none !important}
.ytp-gradient-top {display: none !important}
.ytp-chrome-top-buttons {display: none !important}
.ytp-fullerscreen-edu-chevron {display: none !important}
/* compact feed */
ytd-rich-item-renderer {margin: 0 !important}
#meta.ytd-rich-grid-media {padding:0 !important}
ytd-compact-video-renderer.ytd-item-section-renderer {margin: 0 !important}
ytd-compact-playlist-renderer.ytd-item-section-renderer {margin: 0 !important}
ytd-compact-video-renderer.ytd-watch-next-secondary-results-renderer:not([expansion="collapsed"]) {margin: 0 !important}
.style-scope.ytd-item-section-renderer {margin: 0 !important}
#expandable-metadata {margin: 0 !important}
#badges {margin: 0 !important}
/* shorts */
#items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer {padding: 0px !important}
#rich-shelf-header.ytd-rich-shelf-renderer {margin: 0px !important}
#dismissible.ytd-rich-shelf-renderer {margin: 0px !important;border: 0px !important}
/* preview */
.ytp-inline-preview-ui .ytp-inline-preview-controls {top:0 !important;right:0 !important}
/*ytd-thumbnail-overlay-time-status-renderer.ytd-thumbnail {margin: 0 !important}*/
/*#time-status.ytd-thumbnail-overlay-time-status-renderer {color: black !important; background-color: white !important}*/
/*#time-status.ytd-thumbnail-overlay-time-status-renderer {padding-top: 1px;padding-right: 0px;padding-bottom: 0px;padding-left: 1px;}*/
ytd-reel-video-renderer .player-container.ytd-reel-video-renderer {border-radius: 0 !important}
/* live chat */
yt-live-chat-viewer-engagement-message-renderer {display: none !important}
ytd-live-chat-frame {border:none !important}
yt-live-chat-header-renderer {height: fit-content !important; padding: 0 !important}
ytd-watch-flexy[fixed-panels] #chat.ytd-watch-flexy {border-radius: 0 !important}
yt-live-chat-message-input-renderer {display: none !important}
#reaction-control-panel-overlay.yt-live-chat-renderer {display: none !important}
/* likes seperator */
.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start::after {display:none !important}
/* no button backgrounds until hover */
#top-row.ytd-watch-metadata:not(:hover) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background-color:transparent !important}
#top-row.ytd-watch-metadata:not(:hover) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {color: black !important; background-color:transparent !important}
/* Info Card */
ytd-info-panel-content-renderer[has-menu] {border: none !important}
/* survey */
#attached-survey.ytd-rich-grid-media {display: none !important}
/* hide left green border on subscription button */
.animated-action__background-container {display: none !important}
#top-row.ytd-watch-metadata:not(:hover) .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading-trailing .yt-spec-button-shape-next__secondary-icon {opacity:0}
/* padding over video player */
ytd-watch-flexy[default-layout]:not([no-top-margin]):not([reduced-top-margin]) #primary.ytd-watch-flexy, ytd-watch-flexy[default-layout]:not([no-top-margin]):not([reduced-top-margin]) #secondary.ytd-watch-flexy {padding-top:0 !important}
/* includes paid promotion */
.YtmPaidContentOverlayLink {display: none !important}
`);
};
//---------------------------------------------------------------------------------------------------------------------------
if (currentURL.startsWith("https://m.youtube.com")) {
GM_addStyle(`
.downloadbutton:before {content: "Download ⤓" !important}
.downloadbutton {color: gray !important; margin: 5px !important}
/* turn off text selection in player (double-tap forwarding video on Firefox Android does select text) */
#player-control-overlay {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
/* Logo */
.mobile-topbar-header[data-mode="watch"] .mobile-topbar-logo:not(:hover) {opacity: 0 !important}
/* account avatar, search button, login button */
.mobile-topbar-header[data-mode="watch"] .topbar-menu-button-avatar-button:not(:hover) {opacity: 0.3 !important}
ytm-mobile-topbar-renderer ytm-menu .icon-button:not(:hover) {opacity: 0.3 !important}
.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--text:not(:hover) {opacity: 0.3 !important}
.mobile-topbar-header-sign-in-button:not(:hover) {opacity: 0.3 !important}
ytm-comment-thread-renderer .comment-icon,
.slim-owner-profile-icon,
.channel-thumbnail-icon,
ytm-profile-icon,
.ytm-comments-entry-point-teaser-avatar,
.video-thumbnail-container-compact-rounded,
.collections-stack-wiz__collection-stack1--medium,
.collections-stack-wiz__collection-stack1,
.collections-stack-wiz__collection-stack2,
ytm-reel-item-renderer.rounded-reel-item .video-thumbnail-container-vertical,
ytm-reel-item-renderer.rounded-reel-item .reel-item-metadata,
.video-thumbnail-container-large.rounded-thumbnail
{border-radius: 0 !important}
/* keep rounded avatar on homepage */
.mobile-topbar-header[data-mode="browse"] ytm-profile-icon {border-radius: 50px !important}
/* dark mode navbar*/
ytm-pivot-bar-renderer {background-color: transparent !important; background: linear-gradient(180deg, rgba(0,0,0,0) 10%, rgba(0,0,0,0.5032212714187237) 56%, rgba(0,0,0,1) 100%) !important}
ytm-pivot-bar-renderer c3-icon {color: white !important}
.pivot-bar-item-title {display:none !important}
ytm-pivot-bar-renderer {border:none !important}
/* dark mode above/under videoplayer */
.mobile-topbar-header[data-mode="watch"] {background-color: rgba(0,0,0,1) !important}
.draggable .engagement-panel-section-list-header-wrapper {background-color: black !important;color: gray !important}
.draggable .engagement-panel-section-list-header {border: none !important}
/* number of comments */
.engagement-panel-section-list-header-context > span:nth-child(1) {color: gray !important}
.engagement-panel-drag-line {opacity:0 !important}
.draggable .engagement-panel-container {border-radius: 0 !important}
ytm-single-column-watch-next-results-renderer .single-column-watch-next-modern-panels ytm-comments-entry-point-header-renderer.modern-styling {border-radius: 0 !important}
/* player */
#player-control-overlay.fadein .player-controls-background {background: rgba(0,0,0,.3) !important}
ytm-custom-control .player-controls-top {opacity: .4 !important}
.time-delimiter {opacity: 0 !important}
ytm-custom-control .player-controls-bottom .icon-button {opacity: 0.8 !important}
#player-control-overlay .player-controls-background-container {visibility: hidden !important}
/* player tip scrubber popup */
.tooltip-wrapper {display: none !important}
/* make more space for the video content */
.player-controls-pb {left: 15px !important; right: 15px !important}
ytm-custom-control .player-controls-bottom {left: 0 !important; right: 0 !important}
ytm-custom-control .player-controls-top {top: -8px !important}
.fullscreen-action-menu {display:none !important}
/* muted video popup */
.ytp-unmute-animated .ytp-unmute-icon {border-bottom: none !important;border-radius: 50px !important;background-color: rgba(255, 255, 255, 0.59) !important}
.ytp-unmute-shrink .ytp-unmute-text {opacity: 0 !important}
.ytp-unmute-shrink .ytp-unmute-box {width: 0 !important}
/* comments */
.modern-styling {margin:0 !important}
ytm-comments-header-renderer {border:none !important}
ytm-comment-renderer {padding:0 !important}
ytm-comment-thread-renderer {padding:0 !important}
.comment-content {padding: 0 4px !important}
ytm-comment-replies-renderer {margin:0 !important}
.comment-simplebox-placeholder {border: none !important}
.comments-simplebox-placeholder {background: none !important}
ytm-comments-simplebox-renderer {padding:0 !important}
ytm-single-column-watch-next-results-renderer .single-column-watch-next-modern-panels ytm-comments-entry-point-header-renderer.modern-styling {padding: 0 !important}
.rich-grid-sticky-header { display: none !important}
ytm-comment-renderer .comment-expand {padding: 0 !important}
ytm-comment-renderer .comment-details {margin: 0 !important}
/* "comments" text */
.comments-entry-point-header-text {display: none !important}
/* comments panel close button */
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text {color: gray !important}
/* landscape comments panel */
@media (min-width: 931px) and (orientation: landscape) {ytm-engagement-panel {width: 40% !important}}
/* landscape sidebar recommendations */
@media (min-width: 931px) and (orientation: landscape) {ytm-single-column-watch-next-results-renderer [section-identifier="related-items"] {padding:0 !important}}
@media (min-width: 931px) and (orientation: landscape) {ytm-single-column-watch-next-results-renderer [section-identifier="related-items"] .item {padding:0 !important}}
/* submit comment field */
ytm-comments-header-renderer {display: none !important}
/* Feed */
.chip-bar {display: none !important}
ytm-media-item[use-vertical-layout] .details {margin-top: 0 !important}
ytm-rich-item-renderer ytm-media-item .details {margin-left: 0 !important}
/* Thumbnail Time */
ytm-thumbnail-overlay-time-status-renderer {margin-right: 0 !important}
/* video recommendations under player */
ytm-single-column-watch-next-results-renderer.full-bleed-wn-thumbs [section-identifier="related-items"] ytm-video-with-context-renderer ytm-media-item .details {margin: 0 !important}
ytm-item-section-renderer {border: none !important}
/* search info-panel */
ytm-info-panel-container-renderer {display: none !important}
/* Shorts */
ytm-reel-shelf-renderer .reel-shelf-header {margin:0 !important}
ytm-reel-shelf-renderer {border: none !important; margin: 0 !important}
ytm-reel-shelf-renderer .reel-shelf-items > * {margin: 0 !important}
.reel-shelf-menu {display: none !important}
/* Title under player */
.slim-video-metadata-header .slim-video-information-content.slim-video-information-empty-badge {padding:0 !important}
ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding-top: 0 !important}
/* padding uploader avatar and subscribe button */
ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding: 0 !important}
.slim-owner-profile-icon {margin-right: 2px !important}
/* hide left green border on subscription button */
.animated-action__background-container {display: none !important}
/* action buttons spacing */
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}
.yt-spec-button-shape-next--size-m {padding: 0 6px !important; height: 33px !important}
.slim-video-action-bar-actions > .slim_video_action_bar_renderer_button, .slim-video-action-bar-actions > yt-smartimation, .slim-video-action-bar-actions > ytm-account-link-button-renderer {margin-right: 5px !important}
/* downvotes arent shown anyway */
.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--segmented-end {width: min-content !important}
.slim-video-action-bar-actions {padding: 3px 3px !important}
/* description box */
.draggable ytm-structured-description-content-renderer {padding: 0 !important}
ytm-expandable-video-description-body-renderer.expandable-video-description-modern {margin: 0 !important}
/* description statistics */
ytm-video-description-header-renderer .factoids {padding: 0 !important}
/* name / views and time / chapter separator */
.ytm-badge-and-byline-separator, .middot {opacity: 0 !important}
/* weird empty space after going fullscreen and leaving fullscreen video */
.related-chips-slot-wrapper.slot-open {transform: none !important}
/* rounded search bar */
ytm-mobile-topbar-renderer.sticky-player {border-radius: 100px !important}
/* comments three dot button */
.comment-menu {opacity: 0.1 !important}
ytm-video-with-context-renderer.feed-item, :where(ytm-rich-item-renderer.rich-item-single-standard-column) ytm-media-item .details {margin-bottom: 0 !important}
/* includes paid promotion */
.YtmPaidContentOverlayLink {display: none !important}
`);
}