YouTube - Custom Video Progress Bar Colors [Updated]

SteamStat.us - Bright and Vibrant Style

当前为 2024-12-27 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

/* ==UserStyle==
@name         YouTube - Custom Video Progress Bar Colors [Updated]
@namespace    https://github.com/Nick2bad4u/UserStyles
@author       nick2bad4u
@description  SteamStat.us - Bright and Vibrant Style
@homepageURL  https://github.com/Nick2bad4u/UserStyles
@version 			1.0.2
@license      UnLicense
@preprocessor uso
@advanced dropdown bartype "Bar type" {
    Solid "Solid*" <<<EOT /* scrubber button *\/
.html5-scrubber-button:hover, .ytp-scrubber-button:hover, .ytp-swatch-background-color, .ytp-swatch-background-color-secondary {
   background: /*[[scrubbercolour]]*\/ !important;
}
/* progress bar *\/
.ytp-progress-bar {
   background: /*[[colour]]*\/ !important;
}
/*[[volumecolour]]*\/ {
   background: /*[[colour]]*\/ !important;
   z-index: -117;
}
.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 {
   background-color: /*[[colour]]*\/ !important;
}
.ytp-swatch-color/*[[extras]]*\/ {
   color: /*[[colour]]*\/ !important;
}
.ytp-menuitem/*[[extras]]*\/[aria-checked="true"] .ytp-menuitem-toggle-checkbox/*[[extras]]*\/ {
   background: /*[[colour]]*\/ !important;
}
.ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
   fill: /*[[colour]]*\/ !important;
}
.ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg/*[[extras]]*\/, .ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg/*[[extras]]*\/ {
   fill: /*[[colour]]*\/ !important;
}
.resume-playback-progress-bar/*[[extras]]*\/ {
   background: /*[[colour]]*\/ !important;
}
.ytp-chrome-controls .ytp-button/*[[extras]]*\/[aria-pressed]::after {
   background-color: /*[[colour]]*\/ !important;
}
.yt-uix-checkbox-on-off input/*[[extras2]]*\/[type="checkbox"]:checked + label {
   background-color: /*[[colour]]*\/ !important;
}
.video-extras-sparkbar-likes/*[[extras2]]*\/ {
   background-color: /*[[colour]]*\/ !important;
} EOT;
    Glow_gradient "Glow/gradient" <<<EOT .html5-play-progress, .ytp-progress-bar {
   background: /*[[colour]]*\/ !important; /* Old browsers *\/
   background: -moz-linear-gradient(left, #1b1b1b 0%, /*[[colour]]*\/ 100%) !important;
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1b1b1b), color-stop(100%,/*[[colour]]*\/)) !important;
   background: -webkit-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
   background: -o-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
   background: -ms-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
   background: linear-gradient(to right, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
}
/*.html5-load-progress, .ytp-load-progress {
   background: #404040 !important;
}*\/
/* scrubber button glow *\/
.html5-scrubber-button, .ytp-scrubber-button {
   border-color: #1B1B1B !important;
   box-shadow: 0px 0px 3px /*[[colour]]*\/, 0px 0px 5px /*[[colour]]*\/, 0px 0px 0px /*[[colour]]*\/ !important;
   transition: box-shadow 0.2s, background 0.2s !important;
}
/* scrubber button *\/
.ytp-swatch-background-color, .ytp-swatch-background-color-secondary, .html5-scrubber-button:hover, .ytp-scrubber-button:hover {
   background-color: /*[[scrubbercolour]]*\/ !important;
}
/* scrubber button glow on hover *\/
.html5-scrubber-button:hover, .ytp-scrubber-button:hover {
   border-color: #1B1B1B !important;
   box-shadow: 0px 0px 6px /*[[colour]]*\/, 0px 0px 8px /*[[colour]]*\/, 0px 0px 10px /*[[colour]]*\/ !important;
}
/* volume control *\/
/*[[volumecolour]]*\/ {
   background: /*[[colour]]*\/ !important; /* Old browsers *\/
   background: -moz-linear-gradient(left, #1b1b1b 0%, /*[[colour]]*\/ 100%) !important;
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1b1b1b), color-stop(100%,/*[[colour]]*\/)) !important;
   background: -webkit-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
   background: -o-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
   background: -ms-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
   background: linear-gradient(to right, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
   z-index: -117;
}
/* extras *\/
.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 {
   background-color: /*[[colour]]*\/ !important;
}
.ytp-swatch-color/*[[extras]]*\/ {
   color: /*[[colour]]*\/ !important;
}
.ytp-menuitem/*[[extras]]*\/[aria-checked="true"] .ytp-menuitem-toggle-checkbox/*[[extras]]*\/ {
   background: /*[[colour]]*\/ !important;
}
.ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
   fill: /*[[colour]]*\/ !important;
}
.ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg/*[[extras]]*\/, .ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg/*[[extras]]*\/ {
   fill: /*[[colour]]*\/ !important;
}
.resume-playback-progress-bar/*[[extras]]*\/ {
   background: /*[[colour]]*\/ !important;
}
.ytp-chrome-controls .ytp-button/*[[extras]]*\/[aria-pressed]::after {
   background-color: /*[[colour]]*\/ !important;
}
.yt-uix-checkbox-on-off input/*[[extras2]]*\/[type="checkbox"]:checked + label {
   background-color: /*[[colour]]*\/ !important;
}
.video-extras-sparkbar-likes/*[[extras2]]*\/ {
   background-color: /*[[colour]]*\/ !important;
} EOT;

}
@advanced dropdown colour "Choose your colour" {
    Custom "Custom (select below)*" <<<EOT /*[[colour2]]*\/ EOT;
    Pink "Pink" <<<EOT #FF80E5 EOT;
    Green "Green" <<<EOT #00FF00 EOT;
    Red "Red" <<<EOT #FF0000 EOT;
    White "White" <<<EOT #FFFFFF EOT;
    Cyan "Cyan" <<<EOT #46EFEB EOT;
    Purple "Purple" <<<EOT #560DE3 EOT;
    Blue "Blue" <<<EOT #2793E6 EOT;

}
@advanced color colour2 "If 'custom,' select a colour here" #2793E6
@advanced dropdown volumecolour "Colour volume bar?" {
    Yes "Yes (default)*" <<<EOT .ytp-volume-slider-track, .ytp-volume-slider-handle:before EOT;
    No "No" <<<EOT .volume.bar.disabled EOT;

}
@advanced dropdown extras "Colour extras (buttons, HD tag)?" {
    Yes "Yes (default)*" <<<EOT  EOT;
    No "No" <<<EOT -extras-disabled EOT;

}
@advanced dropdown extras2 "Colour 'like' bar & auto-play button?" {
    No "No (default)*" <<<EOT -extras2-disabled EOT;
    Yes "Yes" <<<EOT  EOT;

}
@advanced dropdown scrubbercolour "Scrubber button colour" {
    Same_as_bar "Same as bar (default)*" <<<EOT /*[[colour]]*\/ EOT;
    Dark_grey "Dark grey" <<<EOT #3A3A3A EOT;
    White "White" <<<EOT #FFFFFF EOT;

}
==/UserStyle== */
@-moz-document domain("youtube.com") {
	/*[[bartype]]*/
}