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.  
  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.  
  31. #logo.ytd-masthead:not(:hover) {opacity:0}
  32. #buttons.ytd-masthead:not(:hover) {opacity:0}
  33.  
  34. #chips-wrapper.ytd-feed-filter-chip-bar-renderer:not(:hover) {opacity:0}
  35. yt-chip-cloud-chip-renderer.yt-chip-cloud-renderer {margin-top: 0 !important; margin-bottom: 0 !important}
  36. #contents.ytd-rich-grid-renderer {padding-top:0 !important}
  37.  
  38.  
  39. ytd-comments-header-renderer {margin: 0 !important}
  40. ytd-mini-guide-entry-renderer[system-icons]:not(:hover) .title.ytd-mini-guide-entry-renderer {opacity:0}
  41.  
  42. /* hide comment input field */
  43. ytd-comment-simplebox-renderer:not(:hover) {opacity:0}
  44.  
  45. .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline {display:none}
  46. .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}
  47.  
  48. /* Channel page transparent upper bar */
  49. #contentContainer.tp-yt-app-header:not(:hover) {opacity:0.9}
  50.  
  51.  
  52. .html5-video-player {width:100%}
  53. .ytp-time-separator {opacity: 0 !important}
  54. .ytp-title {display: none !important}
  55. .ytp-gradient-top {display: none !important}
  56. .ytp-chrome-top-buttons {display: none !important}
  57. .ytp-fullerscreen-edu-chevron {display: none !important}
  58.  
  59.  
  60. /* compact feed */
  61. ytd-rich-item-renderer {margin: 0 !important}
  62. #meta.ytd-rich-grid-media {padding:0 !important}
  63. ytd-compact-video-renderer.ytd-item-section-renderer {margin: 0 !important}
  64. ytd-compact-playlist-renderer.ytd-item-section-renderer {margin: 0 !important}
  65. ytd-compact-video-renderer.ytd-watch-next-secondary-results-renderer:not([expansion="collapsed"]) {margin: 0 !important}
  66. .style-scope.ytd-item-section-renderer {margin: 0 !important}
  67. #expandable-metadata {margin: 0 !important}
  68. #badges {margin: 0 !important}
  69.  
  70. /* shorts */
  71. #items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer {padding: 0px !important}
  72. #rich-shelf-header.ytd-rich-shelf-renderer {margin: 0px !important}
  73. #dismissible.ytd-rich-shelf-renderer {margin: 0px !important;border: 0px !important}
  74.  
  75. /* preview */
  76. .ytp-inline-preview-ui .ytp-inline-preview-controls {top:0 !important;right:0 !important}
  77.  
  78. /* live chat */
  79. yt-live-chat-viewer-engagement-message-renderer {display: none !important}
  80. ytd-live-chat-frame {border:none !important}
  81. yt-live-chat-header-renderer {height: fit-content !important; padding: 0 !important}
  82. ytd-watch-flexy[fixed-panels] #chat.ytd-watch-flexy {border-radius: 0 !important}
  83. yt-live-chat-message-input-renderer {display: none !important}
  84. #reaction-control-panel-overlay.yt-live-chat-renderer {display: none !important}
  85.  
  86.  
  87. /* likes seperator */
  88. .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start::after {display:none !important}
  89. /* no button backgrounds until hover */
  90. #top-row.ytd-watch-metadata:not(:hover) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background-color:transparent !important}
  91. #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}
  92. /* Info Card */
  93. ytd-info-panel-content-renderer[has-menu] {border: none !important}
  94.  
  95.  
  96. /* survey */
  97. #attached-survey.ytd-rich-grid-media {display: none !important}
  98.  
  99. /* hide left green border on subscription button */
  100. .animated-action__background-container {display: none !important}
  101.  
  102.  
  103. #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}
  104.  
  105. /* padding over video player */
  106. 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}
  107.  
  108. /* includes paid promotion */
  109. .YtmPaidContentOverlayLink {display: none !important}
  110. `);
  111.  
  112.  
  113. };
  114.  
  115. //---------------------------------------------------------------------------------------------------------------------------
  116. if (currentURL.startsWith("https://m.youtube.com")) {
  117.  
  118.  
  119. GM_addStyle(`
  120. /* turn off text selection in player (double-tap forwarding video on Firefox Android does select text) */
  121. #player-control-overlay {
  122. -webkit-touch-callout: none;
  123. -webkit-user-select: none;
  124. -khtml-user-select: none;
  125. -moz-user-select: none;
  126. -ms-user-select: none;
  127. user-select: none; }
  128.  
  129.  
  130. /* top bar */
  131. /* Logo */
  132. .mobile-topbar-header[data-mode="watch"] .mobile-topbar-logo:not(:hover) {opacity: 0 !important}
  133.  
  134. /* account avatar, search button, login button */
  135. .mobile-topbar-header[data-mode="watch"] .topbar-menu-button-avatar-button:not(:hover) {opacity: 0.3 !important}
  136. ytm-mobile-topbar-renderer ytm-menu .icon-button:not(:hover) {opacity: 0.3 !important}
  137. .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--text:not(:hover) {opacity: 0.3 !important}
  138. .mobile-topbar-header-sign-in-button:not(:hover) {opacity: 0.3 !important}
  139.  
  140. /* search bar */
  141. ytm-mobile-topbar-renderer {backdrop-filter: none !important}
  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: 0.8 !important}
  158.  
  159. /* player tip scrubber popup */
  160. .tooltip-wrapper {display: none !important}
  161.  
  162. /* make more space for the video content */
  163. .player-controls-pb {left: 15px !important; right: 15px !important}
  164. ytm-custom-control .player-controls-bottom {left: 0 !important; right: 0 !important}
  165. ytm-custom-control .player-controls-top {top: -8px !important}
  166.  
  167.  
  168. /* muted video popup */
  169. .ytp-unmute-animated .ytp-unmute-icon {border-bottom: none !important;border-radius: 50px !important;background-color: rgba(255, 255, 255, 0.59) !important}
  170. .ytp-unmute-shrink .ytp-unmute-text {opacity: 0 !important}
  171. .ytp-unmute-shrink .ytp-unmute-box {width: 0 !important}
  172.  
  173.  
  174. /* comments */
  175. .modern-styling {margin:0 !important}
  176. ytm-comments-simplebox-renderer {display: none !important}
  177. .draggable .engagement-panel-section-list-header {border:none !important}
  178. ytm-comment-renderer {padding:0 !important}
  179. ytm-comment-thread-renderer {padding:0 !important}
  180. .comment-content {padding: 0 4px !important}
  181. ytm-comment-replies-renderer {margin:0 !important}
  182. .comment-simplebox-placeholder {border: none !important}
  183. .comments-simplebox-placeholder {background: none !important}
  184. ytm-comments-simplebox-renderer {padding:0 !important}
  185. .rich-grid-sticky-header { display: none !important}
  186. ytm-comment-renderer .comment-expand {padding: 0 !important}
  187. ytm-comment-renderer .comment-details {margin: 0 !important}
  188.  
  189.  
  190. /* comments menu button */
  191. .comment-menu:not(hover) {opacity: 0 !important}
  192.  
  193. /* landscape comments panel */
  194. @media (min-width: 931px) and (orientation: landscape) {ytm-engagement-panel {width: 40% !important}}
  195. /* landscape sidebar recommendations */
  196. @media (min-width: 931px) and (orientation: landscape) {ytm-single-column-watch-next-results-renderer [section-identifier="related-items"] {padding:0 !important}}
  197. @media (min-width: 931px) and (orientation: landscape) {ytm-single-column-watch-next-results-renderer [section-identifier="related-items"] .item {padding:0 !important}}
  198.  
  199. /* submit comment field */
  200. ytm-comments-header-renderer {display: none !important}
  201.  
  202.  
  203.  
  204. /* Feed */
  205. .chip-bar {display: none !important}
  206. ytm-media-item[use-vertical-layout] .details {margin-top: 0 !important}
  207. ytm-rich-item-renderer ytm-media-item .details {margin-left: 0 !important}
  208. /* Thumbnail Time */
  209. ytm-thumbnail-overlay-time-status-renderer {margin-right: 0 !important}
  210. /* video recommendations under player */
  211. 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}
  212. ytm-item-section-renderer {border: none !important}
  213.  
  214. /* search info-panel */
  215. ytm-info-panel-container-renderer {display: none !important}
  216.  
  217. /* Shorts */
  218. ytm-reel-shelf-renderer .reel-shelf-header {margin:0 !important}
  219. ytm-reel-shelf-renderer {border: none !important; margin: 0 !important}
  220. ytm-reel-shelf-renderer .reel-shelf-items > * {margin: 0 !important}
  221. .reel-shelf-menu {display: none !important}
  222.  
  223.  
  224.  
  225. /* Title under player */
  226. .slim-video-metadata-header .slim-video-information-content.slim-video-information-empty-badge {padding:0 !important}
  227. ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding-top: 0 !important}
  228.  
  229. /* padding uploader avatar and subscribe button */
  230. ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding: 0 !important}
  231. .slim-owner-profile-icon {margin-right: 2px !important}
  232.  
  233. /* hide left green border on subscription button */
  234. .animated-action__background-container {display: none !important}
  235.  
  236. /* action buttons spacing */
  237. .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}
  238. .yt-spec-button-shape-next--size-m {padding: 0 6px !important; height: 33px !important}
  239. .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}
  240. /* downvotes arent shown anyway */
  241. .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}
  242. .slim-video-action-bar-actions {padding: 3px 3px !important}
  243.  
  244.  
  245. /* description box */
  246. .draggable ytm-structured-description-content-renderer {padding: 0 !important}
  247. ytm-expandable-video-description-body-renderer.expandable-video-description-modern {margin: 0 !important}
  248. /* description statistics */
  249. ytm-video-description-header-renderer .factoids {padding: 0 !important}
  250.  
  251.  
  252. /* name / views and time / chapter separator */
  253. .ytm-badge-and-byline-separator, .middot {opacity: 0 !important}
  254.  
  255. /* weird empty space after going fullscreen and leaving fullscreen video */
  256. .related-chips-slot-wrapper.slot-open {transform: none !important}
  257.  
  258.  
  259.  
  260.  
  261. 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}
  262.  
  263. /* includes paid promotion */
  264. .YtmPaidContentOverlayLink {display: none !important}
  265. `);
  266. }