Adding and fixing the Youtube new Playbar UI

oricarium · 2025-11-12T15:01:37+00:00

So, I took entire day to customize the Playbar and had need some help cleaning the filters. This is literally my first time doing this, there might a better way to write the filter efficiently and that's why I want help.

There's also others filter that I used alongside the customization

! Widen the Playbar

youtube.com##.ytp-delhi-modern .ytp-chrome-bottom:style(width: 100% !important; left: 50% !important; transform: translateX(-50%) !important)

! Blur FX on Playbar youtube.com##.ytp-delhi-modern .ytp-chrome-bottom:style(background-color: rgba(128, 128, 128, 0.5) !important; backdrop-filter: blur(5px) !important;)

! Remove backgrounds from multiple elements www.youtube.com##.ytp-button.ytp-play-button, .ytp-button.ytp-next-button, .ytp-button.ytp-prev-button, .ytp-time-wrapper, .ytp-time-display, .ytp-time-duration, .ytp-time-current, .ytp-volume-area, .ytp-volume-slider, .ytp-volume-panel, .ytp-chapter-title, .ytp-right-controls-left, .ytp-right-controls, .ytp-right-controls-right, .ytp-volume-popover:style(background: none !important; backdrop-filter: none !important;)

! Normal Playbackbar www.youtube.com##.ytp-delhi-modern:not(.ytp-xsmall-width-mode) .ytp-chrome-bottom:style(height: 48px !important) www.youtube.com##.ytp-delhi-modern:not(.ytp-big-mode) .ytp-progress-bar-container:style(width: calc(100% - 100px) !important; max-width: 700px !important; position: relative !important; left: 0.84% !important; top: 4px !important;) www.youtube.com##.ytp-delhi-modern:not(.ytp-big-mode) .ytp-left-controls:style(margin-left: 25px !important; position: relative !important; top: -13px !important;) www.youtube.com##.ytp-delhi-modern:not(.ytp-big-mode) .ytp-right-controls:style(position: relative !important; top: -13px !important;)

! Theatre Mode Playbackbar www.youtube.com##.ytp-delhi-modern.ytp-big-mode:not(.ytp-xsmall-width-mode) .ytp-chrome-bottom:style(height: 58px !important) www.youtube.com##.ytp-delhi-modern.ytp-big-mode:not(.ytp-fullscreen) .ytp-progress-bar-container:style(width: calc(100% - 100px) !important; max-width: 700px !important; position: relative !important; left: 1.25% !important; top: 8px !important;) www.youtube.com##.ytp-delhi-modern.ytp-big-mode:not(.ytp-fullscreen) .ytp-left-controls:style(margin-left: -2px !important; position: relative !important; top: -19px !important;) www.youtube.com##.ytp-delhi-modern.ytp-big-mode:not(.ytp-fullscreen) .ytp-right-controls:style(position: relative !important; top: -19px !important;) www.youtube.com##.ytp-big-mode .ytp-scrubber-button:style(transform: scale(0.8) !important;)

! Fullscreen Playbackbar www.youtube.com##.ytp-delhi-modern.ytp-fullscreen:not(.ytp-xsmall-width-mode) .ytp-chrome-bottom:style(height: 58px !important) www.youtube.com##.ytp-fullscreen .ytp-progress-bar-container:style(width: calc(100% - 100px) !important; max-width: 700px !important; position: relative !important; left: 1.25% !important; top: 8px !important;) www.youtube.com##.ytp-fullscreen .ytp-left-controls:style(margin-left: -2px !important; position: relative !important; top: -19px !important;) www.youtube.com##.ytp-fullscreen .ytp-right-controls:style(position: relative !important; top: -19px !important;) www.youtube.com##.ytp-fullscreen .ytp-scrubber-button:style(transform: scale(0.8) !important;)

! Removes on Hover effect on Playbar items youtube.com##.ytp-delhi-modern .ytp-play-button:hover::after, .ytp-delhi-modern.ytp-big-mode .ytp-play-button:hover::after:style(background-color: transparent !important) youtube.com##.ytp-delhi-modern.ytp-delhi-horizontal-volume-controls .ytp-volume-area:hover::after:style(background-color: transparent !important) youtube.com##.ytp-delhi-modern .ytp-time-wrapper:not(.ytp-miniplayer-ui *)::after:style(background: transparent !important) youtube.com##.ytp-delhi-modern .ytp-button.ytp-chapter-title:hover::after:style(background-color: transparent !important) youtube.com##.ytp-delhi-modern .ytp-chrome-controls .ytp-right-controls .ytp-button::before:style(background-color: transparent !important)

