YouTube CSS

Adds compact CSS style for mobile and desktop site YouTube

当前为 2024-12-05 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name         YouTube CSS
// @namespace    http://tampermonkey.net/
// @version      2.2
// @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, #ytd-player, yt-img-shadow.ytd-video-renderer {border-radius:0px !important}


              /* transparent searchbar */
              #masthead-container {z-index:0 !important}
              /* placeholder text in searchbar */
              ::-moz-placeholder          {color:transparent !important}
              ::-webkit-input-placeholder {color:transparent !important}
              #chips-wrapper.ytd-feed-filter-chip-bar-renderer {background-color: transparent !important}


              /* sidebar expand button */
              #start.ytd-masthead:not(:hover) button.yt-icon-button {opacity: 0 !important}


              #country-code.ytd-topbar-logo-renderer {display: none !important}
              #buttons.ytd-masthead: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}*/
              ytd-comment-simplebox-renderer:not(:hover) {display:none !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}



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


               /* additional description info panels */
               #clarify-box {display: none !important}
               #middle-row.ytd-watch-metadata {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}



               /* preview player*/
               .ytp-inline-preview-ui .ytp-inline-preview-controls {top:0 !important;right:0 !important}
               /* includes paid promotion */
               .YtmPaidContentOverlayLink {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}



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


`);


};

//---------------------------------------------------------------------------------------------------------------------------
if (currentURL.startsWith("https://m.youtube.com")) {


GM_addStyle(`
                /* 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; }


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

                /* search bar */
                ytm-mobile-topbar-renderer {backdrop-filter: none !important}

                /* navbar*/
                ytm-pivot-bar-renderer {backdrop-filter: none !important; height: fit-content !important}
               .pivot-bar-item-title {display:none !important}
                ytm-pivot-bar-renderer {border:none !important}
                .yt-spec-avatar-shape__button--button-extra-small {filter: grayscale(1)}

               /* dark mode above/under videoplayer */
               .mobile-topbar-header[data-mode="watch"] {background-color: rgba(0,0,0,1) !important}
               .engagement-panel-section-list-background.draggable {background: rgba(0,0,0,1) !important}



               /* player */
               ytm-custom-control .player-controls-top {opacity: .4 !important}
               ytm-custom-control .player-controls-bottom .icon-button {opacity: 0.8 !important}
               /* player paused overlay */
               #player-control-overlay.fadein .player-controls-background {background: rgba(0,0,0,.2) !important}
               /* player controls background */
               ytm-custom-control .player-controls-middle .modern-tap-target-ui .icon-button {background-color: rgba(0,0,0,0.15) !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.4) !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-simplebox-renderer {display: none !important}
              .draggable .engagement-panel-section-list-header {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}
              .rich-grid-sticky-header { display: none !important}
              ytm-comment-renderer .comment-expand {padding: 0 !important}
              ytm-comment-renderer .comment-details {margin: 0 !important}


              /* comments menu button */
              .comment-menu:not(hover) {opacity: 0 !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}



              /* search info-panel */
              ytm-info-panel-container-renderer {display: none !important}


              /* chips bar under player */
              ytm-chip-cloud-renderer.chip-bar {background-color: transparent !important; border: none !important}


              /* Shorts */

              .logo-in-player-endpoint {opacity: 0 !important}
              .yt-spec-button-shape-next.yt-spec-button-shape-next--tonal.yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--size-l.yt-spec-button-shape-next--icon-button {background: none !important}
              .yt-subscribe-button-view-model-wiz__container {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}

              /* additional info panel under player */
              ytm-clarification-renderer.item {display: none !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}

     

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


  
              /* includes paid promotion */
             .YtmPaidContentOverlayLink {display: none !important}
`);
}