☰

Greasy Fork is available in English.

YT 簡化-控制項+按鈕

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

Från och med 2024-07-18. Se den senaste versionen.

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