API tools faq
paste
Advertisement
alien_fx_fiend

Custom YouTube Script: BlackCircleProgressBar, Colored Buffer/ProgBar, Velvet Theme

alien_fx_fiend
Dec 27th, 2024
31
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 13.96 KB | Source Code | 0 0
raw download clone embed print report
  1. /* Start CodePen Style Here */
  2. :root {
  3.  
  4.    /* Custom colors */
  5.    --primary-white: #DBDBDB;
  6.    --secondary-white: #9e9e9e;
  7.    
  8.  
  9.    /* my colors */
  10.    --test-red: #FF0000;
  11.    --test-green: #00FF00;
  12.    --test-blue: #0000FF;
  13.  
  14.    --main-background: #25100e;
  15.    --accent-background: rgb(10, 26, 28);
  16.  
  17.    --dark1: #cddfe1;
  18.    --light1: #1e4e54;
  19.    
  20.    --light2: #a3a3a3;
  21.    --mid2: #450b06;
  22.    --dark2: #0a1a1c;
  23.  
  24.    /* YouTube variable overrides */
  25.    --yt-spec-text-primary: var(--primary-white) !important;
  26.    --yt-spec-text-secondary: var(--secondary-white) !important;
  27.    --yt-button-color: var(--dark2) !important;
  28.  
  29.    --ytd-comment-text-color: var(--yt-spec-text-secondary) !important;
  30.    --yt-expand-color: var(--yt-button-color) !important;
  31.    --yt-notification-button-bubble_-_background-color: var(--dark2) !important;
  32.    --yt-placeholder-text-color: rgba(230, 230, 230, 150) !important;
  33.    --yt-searchbox-text-color: var(--yt-spec-text-secondary) !important;
  34.    --yt-spec-brand-icon-active: var(--light1) !important;
  35.    --yt-endpoint-hover-color: var(--dark2) !important;
  36.    --yt-live-chat-message-highlight-background-color: var(--accent-background) !important;
  37. }
  38.  
  39. /* Set the background for main UI components */
  40.  
  41. html,
  42. ytd-browse,
  43. ytd-watch,
  44. .ytd-searchbox,
  45. ytd-app,
  46. ytd-watch-flexy,
  47. #columns.ytd-watch-flexy,
  48. ytd-button-renderer.yt-horizontal-list-renderer.arrow,
  49. ytd-multi-page-menu-renderer {
  50.    background-color: var(--main-background) !important;
  51. }
  52.  
  53. /* Buttons */
  54.  
  55. paper-button,
  56. ytd-button-renderer {
  57.    border-color: var(--yt-button-color);
  58.    color: var(--yt-button-color);
  59. }
  60.  
  61. #subscribe-button ytd-button-renderer {
  62.    background: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  63. }
  64.  
  65. .ytd-subscribe-button-renderer,
  66. #submit-button {
  67.    background-color: var(--accent-background) !important;
  68.    border-color: var(--light1) !important;
  69.    border-image: linear-gradient(to right, var(--light1), var(--dark2)) 1 !important;
  70.    border-width: 2px !important;
  71.    color: var(--light1) !important;
  72. }
  73.  
  74. #subscribe-button ytd-button-renderer yt-formatted-string {
  75.    color: var(--accent-background) !important;
  76. }
  77.  
  78. ytd-button-renderer.ytd-movie-offer-module-renderer,
  79. a.ytd-movie-offer-module-renderer,
  80. ytd-guide-renderer.ytd-app {
  81.    background: var(--accent-background) !important;
  82. }
  83.  
  84. /* Text */
  85.  
  86. a {
  87.    color: var(--light1);
  88. }
  89.  
  90. #video-title {
  91.    color: var(--dark2) !important;
  92.    background: -webkit-linear-gradient(left,var(--dark1),var(--mid2));
  93.    -webkit-background-clip: text;
  94.    -webkit-text-fill-color: transparent;
  95.    font-style: italic;
  96. }
  97.  
  98. .content {
  99.    color: var(--yt-spec-text-primary) !important;
  100. }
  101.  
  102. yt-formatted-string[has-link-only_]:not([force-default-style]) a.yt-simple-endpoint.yt-formatted-string:hover {
  103.    color: var(--accent-background) !important;
  104.    transition: .2s;
  105. }
  106.  
  107. /* Playlists */
  108.  
  109. ytd-playlist-panel-renderer #container .header,
  110. ytd-playlist-panel-renderer #container #items,
  111. ytd-playlist-sidebar-renderer {
  112.    background: var(--accent-background) !important;
  113. }
  114.  
  115. ytd-two-column-browse-results-renderer {
  116.    background: var(--primary-background) !important;
  117. }
  118.  
  119. ytd-two-column-browse-results-renderer #secondary {
  120.    background: var(--accent-background) !important;
  121. }
  122.  
  123. /* Miniplayer */
  124.  
  125. #card {
  126.    background: var(--accent-background) !important;
  127. }
  128.  
  129. /* Search bar */
  130.  
  131. #container.ytd-searchbox,
  132. #search-icon-legacy {
  133.    box-shadow: var(--primary-background) 0px 1px 2px 0px inset !important;
  134.    border-color: var(--dark1) !important;
  135.    color: var(--test-red) !important;
  136. }
  137.  
  138. ytd-searchbox[has-focus] #container.ytd-searchbox {
  139.    border-color: var(--primary-white) !important;
  140.    -webkit-border-image: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  141.    border-image: linear-gradient(to bottom right, var(--dark1), var(--light1), var(--light2), var(--mid2), var(--dark1)) 1 !important;
  142. }
  143.  
  144. ytd-searchbox[has-focus] #search-icon-legacy {
  145.    border-color: var(--dark1) !important;
  146. }
  147.  
  148. /* Searchbox suggestions */
  149.  
  150. .sbdd_b {
  151.    /* Container */
  152.    border-color: var(--light1) !important;
  153.    -webkit-border-image: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  154.    border-image: linear-gradient(to right, var(--light1), var(--dark2)) 1 !important;
  155. }
  156.  
  157. .sbsb_a {
  158.    /* Main pop-up */
  159.    background: var(--accent-background) !important;
  160. }
  161.  
  162. .sbsb_d {
  163.    /* Hovered selection */
  164.    background: rgba(0, 0, 0, .05) !important;
  165. }
  166.  
  167. .sbsb_c {
  168.    /* Suggested option text */
  169.    color: var(--secondary-white) !important;
  170. }
  171.  
  172. .sbpqs_a {
  173.    /* Previously selected option text */
  174.    color: var(--light1) !important;
  175. }
  176.  
  177. .sbfl_b {
  178.    /* Report search predictions footer */
  179.    background: rgba(0, 0, 0, 0) !important;
  180.    color: var(--secondary-white) !important;
  181. }
  182.  
  183. /* Watch page components */
  184.  
  185. .ytp-scrubber-button.ytp-swatch-background-color:not(.ytp-play-progress) {
  186.    background: var(--dark2) !important;
  187. }
  188.  
  189. .ytp-swatch-background-color:not(.ytp-play-progress),
  190. #header.ytd-movie-offer-module-renderer {
  191.    background: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  192. }
  193.  
  194. ytd-rich-metadata-renderer,
  195. ytd-post-renderer,
  196. ytd-mini-guide-renderer,
  197. ytd-mini-guide-entry-renderer {
  198.    background-color: var(--accent-background) !important;
  199.    color: var(--secondary-white) !important;
  200. }
  201.  
  202. #title.ytd-rich-metadata-renderer,
  203. ytd-mini-guide-entry-renderer[active] a yt-icon,
  204. ytd-mini-guide-entry-renderer[active] a span,
  205. path.ytd-topbar-logo-renderer,
  206. #title {
  207.    color: var(--dark2) !important;
  208.    fill: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  209.    background: -webkit-linear-gradient(top left,var(--light2),var(--mid2));
  210.    -webkit-background-clip: text;
  211.    -webkit-text-fill-color: transparent;
  212. }
  213.  
  214. .date,
  215. yt-icon,
  216. .ytd-mini-channel-renderer,
  217. .ytd-guide-entry-renderer,
  218. .ytp-title-link {
  219.    color: var(--secondary-white) !important;
  220. }
  221.  
  222. #sponsor-button ytd-border-renderer a paper-button {
  223.    border-color: var(--dark2) !important;
  224. }
  225.  
  226. .super-title a,
  227. .badge-style-type-verified yt-icon,
  228. #owner-name a {
  229.    color: var(--dark2) !important;
  230. }
  231.  
  232. /* Live chat */
  233.  
  234. yt-live-chat-header-renderer {
  235.    background: var(--accent-background) !important;
  236. }
  237.  
  238. #chat-messages {
  239.    background: var(--main-background) !important;
  240.    border: 3px solid var(--accent-background) !important;
  241. }
  242.  
  243. .yt-live-chat-text-message-renderer {
  244.    color: var(--primary-white) !important;
  245. }
  246.  
  247. .yt-live-chat-author-chip {
  248.    color: var(--primary-white) !important;
  249. }
  250.  
  251. yt-live-chat-message-input-renderer {
  252.    background: var(--accent-background) !important;
  253.    color: var(--primary-white) !important;
  254. }
  255.  
  256. #container.yt-live-chat-ticker-renderer {
  257.    background: var(--accent-background) !important;
  258. }
  259.  
  260. ytd-toggle-button-renderer.ytd-live-chat-frame {
  261.    background: var(--accent-background) !important;
  262. }
  263.  
  264. /* App drawer */
  265.  
  266. app-drawer #header yt-icon,
  267. app-drawer #header #logo-red-icon-container path,
  268. app-drawer #header .title {
  269.    color: var(--main-background) !important;
  270.    fill: var(--main-background) !important;
  271. }
  272.  
  273. app-drawer g.ytd-topbar-logo-renderer path,
  274. app-drawer #youtube-paths path {
  275.    fill: var(--main-background) !important;
  276. }
  277.  
  278. app-drawer #header,
  279. ytd-active-account-header-renderer,
  280. ytd-simple-menu-header-renderer {
  281.    background: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  282.    color: var(--main-background) !important;
  283. }
  284.  
  285. /* Channel page */
  286.  
  287. #channel-header,
  288. #tabs-inner-container {
  289.    background: var(--accent-background) !important;
  290. }
  291.  
  292. paper-tab.ytd-c4-tabbed-header-renderer:hover {
  293.    color: var(--secondary-white) !important;
  294.    opacity: 0.6 !important;
  295.    transition: opacity .2s;
  296. }
  297.  
  298. paper-tab.iron-selected.ytd-c4-tabbed-header-renderer,
  299. #channel-title,
  300. #label-text {
  301.    color: var(--light1) !important;
  302. }
  303.  
  304. paper-tabs.ytd-c4-tabbed-header-renderer {
  305.    fill: var(--secondary-white) !important;
  306. }
  307.  
  308. /* Account menu */
  309.  
  310. ytd-active-account-header-renderer yt-formatted-string,
  311. ytd-active-account-header-renderer yt-formatted-string a,
  312. #back-button.ytd-simple-menu-header-renderer {
  313.    color: var(--main-background) !important;
  314. }
  315.  
  316. /* Specific UI components */
  317.  
  318. #like-bar {
  319.    background: linear-gradient(to right, var(--light1), var(--dark2)) !important;
  320. }
  321.  
  322. #masthead {
  323.    background: var(--accent-background) !important;
  324.    box-shadow: 0px 3px 2px 0px rgb(13, 16, 25);
  325. }
  326.  
  327. ytd-author-comment-badge-renderer {
  328.    --ytd-author-comment-badge-background-color: var(--dark2) !important;
  329.    --ytd-author-comment-badge-name-color: var(--main-background) !important;
  330.    --ytd-author-comment-badge-icon-color: var(--main-background) !important;
  331.  
  332.    color: var(--ytd-author-comment-badge-name-color) !important;
  333.    fill: var(--ytd-author-comment-badge-icon-color) !important;
  334. }
  335.  
  336. /* End CodePen Style Here */
  337.  
  338.  
  339.  
  340. /*
  341. ######################################################################################
  342. ######################################################################################
  343. ##  endroughxfer-urldump #1#
  344. ##  <EOF><EOF>
  345. ######################################################################################
  346. ######################################################################################
  347. */
  348. /* Start JS 23px notch, buffer/ played colors, 10px height */
  349. // First, inject the CSS
  350. const style = document.createElement('style');
  351. style.textContent = `
  352. .custom-youtube-notch {
  353.     position: absolute;
  354.     width: 23px;
  355.     height: 23px;
  356.     background-color: black;
  357.     border: 2px solid white;
  358.     border-radius: 50%;
  359.     z-index: 999999;
  360.     pointer-events: none;
  361.     transform: translateX(-50%) translateY(-50%);
  362. }
  363.  
  364. /* Make buffered progress hot pink */
  365. .html5-load-progress, .ytp-load-progress {
  366.     background-color: black !important;
  367. }
  368.  
  369. /* Make played progress indigo */
  370. .html5-play-progress, .ytp-play-progress {
  371.     background-color: indigo !important;
  372. }
  373.  
  374. /* Make sure the hover preview also matches indigo */
  375. .html5-hover-progress, .ytp-hover-progress {
  376.     background-color: indigo !important;
  377. }
  378.  
  379. /* Ensure proper layering */
  380. .html5-progress-list, .ytp-progress-list {
  381.     z-index: 99998 !important;
  382. }
  383.  
  384. /* Make progress bar thicker */
  385. .html5-progress-bar-container, .ytp-progress-bar-container {
  386.     height: 10px !important;
  387. }
  388.  
  389. .html5-progress-bar, .ytp-progress-bar {
  390.     height: 10px !important;
  391. }
  392.  
  393. .html5-progress-list, .ytp-progress-list {
  394.     height: 10px !important;
  395. }
  396.  
  397. .ytp-progress-bar .ytp-play-progress,
  398. .ytp-progress-bar .ytp-load-progress,
  399. .ytp-progress-bar .ytp-hover-progress {
  400.     height: 10px !important;
  401. }
  402.  
  403. /* Update these styles in your JavaScript */
  404. /* Make played progress indigo */
  405. .ytp-progress-bar .ytp-play-progress,
  406. .ytp-progress-bar-container .ytp-play-progress,
  407. .ytp-progress-bar .ytp-play-progress.ytp-swatch-background-color {
  408.     background: indigo !important;
  409.     background-color: indigo !important;
  410. }
  411.  
  412. /* Adjust the scrubber container for the thicker bar */
  413. .html5-scrubber-container, .ytp-scrubber-container {
  414.     height: 10px !important;
  415. }
  416.  
  417. /* When hovering, make it even thicker */
  418. .ytp-progress-bar-container:hover {
  419.     height: 15px !important;
  420. }
  421.  
  422. .ytp-progress-bar-container:hover .ytp-progress-bar,
  423. .ytp-progress-bar-container:hover .ytp-progress-list,
  424. .ytp-progress-bar-container:hover .ytp-play-progress,
  425. .ytp-progress-bar-container:hover .ytp-load-progress,
  426. .ytp-progress-bar-container:hover .ytp-hover-progress {
  427.     height: 15px !important;
  428. }
  429. `;
  430. document.head.appendChild(style);
  431.  
  432. function enforceProgressBarColor() {
  433.     const playProgress = document.querySelector('.ytp-play-progress');
  434.     if (playProgress) {
  435.         playProgress.style.setProperty('background', 'indigo', 'important');
  436.         playProgress.style.setProperty('background-color', 'indigo', 'important');
  437.     }
  438. }
  439.  
  440. // Function to create or update the notch
  441. function updateNotch() {
  442.     let progressBar = document.querySelector('.ytp-progress-bar');
  443.     let player = document.querySelector('.html5-main-video');
  444.     let progressBarContainer = document.querySelector('.ytp-progress-bar-container');
  445.    
  446.     if (!progressBar || !player || !progressBarContainer) return;
  447.  
  448.     // Create notch if it doesn't exist
  449.     let notch = document.querySelector('.custom-youtube-notch');
  450.     if (!notch) {
  451.         notch = document.createElement('div');
  452.         notch.className = 'custom-youtube-notch';
  453.         progressBarContainer.appendChild(notch);
  454.     }
  455.  
  456.     // Calculate position
  457.     let progress = (player.currentTime / player.duration) * 100;
  458.     let progressBarRect = progressBar.getBoundingClientRect();
  459.     let position = (progressBarRect.width * progress) / 100;
  460.  
  461.     // Update notch position
  462.     notch.style.left = `${position}px`;
  463.     notch.style.top = '50%';
  464.     notch.style.display = 'block';
  465. }
  466.  
  467. // Function to start the interval
  468. function startNotchUpdate() {
  469.     // Initial update
  470.     updateNotch();
  471.     enforceProgressBarColor();
  472.    
  473.     // Set interval for updates
  474.     return setInterval(updateNotch, 1000);
  475. }
  476.  
  477. // Function to initialize and handle page changes
  478. function initialize() {
  479.     let interval;
  480.  
  481.     // Observer for detecting player load
  482.     const observer = new MutationObserver((mutations) => {
  483.         if (document.querySelector('.html5-main-video')) {
  484.             if (!interval) {
  485.                 interval = startNotchUpdate();
  486.             }
  487.         }
  488.     });
  489.  
  490.     // Start observing
  491.     observer.observe(document.body, {
  492.         childList: true,
  493.         subtree: true
  494.     });
  495.  
  496.     // Handle navigation (for YouTube's SPA nature)
  497.     let lastUrl = location.href;
  498.     new MutationObserver(() => {
  499.         const url = location.href;
  500.         if (url !== lastUrl) {
  501.             lastUrl = url;
  502.             clearInterval(interval);
  503.             interval = startNotchUpdate();
  504.         }
  505.     }).observe(document.body, {subtree: true, childList: true});
  506. }
  507.  
  508. // Start the script
  509. initialize();
  510. /* End JS 23px notch, buffer/ played colors, 10px height */
Tags: #tweaks-for-EnhancerForYouTube
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!