☰

YT 簡化-控制項+按鈕

YT簡化-控制項+按鈕+進度條自定義修改youtube Simplify - control items + buttons + progress bar customize

As of 2024-09-06. See the latest version.

  1. /* ==UserStyle==
  2. @name  YT 簡化-控制項+按鈕
  3. @description  YT簡化-控制項+按鈕+進度條自定義修改youtube Simplify - control items + buttons + progress bar customize
  4. @namespace   https://greasyfork.org/zh-TW/users/4839
  5. @author       leadra
  6. @preprocessor stylus
  7. @version     1.9.5
  8. @license      MIT
  9. @var checkbox   ctrl_thin                               "控制項簡化"                 1
  10. @var checkbox   hide_btn                               "隱藏自動播放"                  1
  11. @var checkbox   hide_btn1                               "隱藏子母+迷你播放器"      1
  12. @var checkbox   hide_btn2                               "隱藏劇院+全螢幕"            1
  13. @var checkbox   hide_btn3                          "隱藏按鈕下載+超級感謝"           1
  14. @var checkbox   hide_section                   "隱藏頻道音樂遊戲資訊"                 0
  15. @var checkbox   hide_right                          "隱藏右+下欄位"                    0
  16. @var checkbox   info_hide                              "隱藏影片右下資訊卡"           1
  17. @var checkbox   hide_endcard                         "隱藏結束卡-移入才顯示"        1
  18. @var checkbox   hide_ctrl                              "隱藏控制列-移入才顯示"           1
  19. @var checkbox   hide_ico                                "隱藏標題右按鈕文字"         1
  20. @var checkbox   btn_text                                "縮短會員+訂閱按鈕文字"              1
  21. @var color		sub_background     				"未訂閱背景色"          					rgba(255, 0, 0, .5)
  22. @var checkbox   title_h                                   "縮短標題列間距"                1
  23. @var number     title_top                               ">標題上間距"                         [0, -50, 50, 5, "px"]
  24. @var number     title_line                               ">標題行距"                         [1, 0, 2, 0.1, "em"]
  25. @var checkbox   hide_ad                               "影片列表-廣告隱藏"                1
  26. @var checkbox   ad_resume                         "影片列表-看過影片變暗"                0
  27. @var checkbox   noround_livechat            "圓角去除-聊天室+影片"                       0
  28. @var checkbox   noround_btn                     "圓角去除-按鈕"                       0
  29. @var checkbox   progress_bar                     "進度條自定義"                           1
  30. @var number     progress_bar_size           "進度條圖片大小"                         [50, 0, 200, 10, "px"]
  31. @var text       progress_url                      "進度條URL"             ""https://raw.githubusercontent.com/leadra/pic/main/kurara.gif""
  32. @var checkbox   no_tab                      "*腳本Tabview>按鈕極小化"      1
  33. @var checkbox   scroll_hide                         ">卷軸Y隱藏"                          1
  34. @var checkbox   scroll_thin                         ">Tab卷軸thin"                       1
  35. @var checkbox   times_watched                 ">觀看次數位置上移"                       0
  36. @var checkbox   comment_width                 ">評論寬度"                                  1
  37. @var number     ytliveclock                 "*擴充YouTubeLiveClock-------->控制列下移間距修正"           [40, 0, 50, 5, "px"]
  38. @var checkbox     below_controls                 "*腳本Youtube Player Controls below Video修正"           0
  39. ==/UserStyle== */
  40.  
  41. /*
  42. 搭配腳本用:
  43. ----------Tabview(腳本)---------按鈕極小化
  44. https://greasyfork.org/zh-TW/scripts/428651
  45. >>>觀看次數位置上移(搭配Tabview服用，以免標題列變窄)
  46. >>>卷軸Y隱藏
  47.  
  48. YT Speed Buttons(L改)
  49. https://greasyfork.org/zh-TW/scripts/484535
  50. >>>按鈕位置修改+大小
  51. */
  52.  
  53. /*引用感謝[CSS]
  54. YT隱藏控制項(滑鼠移入才會顯示https://greasyfork.org/zh-TW/scripts/446045
  55. YT隱藏進度條(滑鼠移入才會顯示https://greasyfork.org/zh-TW/scripts/437994
  56. YT播放器簡化https://greasyfork.org/zh-TW/scripts/445999
  57. YT網頁版面調整https://github.com/sapondanaisriwan/AdashimaaTube
  58. YT進度條突出顯示https://greasyfork.org/zh-TW/scripts/402635
  59. YT主題:皮卡丘介面https://userstyles.org/styles/194352/poketube
  60. YT電影廣告消除https://greasyfork.org/zh-TW/scripts/468212
  61. YT所有頁面:看過影片變暗https://greasyfork.org/zh-TW/scripts/419722
  62. YT隱藏「下載、剪輯和感謝（包括推廣）」按鈕https://greasyfork.org/zh-TW/scripts/447614
  63. YT隱藏結束卡https://greasyfork.org/zh-TW/scripts/408725
  64. YT會員訂閱按鈕https://github.com/sapondanaisriwan/AdashimaaTube/blob/master/userstyles/features/red-subscribe-button.user.css
  65. */
  66. @-moz-document url-prefix("https://www.youtube.com/watch?v="), url-prefix("https://www.youtube.com/shorts/"), url-prefix("https://www.youtube.com/live/") {
  67. /*顯示隱藏即時通訊鈕-高度調整//@var checkbox   hide_chat_head               "即時通訊鈕緊縮"                                                0
  68. if hide_chat_head{
  69. #show-hide-button > .ytd-live-chat-frame.style-scope{padding:0px!important;margin: -0px 0px -0px 0px!important;}
  70.      //文字部分.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text{padding:0px!important;margin: -0px 0px -0px 0px!important;line-height:1em;height:1em;opacity:0.5;}
  71.     //tabview聊天室新開視窗按鈕位置修正ytd-watch-flexy[flexy][is-two-columns_] #chat.tyt-chat-frame-ready:not([collapse]) tyt-iframe-popup-btn.tyt-btn-enabled {padding: 0px !important;margin: 0px 30px -0px 0px!important;width:2em;height:2em;bottom:auto;}}*/
  72.  
  73. //訂閱提醒框隱藏反黑
  74. yt-notification-action-renderer[darker-dark-theme] tp-yt-paper-toast.yt-notification-action-renderer{background-color: rgb(39, 39, 39);display:none !important;}
  75.  
  76. //去除圓角-聊天室+影片
  77. if noround_livechat {
  78.     ytd-live-chat-frame#chat.ytd-watch-flexy{
  79.         border-radius: 0px;
  80.         }
  81.     ytd-watch-flexy[rounded-player-large]:not([fullscreen]):not([theater]) #ytd-player.ytd-watch-flexy {
  82.         border-radius: 0px !important;
  83. }}
  84. //去除圓角-按鈕
  85. if noround_btn {
  86.     html .yt-spec-button-shape-next--size-m,
  87.     html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start,
  88.     html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--segmented-end{
  89.         border-radius:0;
  90.         }}
  91.      
  92. //控制項簡化:保留音量提示
  93. if ctrl_thin{
  94. .ytp-bezel,//中間LOGO
  95. .ytp-doubletap-ui-legacy,//左右側前進、後退
  96. .ytp-doubletap-ui,//去除縮略圖上的播放提示
  97. .ytp-gradient-top,//上邊漸進黑
  98. //.ytp-gradient-bottom,//下邊漸進黑
  99. .ytp-chrome-top,//全螢幕上方標題
  100. .ytp-pause-overlay,//暫停
  101. //.annotation//註解
  102. //.ytp-pip-button.ytp-button,//子母畫面(舊版)
  103. //.ytp-size-button.ytp-button,//劇院模式
  104. //.ytp-miniplayer-button.ytp-button,//迷你
  105. //.ytp-autonav-toggle-button,//自動播放(背景元素無法去除)
  106. //.c4-player-container.c4-flexible-player-container,
  107. ytd-thumbnail-overlay-loading-preview-renderer{
  108. display:none !important;
  109. }
  110.  
  111. }
  112. /*隱藏控制列-移入顯示+控制列黑底*/
  113. if hide_ctrl{
  114. .ytp-gradient-bottom,.ytp-chrome-bottom {opacity:0;}
  115. .ytp-chrome-bottom:hover  {opacity:1;background:rgba(0, 0, 0, .4);}
  116.         }
  117.  
  118. /*隱藏按鈕>自動播放；子母畫面(新版)+迷你；劇院+全螢幕*/
  119. if hide_btn{[data-tooltip-target-id="ytp-autonav-toggle-button"],{display:none !important;}}
  120. if hide_btn1{#movie_player div.ytp-chrome-controls button.ytp-pip-button.ytp-button,.ytp-miniplayer-button{display:none !important;}}
  121. if hide_btn2{.ytp-size-button,.ytp-fullscreen-button{display:none !important;}}//.ytp-multicam-button,.ytp-remote-button,.ytp-settings-button
  122.  
  123. /*隱藏按鈕>下載+超級感謝*/
  124. if hide_btn3{ytd-download-button-renderer ,#flexible-item-buttons [aria-label="Thanks"],#flexible-item-buttons [aria-label="超級感謝"] {display: none !important;}}
  125. //yt-button-view-model:has([aria-label="超級感謝"]) {display: none !important;}
  126.  
  127. /*影片列表-電影購買+廣告隱藏*/
  128. if hide_ad{
  129.     //影片列表-電影購買[https://greasyfork.org/zh-TW/scripts/468212]
  130.     ytd-watch-next-secondary-results-renderer.ytd-watch-flexy ytd-compact-movie-renderer.style-scope.ytd-item-section-renderer ,#offer-module.ytd-watch-next-secondary-results-renderer{display: none;}
  131.     //影片列表-廣告
  132.     td-promoted-sparkles-web-renderer,ytd-ad-slot-renderer{display: none;}
  133.                     }
  134. /*影片列表-看過影片變暗[腳本全網域https://greasyfork.org/zh-TW/scripts/419722]*/
  135. if ad_resume{
  136. //#progress.ytd-thumbnail-overlay-resume-playback-renderer {bottom: 0px; position: absolute;z-index:1;background: rgba(0, 0, 0, .5);min-height: 95px;}
  137. ytd-thumbnail-overlay-resume-playback-renderer::after {
  138.     background: rgba(0, 0, 0, .5);
  139.     content: "看過";    //text-align:center;
  140.     font-size:20px;
  141.     display: block;
  142.     bottom: 0;
  143.     height: 95px;
  144.     width: 100%;
  145.     position: absolute;
  146.     z-index: 10;
  147.     }}
  148. 	
  149. //隱藏資訊卡
  150. if info_hide {#columns #player .ytp-iv-player-content, ytd-watch-flexy .ytp-iv-player-content{display: none;}}
  151.  
  152. //縮短標題列間距
  153. if title_h{
  154.     //Enhancer for YouTube™修正
  155. 	html[tyt-deferred][sxmq8="1"] ytd-watch-flexy:not([hidden]) ytd-watch-metadata.style-scope.ytd-watch-flexy{margin: 0px 0px -0px 0px!important;padding:0 !important;}
  156. 		//Tabview
  157.     body ytd-watch-flexy[cinematics-enabled] #below.ytd-watch-flexy{margin: 0px 0px 0px 0px!important;}
  158. 		//無Tabview
  159. 	ytd-watch-metadata.ytd-watch-flexy,[rounded-info-panel] #clarify-box.ytd-watch-flexy{margin: 0px 0px 0px 0px!important;}
  160.     //標題上間距
  161.     #below h1.ytd-watch-metadata ,yt-formatted-string[data-title-details]{line-height:title_line;margin: title_top 0px -0px 0px!important;}
  162.     //頻道名稱上下方空白
  163.     .style-scope.ytd-watch-metadata{margin: -0px 0px -0px 0px!important;}
  164.     #top-row.ytd-watch-metadata{margin: -0px 0px -0px 0px!important;}
  165.     //會員專屬標題
  166.         .badge-style-type-members-only.ytd-badge-supported-renderer {margin:-0px 0px -60px 140px; position:relative; z-index: 1; background: rgba(0, 0, 0, .5);}
  167.     //頻道名稱
  168.     .style-scope.ytd-video-owner-renderer{
  169.     padding:0px 0px;
  170.     margin: 0px 0px 0px -0px!important;
  171.     //max-width: 350px!important;
  172.     line-height:1em!important;
  173.         }
  174.     //.ytd-channel-name{padding:0px 0px 0px 0px;margin: 0px 0px 0px -0px;}
  175.     //#upload-info.ytd-video-owner-renderer{padding:0;margin: -0px 0px -0px -0px!important;}
  176.     //頻道訂閱數
  177.     #owner-sub-count.ytd-video-owner-renderer{
  178.         font-size: 16px;
  179.         line-height:1em!important;
  180.     }
  181.     //觀看次數文字
  182.     #info-container.ytd-watch-info-text{
  183.     margin: 0px 0px 0px 10px!important;
  184.     padding:0px!important;
  185.     font-size:18px!important;
  186.     }
  187.     //標題列右側按鈕
  188. #actions-inner.ytd-watch-metadata{max-width: 80%;}
  189.     .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading-trailing .yt-spec-button-shape-next__secondary-icon{margin:0px;}
  190.     .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {padding:0px 5px;}
  191.     //.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading-trailing .yt-spec-button-shape-next__icon{margin: 0px;}
  192. 	//.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon {margin: 0px;}
  193.     .yt-spec-button-shape-next__icon{margin: 0px!important;}
  194.                 }
  195.  
  196. //縮短會員+訂閱按鈕文字
  197. if btn_text{
  198.     //標題列加入會員按鈕#owner
  199.     ytd-button-renderer .yt-spec-button-shape-next__button-text-content{
  200.     //max-width:3em;
  201.     font-weight:bold;
  202.     font-size: 1.6em;
  203.     margin: -0px -0px -0px -0px!important;
  204.     padding: 0px!important;
  205.     }
  206. 	/*會員訂閱按鈕*/
  207.     #notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-shape > button {
  208.         //小鈴鐺已訂閱&.yt-spec-button-shape-next.yt-spec-button-shape-next--tonal {background-color:sub_background !important;}
  209.         /*下拉箭頭*/
  210.         > div {&.yt-spec-button-shape-next__secondary-icon {display: none !important;}}
  211.     }
  212. 	//已加會員按鈕
  213.     yt-button-shape:not(:hover) {
  214.         .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
  215. 			color: var(--yt-spec-static-brand-white) !important;
  216.     		background-color: rgba(255, 255, 255, .3) !important;//var(--yt-spec-badge-chip-background)
  217. 			border-style:double;
  218.     		padding: 0px 10px !important;
  219.         }
  220.     }
  221. 	//未訂閱(含Shorts)
  222.     yt-button-shape.ytd-subscribe-button-renderer:not([hidden]) {
  223.         .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled ,
  224.         .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled {
  225. 			color: var(--yt-spec-static-brand-white) !important;
  226.     		background-color: sub_background !important;//var(--yt-spec-badge-chip-background)
  227.     		padding: 0px 10px !important;
  228.         }
  229.     }
  230.     //標題列訂閱按鈕
  231.     #subscribe-button-shape .yt-spec-button-shape-next__button-text-content{
  232.         max-width:1em;
  233.     font-weight:bold;
  234.     font-size: 1.5em;
  235.     margin: -0px -0px -0px -0px!important;
  236.     padding: 0px!important;
  237.         }
  238.     ytd-subscribe-button-renderer .yt-spec-button-shape-next__button-text-content{max-width:0em;}
  239.     ytd-video-owner-renderer .yt-spec-button-shape-next__button-text-content{max-width:1em;}
  240. 	//span.yt-core-attributed-string.yt-core-attributed-string--white-space-no-wrap {display: none;}
  241. }
  242.  
  243. //隱藏標題列右側按鈕文字
  244.    if hide_ico {
  245. 	yt-button-view-model .yt-spec-button-shape-next__button-text-content,
  246. 	ytd-download-button-renderer .yt-spec-button-shape-next__button-text-content ,
  247.     yt-touch-feedback-shape .yt-spec-button-shape-next__button-text-content,
  248. {display: none !important;}
  249. }
  250.  
  251. //隱藏頻道音樂遊戲資訊🎵🎮
  252.     if hide_section{ytd-video-description-infocards-section-renderer , ytd-horizontal-card-list-renderer.style-scope.ytd-structured-description-content-renderer , #contents.ytd-rich-metadata-row-renderer  {display: none ;}}
  253.     
  254. //隱藏右+下欄位
  255.     if hide_right{ytd-watch-flexy[cinematics-enabled] #secondary.ytd-watch-flexy {display: none ;}//{position: fixed ;    z-index: 1;left:0;opacity:0.7}
  256. ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy{display: none ;}
  257. }
  258.  
  259. //隱藏結束連結卡
  260. if hide_endcard {
  261.    div[class*="video-player"]:not(:hover) div[class^="ytp-ce"],
  262.    div[class*="ytp-autohide"] div[class^="ytp-ce"] {
  263.       display: none !important;
  264.    }}
  265.  
  266. /*炒飯進度條*/
  267. if progress_bar{
  268.     .ytp-scrubber-button,.ytp-play-progress {
  269.         background: #ffe100a6;
  270.         transform: rotate(0deg);
  271.         filter: drop-shadow(0 0 1px gold) drop-shadow(0 0 2px gold) drop-shadow(0 0 3px gold);
  272.     }
  273.     /*控制項高亮*/
  274.     .ytp-volume-panel:hover,
  275.     .ytp-chrome-controls a:hover svg,
  276.     .ytp-chrome-controls button:hover svg {
  277.         filter: drop-shadow(0 0 1px black) drop-shadow(0 0 2px gold)  drop-shadow(0 0 5px gold) !important;
  278.     }
  279.     //進度條調整
  280. .ytp-scrubber-pull-indicator {
  281.     background-color: #fff0;
  282.     height: progress_bar_size;
  283.     width: progress_bar_size;
  284.     background-image: url(progress_url);
  285.     background-repeat: no-repeat;
  286.     background-position: center;
  287.     background-size: progress_bar_size;
  288.     bottom: 0px;
  289.     left: progress_bar_size *-(6.5/10) ;
  290.     transform: rotate(0deg);
  291. 	transform: scale(1.1);
  292. 	border-radius: 0px
  293.     }}
  294.  
  295. /* 
  296. @var checkbox   chat_height                          "聊天室延伸(tabview衝突)"                 0
  297. @var number     chat_width                          "聊天室欄寬"                         [400, 300, 800, 10, "px"]
  298. // 聊天室延伸(tabview腳本衝突)   チャット欄を画面一番下まで伸ばす
  299. if chat_height { ytd-live-chat-frame#chat {height: calc(100vh *0.92) !important; //height: calc(100vh - 100px)}
  300.     // chat欄位無邊界+影片上方空白消除+chat聊天室欄寬
  301.     #columns {margin: -0px 0px  0px  0px  !important;   max-width: 100% !important;
  302.         & > #primary,& > #secondary{padding-top: 0!important;}
  303.         & > #secondary {width: chat_width;}}}
  304. */
  305. //Tabview(腳本)按鈕極小化
  306. if no_tab {
  307.     ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content]{
  308.     padding:0;
  309.     font-size:18px;
  310.     line-height:1em;
  311.     }
  312.                     }
  313. //卷軸Y隱藏
  314. if scroll_hide{
  315. html {
  316.     scrollbar-color: none !important;
  317.     scrollbar-width: none !important;
  318. }
  319.     ::-webkit-scrollbar {
  320.         display:none!important;
  321.   }
  322.     }
  323. //Tab卷軸none #tab-comments #tab-videos #tab-info
  324.  ytd-watch-flexy #right-tabs  .tab-content-cld{
  325. 	scrollbar-width: none !important;
  326. }
  327. //Tab卷軸thin
  328. if scroll_thin{
  329. ytd-watch-flexy #right-tabs  .tab-content-cld{
  330. 	scrollbar-width: thin !important;
  331. }
  332.     }
  333.  
  334. 	
  335. //觀看次數上移
  336. if times_watched {
  337.     //觀看次數區ytd-watch-flexy[rounded-player-large]:not([fullscreen]):not([theater]) #ytd-player.ytd-watch-flexy
  338.     ytd-watch-flexy[rounded-player-large]:not([fullscreen]):not([theater]) #bottom-row.ytd-watch-metadata{
  339.     font-size:13em!important;
  340.     margin: 5px!important;
  341.     max-width: 25%!important;
  342. 	max-height: 30px!important;
  343.     position: absolute;
  344.     z-index:1;
  345.     left:25%;
  346.     bottom:0%;
  347.         }
  348. }
  349. //評論寬度+文字大小
  350. if comment_width {
  351.     #content-text.ytd-comment-view-model{
  352.         font-size:comment_size;
  353.     }
  354.     ytd-watch-flexy .tab-content-cld#tab-comments{
  355.         padding:0px 0px !important;
  356.         margin:0px 0px 0px 0px !important;
  357. 		overflow-x:hidden;
  358.         //position:relative;
  359.     }
  360.     #body.ytd-comment-view-model{
  361.         margin:0px 0px 0px 0px !important;
  362.     ytd-expander>*{
  363.         padding:0px !important;
  364.         margin:0px 10px 0px 0px !important;
  365.         width: 105%!important;
  366.         }
  367.     }
  368.     .ytd-comment-view-model{
  369.         padding:0px !important;
  370.         margin:0px 0px 0px 0px !important;
  371.     }
  372.     .ytd-comment-view-model #author-thumbnail{
  373.         padding:0px !important;
  374.         margin:0px 5px 0px 0px !important;
  375.     }
  376. }
  377. //資訊文字大小@var number     comment_size                   ">評論資訊文字大小"                         [17, 10, 30, 1, "px"]
  378. /*
  379. #description.ytd-video-secondary-info-renderer{
  380.         font-size:comment_size;
  381. }*/
  382.  
  383. //擴充YouTubeLiveClock控制列間距修正https://chromewebstore.google.com/detail/youtubeliveclock/chpodcedholiggcllnmmjlnghllddgmj
  384.     html:has(style#ytlc-style-for-native-control) ytd-watch-flexy[flexy][is-two-columns_][theater] #columns.ytd-watch-flexy,
  385.     html:has(style#ytlc-style-for-native-control) #columns.ytd-watch-flexy #player::after {
  386.     margin:  ytliveclock 0px 0px 0px!important;
  387.     padding:0px!important;
  388.     }
  389. //Youtube Player Controls below Video間距修正+強制顯示https://greasyfork.org/scripts/469704
  390. if below_controls{
  391.  .yt8447-enabled:not([fullscreen]) #below.ytd-watch-flexy, .yt8447-enabled[theater]:not([fullscreen]) #secondary.ytd-watch-flexy {
  392.       margin-top: 40px!important;
  393.   }
  394.   .playing-mode>  .ytp-chrome-bottom:not(:hover)  {opacity:1!important;visibility:visible!important;}
  395.   }
  396. }