☰

YouTube CSS

Adds compact CSS style for mobile and desktop site YouTube

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

  1. // ==UserScript==
  2. // @name         YouTube CSS
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.0
  5. // @description  Adds compact CSS style for mobile and desktop site YouTube
  6. // @author       Agreasyforkuser
  7. // @match        https://*.youtube.com/*
  8. // @exclude      https://*.youtube.com/tv*
  9. // @icon         https://www.google.com/s2/favicons?domain=youtube.com
  10. // @grant        GM_addStyle
  11. // ==/UserScript==
  12.  
  13. var currentURL = window.location.href;
  14.  
  15.  
  16. //--------------------------------------------------------------------------------------------------------------------------------
  17. if (currentURL.startsWith("https://www.youtube.com")) {
  18.  
  19.  
  20. GM_addStyle(`
  21.  
  22.               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}
  23.  
  24.               .downloadbutton:before {content: "Download 🡇" !important}
  25.               .downloadbutton {background-color: black !important; border-radius: 6px !important}
  26.  
  27.  
  28.               /* transparent searchbar */
  29.               #masthead-container {z-index:0 !important}
  30.               /* placeholder text in searchbar */
  31.               ::-moz-placeholder          {color:transparent !important}
  32.               ::-webkit-input-placeholder {color:transparent !important}
  33.  
  34.               #logo.ytd-masthead:not(:hover) {opacity:0}
  35.               #buttons.ytd-masthead:not(:hover) {opacity:0}
  36.  
  37.               #chips-wrapper.ytd-feed-filter-chip-bar-renderer:not(:hover) {opacity:0}
  38.               yt-chip-cloud-chip-renderer.yt-chip-cloud-renderer {margin-top: 0 !important; margin-bottom: 0 !important}
  39.               #contents.ytd-rich-grid-renderer {padding-top:0 !important}
  40.  
  41.  
  42.               ytd-comments-header-renderer {margin: 0 !important}
  43.               ytd-mini-guide-entry-renderer[system-icons]:not(:hover) .title.ytd-mini-guide-entry-renderer {opacity:0}
  44.  
  45.               /* hide comment input field */
  46.               ytd-comment-simplebox-renderer:not(:hover) {opacity:0}
  47.  
  48.               #reply-button-end.ytd-comment-engagement-bar:not(:hover) {opacity:0 !important}
  49.  
  50.               #dislike-button.ytd-comment-engagement-bar:not(:hover) {opacity:0 !important}
  51.  
  52.               #comment #action-menu:not(:hover) {opacity:0 !important}
  53.  
  54.               .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline {display:none}
  55.               .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}
  56.  
  57.               /* Channel page transparent upper bar */
  58.               #contentContainer.tp-yt-app-header:not(:hover) {opacity:0.9}
  59.  
  60.  
  61.                .html5-video-player {width:100%}
  62.                .ytp-time-separator {opacity: 0 !important}
  63.                .ytp-title {display: none !important}
  64.                .ytp-gradient-top {display: none !important}
  65.                .ytp-chrome-top-buttons {display: none !important}
  66.                .ytp-fullerscreen-edu-chevron {display: none !important}
  67.  
  68.  
  69.                /* compact feed */
  70.                ytd-rich-item-renderer {margin: 0 !important}
  71.                #meta.ytd-rich-grid-media {padding:0 !important}
  72.                ytd-compact-video-renderer.ytd-item-section-renderer {margin: 0 !important}
  73.                ytd-compact-playlist-renderer.ytd-item-section-renderer {margin: 0 !important}
  74.                ytd-compact-video-renderer.ytd-watch-next-secondary-results-renderer:not([expansion="collapsed"]) {margin: 0 !important}
  75.                .style-scope.ytd-item-section-renderer {margin: 0 !important}
  76.                #expandable-metadata                   {margin: 0 !important}
  77.                #badges                                {margin: 0 !important}
  78.  
  79.                /* shorts */
  80.                #items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer {padding: 0px !important}
  81.                #rich-shelf-header.ytd-rich-shelf-renderer {margin: 0px !important}
  82.                #dismissible.ytd-rich-shelf-renderer {margin: 0px !important;border: 0px !important}
  83.  
  84.                /* preview */
  85.                .ytp-inline-preview-ui .ytp-inline-preview-controls {top:0 !important;right:0 !important}
  86.  
  87.                /* live chat */
  88.                yt-live-chat-viewer-engagement-message-renderer {display: none !important}
  89.                ytd-live-chat-frame                             {border:none !important}
  90.                yt-live-chat-header-renderer                    {height: fit-content !important; padding: 0 !important}
  91.                ytd-watch-flexy[fixed-panels] #chat.ytd-watch-flexy   {border-radius: 0 !important}
  92.                yt-live-chat-message-input-renderer                   {display: none !important}
  93.                #reaction-control-panel-overlay.yt-live-chat-renderer {display: none !important}
  94.  
  95.  
  96.               /* likes seperator */
  97.               .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start::after {display:none !important}
  98.               /* no button backgrounds until hover */
  99.               #top-row.ytd-watch-metadata:not(:hover) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background-color:transparent !important}
  100.               #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}
  101.               /* Info Card */
  102.               ytd-info-panel-content-renderer[has-menu] {border: none !important}
  103.  
  104.  
  105.               /* survey */
  106.               #attached-survey.ytd-rich-grid-media {display: none !important}
  107.  
  108.               /* hide left green border on subscription button */
  109.               .animated-action__background-container {display: none !important}
  110.  
  111.  
  112.               #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}
  113.  
  114.               /* padding over video player */
  115.               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}
  116.  
  117.               /* includes paid promotion */
  118.              .YtmPaidContentOverlayLink {display: none !important}
  119. `);
  120.  
  121.  
  122. };
  123.  
  124. //---------------------------------------------------------------------------------------------------------------------------
  125. if (currentURL.startsWith("https://m.youtube.com")) {
  126.  
  127.  
  128. GM_addStyle(`
  129.                 .downloadbutton:before {content: "Download ⤓" !important}
  130.                 .downloadbutton {color: gray !important; margin: 5px !important}
  131.  
  132.                 /* turn off text selection in player (double-tap forwarding video on Firefox Android does select text) */
  133.                 #player-control-overlay {
  134.                 -webkit-touch-callout: none;
  135.                   -webkit-user-select: none;
  136.                    -khtml-user-select: none;
  137.                      -moz-user-select: none;
  138.                       -ms-user-select: none;
  139.                           user-select: none; }
  140.  
  141.  
  142.                 /* Logo */
  143.                 .mobile-topbar-header[data-mode="watch"] .mobile-topbar-logo:not(:hover) {opacity: 0 !important}
  144.  
  145.                 /* account avatar, search button, login button */
  146.                 .mobile-topbar-header[data-mode="watch"] .topbar-menu-button-avatar-button:not(:hover) {opacity: 0.3 !important}
  147.                 ytm-mobile-topbar-renderer ytm-menu .icon-button:not(:hover) {opacity: 0.3 !important}
  148.                 .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--text:not(:hover) {opacity: 0.3 !important}
  149.                 .mobile-topbar-header-sign-in-button:not(:hover)             {opacity: 0.3 !important}
  150.  
  151.                 ytm-comment-thread-renderer .comment-icon,
  152.                 .slim-owner-profile-icon,
  153.                 .channel-thumbnail-icon,
  154.                 ytm-profile-icon,
  155.                 .ytm-comments-entry-point-teaser-avatar,
  156.                 .video-thumbnail-container-compact-rounded,
  157.                 .collections-stack-wiz__collection-stack1--medium,
  158.                 .collections-stack-wiz__collection-stack1,
  159.                 .collections-stack-wiz__collection-stack2,
  160.                 ytm-reel-item-renderer.rounded-reel-item .video-thumbnail-container-vertical,
  161.                 ytm-reel-item-renderer.rounded-reel-item .reel-item-metadata,
  162.                 .video-thumbnail-container-large.rounded-thumbnail
  163.                 {border-radius: 0 !important}
  164.  
  165.                /* keep rounded avatar on homepage */
  166.                .mobile-topbar-header[data-mode="browse"] ytm-profile-icon {border-radius: 50px !important}
  167.  
  168.                 /* dark mode navbar*/
  169.                 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}
  170.                 ytm-pivot-bar-renderer c3-icon {color: white !important}
  171.                .pivot-bar-item-title {display:none !important}
  172.                 ytm-pivot-bar-renderer {border:none !important}
  173.  
  174.                /* dark mode above/under videoplayer */
  175.                .mobile-topbar-header[data-mode="watch"] {background-color: rgba(0,0,0,1) !important}
  176.                .draggable .engagement-panel-section-list-header-wrapper {background-color: black !important;color: gray !important}
  177.                .draggable .engagement-panel-section-list-header {border: none !important}
  178.                /* number of comments */
  179.                .engagement-panel-section-list-header-context > span:nth-child(1) {color: gray !important}
  180.                .engagement-panel-drag-line {opacity:0 !important}
  181.                .draggable .engagement-panel-container {border-radius: 0 !important}
  182.                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}
  183.  
  184.  
  185.  
  186.                /* player */
  187.                #player-control-overlay.fadein .player-controls-background {background: rgba(0,0,0,.3) !important}
  188.                ytm-custom-control .player-controls-top {opacity: .4 !important}
  189.                .time-delimiter {opacity: 0 !important}
  190.                ytm-custom-control .player-controls-bottom .icon-button {opacity: 0.8 !important}
  191.                #player-control-overlay .player-controls-background-container {visibility: hidden !important}
  192.  
  193.                /* player tip scrubber popup */
  194.                .tooltip-wrapper {display: none !important}
  195.  
  196.                /* make more space for the video content */
  197.                .player-controls-pb {left: 15px !important; right: 15px !important}
  198.                ytm-custom-control .player-controls-bottom {left: 0 !important; right: 0 !important}
  199.                ytm-custom-control .player-controls-top {top: -8px !important}
  200.  
  201.               .fullscreen-action-menu {display:none !important}
  202.  
  203.               /* muted video popup */
  204.               .ytp-unmute-animated .ytp-unmute-icon {border-bottom: none !important;border-radius: 50px !important;background-color: rgba(255, 255, 255, 0.59) !important}
  205.               .ytp-unmute-shrink .ytp-unmute-text {opacity: 0 !important}
  206.               .ytp-unmute-shrink .ytp-unmute-box {width: 0 !important}
  207.  
  208.  
  209.               /* comments */
  210.               .modern-styling {margin:0 !important}
  211.               ytm-comments-header-renderer {border:none !important}
  212.               ytm-comment-renderer {padding:0 !important}
  213.               ytm-comment-thread-renderer {padding:0 !important}
  214.               .comment-content {padding: 0 4px !important}
  215.               ytm-comment-replies-renderer {margin:0 !important}
  216.               .comment-simplebox-placeholder {border: none !important}
  217.               .comments-simplebox-placeholder {background: none !important}
  218.               ytm-comments-simplebox-renderer {padding:0 !important}
  219.               ytm-single-column-watch-next-results-renderer .single-column-watch-next-modern-panels ytm-comments-entry-point-header-renderer.modern-styling {padding: 0 !important}
  220.               .rich-grid-sticky-header { display: none !important}
  221.               ytm-comment-renderer .comment-expand {padding: 0 !important}
  222.               ytm-comment-renderer .comment-details {margin: 0 !important}
  223.  
  224.               /* "comments" text */
  225.               .comments-entry-point-header-text {display: none !important}
  226.  
  227.               /* comments panel close button */
  228.               .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text {color: gray !important}
  229.  
  230.               /* landscape comments panel */
  231.               @media (min-width: 931px) and (orientation: landscape) {ytm-engagement-panel {width: 40% !important}}
  232.               /* landscape sidebar recommendations */
  233.               @media (min-width: 931px) and (orientation: landscape) {ytm-single-column-watch-next-results-renderer [section-identifier="related-items"]       {padding:0 !important}}
  234.               @media (min-width: 931px) and (orientation: landscape) {ytm-single-column-watch-next-results-renderer [section-identifier="related-items"] .item {padding:0 !important}}
  235.  
  236.               /* submit comment field */
  237.               ytm-comments-header-renderer {display: none !important}
  238.  
  239.  
  240.  
  241.               /* Feed */
  242.               .chip-bar {display: none !important}
  243.               ytm-media-item[use-vertical-layout] .details {margin-top: 0 !important}
  244.               ytm-rich-item-renderer ytm-media-item .details {margin-left: 0 !important}
  245.               /* Thumbnail Time */
  246.               ytm-thumbnail-overlay-time-status-renderer {margin-right: 0 !important}
  247.               /* video recommendations under player */
  248.               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}
  249.               ytm-item-section-renderer {border: none !important}
  250.  
  251.               /* search info-panel */
  252.               ytm-info-panel-container-renderer {display: none !important}
  253.  
  254.               /* Shorts */
  255.               ytm-reel-shelf-renderer .reel-shelf-header {margin:0 !important}
  256.               ytm-reel-shelf-renderer {border: none !important; margin: 0 !important}
  257.               ytm-reel-shelf-renderer .reel-shelf-items > * {margin: 0 !important}
  258.               .reel-shelf-menu {display: none !important}
  259.  
  260.  
  261.  
  262.               /* Title under player */
  263.               .slim-video-metadata-header .slim-video-information-content.slim-video-information-empty-badge {padding:0 !important}
  264.               ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding-top: 0 !important}
  265.  
  266.               /* padding uploader avatar and subscribe button */
  267.               ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding: 0 !important}
  268.               .slim-owner-profile-icon {margin-right: 2px !important}
  269.  
  270.               /* hide left green border on subscription button */
  271.               .animated-action__background-container {display: none !important}
  272.  
  273.               /* action buttons spacing */
  274.               .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}
  275.               .yt-spec-button-shape-next--size-m {padding: 0 6px !important; height: 33px !important}
  276.               .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}
  277.               /* downvotes arent shown anyway */
  278.               .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}
  279.               .slim-video-action-bar-actions {padding: 3px 3px !important}
  280.  
  281.  
  282.              /* description box */
  283.              .draggable ytm-structured-description-content-renderer {padding: 0 !important}
  284.              ytm-expandable-video-description-body-renderer.expandable-video-description-modern {margin: 0 !important}
  285.              /* description statistics */
  286.              ytm-video-description-header-renderer .factoids {padding: 0 !important}
  287.  
  288.  
  289.              /* name / views and time / chapter separator */
  290.              .ytm-badge-and-byline-separator, .middot {opacity: 0 !important}
  291.  
  292.              /* weird empty space after going fullscreen and leaving fullscreen video */
  293.              .related-chips-slot-wrapper.slot-open {transform: none !important}
  294.  
  295.  
  296.               /* rounded search bar */
  297.                ytm-mobile-topbar-renderer.sticky-player {border-radius: 100px !important}
  298.  
  299.               /* comments three dot button */
  300.               .comment-menu {opacity: 0.1 !important}
  301.  
  302.               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}
  303.  
  304.               /* includes paid promotion */
  305.              .YtmPaidContentOverlayLink {display: none !important}
  306. `);
  307. }