YouTube CSS

Adds compact CSS style for mobile and desktop site YouTube

当前为 2024-11-08 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==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}

              .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}

               /* 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}


              /* 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}




              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}
`);
}