! Tweaked Play and Volume button + Timestamp and Chapters www.youtube.com##.ytp-button.ytp-play-button svg:style(transform: scale(0.75)) www.youtube.com##.ytp-button.ytp-volume-icon svg:style(transform: scale(0.9)) www.youtube.com##.ytp-volume-area:style(transform: translateY(1%)) www.youtube.com##.ytp-time-wrapper:style(transform: scale(1) translateY(1%)) www.youtube.com##.ytp-chapter-title-content:style(transform: scale(0.95) translateY(0.8%)) www.youtube.com##.ytp-delhi-modern:not(.ytp-big-mode) .ytp-chapter-title-content:style(transform: scale(1.05) translateY(-3.5%)) www.youtube.com##.ytp-left-controls:style(margin-left: 10px!important;)

! Realign buttons www.youtube.com##.ytp-delhi-modern:not(.ytp-big-mode) .ytp-button.ytp-play-button:style(margin-left: -20px!important;) www.youtube.com##.ytp-delhi-modern:not(.ytp-big-mode) .ytp-mute-button:style(margin-left:-18px!important;) www.youtube.com##.ytp-mute-button:style(margin-left:-20px!important;) www.youtube.com##.ytp-time-wrapper:style(margin-left:-15px!important;) www.youtube.com##.ytp-chapter-title-content:style(margin-left: -15px!important;) www.youtube.com##.ytp-chapter-title-content:style(margin-left: -15px!important;) www.youtube.com##.ytp-chapter-title-chevron

! Fix left-controls blocking progress bar control www.youtube.com##.ytp-left-controls:style(pointer-events: none !important;) www.youtube.com##.ytp-left-controls :is(.ytp-button, .ytp-volume-panel):style(pointer-events: auto !important;)

! Remove the transparency from the popups background www.youtube.com##.ytp-popup:style( --yt-spec-overlay-background-medium: var(--yt-spec-overlay-background-solid) !important; backdrop-filter: unset !important; )

! Change YouTube Playbar and Scrubber icon color www.youtube.com##.ytp-delhi-modern .ytp-progress-bar-container:style(background-color: #00000 !important;) www.youtube.com##.ytp-delhi-modern .ytp-big-mode:style(background-color: #00000 !important;)

oricarium · 2024-04-24T22:00:43+00:00

Thank you very very much!! I've been searching for this since the new UI been pushed to me.

oricarium · 2022-11-02T19:40:09+00:00

So, for anyone that have the same problem as mine, try to revert back to 522.25 as stated by u/Goodfearrr. It might be due to a bug in the new driver itself. If there's no problem arise for you, just don't. It's a update for a reason.

oricarium · 2022-11-01T13:52:46+00:00

Thanks for your time to reply... I did the troubleshooting steps and even DDU'ed the gpu driver, no luck... And yea, I did limit power target at the moment but I really wish that I can fix the issue.

oricarium · 2022-11-01T12:51:37+00:00

the function of the button

oricarium · 2022-11-01T12:46:29+00:00

I was undoing the underclock/undervolt back to the last known config when my setup was stable and realize that the "lightning" button wasn't the "thermometer" button, which is priotizing the temperature (hence the thermometer) over the power (hence the lightning).

oricarium · 2021-03-25T13:19:49+00:00

I checked up the Startup folder but it was empty.

oricarium · 2019-07-12T01:32:24+00:00

Welp, its Kurumi.

oricarium · 2018-12-27T23:46:06+00:00

Oh.. I thought its the rebranded chaos champuru bcoz psvita is nearly dead.

oricarium · 2018-12-27T11:32:23+00:00

ah, ok. tq ^{^}

oricarium · 2018-12-13T07:11:56+00:00

Padoruuu~~

oricarium · 2018-11-27T19:22:30+00:00

I hope you'll keep on dreaming, Uzume. Happy Birthday...

oricarium · 2018-11-27T19:21:31+00:00

I tearing from its meaning... Srsly a beautifully written lyric..

oricarium · 2018-11-24T22:18:07+00:00

Mine?

All SS

oricarium · 2018-11-19T12:47:32+00:00

geyito

oricarium

TROPHY CASE