Last active
July 22, 2024 18:36
-
-
Save ryanpcmcquen/221ea7df0c64b5b26cf10b73ddff3b9c to your computer and use it in GitHub Desktop.
Light theme for YouTube Music (fork of https://github.com/Tech-How/Light-Theme-for-YouTube-Music/blob/main/theme.css)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*** | |
*** Modified by Ryan McQuen - February, 2024 and July, 2024 | |
***/ | |
/* Light Theme for YouTube Music */ | |
/* By Tech How */ | |
/* Visit this project on GitHub and be the first to know about bug fixes and improvements! */ | |
/* https://github.com/Tech-How/Light-Theme-for-YouTube-Music */ | |
/* Color Scheme */ | |
/* Background Color: F4F4F4 */ | |
/* Accent Color: 262626 */ | |
/* Generic Hover Color: CCCCCC */ | |
/* Player Bar Color: FFFFFF */ | |
/* Divider Color: CCCCCC */ | |
/* Divider Color (Dark Context Menus): 383838 */ | |
/* This theme may not be copied and/or redistributed in any way, shape or form, excluding the one copy you obtain from my Userstyles or GitHub page. */ | |
/* Header/Navigation Bar */ | |
ytmusic-nav-bar .left-content [aria-label=Home] picture { | |
display: none !important; | |
} | |
ytmusic-nav-bar .left-content [aria-label=Home] { | |
background: url(data:image/png;base64,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); | |
border-radius: 5px; | |
width: 120px; | |
height: 30px; | |
background-repeat: no-repeat; | |
} | |
.center-content.style-scope.ytmusic-nav-bar { | |
background: #F4F4F4 !important; | |
} | |
/* Welcome Image */ | |
.background-gradient.ytmusic-immersive-carousel-shelf-renderer { | |
display: none; | |
} | |
/* Search Box */ | |
ytmusic-search-box { | |
color: #262626 !important; | |
background: #F4F4F4 !important; | |
border-color: #ccc; | |
border-radius: 7px; | |
} | |
ytmusic-search-box:not([opened]):not([has-query]) .search-box.ytmusic-search-box { | |
background: #F4F4F4 !important; | |
} | |
ytmusic-search-box[opened] { | |
border: 0 !important; | |
box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.26) !important; | |
} | |
ytmusic-search-box[opened] #suggestions { | |
background: #fff !important; | |
} | |
ytmusic-search-box[opened] #suggestions ytmusic-search-suggestion { | |
background: #fff !important; | |
} | |
ytmusic-search-box[opened] #suggestions ytmusic-search-suggestion:hover { | |
background: #eeeeee !important; | |
} | |
ytmusic-search-box #input { | |
caret-color: #5a5a5a !important; | |
color: black; | |
} | |
ytmusic-search-box #input::placeholder { | |
color: #404040 !important; | |
} | |
ytmusic-search-suggestions-section { | |
border-top: 1px solid #ccc !important; | |
} | |
/* Search Box Initiated */ | |
.search-box.ytmusic-search-box { | |
background: #FEFEFE !important; | |
} | |
tp-yt-iron-icon.ytmusic-search-suggestion { | |
fill: #404040; | |
} | |
ytmusic-search-box[opened], ytmusic-search-box[has-query] { | |
border: 1px solid #C0C0C0; | |
} | |
/* Search Box - Below Content Margins */ | |
.scroller.scroller-on-hover.style-scope.ytmusic-chip-cloud-renderer { | |
margin-bottom: 30px; | |
} | |
/* Search Tabs */ | |
ytmusic-tabs.iron-selected .tab.ytmusic-tabs, .tab.selected.ytmusic-tabs { | |
border-color: #262626; | |
} | |
ytmusic-tabs.stuck { | |
background: #F4F4F4; | |
} | |
/* Search Categories */ | |
.yt-simple-endpoint.style-scope.ytmusic-chip-cloud-chip-renderer { | |
background: #fff !important; | |
border-color: #ccc !important; | |
margin-left: -6px; | |
} | |
.text.style-scope.ytmusic-chip-cloud-chip-renderer { | |
color: #000 !important; | |
} | |
.style-scope.ytmusic-chip-cloud-chip-renderer { | |
color: #262626 !important; | |
fill: #262626 !important; | |
} | |
/* Search Results */ | |
#contents.ytmusic-shelf-renderer > *.ytmusic-shelf-renderer:not(:last-child) { | |
border-color: #ccc | |
} | |
/* Search Results Category Stuck Header */ | |
ytmusic-search-page.stuck ytmusic-header-renderer.ytmusic-search-page { | |
background: #F4F4F4 !important; | |
} | |
/* 'New Recommendations' Button */ | |
a.ytmusic-content-update-chip { | |
background: #fff; | |
border: 1px solid #ccc; | |
} | |
.style-scope a.ytmusic-content-update-chip { | |
color: #262626 !important; | |
} | |
/* Notification Pop-Ups */ | |
#toast.ytmusic-notification-text-renderer, tp-yt-paper-toast.yt-notification-action-renderer, tp-yt-paper-toast { | |
border-radius: 5px; | |
box-shadow: 7px 7px 10px rgba(0, 0, 0, .5); | |
background: #fff; | |
} | |
.yt-spec-button-shape-next--call-to-action-inverse.yt-spec-button-shape-next--text:hover { | |
background: #fff !important; | |
} | |
/* Site Background */ | |
body { | |
background-color: #F4F4F4; | |
} | |
/* Page Headings */ | |
.title.text.style-scope.ytmusic-carousel-shelf-basic-header-renderer { | |
color: #262626; | |
} | |
/* New Chips Style */ | |
a.ytmusic-chip-cloud-chip-renderer { | |
border: 1px solid #fff !important; | |
} | |
ytmusic-chip-cloud-renderer:first-of-type ytmusic-chip-cloud-chip-renderer.ytmusic-chip-cloud-renderer:first-of-type { | |
margin-left: 6px; | |
} | |
ytmusic-chip-cloud-chip-renderer.ytmusic-chip-cloud-renderer { | |
margin-bottom: 3px !important; | |
} | |
#chips.ytmusic-chip-cloud-renderer { | |
margin-bottom: 3px | |
} | |
/* Icons */ | |
.style-scope { | |
color: #262626 !important; | |
} | |
/* Non-Player Artwork Style */ | |
#background.ytmusic-item-thumbnail-overlay-renderer, #content.ytmusic-item-thumbnail-overlay-renderer { | |
border-radius: 10px; | |
} | |
.image-wrapper.ytmusic-two-row-item-renderer { | |
border-radius: 10px; | |
box-shadow: 1px 2px 8px 3px rgba(0,0,0,0.27); | |
} | |
.items-wrapper.style-scope.ytmusic-carousel { | |
border-radius: 10px; | |
} | |
#items.ytmusic-carousel { | |
padding: 8px; | |
} | |
.next-items-button.ytmusic-carousel, .previous-items-button.ytmusic-carousel { | |
top: 100px; | |
} | |
img.yt-img-shadow { | |
border-radius: 10px; | |
} | |
#thumbnail.ytmusic-data-bound-header-renderer, .thumbnail.ytmusic-data-bound-header-renderer { | |
border-radius: 10px; | |
max-height: 264px; | |
} | |
/* Artwork/Album Carousel */ | |
tp-yt-paper-icon-button.ytmusic-carousel-shelf-renderer { | |
border: none; | |
} | |
/* Context Menus */ | |
.style-scope.ytmusic-menu-popup-renderer { | |
background: #fff; | |
border-color: #DFDFDF !important; | |
} | |
.style-scope.ytmusic-multi-select-menu-renderer { | |
background: #fff; | |
border-color: #ccc !important; | |
} | |
.scroller.style-scope.ytmusic-multi-select-menu-renderer { | |
background: #fff !important; | |
} | |
#items.ytmusic-menu-popup-renderer > .ytmusic-menu-popup-renderer:hover { | |
background: #DFDFDF !important; | |
} | |
.icon.ytmusic-menu-navigation-item-renderer, .icon.ytmusic-menu-service-item-renderer, .icon.ytmusic-toggle-menu-service-item-renderer { | |
fill: #303030; | |
} | |
#title.ytmusic-multi-select-menu-renderer { | |
border-bottom: 1px solid #ccc; | |
} | |
#items.ytmusic-multi-select-menu-renderer > ytmusic-menu-item-divider-renderer.ytmusic-multi-select-menu-renderer { | |
border-color: #ccc !important; | |
} | |
ytmusic-multi-select-menu-item-renderer:hover { | |
background: #DFDFDF !important; | |
} | |
.icon.ytmusic-multi-select-menu-item-renderer { | |
fill: #262626; | |
} | |
/* Text */ | |
.style-scope.text.ytmusic-menu-navigation-item-renderer { | |
color: #262626 !important; | |
} | |
.style-scope.text.ytmusic-menu-service-item-renderer { | |
color: #262626 !important; | |
} | |
.style-scope.text.ytmusic-toggle-menu-service-item-renderer { | |
color: #262626 !important; | |
} | |
.style-scope.text.ytmusic-multi-select-menu-item-renderer { | |
color: #262626 !important; | |
} | |
.style-scope.text.ytmusic-menu-title-renderer { | |
color: #262626 !important; | |
} | |
ytmusic-menu-item-divider-renderer { | |
border-bottom: 1px solid #383838 !important; | |
} | |
#items.ytmusic-multi-select-menu-renderer { | |
background: #262626; | |
} | |
/* Charts Selection */ | |
button.ytmusic-sort-filter-button-renderer { | |
background: #fff; | |
border-color: #ccc; | |
} | |
ytmusic-navigation-button-renderer[button-style=STYLE_ICON] button.ytmusic-navigation-button-renderer, button.ytmusic-navigation-button-renderer { | |
background: #fff; | |
border: 1px solid #ccc; | |
} | |
/* Generic Hover Color */ | |
ytmusic-navigation-button-renderer:not([button-style=STYLE_OUTLINE_BORDER]):hover button.ytmusic-navigation-button-renderer, ytmusic-navigation-button-renderer:not([button-style=STYLE_OUTLINE_BORDER]) button.ytmusic-navigation-button-renderer:focus-within { | |
background: #F0F0F0; | |
} | |
/* Library Tab */ | |
ytmusic-item-section-renderer.stuck #header.ytmusic-item-section-renderer { | |
background: #F4F4F4; | |
} | |
ytmusic-item-section-tab-renderer.iron-selected .tab.ytmusic-item-section-tab-renderer, .tab.selected.ytmusic-item-section-tab-renderer { | |
border-color: #000; | |
} | |
ytmusic-dropdown-renderer[dropdown-style=default] { | |
border-color: #ccc; | |
} | |
/* Player Bar */ | |
ytmusic-player-bar, .buttons.ytmusic-tastebuilder-renderer { | |
background: #fff; | |
} | |
.image.ytmusic-player-bar { | |
border-radius: 3px; | |
} | |
#secondaryProgress.tp-yt-paper-progress { | |
background: #aaa !important; | |
} | |
#progressContainer.tp-yt-paper-progress, .indeterminate.tp-yt-paper-progress::after { | |
background: #ccc !important; | |
} | |
tp-yt-iron-icon.tp-yt-paper-icon-button, tp-yt-iron-icon { | |
fill: #262626 !important; | |
} | |
ytmusic-player-bar #right-controls #volume-slider #primaryProgress { | |
background: #262626 !important; | |
} | |
.volume-slider.ytmusic-player-bar, .expand-volume-slider.ytmusic-player-bar { | |
--paper-slider-knob-color: #262626; | |
--paper-slider-active-color: #262626; | |
} | |
ytmusic-player-bar #right-controls #volume-slider #sliderKnob .slider-knob-inner { | |
background: #262626 !important; | |
border: #262626 !important; | |
} | |
#hover-time-info.style-scope.ytmusic-player-bar { | |
color: #fff !important; | |
} | |
/* Player Page */ | |
.content.style-scope.ytmusic-player-page { | |
background: #F4F4F4; | |
} | |
#selectionBar.tp-yt-paper-tabs { | |
border-bottom: #262626; | |
border-bottom: 2px solid; | |
border-radius: 30px; | |
} | |
.av.ytmusic-player-page { | |
display: none; | |
} | |
ytmusic-player-queue-item { | |
border-bottom: 1px solid; | |
border-color: #ccc; | |
} | |
body > ytmusic-player-queue-item, body > ytmusic-responsive-list-item-renderer { | |
background: #F8F8F8 !important; | |
border-radius: 8px !important; | |
box-shadow: 0px 0px 10px -4px rgba(0,0,0,0.60); | |
} | |
/* Text Transform */ | |
#tabsContent.tp-yt-paper-tabs, yt-button-renderer yt-formatted-string.yt-button-renderer, .tab-content.tp-yt-paper-tab, tp-yt-paper-button.ytmusic-playlist-form, .tab.ytmusic-item-section-tab-renderer, .tab.selected.ytmusic-item-section-tab-renderer, .more-button.ytmusic-shelf-renderer tp-yt-paper-button.ytmusic-shelf-renderer, tp-yt-paper-button.ytmusic-toggle-button-renderer yt-icon.ytmusic-toggle-button-renderer~yt-formatted-string.ytmusic-toggle-button-renderer, .style-scope.ytmusic-subscribe-button-renderer, .sign-in-link.ytmusic-nav-bar, .done-button.ytmusic-uploads-complete, .library-button.ytmusic-uploads-complete, .stop-button.ytmusic-upload-progression { | |
text-transform: none; | |
} | |
.tab.ytmusic-tabs { | |
text-transform: capitalize; | |
} | |
/* Song Artwork Mod */ | |
yt-img-shadow#thumbnail.thumbnail.style-scope.ytmusic-player.no-transition { | |
background-color: transparent !important; | |
} | |
ytmusic-player#player.style-scope.ytmusic-player-page { | |
background-color: transparent !important; | |
} | |
ytmusic-player { | |
background-color: transparent !important; | |
} | |
yt-img-shadow[object-fit=COVER] img.yt-img-shadow { | |
box-shadow: 3px 3px 15px rgba(0, 0, 0, .5) !important; | |
border-radius: 10px; | |
} | |
#thumbnail.ytmusic-player, #error-screen.ytmusic-player, .player-wrapper.ytmusic-player { | |
padding: 20px; | |
border-color: none; | |
border-radius: 10px; | |
} | |
.song-media-controls.ytmusic-player { | |
padding: 20px; | |
margin: 20px; | |
border-color: none; | |
border-radius: 10px; | |
} | |
.top-row-buttons.style-scope.ytmusic-player, .player-minimize-button.style-scope.ytmusic-player, .fullscreen-button.style-scope.ytmusic-player, .player-maximize-button.style-scope.ytmusic-player { | |
box-shadow: none !important; | |
border-radius: 10px; | |
} | |
.icon.style-scope.ytmusic-player { | |
fill: #fff !important; | |
} | |
/* Video Player Mod */ | |
ytmusic-player-bar[player-fullscreened_], .style-scope.ytmusic-player-expanding-menu.ytmusic-player-bar { | |
background: #fff !important; | |
transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 0.8) !important; | |
} | |
ytmusic-app-layout[player-fullscreened_][show-fullscreen-controls_] .fullscreen-overlay.ytmusic-app-layout, ytmusic-app-layout[player-fullscreened_][show-fullscreen-controls_] > [slot=player-bar] { | |
opacity: 0.8; | |
} | |
.html5-video-player.ytp-hide-controls.ytp-exp-bottom-control-flexbox.ytp-exp-ppp-update.ytp-hide-info-bar.ytp-iv-drawer-enabled.playing-mode, .html5-video-player.ytp-hide-controls.ytp-exp-bottom-control-flexbox.ytp-exp-ppp-update.ytp-hide-info-bar.ytp-iv-drawer-enabled.paused-mode, .html5-video-player.ytp-hide-controls.ytp-exp-bottom-control-flexbox.ytp-exp-ppp-update.ytp-hide-info-bar.ytp-large-width-mode.playing-mode.ytp-autohide, .html5-video-player.ytp-hide-controls.ytp-exp-bottom-control-flexbox.ytp-exp-ppp-update.ytp-hide-info-bar.ytp-large-width-mode.paused-mode, .html5-video-player.ytp-hide-controls.ytp-exp-bottom-control-flexbox.ytp-exp-ppp-update.ytp-hide-info-bar.playing-mode.ytp-small-mode, .html5-video-player.ytp-hide-controls.ytp-exp-bottom-control-flexbox.ytp-exp-ppp-update.ytp-hide-info-bar.paused-mode.ytp-small-mode, .html5-video-player.ytp-hide-controls.ytp-exp-bottom-control-flexbox.ytp-exp-ppp-update.ytp-hide-info-bar.ytp-large-width-mode.playing-mode, .html5-video-player.ytp-hide-controls.ytp-exp-bottom-control-flexbox.ytp-exp-ppp-update.ytp-hide-info-bar.ytp-large-width-mode.paused-mode, .html5-video-player.ytp-hide-controls.ytp-exp-bottom-control-flexbox.ytp-exp-ppp-update.ytp-hide-info-bar.ytp-large-width-mode.playing-mode.buffering-mode.unstarted-mode, .html5-video-player.ytp-hide-controls.ytp-exp-bottom-control-flexbox.ytp-exp-ppp-update.ytp-hide-info-bar.ytp-large-width-mode.paused-mode.buffering-mode.unstarted-mode, .html5-video-container { | |
box-shadow: 3px 3px 15px rgba(0, 0, 0, .5) !important; | |
border-color: none; | |
border-radius: 10px; | |
max-width: 94.5%; | |
max-height: 94.5%; | |
} | |
#error-wrapper.ytmusic-player, #error-screen.ytmusic-player { | |
box-shadow: 3px 3px 15px rgba(0, 0, 0, .5) !important; | |
border-color: none; | |
border-radius: 10px; | |
max-width: 94.5%; | |
max-height: 54.5%; | |
margin-top: -10%; | |
margin-bottom: -10.2%; | |
margin-left: 20px; | |
margin-right: 20px; | |
padding-top: 49.9%; | |
} | |
ytmusic-player[player-ui-state_=FULLSCREEN] { | |
width: 106.5vw; | |
height: 106.8vh; | |
margin-top: -22.6px !important; | |
margin-left: -22.6px !important; | |
} | |
/* Expanding Player Bar */ | |
ytmusic-player-expanding-menu { | |
background: #fff !important; | |
} | |
.volume-slider.ytmusic-player-bar, .expand-volume-slider.ytmusic-player-bar { | |
background: #262626 !important; | |
border-color: #262626 !important; | |
} | |
.volume-slider.ytmusic-player-bar, .expand-volume-slider.ytmusic-player-bar { | |
background: #fff !important; | |
} | |
ytmusic-player-page[mini-player-enabled_][player-page-open_] #player.ytmusic-player-page { | |
background: none !important; | |
border-radius: 10px; | |
} | |
ytmusic-player-page[mini-player-enabled_]:not([player-page-open_]) #player.ytmusic-player-page { | |
background: none !important; | |
box-shadow: none !important; | |
border-radius: 10px; | |
} | |
/* Scroll Bars */ | |
ytmusic-app-layout[player-page-open_] #nav-bar-background.ytmusic-app-layout, ytmusic-app-layout.content-scrolled #nav-bar-background.ytmusic-app-layout, ytmusic-app-layout.content-scrolled #nav-bar-divider.ytmusic-app-layout { | |
border-right: 12px solid; | |
border-color: #F4F4F4; | |
} | |
ytmusic-app-layout[player-visible_] > [slot=player-bar], ytmusic-app-layout[player-visible_] #player-bar-background.ytmusic-app-layout { | |
border-right: 12px solid; | |
border-color: #fff; | |
} | |
player-bar-background { | |
border-right: 12px solid; | |
border-color: #fff; | |
} | |
html::-webkit-scrollbar-track { | |
background: #F4F4F4 !important; | |
} | |
html::-webkit-scrollbar-thumb { | |
background: #F4F4F4 !important; | |
} | |
html::-webkit-scrollbar-thumb:active { | |
background: #F4F4F4 !important; | |
} | |
.content.ytmusic-player-page { | |
border-right: 12px solid; | |
border-color: #F4F4F4; | |
} | |
/* Nerd Stats */ | |
.style-scope.ytmusic-nerd-stats.label.ytmusic-nerd-stats { | |
color: #fff !important; | |
} | |
.style-scope.ytmusic-nerd-stats.value.ytmusic-nerd-stats { | |
color: #fff !important; | |
} | |
ytmusic-player ytmusic-nerd-stats.ytmusic-player { | |
margin: 20px !important; | |
border-top-left-radius: 10px !important; | |
} | |
/* Share Dialog */ | |
.style-scope.ytmusic-popup-container { | |
background: #F4F4F4; | |
border-radius: 10px; | |
} | |
button.yt-icon-button { | |
background: #F4F4F4 !important; | |
} | |
#bar.yt-copy-link-renderer { | |
background: #ccc !important; | |
} | |
.style-scope.yt-button-renderer.style-text { | |
text-transform: none; | |
} | |
.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled:hover { | |
background-color: #fff; | |
} | |
/* Other Dialog Boxes */ | |
yt-confirm-dialog-renderer[dialog][dialog][dialog] { | |
background: #F4F4F4; | |
} | |
ytmusic-mealbar-promo-renderer[dialog][dialog][dialog] { | |
background: #fff; | |
box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.3); | |
} | |
/* Account Menu */ | |
#contentWrapper.tp-yt-iron-dropdown > * { | |
box-shadow: 3px 3px 15px rgba(0, 0, 0, .5) !important; | |
background: #fff !important; | |
border: 1px solid #DFDFDF; | |
} | |
#endpoint.yt-simple-endpoint.ytd-compact-link-renderer:hover { | |
background: #DFDFDF; | |
} | |
ytd-active-account-header-renderer { | |
background: #fff !important; | |
border-color: #ccc !important; | |
} | |
#sections.ytd-multi-page-menu-renderer > *.ytd-multi-page-menu-renderer:not(:last-child) { | |
border-color: #ccc !important; | |
} | |
/* Switch Account Submenu */ | |
.style-scope.ytd-multi-page-menu-renderer { | |
background: #fff !important; | |
} | |
tp-yt-paper-icon-item.ytd-account-item-renderer:hover { | |
background: #DFDFDF; | |
} | |
/* Artist Page/Immersive Header */ | |
.title.ytmusic-immersive-header-renderer, .description.ytmusic-immersive-header-renderer, ytmusic-toggle-button-renderer yt-formatted-string.ytmusic-toggle-button-renderer, .style-scope.ytmusic-subscribe-button-renderer, .dropdown-trigger.style-scope.ytmusic-menu-renderer.style-scope.tp-yt-paper-icon-button { | |
color: #fff !important; | |
} | |
.style-scope.paper-ripple.tp-yt-paper-button { | |
color: #fff !important; | |
} | |
/* Below Content Margins */ | |
.image.ytmusic-immersive-header-renderer ~ .content-container-wrapper.ytmusic-immersive-header-renderer .content-container.ytmusic-immersive-header-renderer { | |
padding: 0 0 30px; | |
} | |
/* Personal Artist Page */ | |
.title.ytmusic-visual-header-renderer { | |
color: #fff !important; | |
} | |
ytmusic-visual-header-renderer[has-banner-image] .content-container.ytmusic-visual-header-renderer { | |
margin-bottom: 33px; | |
} | |
ytmusic-visual-header-renderer[has-banner-image]:not([no-transition]) .gradient-container.ytmusic-visual-header-renderer { | |
padding-bottom: 1px; | |
} | |
/* Album Page */ | |
ytmusic-data-bound-header-renderer { | |
background: #F4F4F4 !important; | |
} | |
#thumbnail.ytmusic-data-bound-header-renderer, .thumbnail.ytmusic-data-bound-header-renderer { | |
box-shadow: 3px 3px 15px rgba(0, 0, 0, .5) !important; | |
margin-bottom: 6px; | |
} | |
.content-container.style-scope.ytmusic-data-bound-header-renderer { | |
padding: 10px !important; | |
margin-top: 40px !important; | |
} | |
ytmusic-list-item-renderer .ytmusic-play-button-renderer { | |
fill: #262626 !important; | |
} | |
/* Buttons */ | |
#button.style-scope.yt-button-renderer.size-default, .sign-in-link.ytmusic-nav-bar { | |
border: 1px solid #ccc; | |
border-radius: 5px; | |
} | |
yt-button-renderer.ytmusic-menu-renderer, .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline, .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline:hover { | |
border-radius: 20px; | |
border: 1px solid #ccc; | |
} | |
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline:hover { | |
background: #D9D9D9; | |
} | |
.yt-core-attributed-string--white-space-no-wrap { | |
color: #262626; | |
} | |
#button-shape-subscribe > button > div > span:nth-child(1), #button-shape-subscribe > button > div > span.yt-core-attributed-string.ytmusic-subscribe-button-renderer.count-text.yt-core-attributed-string--white-space-no-wrap { | |
color: #FF4E45; | |
} | |
.play-button.style-scope.ytmusic-immersive-header-renderer.style-dark-on-white.size-default, .radio-button.ytmusic-immersive-header-renderer { | |
border-radius: 5px; | |
} | |
.yt-simple-endpoint.style-scope.yt-button-renderer { | |
border-radius: 5px !important; | |
} | |
.title.ytmusic-immersive-header-renderer, .description.ytmusic-immersive-header-renderer, ytmusic-toggle-button-renderer yt-formatted-string.ytmusic-toggle-button-renderer, .style-scope.ytmusic-subscribe-button-renderer, .dropdown-trigger.style-scope.ytmusic-menu-renderer.style-scope.tp-yt-paper-icon-button { | |
border-radius: 5px; | |
} | |
#top-level-buttons.ytmusic-menu-renderer > .outline-button.ytmusic-menu-renderer, .edit-playlist-button.ytmusic-menu-renderer, ytmusic-toggle-button-renderer.ytmusic-menu-renderer, #bottom-button.ytmusic-shelf-renderer yt-button-renderer.style-white-with-border.ytmusic-shelf-renderer, #top-level-buttons.ytmusic-menu-renderer > .ytmusic-menu-renderer:not(:first-child), ytmusic-data-bound-top-level-menu-item.ytmusic-data-bound-menu-renderer:not(:first-child) { | |
border-radius: 5px; | |
} | |
/* Un-Editable Playlist Page */ | |
.style-scope.ytmusic-browse-response { | |
background: #F4F4F4 !important; | |
} | |
.content-container.style-scope.ytmusic-detail-header-renderer { | |
padding: 10px !important; | |
margin-top: 40px !important; | |
} | |
.style-scope.ytmusic-toggle-button-renderer { | |
color: #262626 !important; | |
} | |
/* Editable Playlist Page */ | |
.style-scope.ytmusic-editable-playlist-detail-header-renderer { | |
background: #F4F4F4 !important; | |
} | |
#thumbnail.ytmusic-detail-header-renderer, .thumbnail.ytmusic-detail-header-renderer { | |
box-shadow: 3px 3px 15px rgba(0, 0, 0, .5) !important; | |
margin-bottom: 6px; | |
max-height: 264px; | |
} | |
.style-scope.ytmusic-editable-playlist-detail-header-renderer { | |
padding: 10px !important; | |
margin-top: 40px !important; | |
} | |
#contents.ytmusic-playlist-shelf-renderer > *.ytmusic-playlist-shelf-renderer:not(:last-child) { | |
border-color: #ccc !important; | |
} | |
ytmusic-responsive-list-item-renderer[is-checked] { | |
background-color: #ccc; | |
} | |
ytmusic-dialog[dialog-type=multiSelectMenuBar] { | |
border: none; | |
background-color: #F4F4F4; | |
} | |
.tp-yt-paper-tooltip[style-target=tooltip] { | |
background-color: #F4F4F4; | |
} | |
yt-icon, .yt-icon-container.yt-icon { | |
fill: #262626; | |
} | |
#top-level-buttons > yt-button-renderer.edit-playlist-button.style-scope.ytmusic-menu-renderer, ytmusic-menu-renderer[force-top-level-buttons-icon-only] yt-button-renderer.ytmusic-menu-renderer { | |
border-color: #F4F4F4; | |
} | |
/* Edit Playlist Metadata */ | |
ytmusic-dialog { | |
border-color: transparent; | |
} | |
#content.ytmusic-dialog > *.ytmusic-dialog { | |
background: #F4F4F4 !important; | |
border-radius: 7px; | |
} | |
ytmusic-playlist-form[tabbed-ui-enabled] iron-pages.ytmusic-playlist-form .content.ytmusic-playlist-form { | |
border-color: #ccc !important; | |
} | |
.unfocused-line.tp-yt-paper-input-container { | |
border-color: #ccc !important; | |
} | |
.dropdown-content.ytmusic-dropdown-renderer, ytmusic-dropdown-item-renderer { | |
background: #fff !important; | |
box-shadow: none !important; | |
} | |
tp-yt-iron-dropdown.tp-yt-paper-menu-button { | |
border-radius: 10px; | |
} | |
#contentWrapper.tp-yt-iron-dropdown > * { | |
border-radius: 10px; | |
} | |
.style-scope.ytmusic-dropdown-renderer.iron-selected { | |
background: #ccc !important; | |
} | |
ytmusic-dropdown-item-renderer:hover { | |
background: #ADADAD !important; | |
} | |
tp-yt-paper-listbox { | |
background: #fff; | |
} | |
.toggle-bar.style-scope.tp-yt-paper-toggle-button { | |
background: #ADADAD !important; | |
} | |
tp-yt-paper-toggle-button[checked]:not([disabled]) .toggle-bar.tp-yt-paper-toggle-button { | |
background: #3EA6FF !important; | |
} | |
.submit-button.ytmusic-playlist-form { | |
background: #262626 !important; | |
color: #fff !important; | |
border-radius: 5px; | |
} | |
#general-pane > div.actions.style-scope.ytmusic-playlist-form > yt-button-shape:nth-child(7) > button, #collaborate-pane > div.actions.style-scope.ytmusic-playlist-form > yt-button-shape > button { | |
background: #262626; | |
} | |
#general-pane > div.actions.style-scope.ytmusic-playlist-form > yt-button-shape:nth-child(7) > button > div, #collaborate-pane > div.actions.style-scope.ytmusic-playlist-form > yt-button-shape > button > div { | |
color: #fff; | |
} | |
#general-pane > div.actions.style-scope.ytmusic-playlist-form > yt-button-shape:nth-child(3) > button > yt-touch-feedback-shape > div { | |
border: 1px solid #ccc; | |
} | |
#general-pane > div.actions.style-scope.ytmusic-playlist-form > yt-button-shape:nth-child(3) > button > div { | |
color: #262626; | |
} | |
#general-pane > div.actions.style-scope.ytmusic-playlist-form > yt-button-shape:nth-child(3) > button:hover { | |
background: #D9D9D9; | |
} | |
.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled { | |
background: #fff; | |
} | |
/* Play Button (On Artwork) */ | |
.icon.ytmusic-play-button-renderer { | |
fill: #F0F0F0 | |
} | |
/* Settings Page */ | |
.dialog-title:after {content: " Light Theme for YouTube Music [Ver. 1.9] (By Tech How)";} | |
.top-bar.ytmusic-settings-page, ytmusic-setting-category-collection-renderer.ytmusic-settings-page, .items.ytmusic-setting-category-collection-renderer > *.ytmusic-setting-category-collection-renderer { | |
border-color: #ccc; | |
} | |
.category-menu.style-scope.ytmusic-settings-page { | |
background: #F4F4F4 !important; | |
border-radius: 7px; | |
} | |
.category-menu-item.ytmusic-settings-page .title.ytmusic-settings-page { | |
margin-left: 6px; | |
} | |
.category-menu-item.iron-selected.ytmusic-settings-page, .category-menu-item.ytmusic-settings-page:focus:not(.iron-selected) { | |
background: #ccc; | |
} | |
.category-menu-item.ytmusic-settings-page:hover { | |
background: #DADADA; | |
} | |
.dropdown-content.ytmusic-setting-single-option-menu-renderer { | |
background: #fff; | |
} | |
tp-yt-paper-toggle-button[checked]:not([disabled]) .toggle-button.tp-yt-paper-toggle-button { | |
background: #3387CE; | |
} | |
/* Upgrade Page */ | |
ytmusic-item-section-renderer:not(.memberships-and-purchases) #items.ytmusic-item-section-renderer > *.ytmusic-item-section-renderer { | |
background: #F4F4F4 !important; | |
} | |
#logo_wrapper.yt-unlimited-page-header-renderer { | |
background: #000; | |
border-radius: 10px; | |
padding: 30px; | |
} | |
#container.yt-music-pass-feature-info-renderer { | |
margin-top: 30px; | |
} | |
.style-light.yt-music-pass-feature-info-renderer #header.yt-music-pass-feature-info-renderer, .style-light.yt-music-pass-feature-info-renderer #description.yt-music-pass-feature-info-renderer { | |
color: #fff !important; | |
} | |
/**************************************/ | |
/**************************************/ | |
/**************************************/ | |
/*** | |
*** MODIFICATIONS FROM ORIGINAL THEME: | |
***/ | |
ytmusic-search-box[is-bauhaus-sidenav-enabled], | |
#contentContainer.tp-yt-app-drawer, | |
.style-scope.ytmusic-app { | |
background-color: #F4F4F4; | |
--ytmusic-search-background: #F4F4F4; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment