akri by sageee

/* ==UserStyle==
@name           www.youtube.com - 6/28/2023, 12:52:51 AM
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
/* HTML structure */

/* CSS styles */
@-moz-document domain("youtube.com") {
  .progress-bar-container {
    position: relative;
    width: 100%;
    height: 20px;
    background-color: #fde9f6; /* Light pink background color */
    border-radius: 10px;
    overflow: hidden;
  }

  .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #fde9f6; /* Hello Kitty pink color */
    background-image: url("https://art.ngfiles.com/images/1553000/1553283_powpink_hello-kitty-walk.gif?f1608575112"); /* Hello Kitty walking gif */
    background-repeat: repeat-x;
    background-size: auto 100%;
    border-radius: 10px;
    transition: width 0.3s ease-in-out;
  }

  /* Example usage - setting progress to 50% */
  .progress-bar-container:hover .progress-bar {
    width: 50%;
  }

  /* Customize the color palette of the progress bar */
  .progress-bar-container:hover {
    background-color: #F8C8DC; /* Light pink background color on hover */
  }

  .progress-bar-container:hover .progress-bar {
    background-color: #FDFD96; /* Light yellow background color on hover */
  }
}