☰

YouTube CSS

Adds compact CSS style for mobile and desktop site YouTube

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

  1. // ==UserScript==
  2. // @name         YouTube CSS
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.2
  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, #ytd-player, yt-img-shadow.ytd-video-renderer {border-radius:0px !important}
  23.  
  24.  
  25.                   /* transparent searchbar */
  26.                   #masthead-container {z-index:0 !important}
  27.                   /* placeholder text in searchbar */
  28.                   ::-moz-placeholder          {color:transparent !important}
  29.                   ::-webkit-input-placeholder {color:transparent !important}
  30.                   #chips-wrapper.ytd-feed-filter-chip-bar-renderer {background-color: transparent !important}
  31.  
  32.  
  33.                   /* sidebar expand button */
  34.                   #start.ytd-masthead:not(:hover) button.yt-icon-button {opacity: 0 !important}
  35.  
  36.  
  37.                   #country-code.ytd-topbar-logo-renderer {display: none !important}
  38.                   #buttons.ytd-masthead:not(:hover) {opacity:0}
  39.  
  40.                   yt-chip-cloud-chip-renderer.yt-chip-cloud-renderer {margin-top: 0 !important; margin-bottom: 0 !important}
  41.                   #contents.ytd-rich-grid-renderer {padding-top:0 !important}
  42.  
  43.  
  44.                   ytd-comments-header-renderer {margin: 0 !important}
  45.                   ytd-mini-guide-entry-renderer[system-icons]:not(:hover) .title.ytd-mini-guide-entry-renderer {opacity:0}
  46.  
  47.                   /* hide comment input field */
  48.                   /*ytd-comment-simplebox-renderer:not(:hover) {opacity:0}*/
  49.                   ytd-comment-simplebox-renderer:not(:hover) {display:none !important}
  50.  
  51.                   .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline {display:none}
  52.                   .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}
  53.  
  54.  
  55.                    /* player */
  56.                    .html5-video-player {width:100%}
  57.                    .ytp-title {display: none !important}
  58.                    .ytp-gradient-top {display: none !important}
  59.                    .ytp-chrome-top-buttons {display: none !important}
  60.                    .ytp-fullerscreen-edu-chevron {display: none !important}
  61.  
  62.                    /* hide autoplay toggle of not active */
  63.                    .ytp-autonav-toggle-button[aria-checked="false"] {opacity: 0 !important}
  64.  
  65.  
  66.                    /* additional description info panels */
  67.                    #clarify-box {display: none !important}
  68.                    #middle-row.ytd-watch-metadata {display: none !important}
  69.  
  70.  
  71.                    /* compact feed */
  72.                    ytd-rich-item-renderer {margin: 0 !important}
  73.                    #meta.ytd-rich-grid-media {padding:0 !important}
  74.                    ytd-compact-video-renderer.ytd-item-section-renderer {margin: 0 !important}
  75.                    ytd-compact-playlist-renderer.ytd-item-section-renderer {margin: 0 !important}
  76.                    ytd-compact-video-renderer.ytd-watch-next-secondary-results-renderer:not([expansion="collapsed"]) {margin: 0 !important}
  77.                    .style-scope.ytd-item-section-renderer {margin: 0 !important}
  78.  
  79.  
  80.  
  81.                    /* preview player*/
  82.                    .ytp-inline-preview-ui .ytp-inline-preview-controls {top:0 !important;right:0 !important}
  83.                    /* includes paid promotion */
  84.                    .YtmPaidContentOverlayLink {display: none !important}
  85.  
  86.  
  87.  
  88.  
  89.                   /* likes seperator */
  90.                   .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start::after {display:none !important}
  91.                   /* no button backgrounds until hover */
  92.                   #top-row.ytd-watch-metadata:not(:hover) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background-color:transparent !important}
  93.                   #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}
  94.                   /* Info Card */
  95.                   ytd-info-panel-content-renderer[has-menu] {border: none !important}
  96.  
  97.  
  98.                   /* survey */
  99.                   #attached-survey.ytd-rich-grid-media {display: none !important}
  100.  
  101.  
  102.  
  103.                   /* padding over video player */
  104.                   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}
  105.  
  106.  
  107.     `);
  108.  
  109.  
  110. };
  111.  
  112. //---------------------------------------------------------------------------------------------------------------------------
  113. if (currentURL.startsWith("https://m.youtube.com")) {
  114.  
  115.  
  116.     GM_addStyle(`
  117.                     /* turn off text selection in player (double-tap forwarding video on Firefox Android does select text) */
  118.                     #player-control-overlay {
  119.                     -webkit-touch-callout: none;
  120.                       -webkit-user-select: none;
  121.                        -khtml-user-select: none;
  122.                          -moz-user-select: none;
  123.                           -ms-user-select: none;
  124.                               user-select: none; }
  125.  
  126.  
  127.                     /* top bar */
  128.                     /* Logo */
  129.                     .mobile-topbar-header[data-mode="watch"] .mobile-topbar-logo:not(:hover) {opacity: 0 !important}
  130.  
  131.                     /* account avatar, search button, login button */
  132.                     .mobile-topbar-header[data-mode="watch"] .topbar-menu-button-avatar-button:not(:hover) {opacity: 0.3 !important}
  133.                     ytm-mobile-topbar-renderer ytm-menu .icon-button:not(:hover) {opacity: 0.3 !important}
  134.                     .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--text:not(:hover) {opacity: 0.3 !important}
  135.                     .mobile-topbar-header-sign-in-button:not(:hover)             {opacity: 0.3 !important}
  136.  
  137.                     /* search bar */
  138.                     ytm-mobile-topbar-renderer {backdrop-filter: none !important}
  139.                     /* search info-panel */
  140.                     ytm-info-panel-container-renderer {display: none !important}
  141.  
  142.  
  143.                     /* navbar*/
  144.                     ytm-pivot-bar-renderer {backdrop-filter: none !important; height: fit-content !important}
  145.                    .pivot-bar-item-title {display:none !important}
  146.                     ytm-pivot-bar-renderer {border:none !important}
  147.                     .yt-spec-avatar-shape__button--button-extra-small {filter: grayscale(1)}
  148.  
  149.                    /* dark mode above/under videoplayer */
  150.                    .mobile-topbar-header[data-mode="watch"] {background-color: rgba(0,0,0,1) !important}
  151.                    .engagement-panel-section-list-background.draggable {background: rgba(0,0,0,1) !important}
  152.  
  153.  
  154.  
  155.                    /* player */
  156.                    ytm-custom-control .player-controls-top {opacity: .4 !important}
  157.                    ytm-custom-control .player-controls-bottom .icon-button {opacity: .8 !important}
  158.                    /* player paused overlay */
  159.                    #player-control-overlay.fadein .player-controls-background {background: rgba(0,0,0,.2) !important}
  160.                    /* player controls background */
  161.                    ytm-custom-control .player-controls-middle .modern-tap-target-ui .icon-button {background-color: rgba(0,0,0,0.15) !important}
  162.  
  163.                    /* hide autoplay toggle if not active */
  164.                    .ytm-autonav-toggle-button-container[aria-pressed="false"] {opacity: 0 !important}
  165.  
  166.                    /* player tip scrubber popup */
  167.                    .tooltip-wrapper {display: none !important}
  168.  
  169.                    /* make more space for the video content */
  170.                    .player-controls-pb {left: 15px !important; right: 15px !important}
  171.                    ytm-custom-control .player-controls-bottom {left: 0 !important; right: 0 !important}
  172.                    ytm-custom-control .player-controls-top {top: -8px !important}
  173.  
  174.  
  175.                   /* muted video popup */
  176.                   .ytp-unmute-animated .ytp-unmute-icon {border-bottom: none !important;border-radius: 50px !important;background-color: rgba(255, 255, 255, 0.4) !important}
  177.                   .ytp-unmute-shrink .ytp-unmute-text {opacity: 0 !important}
  178.                   .ytp-unmute-shrink .ytp-unmute-box {width: 0 !important}
  179.  
  180.  
  181.                   /* Title under player */
  182.                   .slim-video-metadata-header .slim-video-information-content.slim-video-information-empty-badge {padding:0 !important}
  183.                   ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding-top: 0 !important}
  184.  
  185.                   /* padding uploader avatar and subscribe button */
  186.                   ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding: 0 !important}
  187.                   .slim-owner-profile-icon {margin-right: 2px !important}
  188.  
  189.                   /* action buttons spacing */
  190.                   .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}
  191.                   .yt-spec-button-shape-next--size-m {padding: 0 6px !important; height: 33px !important}
  192.                   .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}
  193.                   /* downvotes arent shown anyway */
  194.                   .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}
  195.                   .slim-video-action-bar-actions {padding: 3px 3px !important}
  196.  
  197.  
  198.                   /* additional info panel under player */
  199.                   ytm-clarification-renderer.item {display: none !important}
  200.  
  201.                   /* chips bar under player */
  202.                   ytm-chip-cloud-renderer.chip-bar {background-color: transparent !important; border: none !important}
  203.                   ytm-item-section-renderer {border: none !important}
  204.  
  205.  
  206.                   /* comments */
  207.                   .modern-styling {margin:0 !important}
  208.                   ytm-comments-simplebox-renderer {display: none !important}
  209.                   .draggable .engagement-panel-section-list-header {border:none !important}
  210.                   ytm-comment-renderer {padding:0 !important}
  211.                   ytm-comment-thread-renderer {padding:0 !important}
  212.                   .comment-content {padding: 0 4px !important}
  213.                   ytm-comment-replies-renderer {margin:0 !important}
  214.                   .comment-simplebox-placeholder {border: none !important}
  215.                   .comments-simplebox-placeholder {background: none !important}
  216.                   ytm-comments-simplebox-renderer {padding:0 !important}
  217.                   .rich-grid-sticky-header { display: none !important}
  218.                   ytm-comment-renderer .comment-expand {padding: 0 !important}
  219.                   ytm-comment-renderer .comment-details {margin: 0 !important}
  220.  
  221.                   /* comments menu button */
  222.                   .comment-menu:not(hover) {opacity: 0 !important}
  223.  
  224.                   /* landscape comments panel */
  225.                   @media (min-width: 931px) and (orientation: landscape) {ytm-engagement-panel {width: 40% !important}}
  226.                   /* landscape sidebar recommendations */
  227.                   @media (min-width: 931px) and (orientation: landscape) {ytm-single-column-watch-next-results-renderer [section-identifier="related-items"]       {padding:0 !important}}
  228.                   @media (min-width: 931px) and (orientation: landscape) {ytm-single-column-watch-next-results-renderer [section-identifier="related-items"] .item {padding:0 !important}}
  229.  
  230.                   /* submit comment field */
  231.                   ytm-comments-header-renderer {display: none !important}
  232.  
  233.  
  234.  
  235.  
  236.                   /* Shorts */
  237.                   .logo-in-player-endpoint {opacity: 0 !important}
  238.                   .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}
  239.                   .yt-subscribe-button-view-model-wiz__container {display: none !important}
  240.  
  241.  
  242.  
  243.                   /* includes paid promotion */
  244.                  .YtmPaidContentOverlayLink {display: none !important}
  245.     `);
  246. }
  247.