Pink Youtube progress bar <3 by neroist

/* ==UserStyle==
@name         Pink Youtube progess bar <3
@namespace    userstyles.world/user/neroist
@author       neroist
@description  Pink progress bar for youtube!
@version      20240504.09.35
@license      CC0-1.0
==/UserStyle== */



@-moz-document domain("youtube.com") {
  /*
    Pink !! Feel free to change to your own color :3    
  */

  :root {
    --yt-color: #FDACFF
  } 


  /*
    For the main progress bar in the video player
  
    (works for the mini video player too)
  */

  .html5-play-progress,
  .ytp-play-progress {
    background: var(--yt-color) !important;
  }

  .html5-scrubber-button,
  .ytp-scrubber-button {
    background: var(--yt-color) !important;
  }
  

  /*
    Make the Youtube logo pink!
  
    Thankfully its just a simple svg so we can easily set the fill color
  */
  
  #yt-logo-updated_yt1 > g:nth-child(1) > path:nth-child(1), /* The usual on the homepage. */
  
  /* Don't ask me why yt does something like this... The absurd amount of these may not be needed but :shrug:*/
  #yt-logo-updated_yt2 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt4 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt5 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt6 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt7 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt8 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt9 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt10 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt11 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt12 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt13 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt14 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt15 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt16 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt17 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt18 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt19 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt20 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt21 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt22 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt23 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt24 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt25 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt26 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt27 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt28 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt29 > g:nth-child(1) > path:nth-child(1),
  #yt-logo-updated_yt30 > g:nth-child(1) > path:nth-child(1),
  
  #yt-logo-updated_yt3 > g:nth-child(1) > path:nth-child(1), /* When opening up the sidebar */
  
  #icon > yt-icon-shape > icon-shape > div > svg path /* Youtube shorts logo & sidebar actions (totally by accident but it looks good so!) */
  {
    fill: var(--yt-color) !important;
  }


  /*
    I have no idea what this is for ngl, looks unused
  
    (this userstyle is from an old one on the userstyles.org archive -- https://uso.kkx.one/style/238952)
  */

  .ytp-volume-slider-track {
    background: var(--yt-color) !important;
  }


  /*
    This is for the "Ambient Mode" toggle
  */

  .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
    background: var(--yt-color) !important;
  }


  /*
    This is for the small progress bar under a video's thumbnail, which
    indicates how much of the video you've watched
  */

  .ytd-thumbnail-overlay-resume-playback-renderer#progress {
    background: var(--yt-color) !important;
  }


  /*
    These two are for the heart when the video creator hearts a command
  */

  /* Makes the heart pink */
  #hearted.ytd-creator-heart-renderer {
    color: var(--yt-color) !important
  }    

  /* Changes the border color to black (so the pink looks better) */
  #hearted-border.ytd-creator-heart-renderer {
    filter: invert(100%); /* filter to make it black */
  }


  /* 
    These two are for the preview video progress bars when
    you hover over a video 
  */

  /* Progress bar */
  .YtProgressBarLineProgressBarPlayed {
    background: var(--yt-color) !important;
  }

  /* Playhead dot on hover */
  .YtProgressBarPlayheadProgressBarPlayheadDot {
    background: var(--yt-color) !important;
  }


  /* 
    These three are for notifications
  */

  /* For the cute little blue dot next to notifications */
  ytd-notification-renderer.unread #new {
    background: var(--yt-color) !important;
  }

  /* For the little popup next to the bell */
  .yt-spec-icon-badge-shape__badge {
    background: var(--yt-color) !important;
    border: 2px solid #212121 !important;
  }

  /* For the usually-blue blue "new video" dot */
  #newness-dot.ytd-guide-entry-renderer {
    background: var(--yt-color) !important;
  }
  
  /*
    These two are for the "Live" notifiers on videos
  */
  
  /* For the one on the thumbnail */
  .badge-style-type-live-now-alternate.ytd-badge-supported-renderer {
    background: var(--yt-color) !important;
  }
  
  /* For the one in the video player */
  .ytp-live-badge[disabled]::before {
    background: var(--yt-color) !important;
  }
  
  /* For the little live icon next to channels in the sidebar */
  .guide-entry-badge.ytd-guide-entry-renderer {
    color: var(--yt-color) !important;
  }

  /* 
    For the Enhancer for Youtube(tm) mini video player
    
    (the one that shows up when you scroll down) progress bar 
  */

  #efyt-progress {
    color: var(--yt-color) !important;
  }

  #efyt-progress::-moz-progress-bar {
    background: var(--yt-color) !important; /* Needed for Firefox */
  }
}