Youtube Green by royspace

/* ==UserStyle==
@name       Youtube Green
@version    20240318.02.06
@namespace  ?
==/UserStyle== */

@-moz-document domain("youtube.com") {
:root {
    --main-color3: red;
    --main-color: mediumseagreen;
    --old-color: #212a53;
    --background-image: url(https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExNjExYjM5MDMxY2MwN2IwZDQ5ZjNlNjRlZDY2MGRjNjgwYzI1MGI2NSZjdD1z/Y8bAdBxtKREVcuDNyH/giphy.gif);
    --logo-icon: url("https://media.giphy.com/media/caOxSO9wORTPi/giphy.gif");
}

/* ------------------------------- MY CUSTOM AREA ------------------------------------- */
/* title color */
.ytd-watch-metadata #title .ytd-watch-metadata yt-formatted-string {
    color: var(--main-color);
    font-weight: bold;
    text-shadow: none;
}

[dark] ytd-segmented-like-dislike-button-renderer #segmented-like-button button lottie-component svg g path {
    fill: #FF6961 !important;
    /* Set the fill like btn desired color */
    stroke: #FF3D33 !important;
    /* Set the stroke like btn desired color */
}

/* like btn  #016064*/
/* Styling for the first path */
.yt-spec-button-shape-next__icon yt-icon yt-animated-icon lottie-component path:nth-child(1) {
    fill: #FF6961;
    /* Change to your desired fill color */
    stroke: whitesmoke;
    /* Change to your desired stroke color */
}

/* Styling for the second path */
.yt-spec-button-shape-next__icon yt-icon yt-animated-icon lottie-component path:nth-child(2) {
    fill: #FF6961;
    /* Change to your desired fill color */
    stroke: #FF3D33;
    /* Change to your desired stroke color */
}

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

/* chỉnh margin của icon trans */
button.yt-spec-button-shape-next.yt-spec-button-shape-next--tonal.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading img {
    margin: 0 !important;
}

/* #container.ytd-searchbox {
background-color: transparent !important;
border-right: 0px;
} */
#button-shape .yt-spec-touch-feedback-shape__fill {
    display: none !important;
}

/* .header.ytd-playlist-panel-renderer {
  background-color: var(--yt-spec-brand-background-primary);
  background-color: transparent!important;
} */
/* .playlist-items.ytd-playlist-panel-renderer {
  background-color: var(--yt-spec-general-background-a);
  background-color: transparent !important;
} */
#container.ytd-playlist-panel-renderer {

    border-radius: 12px;
}

#background.ytd-masthead {
    height: 76px !important;
}

#container.ytd-masthead {
    height: 76px !important;
}

/* .yt-live-chat-renderer {
  background-color: transparent !important;
}
ytd-live-chat-frame #show-hide-button.ytd-live-chat-frame>ytd-toggle-button-renderer.ytd-live-chat-frame {
  background-color: transparent !important;
} */
.html5-main-video {
    border-radius: 12px !important;
    overflow: hidden;
    /* width: calc(100% - 3px) !important; */
}

#columns ytd-playlist-panel-renderer #container .header {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/*Fix button on tag black
div#right-arrow.yt-chip-cloud-renderer::before {
  background-color: transparent !important;
}

yt-chip-cloud-renderer:not([mask-fade]) #right-arrow.yt-chip-cloud-renderer:before {
  background: transparent !important;
}

yt-chip-cloud-renderer:not([mask-fade]) #left-arrow.yt-chip-cloud-renderer:after {
  background: transparent !important;
}

yt-chip-cloud-renderer:not([mask-fade]) #left-arrow-button.yt-chip-cloud-renderer, yt-chip-cloud-renderer:not([mask-fade]) #right-arrow-button.yt-chip-cloud-renderer {
  background: transparent !important;
}
*/
/* ------------------------------- MY CUSTOM AREA ------------------------------------- */
/* ------------------------------------ BREAK ------------------------------------- */
/* ------------------------------- HOLY KNIGHT AREA ------------------------------------- */
.ytp-scrubber-pull-indicator {
    /* hollow knight slider */
    background-color: #fff0 !important;
    height: 35px !important;
    width: 45px !important;
    background-image: var(--background-image) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 43px, 80px !important;
    bottom: 18px !important;
    left: -10px !important;
    transform: rotate(0deg) !important;
    transform: scale(-1.5, 1.5) !important;
    border-radius: 30px !important;
}

.ytp-swatch-background-color {
    /* sliderball */
    background-color: var(--main-color) !important;
}

/* some menu selections
some items bg */
/* .ytp-volume-slider-handle,
.ytp-volume-slider-handle::after,
.ytp-volume-slider-handle::before,
.ytp-settings-menu .ytp-menuitem-toggle-checkbox,
.ytp-autonav-toggle-button,
.yt-spec-icon-badge-shape__badge,
.iron-selected {
background-color: #212a53 !important;
} */
.ytd-video-owner-renderer .yt-spec-button-shape-next--filled {
    color: #fff !important;
    background-color: #212a53 !important;
}

/* some menu selections */
/* .iron-selected .yt-chip-cloud-chip-renderer {
  color: transparent !important;
  background-color: transparent !important;
} */
.ytd-channel-name .yt-simple-endpoint,
.ytd-comment-renderer,
ytd-author-comment-badge-renderer .ytd-channel-name {
    /* bug fix */
    color: #fff !important;
}

.ytd-c4-tabbed-header-renderer .iron-selected {
    background-color: #212129 !important;
    border-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* logo https://media.giphy.com/media/jdiZ7hlxcnada/giphy.gif */
#logo-icon {
    content: var(--logo-icon) !important;
    width: 70px !important;
    height: 50px !important;
    object-fit: cover !important;
    transform: translateY(-22px) !important;
}

.ytd-topbar-logo-renderer {
    transform: translateY(10px) !important;
    color: #687dde !important;
}

/* logo */
ytd-topbar-logo-renderer {
    width: 0% !important;
}


/* ------------------------------- HOLY KNIGHT AREA ------------------------------------- */
}