☰

Greasy Fork is available in English.

YouTube - Custom Video Progress Bar Colors [Updated]

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

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