☰

YouTube - Custom Video Progress Bar Colors [Updated]

Custom Video Progress Bar Colors [Updated] by Nick2bad4u - 2024

目前为 2024-12-27 提交的版本。查看 最新版本。

  1. /* ==UserStyle==
  2. @name         YouTube - Custom Video Progress Bar Colors [Updated]
  3. @namespace    https://github.com/Nick2bad4u/UserStyles
  4. @author       nick2bad4u
  5. @description  Custom Video Progress Bar Colors [Updated] by Nick2bad4u - 2024
  6. @homepageURL  https://github.com/Nick2bad4u/UserStyles
  7. @version      1.0.3
  8. @license      UnLicense
  9. @preprocessor uso
  10. @advanced dropdown bartype "Bar type" {
  11.     Solid "Solid*" <<<EOT /* scrubber button *\/
  12. .html5-scrubber-button:hover, .ytp-scrubber-button:hover, .ytp-swatch-background-color, .ytp-swatch-background-color-secondary {
  13.    background: /*[[scrubbercolour]]*\/ !important;
  14. }
  15. /* progress bar *\/
  16. .ytp-progress-bar {
  17.    background: /*[[colour]]*\/ !important;
  18. }
  19. /*[[volumecolour]]*\/ {
  20.    background: /*[[colour]]*\/ !important;
  21.    z-index: -117;
  22. }
  23. .ytp-settings-button.ytp-hd-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-4k-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-5k-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-8k-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-3d-badge/*[[extras]]*\/::after {
  24.    background-color: /*[[colour]]*\/ !important;
  25. }
  26. .ytp-swatch-color/*[[extras]]*\/ {
  27.    color: /*[[colour]]*\/ !important;
  28. }
  29. .ytp-menuitem/*[[extras]]*\/[aria-checked="true"] .ytp-menuitem-toggle-checkbox/*[[extras]]*\/ {
  30.    background: /*[[colour]]*\/ !important;
  31. }
  32. .ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
  33.    fill: /*[[colour]]*\/ !important;
  34. }
  35. .ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg/*[[extras]]*\/, .ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg/*[[extras]]*\/ {
  36.    fill: /*[[colour]]*\/ !important;
  37. }
  38. .resume-playback-progress-bar/*[[extras]]*\/ {
  39.    background: /*[[colour]]*\/ !important;
  40. }
  41. .ytp-chrome-controls .ytp-button/*[[extras]]*\/[aria-pressed]::after {
  42.    background-color: /*[[colour]]*\/ !important;
  43. }
  44. .yt-uix-checkbox-on-off input/*[[extras2]]*\/[type="checkbox"]:checked + label {
  45.    background-color: /*[[colour]]*\/ !important;
  46. }
  47. #ryd-bar/*[[extras2]]*\/ {
  48.    background-color: /*[[colour]]*\/ !important;
  49. } EOT;
  50.     Glow_gradient "Glow/gradient" <<<EOT .html5-play-progress, .ytp-progress-bar {
  51.    background: /*[[colour]]*\/ !important; /* Old browsers *\/
  52.    background: -moz-linear-gradient(left, #1b1b1b 0%, /*[[colour]]*\/ 100%) !important;
  53.    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1b1b1b), color-stop(100%,/*[[colour]]*\/)) !important;
  54.    background: -webkit-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
  55.    background: -o-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
  56.    background: -ms-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
  57.    background: linear-gradient(to right, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
  58. }
  59. /*.html5-load-progress, .ytp-load-progress {
  60.    background: #404040 !important;
  61. }*\/
  62. /* scrubber button glow *\/
  63. .html5-scrubber-button, .ytp-scrubber-button {
  64.    border-color: #1B1B1B !important;
  65.    box-shadow: 0px 0px 3px /*[[colour]]*\/, 0px 0px 5px /*[[colour]]*\/, 0px 0px 0px /*[[colour]]*\/ !important;
  66.    transition: box-shadow 0.2s, background 0.2s !important;
  67. }
  68. /* scrubber button *\/
  69. .ytp-swatch-background-color, .ytp-swatch-background-color-secondary, .html5-scrubber-button:hover, .ytp-scrubber-button:hover {
  70.    background-color: /*[[scrubbercolour]]*\/ !important;
  71. }
  72. /* scrubber button glow on hover *\/
  73. .html5-scrubber-button:hover, .ytp-scrubber-button:hover {
  74.    border-color: #1B1B1B !important;
  75.    box-shadow: 0px 0px 6px /*[[colour]]*\/, 0px 0px 8px /*[[colour]]*\/, 0px 0px 10px /*[[colour]]*\/ !important;
  76. }
  77. /* volume control *\/
  78. /*[[volumecolour]]*\/ {
  79.    background: /*[[colour]]*\/ !important; /* Old browsers *\/
  80.    background: -moz-linear-gradient(left, #1b1b1b 0%, /*[[colour]]*\/ 100%) !important;
  81.    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1b1b1b), color-stop(100%,/*[[colour]]*\/)) !important;
  82.    background: -webkit-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
  83.    background: -o-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
  84.    background: -ms-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
  85.    background: linear-gradient(to right, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
  86.    z-index: -117;
  87. }
  88. /* extras *\/
  89. .ytp-settings-button.ytp-hd-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-4k-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-5k-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-8k-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-3d-badge/*[[extras]]*\/::after {
  90.    background-color: /*[[colour]]*\/ !important;
  91. }
  92. .ytp-swatch-color/*[[extras]]*\/ {
  93.    color: /*[[colour]]*\/ !important;
  94. }
  95. .ytp-menuitem/*[[extras]]*\/[aria-checked="true"] .ytp-menuitem-toggle-checkbox/*[[extras]]*\/ {
  96.    background: /*[[colour]]*\/ !important;
  97. }
  98. .ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
  99.    fill: /*[[colour]]*\/ !important;
  100. }
  101. .ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg/*[[extras]]*\/, .ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg/*[[extras]]*\/ {
  102.    fill: /*[[colour]]*\/ !important;
  103. }
  104. .resume-playback-progress-bar/*[[extras]]*\/ {
  105.    background: /*[[colour]]*\/ !important;
  106. }
  107. .ytp-chrome-controls .ytp-button/*[[extras]]*\/[aria-pressed]::after {
  108.    background-color: /*[[colour]]*\/ !important;
  109. }
  110. .yt-uix-checkbox-on-off input/*[[extras2]]*\/[type="checkbox"]:checked + label {
  111.    background-color: /*[[colour]]*\/ !important;
  112. }
  113. #ryd-bar/*[[extras2]]*\/ {
  114.    background-color: /*[[colour]]*\/ !important;
  115. } EOT;
  116.  
  117. }
  118. @advanced dropdown colour "Choose your colour" {
  119.     Custom "Custom (select below)*" <<<EOT /*[[colour2]]*\/ EOT;
  120.     Pink "Pink" <<<EOT #FF80E5 EOT;
  121.     Green "Green" <<<EOT #00FF00 EOT;
  122.     Red "Red" <<<EOT #FF0000 EOT;
  123.     White "White" <<<EOT #FFFFFF EOT;
  124.     Cyan "Cyan" <<<EOT #46EFEB EOT;
  125.     Purple "Purple" <<<EOT #560DE3 EOT;
  126.     Blue "Blue" <<<EOT #2793E6 EOT;
  127.  
  128. }
  129. @advanced color colour2 "If 'custom,' select a colour here" #2793E6
  130. @advanced dropdown volumecolour "Colour volume bar?" {
  131.     Yes "Yes (default)*" <<<EOT .ytp-volume-slider-track, .ytp-volume-slider-handle:before EOT;
  132.     No "No" <<<EOT .volume.bar.disabled EOT;
  133.  
  134. }
  135. @advanced dropdown extras "Colour extras (buttons, HD tag)?" {
  136.     Yes "Yes (default)*" <<<EOT  EOT;
  137.     No "No" <<<EOT -extras-disabled EOT;
  138.  
  139. }
  140. @advanced dropdown extras2 "Colour 'like' bar & auto-play button?" {
  141.     No "No (default)*" <<<EOT -extras2-disabled EOT;
  142.     Yes "Yes" <<<EOT  EOT;
  143.  
  144. }
  145. @advanced dropdown scrubbercolour "Scrubber button colour" {
  146.     Same_as_bar "Same as bar (default)*" <<<EOT /*[[colour]]*\/ EOT;
  147.     Dark_grey "Dark grey" <<<EOT #3A3A3A EOT;
  148.     White "White" <<<EOT #FFFFFF EOT;
  149.  
  150. }
  151. ==/UserStyle== */
  152. @-moz-document domain("youtube.com") {
  153. 	/*[[bartype]]*/
  154. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址