Greasy Fork is available in English.

YT 簡化-控制項+按鈕

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

Устаревшая версия за 03.04.2024. Перейдите к последней версии.

  1. /* ==UserStyle==
  2. @name YT 簡化-控制項+按鈕
  3. @description youtube YT簡化-控制項+按鈕+進度條自定義修改youtube Simplify - control items + buttons + progress bar customize
  4. @namespace 1
  5. @homepageURL https://greasyfork.org/zh-TW/users/4839
  6. @author leadra
  7. @preprocessor stylus
  8. @version 1.7.3
  9. @license MIT
  10. @var checkbox ctrl_thin "控制項簡化" 1
  11. @var checkbox hide_btn "隱藏自動子母迷你劇院全螢" 1
  12. @var checkbox hide_btn2 "隱藏下載+超級感謝" 1
  13. @var checkbox hide_section "隱藏頻道音樂遊戲資訊" 0
  14. @var checkbox hide_right "隱藏右+下欄位" 0
  15. @var checkbox info_hide "隱藏資訊卡" 1
  16. @var checkbox hide_endcard "隱藏結束連結卡-移入才顯示" 1
  17. @var checkbox hide_ctrl "隱藏控制列-移入才顯示" 1
  18. @var checkbox title_h "影片標題+按鈕上下間距0" 1
  19. @var number title_top ">>>標題上間距" [0, -50, 20, 10, "px"]
  20. @var checkbox hide_ad "影片列表-廣告隱藏" 1
  21. @var checkbox ad_resume "影片列表-看過影片變暗" 0
  22. @var checkbox noround_livechat "去除圓角-聊天室+影片" 0
  23. @var checkbox noround_btn "去除圓角-按鈕" 0
  24. @var checkbox progress_bar "進度條自定義" 1
  25. @var number progress_bar_size "進度條圖片大小" [80, 0, 200, 10, "px"]
  26. @var text progress_url "進度條URL" "url(https://raw.githubusercontent.com/leadra/pic/main/kurara.gif)"
  27. @var checkbox no_tab "----------Tabview(腳本)--------->>>按鈕極小化" 1
  28. @var checkbox scroll_hide ">>>卷軸Y隱藏" 1
  29. @var checkbox times_watched ">>>觀看次數位置上移" 0
  30. @var checkbox speed_button "--------YT Speed (腳本)------->>>按鈕位置修改" 0
  31. @var number speed_top ">>>按鈕上下(%)" [1.5, -10, 20, 0.5, "%"]
  32. @var number speed_left ">>>按鈕左右(%)" [30, 0, 70, 5, "%"]
  33. @var number speed_size ">>>按鈕大小(px)" [13, 0, 30, 1, "px"]
  34. ==/UserStyle== */
  35.  
  36. /*
  37. 搭配腳本用:
  38. ----------­Tabview(­腳本)-------­--按鈕極小化
  39. https://greasyfork.org/zh-TW/scripts/428651
  40. >>>觀看次數位置上移(搭配­Tabview服用,以免資訊列變窄)
  41. >>>卷軸Y隱藏
  42.  
  43. YT Speed Buttons(L改)
  44. https://greasyfork.org/zh-TW/scripts/484535
  45. >>>按鈕位置修改+大小
  46. */
  47.  
  48. /*引用感謝[CSS]
  49. YT隱藏控制項(滑鼠移入才會顯示https://greasyfork.org/zh-TW/scripts/446045
  50. YT隱藏進度條(滑鼠移入才會顯示https://greasyfork.org/zh-TW/scripts/437994
  51. YT播放器簡化https://greasyfork.org/zh-TW/scripts/445999
  52. YT網頁版面調整https://github.com/sapondanaisriwan/AdashimaaTube
  53. YT進度條突出顯示https://greasyfork.org/zh-TW/scripts/402635
  54. YT主題:皮卡丘介面https://userstyles.org/styles/194352/poketube
  55. YT電影廣告消除https://greasyfork.org/zh-TW/scripts/468212
  56. YT所有頁面:看過影片變暗https://greasyfork.org/zh-TW/scripts/419722
  57. YT隱藏「下載、剪輯和感謝(包括推廣)」按鈕https://greasyfork.org/zh-TW/scripts/447614
  58. YT隱藏結束卡https://greasyfork.org/zh-TW/scripts/408725
  59. */
  60. @-moz-document url-prefix("https://www.youtube.com/watch?v=") {
  61. /*顯示隱藏即時通訊鈕-高度調整//@var checkbox hide_chat_head "即時通訊鈕緊縮" 0
  62. if hide_chat_head{
  63. #show-hide-button > .ytd-live-chat-frame.style-scope{padding:0px!important;margin: -0px 0px -0px 0px!important;}
  64. //文字部分.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;}
  65. //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;}}*/
  66.  
  67. //去除圓角-聊天室+影片
  68. if noround_livechat {
  69. ytd-live-chat-frame#chat.ytd-watch-flexy{
  70. border-radius: 0px;
  71. }
  72. ytd-watch-flexy[rounded-player-large]:not([fullscreen]):not([theater]) #ytd-player.ytd-watch-flexy {
  73. border-radius: 0px !important;
  74. }}
  75. //去除圓角-按鈕
  76. if noround_btn {
  77. html .yt-spec-button-shape-next--size-m,
  78. html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start,
  79. html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--segmented-end{
  80. border-radius:0;
  81. }}
  82. //控制項簡化:保留音量提示
  83. if ctrl_thin{
  84. .ytp-bezel,//中間LOGO
  85. .ytp-doubletap-ui-legacy,//左右側前進、後退
  86. .ytp-doubletap-ui,//去除縮略圖上的播放提示
  87. .ytp-gradient-top,//上邊漸進黑
  88. //.ytp-gradient-bottom,//下邊漸進黑
  89. .ytp-chrome-top,//全螢幕上方標題
  90. //.ytp-pip-button.ytp-button,//子母畫面(舊版)
  91. //.ytp-size-button.ytp-button,//劇院模式
  92. //.ytp-miniplayer-button.ytp-button,//迷你
  93. //.ytp-autonav-toggle-button,//自動播放(背景元素無法去除)
  94. //.c4-player-container.c4-flexible-player-container,
  95. ytd-thumbnail-overlay-loading-preview-renderer{
  96. display:none !important;
  97. }
  98.  
  99. }
  100. /*控制項隱藏-移入顯示+控制列黑底*/
  101. if hide_ctrl{
  102. .ytp-gradient-bottom,.ytp-chrome-bottom {opacity:0;}
  103. .ytp-chrome-bottom:hover {opacity:1;background:rgba(0, 0, 0, .4);}
  104. }
  105.  
  106. /*按鈕隱藏>子母畫面(新版)+自動播放+迷你+劇院+全螢幕*/
  107. if hide_btn{#movie_player div.ytp-chrome-controls button.ytp-pip-button.ytp-button,button[data-tooltip-target-id="ytp-autonav-toggle-button"],.ytp-miniplayer-button.ytp-button,.ytp-size-button.ytp-button,.ytp-fullscreen-button.ytp-button{display:none !important;}}
  108. /*按鈕隱藏>下載+超級感謝*/
  109. if hide_btn2{ytd-download-button-renderer ,#flexible-item-buttons [aria-label="Thanks"],#flexible-item-buttons [title="Show support with Super Thanks"] {display: none !important;}}
  110. /*影片列表-電影購買+廣告隱藏*/
  111. if hide_ad{
  112. //影片列表-電影購買[https://greasyfork.org/zh-TW/scripts/468212]
  113. 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;}
  114. //影片列表-廣告
  115. td-promoted-sparkles-web-renderer,ytd-ad-slot-renderer{display: none;}
  116. }
  117. /*影片列表-看過影片變暗[腳本版https://greasyfork.org/zh-TW/scripts/419722]*/
  118. if ad_resume{
  119. //#progress.ytd-thumbnail-overlay-resume-playback-renderer {bottom: 0px; position: absolute;z-index:1;background: rgba(0, 0, 0, .5);min-height: 95px;}
  120. ytd-thumbnail-overlay-resume-playback-renderer::after {
  121. background: rgba(0, 0, 0, .5);
  122. content: "看過"; //text-align:center;
  123. font-size:20px;
  124. display: block;
  125. bottom: 0;
  126. height: 95px;
  127. width: 100%;
  128. position: absolute;
  129. z-index: 10;
  130. }}
  131. //隱藏資訊卡
  132. if info_hide {#columns #player .ytp-iv-player-content, ytd-watch-flexy .ytp-iv-player-content{display: none;}}
  133. /*影片標題+按鈕上下間距*/
  134. if title_h{
  135. /*標題上間距*/
  136. body ytd-watch-flexy[cinematics-enabled] #below.ytd-watch-flexy{letter-spacing:-0px;margin: title_top 0px -0px 0px!important;}//margin: -0px 0px -0px 0px!important;
  137. /*標題*/
  138. #below h1.ytd-watch-metadata ,yt-formatted-string[data-title-details]{line-height:1em;}
  139.  
  140. /*頻道名稱上下方空白*/
  141. .style-scope.ytd-watch-metadata{margin: -0px 0px -0px 0px!important;}
  142. #top-row.ytd-watch-metadata{margin: -0px 0px -0px 0px!important;}
  143. /*會員專屬標題*/
  144. .badge-style-type-members-only.ytd-badge-supported-renderer {margin: -0px 0px -60px 140px;position: relative ; z-index: -10;}
  145. //標題列-頻道名稱
  146. .style-scope.ytd-video-owner-renderer{
  147. padding:0px 0px;
  148. margin: 0px 0px 0px -0px!important;
  149. max-width: 300px!important;
  150. line-height:1em!important;
  151. }
  152. .ytd-channel-name{padding:0px 0px 0px 0px;margin: 0px 0px 0px -0px;}
  153. //#upload-info.ytd-video-owner-renderer{padding:0;margin: -0px 0px -0px -0px!important;}
  154. //頻道訂閱數
  155. #owner-sub-count.ytd-video-owner-renderer{
  156. font-size: 16px;
  157. line-height:1em!important;
  158. }
  159. //觀看次數文字
  160. #info-container.ytd-watch-info-text{
  161. margin: 0px 0px 0px 10px;
  162. font-size:16px;
  163. }
  164. }
  165.  
  166. //隱藏頻道音樂遊戲資訊🎵🎮
  167. 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 ;}}
  168. //隱藏右+下欄位
  169. if hide_right{ytd-watch-flexy[cinematics-enabled] #secondary.ytd-watch-flexy {display: none ;}//{position: fixed ; z-index: 1;left:0;opacity:0.7}
  170. ytd-watch-metadata.watch-active-metadata.style-scope.ytd-watch-flexy{display: none ;}
  171. }
  172. //隱藏右+下欄位
  173. if hide_endcard {
  174. div[class*="video-player"]:not(:hover) div[class^="ytp-ce"],
  175. div[class*="ytp-autohide"] div[class^="ytp-ce"] {
  176. display: none !important;
  177. }}
  178. /*炒飯進度條*/
  179. if progress_bar{
  180. .ytp-scrubber-button,.ytp-play-progress {
  181. background: #ffe100a6;
  182. transform: rotate(0deg);
  183. filter: drop-shadow(0 0 1px gold) drop-shadow(0 0 2px gold) drop-shadow(0 0 3px gold);
  184. }
  185. /*控制項高亮*/
  186. .ytp-volume-panel:hover,
  187. .ytp-chrome-controls a:hover svg,
  188. .ytp-chrome-controls button:hover svg {
  189. filter: drop-shadow(0 0 1px black) drop-shadow(0 0 2px gold) drop-shadow(0 0 5px gold) !important;
  190. }
  191. //進度條調整
  192. .ytp-scrubber-pull-indicator {
  193. background-color: #fff0;
  194. height: progress_bar_size;
  195. width: progress_bar_size;
  196. background-image: progress_url;
  197. background-repeat: no-repeat;
  198. background-position: center;
  199. background-size: progress_bar_size;
  200. bottom: 0px;
  201. left: progress_bar_size *-(6.5/10) ;
  202. transform: rotate(0deg);
  203. transform: scale(1.1);
  204. border-radius: 0px
  205. }}
  206. /*
  207. @var checkbox chat_height "聊天室延伸(tabview衝突)" 0
  208. @var number chat_width "聊天室欄寬" [400, 300, 800, 10, "px"]
  209. // 聊天室延伸(tabview腳本衝突) チャット欄を画面一番下まで伸ばす
  210. if chat_height { ytd-live-chat-frame#chat {height: calc(100vh *0.92) !important; //height: calc(100vh - 100px)}
  211. // chat欄位無邊界+影片上方空白消除+chat聊天室欄寬
  212. #columns {margin: -0px 0px 0px 0px !important; max-width: 100% !important;
  213. & > #primary,& > #secondary{padding-top: 0!important;}
  214. & > #secondary {width: chat_width;}}}
  215. */
  216. //Tabview(腳本)按鈕極小化
  217. if no_tab {
  218. ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content]{
  219. padding:0;
  220. font-size:18px;
  221. line-height:1em;
  222. }
  223. }
  224. //卷軸Y隱藏
  225. if scroll_hide{
  226. html {
  227. scrollbar-color: auto !important;
  228. scrollbar-width: auto !important;
  229. }
  230. ::-webkit-scrollbar {
  231. display:none!important;
  232. }
  233. }
  234. //觀看次數上移
  235. if times_watched {
  236. //觀看次數區
  237. #bottom-row.ytd-watch-metadata{
  238. margin: -0px 0px 0px 0px!important;
  239. max-width: 25%!important;
  240. position: relative;
  241. z-index:-0;
  242. left:450px;
  243. bottom:35px;
  244. }
  245. //標題列右側
  246. #actions-inner.ytd-watch-metadata{max-width: 80%;}
  247. //標題列右側按鈕
  248. .yt-spec-button-shape-next__button-text-content{
  249. max-width:35px;
  250. margin: -0px -0px -0px -5px!important;
  251. }
  252. .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
  253. padding:0px 5px 0px 10px;margin: 0px 0px 0px -0px;
  254. }
  255. }
  256.  
  257. //YT速度按鈕位置https://greasyfork.org/zh-TW/scripts/484535
  258. if speed_button{
  259. div.vsb-container {margin-left: speed_left !important;
  260. margin-top: speed_top !important;
  261. position: fixed;
  262. font-size:speed_size;
  263. }
  264. }
  265.  
  266. }