Skip to content

Instantly share code, notes, and snippets.

@math0ne

math0ne/gist:650f4d499ff9e0e51b53898a02e5a6ab

Created May 26, 2017 19:16
Show Gist options
  • Save math0ne/650f4d499ff9e0e51b53898a02e5a6ab to your computer and use it in GitHub Desktop.
Save math0ne/650f4d499ff9e0e51b53898a02e5a6ab to your computer and use it in GitHub Desktop.
Download ZIP
youtube umbra arc theme
Raw
gistfile1.txt
@-moz-document domain("youtube.com") {
/*================================================================
Youtube Umbra Theme
by Andy Cormack
http://ac-design.co.uk/
@groundxaero
v1.3.2
Last updated: 2017/03/21
================================================================*/
/*================================================================
Global variables
================================================================*/
:root {
--selection-bg-color: #8ea2cb;
--selection-text-color: #dde;
--body-font: 'Open Sans', sans-serif;
/* Main page bg */
--bg-color: #2b303b;
--main-text-color: #aaaab6;
--main-faded-text-color: #66666c;
--author-highlight-bg-color: #445;
--sep-line-color: #36363f;
--card-bg-color: #2b303b;
--card-dark-bg-color: #2b303b;
--card-light-bg-color: #2b303b;
--card-border-color: #2f2f34;
--card-hover-bg-color: #2a2a2d;
--card-light-hover-bg-color: #303034;
--card-light-hover-border-color: #404044;
--menu-bg-color: #2b303b;
--menu-hover-bg-color: #2f2f34;
--menu-border-color: #36363f;
--menu-light-bg-color: #3a3a44;
--menu-light-hover-bg-color: #3f3f48;
--menu-light-active-bg-color: #46464f;
--menu-light-border-color: #46464f;
--link-color: #ddd;
--link-hover-color: #fff;
--input-box-bg-color: #171719;
--input-checkbox-toggle-bg-color: #54545a;
--input-checkbox-active-bg-color: #3a3a44;
--input-checkbox-inactive-bg-color: #222225;
}
::-moz-selection {
background: var(--selection-bg-color);
color: var(--selection-text-color);
}
::selection {
background: var(--selection-bg-color);
color: var(--selection-text-color);
}
body {
font-family: var(--body-font);
background: var(--bg-color);
color: var(--main-text-color);
}
.yt-default p,
p.yt {
color: var(--main-text-color);
}
/* Links */
a,
.yt-uix-button-link,
.branded-page-module-title a:visited,
.branded-page-module-title a,
.yt-lockup-title a,
.yt-lockup:hover a,
.yt-lockup:hover .yt-lockup-meta a,
.yt-lockup:hover .yt-lockup-description a,
#watch-header .yt-user-info a,
.multirow-shelf .yt-uix-expander-head,
.comment-renderer-header .comment-author-text,
.comment-renderer-like-count,
.comment-replies-renderer-paginator,
.comment-replies-renderer-view,
.comment-replies-renderer-hide,
#action-panel-details a,
.lohp-video-link,
.lohp-video-metadata .yt-user-name,
.feed-item-main .feed-item-header a,
.feed-item-main a.yt-user-name,
.c4-checklist-module .checklist-item-title-text,
.branded-page-related-channels h3 a,
.branded-page-related-channels h3,
#pl-header .pl-header-details a,
.yt-tile-static a,
.yt-tile-visible:hover a,
.yt-tile-default:hover a,
.yt-card-light a,
.yt-card-light .yt-card-title a,
.yt-creator-benefits-table a,
.yt-advertise-sidebar a,
.yt-dev-showcase-external-link-msg-container:hover a,
.filter,
.filter-sort.filter-selected,
.video-player-view-component .video-detail a,
.dashboard-widget-comments .comment-header a,
.dashboard-widget-comments .selectable-item:hover .vm-link a,
.dashboard-widget-videos .video-list-item .video-title a,
.vm-list-view .vm-video-title .vm-video-title-content,
.vm-list-view .vm-video-side-view-count a,
.creator-editor-title a,
.vm-list-view .vm-video-side-notification-text a,
.yt-alert-naked .yt-alert-content a,
.CLV4EJC-b-c a,
.CLV4EJC-p-a,
.shared-conversation-title,
.simple-hero-movie-info .simple-hero-movie-info-title a {
color: var(--link-color);
}
/* Some style stealing specificity focus somehow?? */
.video-list .video-list-item .title {
color: var(--link-color) !important;
}
.video-list .video-list-item:hover .title {
color: var(--link-hover-color) !important;
}
/* Hover */
a:hover,
.branded-page-module-title a.branded-page-module-title-link:hover,
#action-panel-details:hover a,
.lohp-video-metadata .yt-user-name:hover,
.feed-item-container:hover .feed-item-header a,
.feed-item-container:hover a.yt-user-name,
.c4-checklist-module .checklist-item.done .checklist-item-title-text:hover,
.c4-checklist-module .checklist-item-title-text:hover,
.c4-checklist-module .checklist-item:hover .checklist-item-title-text .todo-title-text,
.c4-checklist-module .view-all-link a:hover,
.branded-page-related-channels h3 a:hover,
.branded-page-related-channels-item .yt-uix-button-link:hover,
.multirow-shelf .compact-shelf-view-all-card-link:hover h4,
.multirow-shelf .compact-shelf-view-all-card-link:hover a,
#watch7-sidebar .video-list-item:hover .title,
#watch7-sidebar .video-list-item:hover .title .yt-deemphasized-text,
#pl-header .pl-header-details a:hover,
.filter:hover,
.video-player-view-component .video-detail a:hover,
.dashboard-widget-comments .comment-header a:hover,
.dashboard-widget-comments .selectable-item:hover .vm-link a:hover,
.dashboard-widget-videos .video-list-item .video-title a:hover,
.vm-list-view .vm-video-title a.vm-video-title-content:hover,
.creator-editor-title a:hover,
.yt-alert-naked .yt-alert-content a:hover,
.CLV4EJC-b-c a:hover,
.CLV4EJC-d-a .CLV4EJC-d-c:hover {
color: var(--link-hover-color);
}
/* Youtube logo */
#masthead-logo,
#yt-masthead #logo-container .logo,
#footer-logo .footer-logo-icon,
.footer-logo {
background: no-repeat url(data:image/png;base64,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);
background-size: 100%;
opacity: 0.65;
}
.footer-logo img,
#masthead-logo img {
visibility: hidden;
}
/* Mobile logo */
@media (max-width: 704px) {
.exp-responsive #yt-masthead #logo-container {
filter: invert(0.88) saturate(0);
}
}
/* Youtube About page workaround */
.footer-logo {
margin-top: 15px;
display: inline-block;
}
/* Video thumbnail placeholder background */
.yt-thumb {
background: var(--menu-bg-color);
}
/* Light icons */
#watch8-action-buttons .yt-uix-button,
.yt-help-icon,
#yt-masthead-user .yt-uix-button-icon-bell,
.yt-uix-button-icon-icon-account-settings,
#masthead-search .search-btn-component .yt-uix-button-content,
.yt-close-img,
.box-close-link img,
.yt-uix-clickcard-close,
.close-small,
.flag-channel-abuse-form .report-question-mark,
.add-to-widget .addto-search-playlist-section .search-icon,
.add-to-widget .yt-sprite,
.create-playlist-widget-form .has-icon::before,
.create-playlist-widget-form .yt-uix-button-has-icon::before,
.pl-header-title-icon,
.c4-editor-edit::before,
#search-btn span,
.footer-help-btn-img-container,
.yt-ui-menu-item.has-icon::before,
.vm-list-view .vm-video-metric .yt-sprite,
.creator-editor-nav-tabs li > span .yt-sprite,
.creator-editor-nav-tabs li a .yt-sprite,
.copynotice-info-target,
.yt-uix-button-menu-item-icon-annotation-anchored,
.yt-uix-button-icon-annotation-anchored,
.icon-annotation-anchored,
.yt-uix-button-menu-item-icon-annotation-popup,
.yt-uix-button-icon-annotation-popup,
.icon-annotation-popup,
.yt-uix-button-menu-item-icon-annotation-title,
.yt-uix-button-icon-annotation-title,
.icon-annotation-title,
.yt-uix-button-menu-item-icon-annotation-highlight,
.yt-uix-button-icon-annotation-highlight,
.icon-annotation-highlight,
.yt-uix-button-menu-item-icon-annotation-label,
.yt-uix-button-icon-annotation-label,
.icon-annotation-label,
.yt-uix-button .yt-uix-button-icon,
.yt-uix-button .yt-uix-button-arrow,
.vm-search-btn .yt-uix-button-content,
.live-chat-widget .live-comments-emoji-picker-open::before,
.live-chat-widget .overflow-menu-button::before,
.live-chat-widget .post-button::before,
.ytch-search-container .search-btn-component .yt-uix-button-content,
.comments .mod-button,
.CLV4EJC-nb-b,
.CLV4EJC-g-d,
.CLV4EJC-h-n,
.CLV4EJC-n-c,
.CLV4EJC-L-c,
.CLV4EJC-H-i img,
.CLV4EJC-x-a,
.CLV4EJC-eb-a img,
.CLV4EJC-Y-u,
.CLV4EJC-W-s,
button.play-pause-button,
button.expand-button,
.track.attribution .license-button .track-action-icon,
.audiolibrary-track-head .favorite-button .track-action-icon,
#video-tab img,
#cc-tab img,
#images-tab img,
#audio-tab img,
#transition-tab img,
#text-tab img,
#keyboard-help-tab img,
img.storyboard-icon.video-icon,
img.storyboard-icon.audio-icon,
.mediapicker-audio .audio-monetized-badge-container img,
button.audio-add img,
.c4-featured-content-editor .question-mark-icon,
.yt-uix-form-input-checkbox-element,
.yt-card a.yt-action:not([style-scope]):not(.style-scope):after,
.creator-heart-big-unhearted {
filter: invert(100%);
}
/* Icons that need a bit of a boost after invert */
.timeline-zoomslider .slider-icon {
filter: invert(100%) brightness(200%);
}
/* Icons that need to be inverted but then not colored */
button.thumb-add img,
button.thumb-remove img {
filter: invert(100%) saturate(0);
}
/* Fixes for icons that don't need inversion */
#player-playlist .yt-uix-button-icon.yt-sprite {
filter: invert(0);
}
/* Icons that need inverting but then colour flipped back */
.CLV4EJC-N-j {
filter: invert(100%) hue-rotate(180deg)
}
/* Blue to light icons
- Channel tips circle bullet points
*/
.c4-checklist-module .checklist-item.active .todo-icon,
.vm-list-view .vm-video-indicators,
.delete-segment-button-icon,
.add-segment-button-icon,
.yt-sprite.vm-video-privacy,
.live-dashboard .yt-sprite {
filter: brightness(120%) saturate(5%);
}
/* light / gradient icons to darker ones */
.video-unlisted-icon {
background: no-repeat url(http://s.ytimg.com/yts/imgbin/www-hitchhiker-2x-vflMlDDAN.png) -285px -221px;
background-size: 419px 399px;
width: 20px;
height: 20px;
filter: invert(50%);
}
/* Increase check box contrast */
.yt-uix-form-input-checkbox-container input:checked+.yt-uix-form-input-checkbox-element {
border-color: #777;
opacity: 0.7;
}
/* Fix weird check box bug that made them unclickable? */
.yt-uix-form-input-checkbox-element {
pointer-events: none;
}
/* Author link highlight bg */
.comment-renderer.channel-owner .comment-author-text {
background-color: var(--author-highlight-bg-color);
padding-left: 0.5em;
padding-right: 0.5em;
}
/* Background color on links fix */
.yt-ui-ellipsis {
background: transparent !important;
}
/* Card UI elements */
.yt-card,
#masthead-container,
#yt-masthead-container,
body #footer-container,
#masthead-appbar,
.footer-container {
background: var(--card-bg-color);
color: var(--main-text-color);
border: none;
}
/* Checkboxes */
/* Toggle */
.yt-uix-checkbox-on-off .toggle {
background: var(--input-checkbox-toggle-bg-color);
}
.yt-uix-checkbox-on-off label {
background-color: var(--input-checkbox-inactive-bg-color);
}
.yt-uix-checkbox-on-off input[type="checkbox"]:checked + label {
background-color: var(--input-checkbox-active-bg-color);
}
/*================================================================
Masthead notifications
================================================================*/
/* Privacy reminder */
/* BG / border */
.yt-consent-banner {
background: var(--card-light-bg-color);
border: none;
}
.yt-alert-default.yt-alert-success,
.yt-alert-actionable.yt-alert-success,
.yt-alert-naked.yt-alert-success .yt-alert-icon,
.yt-alert-small.yt-alert-success {
background: var(--card-bg-color);
}
/* Text */
.yt-consent-banner .yt-consent-content {
color: var(--main-text-color);
}
/* Close button */
.yt-consent-banner .consent-close {
color: var(--link-color);
}
.yt-consent-banner .consent-close:hover {
color: var(--link-hover-color);
}
/*================================================================
Alert notifications
================================================================*/
.yt-alert-default.yt-alert-info,
.yt-alert-actionable.yt-alert-info,
.yt-alert-naked.yt-alert-info .yt-alert-icon,
.yt-alert-small.yt-alert-info {
background: var(--menu-light-bg-color);
}
.yt-alert-panel {
background: var(--menu-bg-color);
}
/*================================================================
Warning and error boxes
================================================================*/
/* Warning box */
.yt-alert-actionable.yt-alert-warn,
.yt-alert-default.yt-alert-warn,
.yt-alert-naked.yt-alert-warn .yt-alert-icon,
.yt-alert-small.yt-alert-warn,
.CLV4EJC-F-e.CLV4EJC-F-m,
.CLV4EJC-F-k.CLV4EJC-F-m {
background-color: #ffbd59;
margin-bottom: 1em;
/* Give some damn breathing room */
}
/*================================================================
Modal
================================================================*/
/* Fade out background */
.yt-dialog-bg,
.yt-uix-overlay-bg,
.picker.modal-dialog-bg {
background-color: black;
}
.CLV4EJC-s-n {
background-color: black;
opacity: 0.6;
}
/* Main dialog color */
.yt-dialog-fg,
.yt-uix-overlay-fg,
.no-focus-outline .yt-dialog-fg:focus,
.CLV4EJC-s-f,
.CLV4EJC-s-g {
background: var(--menu-bg-color);
border-color: var(--menu-border-color);
}
.yt-uix-overlay-actions {
background: var(--card-bg-color);
}
/* Dialog header */
.CLV4EJC-s-f .CLV4EJC-s-p {
background-color: var(--menu-light-bg-color);
color: var(--link-color);
}
/* Text colors */
.yt-dialog-fg-content .yt-dialog-title,
.yt-uix-overlay-fg-content .yt-dialog-title,
.CLV4EJC-f-c:hover .CLV4EJC-f-f,
.CLV4EJC-f-c:focus .CLV4EJC-f-f,
.CLV4EJC-f-h .CLV4EJC-f-f,
.CLV4EJC-h-q li a {
color: var(--link-color);
}
.yt-dialog-fg-content,
.yt-uix-overlay-fg-content,
input.CLV4EJC-l-f.CLV4EJC-h-o {
color: var(--main-text-color);
}
.overlay-confirmation-preferences-dialog .overlay-confirmation-delivery-method {
color: var(--main-faded-text-color);
}
/* Separators */
.CLV4EJC-s-f .CLV4EJC-s-p,
.CLV4EJC-f-a {
border-color: var(--sep-line-color);
}
/* Input boxes */
.CLV4EJC-h-i {
background-color: var(--input-box-bg-color);
border-color: var(--menu-border-color);
}
/* Dropdown elements */
.CLV4EJC-r-a {
background: var(--menu-light-bg-color);
border-color: var(--menu-light-border-color);
}
/* Item hover */
.CLV4EJC-r-e,
.CLV4EJC-r-e strong {
background-color: var(--menu-light-hover-bg-color);
}
/* Send message */
/* To username box */
.yt-channel-msg-dialog .user-box {
border-color: var(--menu-border-color);
background-color: var(--card-bg-color);
}
/* Text input */
.yt-channel-msg-dialog .compose-message {
border-color: var(--menu-border-color);
background-color: var(--input-box-bg-color);
color: var(--main-text-color);
}
/* Dialog footer */
.yt-channel-msg-dialog .yt-dialog-footer {
background-color: var(--card-bg-color);
}
/* Report dialog */
/* Separator */
.flag-channel-abuse-form hr {
border-color: var(--sep-line-color);
}
/* New Playlist dialog */
/* Header */
.yt-uix-form-legend,
.yt-uix-form-label {
color: var(--link-color);
}
/* Footer bg */
.create-playlist-widget-form .create-playlist-bottom-section,
.CLV4EJC-s-f .CLV4EJC-s-i {
background-color: var(--card-bg-color);
}
/* Playlist settings modal */
/* Separator */
#playlist-settings-editor .yt-uix-tabs {
border-color: var(--sep-line-color);
}
/* Footer bg */
#playlist-settings-editor .yt-dialog-footer {
background-color: var(--card-bg-color);
border-color: var(--sep-line-color);
}
/* Attention highlight bg */
#collaboration-settings .collaboration-settings-invite-link.disabled::before {
opacity: 0.05;
pointer-events: none;
}
/* Create invite "Get link" button */
#collaboration-settings .yt-uix-button.create-invite-link-button {
background: var(--menu-light-bg-color);
border-color: var(--menu-light-border-color);
}
/* Share dialog */
/* Separator */
.yt-card .yt-uix-tabs {
border-color: var(--sep-line-color);
}
/* Normal text */
.share-panel,
.pl-header-sharepanel-content .share-panel-url {
color: var(--main-text-color);
}
/* Share email preview */
.share-email label {
color: var(--main-faded-text-color);
}
.share-email-preview-container {
background: var(--card-bg-color);
}
/* Sub notification settings buttons */
.subscription-preferences-overlay-content .yt-uix-button-size-default {
width: auto;
padding: 0 1.6em;
}
/*================================================================
Masthead
================================================================*/
#masthead-container,
#yt-masthead-container {
background: var(--card-dark-bg-color);
}
/* Search box */
#masthead-search-term,
#masthead-search-terms {
background-color: var(--input-box-bg-color);
box-shadow: none;
border: 1px solid var(--menu-border-color);
}
#masthead-search-term input,
#masthead-search-term input:focus,
#masthead-search-terms input {
color: var(--main-text-color);
}
#masthead-search-term:hover,
#masthead-search-terms:hover {
border-color: var(--menu-light-border-color);
}
/* Search results dropdown */
.gssb_m {
color: var(--main-text-color);
background: var(--card-bg-color);
}
/* Search results border */
.gssb_e {
border: none;
}
/* Search results hover bg */
.gssb_i,
.gssb_i td {
background: var(--card-light-bg-color);
}
.yt-masthead-account-picker.yt-uix-clickcard-card-content {
color: var(--main-text-color);
}
.yt-masthead-picker-account-subtitle {
color: var(--main-faded-text-color);
}
.yt-masthead-picker-footer {
background: var(--card-bg-color);
}
/* Lighter buttons for menu */
.yt-uix-button-default.yt-masthead-picker-button-primary,
.yt-uix-button-default.yt-masthead-picker-settings-button {
background: var(--menu-light-bg-color);
}
.yt-uix-button-default:hover.yt-masthead-picker-button-primary,
.yt-uix-button-default:hover.yt-masthead-picker-settings-button {
background: var(--menu-light-hover-bg-color);
}
/* Settings gear icon opacity fix */
.yt-uix-button-default.yt-masthead-picker-settings-button .yt-uix-button-icon {
opacity: 0.7;
}
.yt-uix-button-default:hover.yt-masthead-picker-settings-button .yt-uix-button-icon {
opacity: 0.9;
}
/* Masthead appbar */
a.yt-uix-button-epic-nav-item.selected,
a.yt-uix-button-epic-nav-item.yt-uix-button-toggled,
button.yt-uix-button-epic-nav-item.selected,
button.yt-uix-button-epic-nav-item.yt-uix-button-toggled,
.epic-nav-item.selected,
.epic-nav-item.yt-uix-button-toggled,
.epic-nav-item-heading {
color: var(--main-text-color);
}
#appbar-nav .yt-uix-button.yt-uix-button-epic-nav-item {
color: var(--main-faded-text-color);
}
/* Notifications */
#yt-masthead-notifications-title {
color: var(--main-text-color);
}
#yt-masthead-notifications-content .item-section>li>.yt-lockup-tile,
#yt-masthead-notifications-content .yt-ui-ellipsis {
background: var(--card-bg-color);
color: var(--main-text-color);
}
#yt-masthead-notifications-content .item-section>li>.yt-lockup-tile:hover,
#yt-masthead-notifications-content .yt-lockup-tile:hover .yt-ui-ellipsis {
background: var(--card-hover-bg-color);
}
/*================================================================
Buttons + popup menus
================================================================*/
/* Elements in listed order:
- Base popup menus
*/
.yt-ui-menu-content {
background: var(--menu-bg-color);
color: var(--main-text-color);
border-color: var(--menu-border-color);
}
/* Main button classes
Elements in listed order:
- Default buttons
- Comments "Show more" button
- Subscribed button
*/
.yt-uix-button-default,
.yt-uix-button-text,
.comment-section-renderer-paginator,
.yt-uix-button-subscribed-branded,
.yt-uix-button-subscribed-branded[disabled],
.yt-uix-button-subscribed-unbranded,
.yt-uix-button-subscribed-unbranded[disabled],
.yt-uix-button-default,
.yt-uix-button-default[disabled],
.yt-uix-button-default[disabled]:hover,
.yt-uix-button-default[disabled]:active,
.yt-uix-button-default[disabled]:focus,
.yt-uix-button-subscribe-unbranded,
.yt-uix-button-subscribe-unbranded[disabled],
.yt-uix-button-subscribe-unbranded[disabled]:hover,
.yt-uix-button-subscribe-unbranded[disabled]:active,
.yt-uix-button-subscribe-unbranded[disabled]:focus,
.business-email-container .business-email-button,
.yt-form-input-select-container,
.yt-uix-button-dark,
.yt-uix-button-dark[disabled],
.yt-uix-button-dark[disabled]:hover,
.yt-uix-button-dark[disabled]:active,
.yt-uix-button-dark[disabled]:focus,
#creator-subheader #creator-subheader-item-count,
.CLV4EJC-g-q,
.yt-uix-button-panel:hover .creator-bar-item .yt-uix-button-text-dark {
background: var(--menu-bg-color);
color: var(--main-text-color);
border-color: var(--menu-border-color);
opacity: 1;
}
/* Buttons that fade out when not in use */
.yt-uix-button-c4-view-action {
background: var(--menu-light-bg-color);
color: var(--main-text-color);
border-color: var(--menu-light-border-color);
}
/* Active buttons */
.yt-uix-button-default:active,
.yt-uix-button-default.yt-uix-button-toggled,
.yt-uix-button-default.yt-uix-button-active,
.yt-uix-button-default.yt-uix-button-active:focus,
.yt-uix-button-text:active,
.yt-uix-button-dark:hover,
.CLV4EJC-g-q:hover {
background-color: var(--menu-hover-bg-color);
border-color: var(--menu-border-color);
box-shadow: none;
}
/* Lighter buttons */
.CLV4EJC-g-f,
.CLV4EJC-g-v:active,
.CLV4EJC-g-f:active,
.CLV4EJC-g-w:active,
.CLV4EJC-g-f.CLV4EJC-g-y {
background-image: none;
background-color: var(--menu-light-bg-color);
border-color: var(--menu-light-border-color);
box-shadow: none;
}
.CLV4EJC-g-f:hover {
background-image: none;
background-color: var(--menu-light-hover-bg-color);
border-color: var(--menu-light-border-color);
}
/* Hover states
Elements in listed order:
- Default buttons
- Comments "Show more" button
- Subscribed button
*/
.yt-uix-button-default:hover,
.yt-uix-button-text:hover,
#comment-section-renderer .comment-section-renderer-paginator:hover,
.yt-uix-button-subscribed-branded[disabled]:hover,
.yt-uix-button-subscribed-branded[disabled]:active,
.yt-uix-button-subscribed-branded[disabled]:focus,
.yt-uix-button-subscribed-unbranded[disabled]:hover,
.yt-uix-button-subscribed-unbranded[disabled]:active,
.yt-uix-button-subscribed-unbranded[disabled]:focus,
.yt-uix-button-default.yt-uix-button-toggled:hover,
.yt-uix-button-subscribe-unbranded:hover,
.yt-uix-button-panel .creator-bar-item .yt-uix-button-text-dark:hover {
background: var(--menu-light-hover-bg-color);
color: var(--main-text-color);
border-color: var(--menu-light-border-color);
box-shadow: none;
}
/* Disabled / de-emphasized */
.yt-uix-button.yt-uix-button-subscribed-unbranded,
.CLV4EJC-g-f[disabled],
.CLV4EJC-g-f[disabled]:hover,
.CLV4EJC-g-f[disabled]:active {
color: var(--main-faded-text-color);
}
.CLV4EJC-g-f[disabled],
.CLV4EJC-g-f[disabled]:hover,
.CLV4EJC-g-f[disabled]:active {
background: var(--menu-bg-color);
border-color: var(--menu-border-color);
}
/* Popup menu items */
.yt-uix-button-menu {
background: var(--menu-bg-color);
border-color: var(--menu-border-color);
}
.yt-ui-menu-item,
.yt-uix-button-menu .yt-uix-button-menu-item {
color: var(--main-text-color);
}
.yt-uix-button-menu .yt-uix-button-menu-item.selected,
.yt-uix-button-menu .yt-uix-button-menu-item-highlight .yt-uix-button-menu-item,
.yt-uix-button-menu .yt-uix-button-menu-item:hover {
color: var(--link-hover-color);
background-color: var(--menu-hover-bg-color)
}
.yt-ui-menu-item:hover {
background: rgba(255, 255, 255, 0.02);
}
.yt-ui-menu-item:focus {
background: rgba(255, 255, 255, 0.05);
}
/* Popup tips */
.yt-uix-clickcard-card-border,
.yt-uix-hovercard-card-border {
background: var(--menu-bg-color);
border-color: var(--menu-border-color);
}
/* Lighter */
.CLV4EJC-E-g {
background: var(--menu-light-bg-color);
border-color: var(--menu-light-border-color);
}
/* Lighter arrow */
/* Right */
.CLV4EJC-E-l .CLV4EJC-E-e {
border-right-color: var(--menu-light-bg-color);
}
.CLV4EJC-E-l .CLV4EJC-E-h {
border-right-color: #66666f;
}
/* Left */
.CLV4EJC-E-e {
border-left-color: var(--menu-light-bg-color);
}
.CLV4EJC-E-h {
border-left-color: var(--menu-light-border-color);
}
/* Popup tips text */
.yt-uix-clickcard-card-body,
.yt-uix-hovercard-card-body,
.CLV4EJC-p-c {
color: var(--main-text-color);
}
/* Arrow */
/* Main bg color */
/* Tips popout */
.yt-uix-clickcard-card-flip .yt-uix-card-body-arrow-horizontal,
.yt-uix-hovercard-card-flip .yt-uix-card-body-arrow-horizontal {
border-right-color: var(--menu-bg-color);
}
/* Account popdown */
.yt-uix-clickcard-card-reverse .yt-uix-card-body-arrow-vertical,
.yt-uix-hovercard-card-reverse .yt-uix-card-body-arrow-vertical {
border-bottom-color: var(--menu-bg-color);
}
/* Dropdown button down arrow */
.yt-uix-button-arrow {
border-top-color: var(--main-text-color);
}
/* Border */
/* Tips popout */
.yt-uix-clickcard-card-flip .yt-uix-card-border-arrow-horizontal,
.yt-uix-hovercard-card-flip .yt-uix-card-border-arrow-horizontal {
border-right-color: var(--menu-border-color);
}
/* Account popdown */
.yt-uix-clickcard-card-reverse .yt-uix-card-border-arrow-vertical,
.yt-uix-hovercard-card-reverse .yt-uix-card-border-arrow-vertical {
border-bottom-color: var(--menu-border-color);
}
/*================================================================
Guide sidebar
================================================================*/
#appbar-guide-menu,
.guide-flyout {
background: var(--menu-bg-color);
}
/* Remove default button class styles */
#appbar-guide-button {
background: none;
border: none;
}
#appbar-guide-button .yt-uix-button-icon {
filter: invert(0.4)
}
#masthead-positioner:hover .yt-uix-button-icon-appbar-guide {
filter: brightness(2)
}
.guide-pinned .guide-pinning-enabled #appbar-guide-menu {
border-color: var(--menu-border-color);
}
/* Item */
/* Hover bg */
.guide-flyout-trigger.on-hover,
.guide-item:hover,
.guide-item:hover .yt-deemphasized-text,
.guide-collapsible-item .yt-uix-expander-head:hover {
background: var(--menu-hover-bg-color);
}
/* Text color */
li.guide-section h3 a {
color: var(--link-color);
}
.guide-item {
color: var(--main-text-color);
}
.guide-item .guide-count,
.guide-view-more,
.guide-item-subtitle {
color: var(--main-faded-text-color);
}
/* Icons */
.guide-item .yt-sprite {
filter: brightness(200%);
opacity: 0.65;
}
.guide-item:hover .yt-sprite,
.guide-item.guide-item-selected .yt-sprite {
opacity: 1;
}
.guide-section-separator {
border-color: var(--sep-line-color);
}
/*================================================================
Home page video feed
================================================================*/
/* Separator lines */
#browse-items-primary .item-section > li > .yt-lockup-tile,
.branded-page-v2-primary-col .branded-page-box,
.section-list li .item-section .branded-page-box,
.yt-lockup-playlist-item {
border-color: var(--sep-line-color);
}
/* Left / right arrows */
.compact-shelf .yt-uix-button-shelf-slider-pager {
background: var(--menu-bg-color);
}
/* arrow hover border */
.browse-list-item-container:hover .compact-shelf .yt-uix-button-shelf-slider-pager,
.compact-shelf:hover .yt-uix-button-shelf-slider-pager {
border-color: var(--menu-border-color);
}
/* arrow icon color */
.compact-shelf .yt-uix-shelfslider-next-arrow,
.rtl .compact-shelf .yt-uix-shelfslider-prev-arrow,
.compact-shelf .yt-uix-shelfslider-prev-arrow,
.rtl .compact-shelf .yt-uix-shelfslider-next-arrow {
filter: invert(100%);
}
/* watch later button icon */
.addto-watch-later-button::before,
.addto-watch-later-button-sign-in::before {
filter: invert(100%) brightness(70%);
}
/* Dim name links */
.lohp-video-metadata .yt-user-name {
opacity: 0.7;
}
/* Questions */
.question-shelf-heading h4 {
color: var(--main-text-color);
}
/* Video removed thumbnail */
.yt-lockup-notifications-container {
border-color: var(--sep-line-color);
}
.service-endpoint-replace-enclosing-action-notification {
color: var(--main-text-color);
}
/*================================================================
Search results
================================================================*/
/* Header bg and separator */
.search-header {
background-color: var(--menu-bg-color);
border-color: var(--sep-line-color);
}
/* Search filter */
.search-header .yt-uix-button-content,
.filter-col-title {
color: var(--main-text-color);
}
/* Filter de-emphasized unselected */
.filter {
opacity: 0.75;
}
.filter-selected {
opacity: 1;
}
/* Search results */
.search-header .num-results,
.search-header .num-results strong {
color: var(--main-faded-text-color);
}
/* Recommended for you border */
#browse-items-primary .item-section > li > .yt-lockup-tile,
.branded-page-v2-primary-col .branded-page-box,
.section-list li .item-section .branded-page-box {
border-color: var(--sep-line-color) !important;
background-color: var(--menu-bg-color);
}
/* Highlight current page in pagination buttons */
.search-pager button {
background-color: var(--menu-light-hover-bg-color) !important;
}
/* Song artist top tracks / albums card */
.watch-card a,
.watch-card:hover a,
.watch-card .yt-uix-tabs-tab,
.watch-card .yt-uix-tabs-tab:hover,
.watch-card .watch-card-more-tab:hover {
color: inherit;
}
.watch-card-list td {
border-color: var(--sep-line-color) !important;
}
/*================================================================
History page
================================================================*/
/* Separators */
.feed-header,
.comment-history-block-header {
border-color: var(--sep-line-color);
}
/* Search box */
#history-search .history-search-field {
border-color: var(--menu-border-color);
}
/* Comments */
.yt-lockup,
.comment-history-entry-renderer-content {
color: var(--main-text-color);
}
/*================================================================
Upload page
================================================================*/
#upload-button-text,
.upload-footer-header,
.upload-sidebar-header {
color: var(--main-text-color);
}
.upload-other-options-list .upload-option-text {
color: var(--main-faded-text-color);
}
/*================================================================
Channel page
================================================================*/
/* Channel stats top header */
.channel-header .secondary-header-contents {
background-color: var(--card-bg-color);
}
.secondary-header-contents .nav-text {
color: var(--main-text-color);
}
/* Header custom links */
/* Background */
.channel-header .about-secondary-links,
.channel-header .about-custom-links {
background-color: var(--menu-bg-color);
}
/* Text headers
- Channel username
- General headers
*/
.channel-header .branded-page-header-title .branded-page-header-title-link,
.branded-page-module-title {
color: var(--link-color);
}
/* "View as" input */
.primary-header-contents .view-as-menu .view-as-menu-trigger {
color: var(--main-text-color);
}
.feed-item-container.legacy-style .feed-item-main {
border-color: var(--sep-line-color);
}
/* Icons
- Settings gear
- Search
- Misc other button icons
- Channel stats header icons
- Play all button
*/
.yt-uix-button [class*="material"],
#channel-search .show-search .search-icon,
.c4-button-opacity::before,
.secondary-header-action .header-action-icon,
.yt-uix-button-default::before,
.yt-uix-button-default .yt-uix-button-icon {
filter: invert(60%) brightness(150%);
}
/* Main channel nav links */
a.yt-uix-button.yt-uix-button-epic-nav-item,
button.yt-uix-button-epic-nav-item,
.epic-nav-item {
color: var(--main-faded-text-color);
}
/* Spotlight border highlight */
#c4-spotlight-editor .spotlight-editor-tab {
border-color: var(--card-hover-bg-color);
}
/* Video details */
.lohp-video-metadata,
.lohp-video-metadata .view-count {
color: var(--main-faded-text-color);
}
/* Featured video */
/* Stats */
.video-player-view-component .view-count .count,
.video-player-view-component .view-count .content-item-time-created {
color: var(--main-faded-text-color);
}
/* Featured video description */
/* Text */
.video-player-view-component {
color: var(--main-text-color);
}
/* BG */
.yt-uix-expander-ellipsis {
background-color: transparent;
}
/* Playlist description */
.shelf-description,
.shelf-annotation {
color: var(--main-faded-text-color);
}
/* View as top header */
#view-as-notification {
background-color: var(--card-bg-color);
}
/* Separators */
#c4-header-bg-container,
.channel-header .secondary-header-contents,
.branded-page-v2-primary-col .yt-uix-inlineedit-view-container .branded-page-box,
.branded-page-v2-primary-col .branded-page-box.video-player-view-component:last-child,
.branded-page-v2-primary-col .branded-page-box.c4-featured-content:last-child,
.branded-page-v2-primary-col .branded-page-box.c4-featured-content-editor:last-child,
.branded-page-v2-primary-col .branded-page-box.welcome:last-child,
.branded-page-v2-subnav-container {
border-color: var(--sep-line-color);
}
/* Card hover background */
#other-channels-sidebar:hover,
.related-channels-editor:hover {
background-color: var(--card-light-bg-color);
}
/* Related channels disable button text */
.yt-uix-button-c4-view-action.yt-uix-button-destructive {
color: var(--link-hover-color);
}
/* About page */
/* Channel stats */
.about-stats .about-stat {
color: var(--main-faded-text-color);
}
.about-metadata-container {
color: var(--main-text-color);
}
/* About edit */
/* Separators */
.about-metadata-label-border-top {
border-color: var(--sep-line-color);
}
/* Edit hover */
.about-description-editor .c4-module-is-editable:hover,
.about-business-email-editor .c4-module-is-editable:hover,
.about-metadata-editor .c4-module-is-editable:hover {
background-color: var(--card-dark-bg-color);
}
/* Input box font color fix */
.c4-module-editor-form .yt-uix-form-input-text,
.c4-module-editor-form .yt-uix-form-input-select,
.c4-module-editor-form .yt-uix-form-input-textarea {
color: var(--main-text-color);
}
/* Search */
/* Text color */
.yt-uix-form-input-select,
.yt-uix-form-input-text,
.yt-uix-form-input-textarea {
color: var(--main-text-color);
}
/* Own playlist edit */
/* Header bg */
#pl-header {
background: var(--menu-bg-color);
}
/* List title */
#pl-header .pl-header-title {
color: var(--link-color);
}
/* List title hover */
.pl-header-inlineedit .c4-module-is-editable:hover {
background-color: var(--input-box-bg-color);
}
/* List title hover edit button */
.pl-header-inlineedit .yt-uix-button-c4-view-action {
border-color: var(--menu-light-border-color);
}
/* List title edit mode remove useless white bg crap */
.c4-module-editor-form {
background-color: transparent;
}
/* Edit mode border */
.c4-module-editor-form .yt-uix-form-input-text,
.c4-module-editor-form .yt-uix-form-input-select,
.c4-module-editor-form .yt-uix-form-input-textarea {
border-color: var(--menu-light-border-color);
}
/* Permissions icon -> Owner username vertical separator */
#pl-header .privacy-icon-present .pl-header-details::before {
border-color: var(--sep-line-color);
}
/* Add description link color */
#pl-header .pl-header-add-description-button {
color: var(--link-color);
}
#pl-header .pl-header-add-description-button:hover {
color: var(--link-hover-color);
}
/* Playlist notifications, auto sorted etc. */
.pl-message-panel .yt-alert-default {
border-color: var(--sep-line-color);
background-color: var(--menu-light-bg-color);
}
.pl-message-panel .yt-alert-default .yt-alert-content {
color: var(--main-text-color);
}
/* Video list item */
/* Separator */
.pl-video {
border-color: var(--sep-line-color);
}
/* Hover bg change */
.pl-video:hover {
background-color: var(--menu-hover-bg-color);
}
/* Video list item dragged background */
.yt-uix-dragdrop-cursor-follower {
border-color: var(--menu-border-color);
background-color: var(--menu-bg-color);
}
/* Video list item move handle */
.pl-video-list-editable .pl-video:hover .pl-video-handle,
.yt-uix-dragdrop-cursor-follower .pl-video-handle {
background: var(--menu-light-bg-color);
border: none;
padding: 0 0.2em;
}
/* Title */
.pl-video-title-link {
color: var(--link-color);
}
/* Hovered title link */
.pl-video:hover .pl-video-title-link,
.pl-video:hover .pl-video-owner a {
color: var(--link-hover-color);
}
/*================================================================
Video page autoplay / recommended
================================================================*/
/* "Up next" text */
#watch7-sidebar .watch-sidebar-head {
color: inherit;
}
/* Autoplay (i) icon */
.autoplay-bar .autoplay-info-icon {
filter: invert(100%);
}
/* List item title */
.video-list .video-list-item .title,
.video-list-item a {
color: var(--main-text-color);
}
#watch7-sidebar .video-list-item a:hover .title,
#watch7-sidebar .video-list-item a:hover .title .yt-deemphasized-text {
color: var(--main-text-color);
}
/* List item details text */
.video-list .video-list-item .description,
.video-list .video-list-item .stat {
color: var(--main-faded-text-color);
}
/* Separator line */
#watch7-sidebar .watch-sidebar-separation-line {
border-color: var(--sep-line-color);
}
/* NEW tag */
.yt-badge {
color: var(--main-text-color);
border-color: var(--menu-border-color);
}
/* Live Now tag */
.yt-badge.yt-badge-live,
.tpd {
padding: 0.25em 0.5em;
background-color: #cc181e;
color: white;
border-color: #900;
}
/*================================================================
Creator Bar
================================================================*/
#watch7-creator-bar {
background: var(--card-light-bg-color);
border-color: var(--card-border-color);
}
.creator-bar-item [class*="yt-uix-button-icon"] {
filter: invert(50%) brightness(150%);
}
/*================================================================
Video player
================================================================*/
/* Remove progress bar focus outline */
.ytp-probably-keyboard-focus .ytp-progress-bar:focus,
.ytp-keyboard-focus .ytp-progress-bar:focus {
box-shadow: none;
}
/*================================================================
Video page details
================================================================*/
#watch8-action-buttons {
border-top-color: var(--sep-line-color);
}
/* Editable fields */
.watch-editable:hover {
background: var(--bg-color);
}
/* Subscribe options button */
.yt-uix-button-default::before,
.yt-uix-button-default .yt-uix-button-icon {
opacity: 1;
}
.yt-uix-button-default:hover .yt-uix-button-icon,
.yt-uix-button-default:hover::before {
opacity: 0.4;
filter: invert(100%);
}
/* Subscriber count text */
.yt-subscription-button-subscriber-count-branded-horizontal,
.yt-subscription-button-subscriber-count-unbranded-horizontal {
color: var(--main-text-color);
background: transparent;
border: none;
border-left: 1px solid var(--menu-border-color);
}
/* Add to menu */
/* Header */
#yt-uix-videoactionmenu-menu h3 {
color: var(--link-color);
}
/* Input hover border */
.yt-uix-form-input-select:hover,
.yt-uix-form-input-text:hover,
.yt-uix-form-input-textarea:hover,
.yt-commentbox-text:hover {
border-color: var(--menu-light-border-color);
}
/* List item */
/* Text */
.add-to-widget .addto-playlist-item {
color: var(--main-text-color);
}
/* Hover state */
.add-to-widget .addto-playlist-item:hover,
.add-to-widget .create-playlist-item:hover,
.add-to-widget .addto-playlist-item.yt-uix-kbd-nav-highlight {
background-color: var(--menu-hover-bg-color);
}
/* Checkboxes */
.add-to-widget .playlist-status,
.add-to-widget .contains-all-selected-videos.to-be-removed .playlist-status,
.add-to-widget .contains-some-selected-videos.to-be-removed .playlist-status {
opacity: 1;
filter: invert(0.6);
}
/* Separator */
.add-to-widget .playlists {
border-color: var(--sep-line-color);
}
/* Create button */
.add-to-widget .create-playlist-item {
color: var(--main-text-color);
}
/* Views / Likes / Dislikes */
/* Like button / text colour */
.like-button-renderer-like-button.yt-uix-button:active:before,
.like-button-renderer-like-button.yt-uix-button.yt-uix-button-toggled:before,
.like-button-renderer-like-button:active .yt-uix-button-content,
.like-button-renderer-like-button.yt-uix-button-toggled .yt-uix-button-content {
filter: hue-rotate(180deg);
}
/*================================================================
Video page description
================================================================*/
#watch-description {
color: var(--main-text-color);
}
.yt-card .yt-uix-button-expander {
border-top-color: var(--sep-line-color);
color: var(--main-faded-text-color);
}
/*================================================================
Video page playlist
================================================================*/
/* Title and options section */
.watch-playlist {
color: var(--main-text-color);
background: var(--card-bg-color);
}
/* List bg */
#player-playlist .playlist-videos-list {
background-color: var(--card-bg-color);
color: var(--main-text-color);
/* Playlist number */
}
/* Active item background */
#player-playlist:not(.watch-queue-nav) .playlist-videos-list > li.currently-playing {
background-color: var(--menu-hover-bg-color);
}
/* Hover item background */
#player-playlist .playlist-videos-list > li:hover {
background-color: var(--menu-hover-bg-color);
}
/* Item name */
#player-playlist .playlist-video h4 {
color: var(--main-text-color);
background-color: transparent;
}
/* Item uploader */
#player-playlist .video-uploader-byline {
color: var(--main-faded-text-color);
}
/*================================================================
Comments
================================================================*/
/* Comment box */
/* Remove dumb looking speech bubble arrow */
.comment-simplebox-arrow,
.sharing-balloon::before,
.sharing-balloon::after {
display: none;
}
.comment-simplebox-renderer-collapsed-content,
.sharing-balloon {
border: 1px solid var(--menu-border-color);
background-color: var(--input-box-bg-color);
color: var(--main-text-color);
}
.comment-simplebox {
background-color: transparent;
}
.comment-simplebox-frame {
border-color: var(--menu-border-color);
background-color: var(--input-box-bg-color);
}
.comment-simplebox-text,
.comment-simplebox-prompt {
color: var(--main-text-color);
background-color: transparent;
}
/* Separator between your comment and all comments */
.comment-simplebox-renderer {
border-color: var(--sep-line-color);
}
/* Highlighted comment tag */
.comment-renderer-header .comment-renderer-linked-comment {
background: var(--sep-line-color);
border-color: var(--sep-line-color);
color: var(--main-text-color);
padding: 0.2em 1em;
}
/* Upvote / downvote icons */
.sprite-like[aria-checked="true"]::before {
filter: hue-rotate(0deg);
}
.sprite-like[aria-checked="true"]:hover::before {
filter: hue-rotate(0deg) brightness(1.35);
}
.sprite-dislike[aria-checked="true"]::before {
filter: hue-rotate(140deg);
}
.sprite-dislike[aria-checked="true"]:hover::before {
filter: hue-rotate(140deg) brightness(1.35);
}
/*================================================================
Footer
================================================================*/
/* Button icon color fix */
#footer .yt-uix-button-icon {
filter: invert(100%);
opacity: 0.5;
}
/* Menus */
#yt-picker-country-footer,
#yt-picker-language-footer,
#yt-picker-safetymode-footer {
background: var(--menu-bg-color);
}
/* Close button */
#footer .yt-close-img {
filter: invert(100%);
opacity: 1;
}
/* Menu text colors */
.yt-default h1,
.yt-default h2,
.yt-default h3,
.yt-default h4,
.yt-default h5,
.yt-default h6,
h1.yt,
h2.yt,
h3.yt,
h4.yt,
h5.yt,
h6.yt,
.yt-picker-region-name {
color: var(--main-text-color);
}
.yt-default .yt-notes,
p.yt-notes {
color: var(--main-faded-text-color);
}
.yt-picker-content strong,
.yt-picker-content strong .yt-picker-region-name {
color: var(--link-hover-color);
}
#footer-links-primary a {
color: var(--link-color);
}
#footer-links-primary a:hover {
color: var(--link-hover-color);
}
#footer-links-secondary a,
#footer-links-secondary .copyright {
color: var(--main-faded-text-color);
}
#footer-links-secondary a:hover {
color: var(--link-color);
}
/* Separators */
.yt-picker-header,
.yt-picker-hr,
#footer-main,
#safety-form p.safety-submit {
border-color: var(--sep-line-color);
}
/* Restricted mode form */
#safety-form {
color: var(--main-text-color);
}
/*================================================================
Settings / Account management
================================================================*/
/* Account Settings */
/* Left menu */
#creator-sidebar h3,
#creator-sidebar h3 a {
color: var(--main-text-color);
}
/* Menu items */
#creator-sidebar .creator-sidebar-section a {
color: var(--main-text-color);
}
#creator-sidebar .creator-sidebar-section a:hover {
background: var(--card-dark-bg-color);
color: var(--link-hover-color);
}
/* Account settings main page container */
.account-container {
background: var(--card-bg-color);
}
.account-header h1,
h3.account-section-header {
color: var(--link-color);
}
.account-content {
color: var(--main-text-color);
}
.setting-reminder {
color: var(--main-faded-text-color);
}
.yt-horizontal-rule {
border-color: var(--sep-line-color);
}
.yt-uix-form-input-select,
.yt-uix-form-input-text,
.yt-uix-form-input-textarea,
.yt-commentbox-text {
border-color: var(--menu-border-color);
}
.yt-uix-form-input-select-content,
.yt-uix-form-input-select-element,
.yt-commentbox-text {
background-color: var(--input-box-bg-color);
color: var(--main-text-color);
text-shadow: none;
}
.social-connector {
background: var(--menu-bg-color);
border-color: var(--menu-border-color);
}
/* Promo container */
.howto-promo-container {
background-image: none;
}
.howto-circle {
background: var(--menu-bg-color);
border: 1px solid var(--menu-border-color);
}
.remote-icon {
filter: invert(92%) brightness(200%);
}
.yt-uix-form-input-select,
.yt-uix-form-input-text,
.yt-uix-form-input-textarea {
background: var(--input-box-bg-color);
border-color: var(--menu-border-color);
}
/*================================================================
Creator Studio
================================================================*/
/* Header text */
#dashboard-header h2 a,
#creator-sidebar .creator-sidebar-branding h1,
.dashboard-widget-header h2 a {
color: var(--link-color);
}
#dashboard-header h2,
#dashboard-header h3,
#dashboard-header .dashboard-stat-value,
#dashboard-header .dashboard-stat-name,
#dashboard-header .add-widget-button-label {
text-shadow: none;
}
/* Dashboard as active menu item */
#creator-sidebar > .creator-sidebar-section.selected > h3 a,
#creator-sidebar > #creator-sidebar-section-id-dashboard.selected > h3 a {
background-color: var(--menu-hover-bg-color);
}
/* Loading overlay */
.CLV4EJC-c-b {
background: var(--menu-light-hover-bg-color);
}
.CLV4EJC-c-e {
box-shadow: 0 2px 8px #111;
}
/* Widget cards */
/* Text */
.dashboard-widget-header:hover h2 a {
color: var(--link-color);
}
/* Widget bg */
.dashboard-widget.notification,
.dashboard-widget .dashboard-widget-content,
.dashboard-widget .dashboard-widget-config {
background-color: var(--card-bg-color);
color: var(--main-text-color);
}
/* Widget hover */
.dashboard-widget-header:hover,
.dashboard-widget .dashboard-widget-config .dashboard-widget-header,
.dashboard-widget.yt-uix-dragdrop-dragged-item .dashboard-widget-header,
.dashboard-widget.yt-uix-dragdrop-cursor-follower .dashboard-widget-header {
background-color: var(--menu-bg-color);
border-color: var(--menu-border-color);
}
.dashboard-widget-header:hover .dashboard-widget-overlay-icon,
.dashboard-widget.yt-uix-dragdrop-dragged-item .dashboard-widget-header .dashboard-widget-header-controls,
.dashboard-widget.yt-uix-dragdrop-cursor-follower .dashboard-widget-header .dashboard-widget-header-controls,
.dashboard-widget:hover .dashboard-widget-display-title,
.dashboard-widget.yt-uix-dragdrop-dragged-item .dashboard-widget-display-title,
.dashboard-widget.yt-uix-dragdrop-cursor-follower .dashboard-widget-display-title {
border-color: var(--menu-border-color);
}
.yt-uix-button-icon-dashboard-widget-remove,
.yt-uix-button-icon-dashboard-widget-config {
filter: invert(100%) brightness(200%);
}
/* Dashboard */
/* Header */
/* Channel name / username hover */
#dashboard-header h2 a:hover {
color: var(--link-hover-color);
}
#dashboard-header .dashboard-stat-value {
color: var(--main-text-color);
}
/* Text */
#dashboard-header .dashboard-stat-name,
#dashboard-header .add-widget-button-label {
color: var(--main-faded-text-color);
}
/* Add widget */
.add-widget-button {
background: no-repeat url(http://s.ytimg.com/yts/imgbin/www-videomanager-2x-vflI4gnrL.png) -26px -631px;
background-size: 70px 705px;
filter: brightness(150%);
}
.add-widget-button:hover,
.add-widget-button:focus {
background: no-repeat url(http://s.ytimg.com/yts/imgbin/www-videomanager-2x-vflI4gnrL.png) 0 -665px;
background-size: 70px 705px;
filter: invert(0.7);
}
/* Popup menu */
/* Header text */
.add-widget-menu-content h3 {
color: var(--link-color);
}
/* Text */
.add-widget-menu-item,
.add-widget-menu-item.added:hover,
.add-widget-menu-content.widget-limit .add-widget-menu-item:hover {
color: var(--main-text-color);
}
/* Separators */
.add-widget-menu-content li,
#dashboard-header-stats li {
border-color: var(--sep-line-color);
}
/* Hover menu item */
.add-widget-menu-item:hover .add-widget-menu-item-contents {
background-color: var(--menu-hover-bg-color);
}
/* Menu */
/* Icons */
#creator-sidebar .studio-icon {
filter: invert(1);
}
#creator-sidebar .studio-icon.selected,
#creator-sidebar a:hover .studio-icon.creator-sidebar-dashboard.selected {
filter: none;
}
/* Tips cards */
.dashboard-widget-todos .todo-item {
border: 1px solid transparent;
}
.dashboard-widget-todos .todo-item:hover {
background-color: var(--card-hover-bg-color);
}
.dashboard-widget-todos .todo-description {
border-color: var(--card-border-color);
}
/* View all button */
.dashboard-widget-footer .dashboard-widget-view-all-link {
color: var(--link-color);
}
.dashboard-widget-footer .dashboard-widget-view-all-link:hover {
background-color: var(--card-hover-bg-color);
}
/* Comments card */
.dashboard-widget-comments .comment-comment {
color: var(--main-text-color);
}
/* Analytics card */
.analytics-sparkline-card:hover {
background: var(--card-hover-bg-color);
}
.analytics-sparkline-card .infos .title {
color: var(--main-text-color)
}
.analytics-sparkline-card .infos .total {
color: var(--main-faded-text-color);
}
/* Videos card */
.video-list-item a:hover {
background: var(--menu-hover-bg-color);
}
/* Notifications page */
/* Text */
.yt-creator-notifications .yt-creator-notifications-header h2 {
color: var(--link-color);
}
.yt-creator-notifications .yt-creator-tip-list tr {
color: var(--main-text-color);
}
/* Separators */
.yt-creator-notifications .yt-creator-tip-list tr {
border-color: var(--sep-line-color);
}
/* Inactive / completed */
.yt-creator-notifications .yt-creator-tip-list .inactive {
background: var(--card-dark-bg-color);
}
/* Video Manager */
/* Header text */
#creator-subheader h2 {
color: var(--link-color);
}
/* Search menu */
/* Search input box */
#vm-myvideos-search-box,
#vm-playlists-search-box,
#vm-tags-search-box {
border-color: var(--card-border-color);
}
#advanced-search-button-menu {
color: var(--main-text-color);
}
.advanced-search-footer {
background: var(--card-bg-color);
}
/* Filter bar and pagination */
#non-appbar-vm-video-actions-bar,
#non-appbar-vm-video-actions-bar .vm-video-actions-bar,
#vm-pagination {
background-color: var(--menu-bg-color);
}
.yt-ui-menu-content .yt-ui-menu-item.menu-subheading,
.yt-ui-menu-content .yt-ui-menu-item.menu-subheading-notice {
background: var(--card-bg-color);
border-color: var(--menu-border-color);
border-bottom: 1px solid var(--menu-border-color);
}
.yt-ui-menu-content .yt-ui-menu-item.menu-subheading,
.yt-ui-menu-content .yt-ui-menu-item.menu-subheading-notice {
color: var(--main-faded-text-color);
}
/* Video list */
.vm-list-view .vm-video-list .vm-video-item {
background: transparent;
}
.vm-list-view .vm-video-list .vm-video-item.selected {
background: var(--card-hover-bg-color);
}
.vm-list-view .vm-video-list .vm-video-item:hover {
background: var(--card-light-hover-bg-color);
}
.vm-list-view .vm-video-metrics a:hover {
background: transparent;
}
/* Playlist list */
#non-appbar-vm-video-actions-bar .vm-video-actions-inner #vm-view-filter-label,
.vm-copyright-filter-wrapper {
color: var(--main-text-color);
}
/* Separators */
#non-appbar-vm-video-actions-bar .vm-video-actions-inner,
.menu-item-top-divider {
border-color: var(--sep-line-color);
}
.vm-list-view .vm-video-item-content-horizontal-divider {
background: var(--sep-line-color);
}
/* Creator editor */
/* BG */
#creator-editor-container {
background: var(--card-bg-color);
}
.metadata-editor-container .video-settings-form,
.metadata-container,
#inline-editor-main {
background: transparent;
}
/* Nav bar */
.creator-editor-nav-tabs li > span,
.creator-editor-nav-tabs li a,
.tabs .tab-header.selected a,
.tabs .tab-header a:hover,
.tabs .tab-header:hover a,
.tabs .tab-header a:focus {
color: var(--main-text-color);
}
/* Separators */
.creator-editor-nav,
.creator-editor-header,
.copynotice-claim-details-table tr,
.metadata-editor-container .subnav,
.translation-editor-header .translation-editor-column-half,
.translation-editor-header .translation-editor-column-divider,
.creator-editor-content #inline-editor-header,
.tab-container,
#enhance-footer,
.blur-effect-entry,
#audio-ui-pagefold,
#audio-ui-wfe table,
#audio-ui-wfe .audio-ui-wfe-section,
#audio-ui-wfe-nonmuting .audio-ui-wfe-rowgroup,
#annotator-select-menu .yt-uix-button-menu-item td,
#annotator-add-div,
#annotator-select-div,
.annotation-details-container li.annotation-time-pair,
.annotation-link,
#add-captions-section,
#video-settings-section,
#bottom-notes-section,
.timed-event-line,
#event-line-editor {
border-color: var(--sep-line-color);
}
/* Info icon popup arrow */
.yt-uix-card-body-arrow-vertical {
border-top-color: var(--menu-bg-color);
}
/* Text */
.copynotice-top-section,
.copynotice-claim-info,
.video-info-text,
#player-and-info-pane #video-info dd,
.metadata-container h3,
.single-field,
.menu-tab:hover,
.menu-tab.selected,
.enhance-effect .slider-readout,
.enhance-effect .property-title,
.blur-effect-entry .blur-effect-title,
.yt-alert-naked .yt-alert-content {
color: var(--main-text-color);
}
.blur-effect-entry .blur-effect-explanation,
.blur-effect-footnote {
color: var(--main-faded-text-color);
}
/* Video tagging ui */
/* Container bg */
.video-settings-tag-chips-container {
background: var(--card-dark-bg-color);
border-color: var(--card-border-color);
}
/* Tag */
.yt-chip {
background-color: var(--menu-bg-color);
color: var(--main-text-color);
border-color: var(--menu-border-color);
box-shadow: none;
}
/* Input box */
.video-settings-add-tag,
.translation-editor-original-input,
.translation-editor-original-input:hover,
.translation-editor-original-input:focus {
background-color: var(--input-box-bg-color);
border: 1px solid var(--menu-border-color) !important;
color: var(--main-text-color);
}
/* Audio editor */
#featured-tracks-header {
background-color: var(--menu-bg-color);
}
#audio-ui {
color: var(--link-color);
}
#featured-tracks-header,
#audio-ui-featured-table {
border-color: var(--menu-border-color);
}
.audio-ui-featured-row {
background-color: var(--card-dark-bg-color);
border-color: var(--card-border-color);
box-shadow: none;
color: var(--main-text-color);
}
#audio-ui-search-input-field {
background-color: transparent;
border: none;
}
.searchfield input {
border-color: var(--menu-bg-color);
color: var(--main-text-color);
}
.searchfield input:focus {
border-color: var(--menu-light-bg-color);
}
/* Annotations editor */
#annotator-div {
background: var(--card-dark-bg-color);
border-color: transparent;
}
.time-field-nudge-container .time-field-nudge-up,
.time-field-nudge-container .time-field-nudge-down {
background-image: none;
}
#annotator-select-menu tr.yt-uix-button-menu-item {
background-color: var(--menu-bg-color);
}
#annotator-select-menu tr.yt-uix-button-menu-item:hover {
background-color: var(--menu-hover-bg-color);
}
/* Cards editor */
.annotator-clickcard-item .annotator-clickcard-title {
color: var(--main-text-color);
}
.annotator-clickcard-item .annotator-clickcard-subtitle {
color: var(--main-faded-text-color);
}
.yt-video-picker-scroll-container,
.annotator-overlay-content {
border-color: var(--menu-border-color);
}
/* Button color fix */
.annotator-clickcard-item .annotator-clickcard-right .yt-uix-clickcard-close {
filter: invert(0.05);
}
/* Cards editor timeline */
.multitrack-timeline {
background-color: var(--menu-bg-color);
}
.timeline-row {
background-color: var(--menu-light-bg-color);
}
.timeline-ruler .hline,
.timeline-ruler .stick,
.timeline-ruler .mtick {
background-color: var(--main-text-color);
}
.timeline-ruler .rulabel {
color: var(--main-text-color);
}
/* Subtitles editor */
.timedtext-content {
background-color: transparent;
}
#video-settings-section,
.auto-pause-checkbox-section,
#empty-editor-placeholder,
#empty-editor-placeholder h3 {
color: var(--main-text-color);
}
.waveform-player {
background-color: transparent;
}
.timed-event-line.timed-event-line-focused {
background-color: var(--menu-bg-color);
}
.timed-event-line:hover {
background-color: var(--menu-hover-bg-color);
}
.event-time-field:hover,
.event-text:hover {
color: var(--main-text-color);
}
.zoom-slider {
background-color: transparent;
filter: invert(0.95);
}
/* Live Streamer */
#verify-phone-page {
border-color: var(--menu-border-color);
}
.live-dashboard .player-controls-buttons {
background-color: var(--card-bg-color);
}
.live-dashboard-status-bar {
background-color: var(--menu-bg-color);
}
.live-dashboard-status-bar,
.live-dashboard-status-bar-container,
.live-dashboard .checklist-item,
.live-dashboard .checklist-remove-container,
.live-chat-widget #comments-scroller {
border-color: var(--menu-border-color)
}
/* Text */
.live-dashboard .strong-text,
.yt-card .yt-uix-button-expander:hover,
.live-dashboard .more-actions-buttons a {
color: var(--link-color);
}
.live-dashboard .checklist-item,
.live-dashboard .yt-uix-tabs .yt-uix-button-content,
.live-chat-widget .byline {
color: var(--main-text-color);
}
.live-chat-widget .comments-textarea-label {
color: var(--main-faded-text-color);
}
/* Drag and drop handle */
.live-dashboard .yt-uix-dragdrop-drag-handle,
#player .player-dragdrop-handle-container .yt-uix-dragdrop-drag-handle {
background-color: var(--menu-bg-color);
border: 1px solid var(--menu-border-color);
}
/* Icons */
.yt-uix-button-icon.yt-uix-button-icon-settings.yt-sprite {
filter: invert(100%);
}
.yt-help-icon.yt-sprite {
filter: invert(100%) !important;
}
/* Analytics card */
.live-rtd-info-chart-group {
filter: invert(0.9) saturate(0);
margin: 1em 0;
}
/* Chat card */
.live-comments-emoji-picker-tab-row {
background-color: var(--menu-light-bg-color);
}
/* Icons */
.live-comments-emoji-picker-tab-cell {
filter: invert(1);
}
.live-chat-page {
background: var(--card-bg-color);
}
.live-chat-widget .comment {
background-color: var(--card-light-bg-color);
}
.live-chat-widget .comment.alternate-row {
background-color: var(--card-dark-bg-color);
}
.live-chat-widget .comment-text {
color: var(--main-text-color);
}
.live-chat-widget .byline a {
color: var(--link-color);
}
.stream-health-item {
background-color: transparent;
}
/* Live Streaming events tab */
.live-welcome-intro {
background: var(--menu-bg-color);
border-color: var(--sep-line-color)
}
.live-welcome-features .yt-sprite {
filter: invert(0.87);
}
/* Community */
/* Comments */
.comments .comment-header .user-name,
.comments .thumb-title,
.comments .comment-footer-action {
color: var(--link-color);
}
.comments .comment-entry:hover .thumb-title,
.comments .comment-entry:hover .vis-inspect-link {
color: var(--link-hover-color);
}
/* Owner comment username bg fix */
.comments .channel-owner .comment-header .user-name {
background-color: transparent;
font-weight: bold;
}
/* Approved comment banner */
.feedback-banner,
.comments .feedback-banner {
background: var(--menu-bg-color);
}
/* Tabs */
.tabbed-page .tabs-wrapper {
border-left: none;
}
.tabbed-page .tab {
background-color: var(--menu-bg-color);
border-color: var(--menu-border-color);
color: var(--main-text-color);
}
.tabbed-page .tab.active {
background-color: var(--menu-bg-color);
border-bottom-color: var(--menu-border-color);
border-left-color: var(--menu-border-color);
border-right-color: var(--menu-border-color);
color: var(--main-text-color);
}
.tabbed-page .tab:hover {
background-color: var(--menu-hover-bg-color);
}
/* Separators */
.tabbed-page .tabs-area,
.tabbed-page .options-bar,
.subscribers-table .subscribers-table-header,
.subscribers-table td,
.caption-queue th,
.caption-queue td {
border-color: var(--sep-line-color);
}
/* Another fucking dropdown input that's styled differently */
.video-dds,
.video-dds:hover,
.video-dds.open {
border-color: var(--menu-border-color);
}
.video-dds .topline {
background-color: var(--menu-bg-color);
}
/* Open Dropdown */
.video-dds.open .topline {
background-color: var(--menu-light-bg-color);
}
.video-dds .list {
background-color: var(--menu-bg-color);
border-color: var(--menu-border-color);
}
.video-dds .entry:hover .highlight {
background-color: var(--menu-hover-bg-color);
color: var(--link-color);
}
.video-dds .highlight {
color: var(--main-text-color);
}
/* Comment buttons */
.comments .comment-item:hover .mod-buttonbar,
.comments .comment-item:hover .mod-buttonbar .mod-button {
border-color: var(--menu-border-color);
}
.commenthub .comments .mod-buttonbar .mod-button-content:hover {
background: #ccccc6;
}
/* Flag menu */
.comments .mod-list,
.comments .mod-list-button {
background-color: #ccccc4;
}
/* Show more button */
.comments .paginator {
background-image: none;
background-color: var(--menu-bg-color);
border-color: var(--menu-border-color);
color: var(--main-text-color)
}
.comments .paginator:hover {
background-image: none;
background-color: var(--menu-hover-bg-color);
border-color: var(--menu-border-color);
}
/* Community - Subscribers */
/* Text */
.subscribers-table .subscribers-table-header,
.subscribers-table .subscribed-since {
color: var(--main-text-color);
}
.subscribers-table .description-text a {
color: var(--link-color);
}
.subscribers-table .description-text a:hover {
color: var(--link-hover-color);
}
/* Community - contribute */
.caption-queue {
color: var(--main-text-color);
}
.tabbed-page .tab.active a {
color: var(--main-text-color);
}
.caption-queue .contribution-title a {
color: var(--link-color);
}
.caption-queue .contribution-title a:hover {
color: var(--link-hover-color);
}
/* Contribution caption editor */
.waveform-container,
.waveform-slider-container,
.zoom-slider-container,
.zoom-icon-container {
filter: invert(0.92) saturate(0);
}
/* Submit for review modal */
.captions-credits-opt-in-box {
background: var(--card-bg-color);
border-color: var(--card-border-color);
}
/* Community - settings */
#comment-settings .comment-settings-section {
border-color: var(--menu-border-color);
background-color: var(--menu-bg-color);
}
#comment-settings .comment-settings-header {
background-color: var(--menu-light-bg-color);
}
/* Text */
#comment-settings .comment-settings-title,
#comment-settings .comment-settings-label {
color: var(--link-color);
}
#comment-settings .comment-settings-subtitle,
#comment-settings .comment-settings-control-info,
#comment-settings label {
color: var(--main-text-color);
}
.acl-target-list-container .none-defined-text {
color: var(--main-faded-text-color);
}
/* Borders / separators */
.acl-target-list-container[data-which="moderator"] {
border-color: var(--menu-border-color);
background-color: var(--input-box-bg-color);
}
.acl-target-list-container .target-search {
color: var(--main-text-color);
}
/* Channel */
/* Text */
.account-features-v2-content,
.channel-watermark-uploader-content .upload-guidelines {
color: var(--main-text-color);
}
.account-feature-v2-grid-items .account-features-v2-grid-item-description a {
color: var(--link-color);
}
/* Separators */
.account-status-v2,
.account-status-scales,
.account-feature-v2-grid-items .account-features-v2-grid-item-title,
#creator-subheader,
.account-content .account-section.account-bordered-section,
.CLV4EJC-q-h,
.CLV4EJC-t-a,
.CLV4EJC-T-e,
.CLV4EJC-T-n tr {
border-color: var(--sep-line-color);
}
.CLV4EJC-r-h {
border-color: var(--menu-light-border-color);
}
/* Inline style override */
.CLV4EJC-cb-e.CLV4EJC-a-a,
.CLV4EJC-Y-e {
border-color: var(--sep-line-color) !important;
}
/* Cards */
.account-feature-v2-grid-items li,
.CLV4EJC-R-C .CLV4EJC-R-x,
.CLV4EJC-R-x,
.CLV4EJC-R-c,
.CLV4EJC-R-z {
background-color: var(--menu-bg-color);
border-color: var(--menu-border-color);
}
.CLV4EJC-P-D {
background: var(--menu-hover-bg-color);
}
.featured-programming-editor .overview {
background-color: var(--card-light-bg-color);
border-color: var(--card-border-color);
}
/* Channel upload defaults */
#creator-subheader,
.channel-watermark-uploader-content .watermark-example-container {
background-color: var(--card-light-bg-color);
}
/* Analytics */
/* Page bg */
.CLV4EJC-R-D,
.CLV4EJC-R-h {
background-color: var(--card-light-bg-color);
}
/* Page header */
.CLV4EJC-b-l,
.CLV4EJC-b-d,
.CLV4EJC-N-c {
background-color: var(--card-light-bg-color);
}
/* Text */
.CLV4EJC-d-a .CLV4EJC-d-b,
.CLV4EJC-R-g h2 a,
.CLV4EJC-T-s .CLV4EJC-T-B,
.CLV4EJC-T-v .CLV4EJC-T-B,
.CLV4EJC-T-e,
.gwt-Label.CLV4EJC-nb-A.CLV4EJC-nb-j.CLV4EJC-nb-C.CLV4EJC-nb-B,
.CLV4EJC-P-g h2 a,
.CLV4EJC-R-s .CLV4EJC-R-B,
.CLV4EJC-pb-d,
.CLV4EJC-W-q .CLV4EJC-W-F,
.CLV4EJC-N-g h2 a {
color: var(--link-color);
}
.CLV4EJC-R-g h2 a:hover,
.CLV4EJC-P-g h2 a:hover {
color: var(--link-hover-color);
}
.CLV4EJC-T-w,
.CLV4EJC-T-b,
.CLV4EJC-T-l .CLV4EJC-f-c:hover .CLV4EJC-f-f,
.CLV4EJC-T-l .CLV4EJC-f-h .CLV4EJC-f-f,
.CLV4EJC-b-c,
.CLV4EJC-b-c,
.CLV4EJC-d-a .CLV4EJC-d-b {
color: var(--main-text-color);
}
.CLV4EJC-R-e h3,
.CLV4EJC-R-j,
.CLV4EJC-R-w,
.CLV4EJC-R-b {
color: var(--main-faded-text-color);
}
/* Buttons */
/* Link flyout icon colour */
.CLV4EJC-P-j {
opacity: 1;
}
.CLV4EJC-P-g h2 .CLV4EJC-P-j {
filter: saturate(0) invert(100%) brightness(300%);
}
/* Text */
.CLV4EJC-g-f,
.CLV4EJC-r-f,
.CLV4EJC-R-l .CLV4EJC-f-c:hover .CLV4EJC-f-f,
.CLV4EJC-R-l .CLV4EJC-f-h .CLV4EJC-f-f,
.CLV4EJC-R-e,
.CLV4EJC-R-d li {
color: var(--main-text-color);
text-shadow: none;
}
/* Down arrows */
.CLV4EJC-g-f .CLV4EJC-g-c,
.CLV4EJC-g-w .CLV4EJC-g-c {
border-top-color: var(--main-text-color);
}
.CLV4EJC-g-q,
.CLV4EJC-g-q:hover {
border-width: 1px;
border-style: solid;
}
.CLV4EJC-g-f:focus,
.CLV4EJC-g-v:focus,
.CLV4EJC-g-w:focus {
box-shadow: none;
}
/* Inputs */
.CLV4EJC-H-g .CLV4EJC-H-d.CLV4EJC-H-e,
input.CLV4EJC-l-f {
color: var(--main-text-color);
}
.CLV4EJC-H-a a {
color: var(--link-color);
}
input.CLV4EJC-l-f {
background-color: var(--input-box-bg-color);
border-color: var(--menu-border-color);
}
/* Separators */
.CLV4EJC-Z-a:first-child > ul,
.CLV4EJC-R-m,
.CLV4EJC-T-d,
.CLV4EJC-T-k tr,
.CLV4EJC-N-h,
.CLV4EJC-N-b,
.CLV4EJC-N-c,
.CLV4EJC-N-g {
border-color: var(--menu-light-border-color);
}
.CLV4EJC-ab-e {
border-color: var(--menu-light-border-color) !important;
}
/* Calendar popup */
/* Month container */
.CLV4EJC-K-h {
color: var(--main-text-color);
border-color: var(--menu-light-border-color);
background-color: var(--menu-bg-color);
}
.CLV4EJC-K-h .datePickerMonthSelector {
background-color: var(--menu-bg-color);
}
/* Day of the week row */
.CLV4EJC-K-h .datePickerWeekdayLabel,
.CLV4EJC-K-h .datePickerWeekendLabel {
background-color: var(--menu-hover-bg-color);
border-color: var(--menu-border-color);
}
.CLV4EJC-K-h .datePickerPreviousButton,
.CLV4EJC-K-h .datePickerNextButton {
color: var(--main-text-color);
}
/* Weekend bg */
.CLV4EJC-K-h .datePickerDayIsWeekend {
background-color: var(--card-bg-color);
}
/* Selected date */
.CLV4EJC-K-h .datePickerDayIsValue {
box-shadow: inset 0 0 0.1em var(--main-text-color);
background-color: var(--menu-light-hover-bg-color);
}
/* Hover date */
.CLV4EJC-K-h .datePickerWeekdayLabel:hover,
.CLV4EJC-K-h .datePickerWeekendLabel:hover,
.CLV4EJC-K-h .datePickerDay:hover {
background-color: var(--menu-light-hover-bg-color);
color: var(--link-hover-color);
}
/* Settings modal */
/* Tick icon dropdown fix */
.CLV4EJC-r-b .CLV4EJC-r-g,
.CLV4EJC-kb-b,
.CLV4EJC-K-c,
.CLV4EJC-W-u {
filter: invert(100%);
}
.CLV4EJC-r-b .CLV4EJC-r-g .CLV4EJC-g-f,
.CLV4EJC-r-b .CLV4EJC-r-g .CLV4EJC-r-f {
filter: invert(100%);
}
.CLV4EJC-r-b .CLV4EJC-r-g.CLV4EJC-r-e {
background-color: var(--menu-light-hover-bg-color);
filter: invert(0%);
}
.CLV4EJC-r-b .CLV4EJC-r-g.CLV4EJC-r-e a {
color: black;
}
.CLV4EJC-b-s {
margin-top: 0;
}
/* Fix gap between overview header and channel details header */
.CLV4EJC-b-s .CLV4EJC-a-a {
padding-top: 20px;
}
/* Overview graphs */
.CLV4EJC-T-D,
.CLV4EJC-T-h,
.CLV4EJC-N-h {
background: var(--menu-bg-color);
}
.CLV4EJC-R-p:hover,
.CLV4EJC-R-c:hover {
background: var(--menu-hover-bg-color);
}
.CLV4EJC-T-m,
.CLV4EJC-T-C .CLV4EJC-T-x,
.CLV4EJC-T-x,
.CLV4EJC-T-c,
.CLV4EJC-T-z {
border-color: var(--menu-border-color);
}
/* Top 10 */
.CLV4EJC-f-a {
background: transparent;
}
.CLV4EJC-kb-p,
.CLV4EJC-kb-m {
background: var(--menu-light-bg-color);
}
.CLV4EJC-kb-e {
background: var(--menu-bg-color);
}
.CLV4EJC-kb-y tr,
.CLV4EJC-kb-y {
border-color: var(--menu-border-color);
}
.CLV4EJC-kb-r {
background: var(--menu-hover-bg-color);
}
/* Browse all content modal */
/* Video table */
/* BG */
.CLV4EJC-f-i {
background: var(--menu-light-bg-color);
}
.CLV4EJC-q-b,
.CLV4EJC-q-q {
background: var(--menu-bg-color);
border-color: var(--menu-border-color);
}
.CLV4EJC-q-b:hover,
.CLV4EJC-q-q:hover,
.CLV4EJC-q-s:hover {
background: var(--menu-hover-bg-color);
}
/* Text */
.CLV4EJC-s-f,
.CLV4EJC-q-h,
.CLV4EJC-q-a {
color: var(--main-text-color);
}
.CLV4EJC-q-u:hover {
color: var(--link-hover-color);
}
/* Analytics - Watch time */
.CLV4EJC-M-e,
.CLV4EJC-M-b,
.CLV4EJC-L-i,
.CLV4EJC-L-j {
background: var(--menu-light-bg-color);
border-color: var(--menu-light-border-color);
}
.CLV4EJC-L-j.CLV4EJC-g-y,
.CLV4EJC-L-j.CLV4EJC-g-y:hover,
.CLV4EJC-L-j:hover,
.CLV4EJC-eb-a {
background: var(--menu-light-hover-bg-color);
}
/* Text */
.CLV4EJC-L-n {
color: var(--link-color);
}
.CLV4EJC-L-p {
color: var(--main-text-color);
}
/* Separators */
.CLV4EJC-M-a,
.CLV4EJC-M-e,
.CLV4EJC-eb-a li {
border-color: var(--menu-light-border-color);
}
.gwt-viz-container text {
filter: invert(1);
}
/* Options buttons */
/* Button group bar bg */
.CLV4EJC-eb-a {
background-color: var(--menu-bg-color);
border-color: var(--menu-light-border-color);
}
/* Button */
.CLV4EJC-eb-a li {
background-color: var(--menu-light-bg-color);
}
.CLV4EJC-eb-a li:hover {
background-image: none;
background-color: var(--menu-light-hover-bg-color);
}
/* Active button */
.CLV4EJC-eb-a li.CLV4EJC-eb-b {
background-color: var(--menu-light-active-bg-color);
}
/* Video list table */
/* BG */
.CLV4EJC-W-o,
.CLV4EJC-W-c,
.CLV4EJC-W-o tr:nth-child(2n) {
background-color: var(--menu-bg-color);
}
.CLV4EJC-W-H,
.CLV4EJC-W-o .CLV4EJC-W-w td {
background-color: var(--menu-light-bg-color);
}
.CLV4EJC-W-o tr:hover {
background-color: var(--menu-hover-bg-color);
}
.CLV4EJC-W-o .CLV4EJC-W-H:hover {
background-color: var(--menu-light-hover-bg-color);
}
/* Text */
.CLV4EJC-W-F,
.CLV4EJC-W-q .CLV4EJC-W-F {
color: var(--link-color);
}
.CLV4EJC-W-g {
color: var(--main-faded-text-color);
}
/* Separators */
.CLV4EJC-W-o th,
.CLV4EJC-W-o td,
.CLV4EJC-W-c th,
.CLV4EJC-W-c td {
border-color: var(--menu-light-border-color);
}
/* Analytics overrides for yet another update to all their compiled css names */
.CLV4EJC-Y-e {
border-color: var(--sep-line-color) !important
}
.CLV4EJC-P-B,
.CLV4EJC-P-J,
.CLV4EJC-P-l .CLV4EJC-f-h .CLV4EJC-f-f,
.CLV4EJC-P-e,
.CLV4EJC-P-d li,
.CLV4EJC-nb-d,
.CLV4EJC-bb-q .CLV4EJC-bb-F,
.CLV4EJC-b-c a,
.CLV4EJC-b-c a:hover {
color: var(--main-text-color) !important
}
.CLV4EJC-N-g h2 a {
color: var(--link-color)
}
.CLV4EJC-jb-b,
.CLV4EJC-u-a,
.CLV4EJC-bb-u {
filter: invert(100%)
}
.CLV4EJC-N-j {
filter: invert(100%) hue-rotate(180deg)
}
.CLV4EJC-P-D,
.CLV4EJC-jb-z.CLV4EJC-jb-x .CLV4EJC-jb-h,
.CLV4EJC-P-h,
.CLV4EJC-L-h {
background: var(--menu-bg-color)
}
.CLV4EJC-P-p:hover,
.CLV4EJC-P-c:hover,
.CLV4EJC-jb-r,
.CLV4EJC-jb-p,
.CLV4EJC-jb-m,
.CLV4EJC-R-l td:nth-child(3):hover,
.CLV4EJC-R-l td:nth-child(4):hover {
background: var(--menu-hover-bg-color)
}
#gwt-debug-table-container > div {
background: var(--menu-bg-color);
border-color: var(--sep-line-color)
}
#gwt-debug-performanceGroup,
#gwt-debug-engagementGroup,
#gwt-debug-demographicsGroup,
#gwt-debug-discoveryGroup,
#gwt-debug-playback-graph,
.CLV4EJC-L-g,
.CLV4EJC-jb-y,
.CLV4EJC-jb-y tr,
.CLV4EJC-P-x,
.CLV4EJC-P-z,
.CLV4EJC-P-c,
.CLV4EJC-R-d,
.CLV4EJC-R-l tr,
#gwt-debug-table-container,
.CLV4EJC-L-h,
#gwt-debug-topEntity {
border-color: var(--sep-line-color) !important
}
.CLV4EJC-Q-i,
#gwt-debug-compare-metric-button,
#gwt-debug-date-interval-widget,
#gwt-debug-chart-container,
#gwt-debug-table,
#gwt-debug-table a,
.gwt-Anchor,
.gwt-InlineLabel {
filter: invert(90%) brightness(1.5) hue-rotate(180deg)
}
#gwt-debug-performanceChart,
#gwt-debug-missingDataPanel .gwt-Anchor {
filter: invert(0%)
}
/* Create */
/* Text */
#main-title,
button.track-selection-menu-button {
color: var(--link-color);
}
/* Audio library */
/* Separators */
.top-menu,
.track-filter-selection-list .track-filter.all,
.track-list li.track.expanded {
border-color: var(--menu-border-color);
}
/* List item */
/* BG */
.track-list li.track {
background-color: var(--card-dark-bg-color);
border-color: var(--menu-border-color);
}
.track-list li.track:hover,
.track-list li.track.expanded {
background-color: var(--card-hover-bg-color);
}
.track-list li.track.loading {
background-color: var(--card-light-hover-bg-color);
}
/* Popularity bar hover */
.track:hover .audiolibrary-track-head .audiolibrary-column .popularity-bar,
.track.loading .audiolibrary-track-head .audiolibrary-column .popularity-bar,
.track.expanded .audiolibrary-track-head .audiolibrary-column .popularity-bar {
background-color: var(--menu-light-hover-bg-color);
}
/* Text */
.audiolibrary-column-title,
.audiolibrary-column-title-expand,
.track:hover .audiolibrary-track-head .audiolibrary-column,
.track.loading .audiolibrary-track-head .audiolibrary-column,
.track.expanded .audiolibrary-track-head .audiolibrary-column,
.audiolibrary-column-genre-and-mood a:hover {
color: var(--link-color);
}
.audiolibrary-column-duration,
.audiolibrary-column-artist,
.audiolibrary-column-album,
.audiolibrary-column-genre-and-mood a {
color: var(--main-text-color);
}
.asset-sound-recording-section,
.asset-composition-section,
.music-attribution-monetization-section,
.music-attribution-no-monetization-section,
.music-no-attribution-monetization-section,
.music-no-attribution-no-monetization-section {
color: var(--main-faded-text-color);
}
/* Create - Music Policies */
.asset-restrictions-header,
.asset-monetization-header,
.asset-stores-header,
.asset-restrictions-list div,
.asset-monetization-list div,
.asset-stores-list div {
color: var(--main-text-color);
}
/* Create - Video Editor */
/* BG */
/* Project dropdown menu */
#yt-editor-project-menu .project-menu-header {
background-color: var(--menu-light-bg-color);
border-color: var(--menu-light-border-color);
}
#yt-editor-project-menu div.project-menu-item:hover,
#yt-editor-project-menu div.project-menu-item.selected {
background-color: var(--menu-hover-bg-color);
}
/* Video title input */
#video-title {
background-color: var(--input-box-bg-color);
color: var(--main-text-color);
box-shadow: none;
border-color: var(--menu-border-color);
}
#video-title:focus {
color: var(--main-text-color);
outline: 1px solid var(--menu-light-border-color);
}
/* Edit video / audio etc dialogs */
.infobox-body {
background: var(--menu-bg-color);
}
.editor-slider .slider-readout,
.text-property-panel .property-title {
color: var(--main-text-color);
}
.video-media #infobox-options-container,
.image-media #infobox-options-container {
border-color: var(--sep-line-color);
}
/* Storyboard editor section */
#storyboard {
background-color: var(--menu-bg-color);
border-color: var(--menu-border-color);
}
/* Audio overflow greys out */
.timeline-audio-clip .audio-overflow-mask {
background-color: var(--card-bg-color);
}
/* Text */
.drag-to-begin-message p,
.drag-to-begin-audio-message p,
.editor-timeline .timeline-ruler .rulabel {
color: var(--main-text-color);
}
/* Separators */
#top-bar,
#advertising-note {
border-color: var(--sep-line-color);
}
/* Lines */
.editor-timeline .timeline-ruler .hline,
.editor-timeline .timeline-ruler .stick,
.editor-timeline .timeline-ruler .mtick .base {
background-color: var(--menu-light-border-color);
}
/* Video list thumbnail title */
.media-list .editor-thumb .video-title,
.dragging .video-title,
.editor-thumb:hover .video-title,
#mediapicker .video-original.selected .video-title {
background: var(--menu-bg-color);
color: var(--link-color);
opacity: 0.8;
}
/* Editor thumbnail */
.editor-thumb-body,
.ghost {
outline-color: var(--menu-light-border-color);
}
/* Audio timeline widget */
.editor-thumb-body {
background-color: var(--menu-light-bg-color);
}
.editor-thumb-body:hover {
background-color: var(--menu-light-hover-bg-color);
outline-color: var(--menu-light-border-color);
}
/* Create - Video Editor - Audio tab */
/* Audio item */
.mediapicker-audio.audio-track .audio-title,
.mediapicker-audio.audio-track .editor-thumb-time {
color: var(--main-text-color);
}
.mediapicker-audio.audio-track .audio-genre,
.mediapicker-audio.audio-track .audio-artist {
color: var(--main-faded-text-color);
}
#audio-media-list .scroll-content .audio-original:hover,
#audio-media-list .scroll-content .audio-original.selected {
box-shadow: 0 1px 0 0 var(--menu-light-border-color);
border-color: var(--menu-light-border-color);
background-color: var(--menu-hover-bg-color);
}
#creator-sidebar>#creator-sidebar-section-id-dashboard.selected>h3 a,
#creator-sidebar>#creator-sidebar-section-id-your-contributions.selected>h3 a {
background-color: var(--menu-hover-bg-color);
color: #cc181e;
}
/* Youtube's constantly changing compiled CSS for analytics pages is
making me lose my mind so I'm just adding updates here now */
/*================================================================
TestTube
================================================================*/
/* Maybe not just TestTube? */
.yt-nav-dark {
background: var(--card-bg-color);
}
.yt-testtube-card-title,
.yt-testtube-card-light .yt-testtube-card-title {
color: var(--link-color);
}
.yt-testtube-card-light .yt-testtube-card-content,
.yt-testtube-card-dark .yt-testtube-card-content {
color: var(--main-text-color);
}
/*================================================================
About
================================================================*/
/* Appbar but for About page cos WHY USE THE SAME STYLES RIGHT?! */
#yt-main-nav-container {
background: var(--card-bg-color);
}
#yt-main-nav a:active,
#yt-main-nav a.active,
#yt-main-nav a:hover,
#yt-main-nav .yt-nav-element:hover,
#yt-main-nav > a:hover,
.nav-container > a:hover,
.yt-nav-navmenu-container.yt-expanded,
#yt-main-nav .yt-nav-element:active,
#yt-main-nav .yt-nav-element.active,
#yt-main-nav > a:active,
#yt-main-nav > a.active,
.nav-container > a:active,
.nav-container > a.active,
#yt-main-nav .yt-nav-element.yt-nav-navmenu-container.yt-collapsed.active-nav {
background-color: var(--card-light-bg-color);
}
.page-header {
background: var(--bg-color);
}
/* Header text */
#yt-microsite h2,
#yt-microsite h3,
#yt-microsite h4,
#yt-microsite h5,
#yt-sidebar h2 a,
#yts-nav ol li.top-level a {
text-shadow: none;
color: var(--link-color);
}
/* Menu text */
#yt-sidebar ul a,
#yts-nav .indented .sub-level a {
color: var(--main-text-color);
}
#yts-nav .indented .sub-level a:hover {
background: var(--menu-hover-bg-color);
background-image: none;
}
/* Content text */
#yt-microsite-features p,
ol.yt,
ul.yt,
.yt-text ol,
.yt-text ul,
#yt-microsite .yt-card-light .yt-card-text,
#yt-microsite .yt-card-light .yt-card-text p,
#yts-article {
color: var(--main-text-color);
}
/* Separators */
.separator,
.with-divider,
.header,
#yts-article #header,
#yts-article .with-separator,
#yts-nav {
border-color: var(--sep-line-color);
}
/* Feature card background */
.yt-tile-static,
.yt-tile-visible,
.yt-tile-default:hover,
.yt-card-light,
#yts-article::after {
background: var(--card-bg-color);
border-color: var(--card-light-bg-color);
box-shadow: none;
}
/* Vertical menu separator line */
.yt-sidebar-border {
border-color: var(--sep-line-color);
}
/* Remove bold from selected menu item */
#yt-sidebar li.selected a {
font-weight: normal;
}
/* Community Guidelines */
/* Page background */
.yt-cardified #page {
background-color: var(--bg-color);
}
/* Header text */
#yt-microsite .yt-card-light .yt-card-title h2,
#yt-microsite .yt-card-light h2.yt-card-title,
#yt-microsite-features .yt-microsite-feature strong,
#yt-microsite-features .yt-microsite-features strong {
color: var(--link-color);
}
/* Other header text */
h1.yt,
h2.yt,
h3.yt,
.yt-text h1,
.yt-text h2,
.yt-text h3 {
text-shadow: none;
color: var(--link-color);
}
/* Content text */
#yt-microsite .yt-card-light .yt-card-text .yt-policyandsafety-col p,
#yt-microsite .yt-card-light .yt-card-text .yt-policyandsafety-col,
#yt-microsite .yt-policyandsafety-content-container p,
#yt-microsite .yt-card-dark .yt-card-text p {
color: var(--main-text-color);
}
/* Jobs */
/* Search box */
#yt-jobs-search-form .yt-jobs-searchbox {
background-color: var(--input-box-bg-color);
border-color: var(--card-light-bg-color);
color: var(--main-text-color);
}
/* Footer */
/* Remove text shadows */
.footer-secondary li {
text-shadow: none;
}
/* Fix color and weight */
.footer-secondary a {
color: var(--link-color);
}
.footer-secondary a,
.footer-secondary .footer-secondary-info a {
font-weight: normal;
}
.footer-secondary .footer-secondary-info a:hover {
color: var(--link-hover-color);
}
/* Dropdowns */
.yt-form-input-select-container {
text-shadow: none;
}
.yt-form-input-select-container select {
background-color: var(--card-bg-color);
color: var(--main-text-color);
}
.yt-form-input-select-container:hover {
border-color: var(--menu-light-border-color);
}
.yt-form-input-select-value {
color: var(--main-text-color);
}
/*================================================================
Creators
================================================================*/
/* Page bg */
#content.yt-creator-hub-page,
body:not([style-scope]):not(.style-scope) {
background-color: var(--bg-color) !important
}
/* Masthead */
/* BG */
.yt-creator-hub-page-0 #masthead.yt-creator-hub-page {
background: var(--card-dark-bg-color);
}
/* Hamburger menu icon */
.yt-creator-hub-page-0 #hamburger.yt-creator-hub-page {
color: var(--main-text-color);
}
/* Logo bg */
.yt-creator-hub-logo-0 {
background-color: transparent;
}
/* Logo image */
.iron-image-0 #img.iron-image {
visibility: hidden;
width: 72px;
height: 32px;
}
.yt-creator-hub-logo-0 #logo.yt-creator-hub-logo {
background: no-repeat url(data:image/png;base64,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);
background-size: 100%;
opacity: 0.65;
}
/* Hide other logo */
.yt-creator-hub-logo .iron-image-0 #img.iron-image {
visibility: hidden;
}
/* Logo title text color */
.yt-creator-hub-logo-0 #link.yt-creator-hub-logo a {
color: var(--link-color);
}
/* Appbar */
/* BG */
.yt-creator-hub-page-0 #nav.yt-creator-hub-page {
background: var(--card-bg-color);
}
/* Current link */
.yt-creator-hub-page-0 #nav.yt-creator-hub-page > div a.active,
.yt-creator-hub-page-0 #nav.yt-creator-hub-page > div a:active,
.yt-creator-hub-page-0 #nav.yt-creator-hub-page > div a:hover {
color: var(--link-color);
font-weight: normal;
}
/* Sidebar */
/* BG */
.yt-creator-hub-drawer-0 #content.yt-creator-hub-drawer {
background-color: var(--menu-bg-color);
}
/* Menu item */
.yt-creator-hub-page-0 #menu.yt-creator-hub-page a {
color: var(--link-color);
}
/* Active / hover menu item */
.yt-creator-hub-page-0 #menu.yt-creator-hub-page a.active,
.yt-creator-hub-page-0 #menu.yt-creator-hub-page a:hover {
background: var(--menu-hover-bg-color);
color: var(--link-hover-color);
}
/* Cards */
/* BG */
.yt-creator-hub-card-0 {
background-color: var(--light-bg-color);
}
.yt-creator-hub-spotlight-0,
.yt-creator-hub-spotlights-0 {
background: none;
}
/* Separators */
/* Header text */
.yt-creator-hub-card-0.yt-home-layout #content.yt-creator-hub-card #title.yt-creator-hub-card h1,
.yt-creator-hub-card-0 #content.yt-creator-hub-card #title.yt-creator-hub-card h2,
.yt-creator-hub-card-0 #content.yt-creator-hub-card #title.yt-creator-hub-card h3,
.yt-creator-hub-card-0.yt-home-layout #content.yt-creator-hub-card #title.yt-creator-hub-card h2,
.yt-creator-hub-card-0.yt-benefit-layout #content.yt-creator-hub-card #title.yt-creator-hub-card h1,
.yt-creator-hub-card-0 #content.yt-creator-hub-card #title.yt-creator-hub-card h1 {
color: var(--link-color);
}
/* Content text */
.yt-creator-hub-card-0 #content.yt-creator-hub-card #info.yt-creator-hub-card p {
color: var(--main-text-color);
}
/* Links */
.yt-creator-hub-card-0 #content.yt-creator-hub-card #info.yt-creator-hub-card a,
.yt-creator-hub-card-0 #content.yt-creator-hub-card .link.yt-creator-hub-card a,
.yt-creator-hub-social-nav-0 a,
.yt-creator-hub-event-0 a.yt-creator-hub-event,
.yt-card a.yt-action:not([style-scope]):not(.style-scope) {
color: var(--link-color);
}
.yt-creator-hub-card-0 #content.yt-creator-hub-card #info.yt-creator-hub-card a:hover,
.yt-creator-hub-card-0 #content.yt-creator-hub-card .link.yt-creator-hub-card a:hover,
.yt-creator-hub-social-nav-0 li.yt-creator-hub-social-nav:hover a,
.yt-creator-hub-event-0 a.yt-creator-hub-event:hover {
color: var(--link-hover-color);
}
/* Link arrows */
.yt-creator-hub-card-0 #content.yt-creator-hub-card .link.yt-creator-hub-card a::after,
.yt-creator-hub-event-0 a.yt-creator-hub-event::after {
filter: invert(60%);
}
/* Events page */
/* Region section bg */
.yt-creator-hub-dropdown-0 {
background-color: transparent;
}
.yt-creator-hub-dropdown-0 #label.yt-creator-hub-dropdown {
color: var(--main-text-color);
}
/* Input styles */
/* Text */
.paper-input-container-0 .input-content.paper-input-container .paper-input-input,
.paper-input-container-0 .input-content.paper-input-container input,
.paper-input-container-0 .input-content.paper-input-container iron-autogrow-textarea,
.paper-input-container-0 .input-content.paper-input-container textarea,
paper-item {
color: var(--main-text-color);
cursor: pointer;
}
/* BG */
.paper-dropdown-menu,
.paper-menu-button-0 .dropdown-content.paper-menu-button,
.paper-listbox-0 {
background-color: var(--menu-bg-color);
}
paper-item:hover {
background-color: var(--menu-hover-bg-color);
}
/* Region dropdown borders */
.paper-input-container-0 {
border-color: var(--menu-border-color);
}
.paper-input-container-0 .unfocused-line.paper-input-container {
background: var(--menu-border-color);
}
/* Subscriber count */
/* BG */
.yt-creator-hub-events-filter-0 {
background-color: transparent;
}
/* Header text */
.yt-creator-hub-events-filter-0 #label-container.yt-creator-hub-events-filter h2#heading.yt-creator-hub-events-filter {
color: var(--link-color);
}
/* Cards */
/* BG */
.yt-creator-hub-event-0 .card.yt-creator-hub-event {
background-color: var(--card-bg-color);
}
/* Header text */
.yt-creator-hub-event-0 h1.yt-creator-hub-event {
color: var(--link-color);
border-color: var(--sep-line-color);
}
/* Content text */
.yt-creator-hub-event-0 h2.yt-creator-hub-event {
color: var(--main-text-color);
}
/* Advertise */
/* Adwords cta */
a.adwords-cta-banner,
.make-video-director-adwords-banner a.adwords-cta-banner {
background-color: var(--card-bg-color);
}
/* Sidenav */
md-sidenav {
background-color: var(--menu-bg-color);
}
md-content.md-default-theme {
background-color: transparent;
}
.yt-advertise-sidebar p,
#yt-microsite .yt-card-light {
color: var(--main-text-color);
}
/* Separators */
hr.yt-advertise-sidebar-rule {
border-color: var(--sep-line-color);
}
/* Cards */
.make-video-grid-steps {
background-color: var(--card-bg-color);
}
/* Developers */
/* Appbar */
#yt-dev-nav-container {
background: var(--card-dark-bg-color);
}
/* Appbar hover links */
#yt-dev-nav a:active,
#yt-dev-nav a.active,
#yt-dev-nav a:hover {
background-color: var(--menu-hover-bg-color);
}
/* Footer wide card */
.yt-dev-footer {
background-color: var(--card-bg-color);
}
/* Developers Demo */
/* Right menu flyout */
.yt-toggle-dev-demos-sidebar-button {
background: var(--menu-bg-color);
color: var(--main-text-color);
}
#menu-arrow {
fill: var(--main-text-color);
}
/* Right menu sidebar */
/* BG */
.yt-dev-demos-sidebar {
background-color: var(--menu-bg-color);
}
/* Header text */
.yt-dev-demos-sidebar-title,
.yt-dev-demos-tab .yt-dev-demos-tab-text {
color: var(--link-color);
}
/* Normal text */
.yt-dev-demos-sidebar-resources-title {
color: var(--main-text-color);
}
/* Top tabs */
/* Highlighted Tab */
.yt-dev-demos-tab.yt-dev-demos-sidebar-tabs-highlighted,
.yt-dev-demos-tab.yt-dev-demos-sidebar-tabs-highlighted:hover {
background-color: var(--card-light-bg-color);
}
/* Hover bg */
.yt-dev-demos-tab:hover {
background-color: var(--card-light-bg-color);
border-color: var(--menu-light-border-color);
}
/* Separators */
.yt-dev-demos-sidebar-resources-container,
.yt-dev-demos-sidebar-tabs-container {
border-color: var(--sep-line-color);
}
/* Footer */
.yt-dev-demos-sidebar-tabs-container,
.yt-dev-demos-sidebar-resources-container {
background-color: var(--card-bg-color);
}
/* Showcase link icon */
.yt-dev-showcase-external-link-msg-container:hover .yt-dev-showcase-external-link-img {
filter: saturate(0) brightness(250%);
}
/*================================================================
Error Page
================================================================*/
#error-page-content p {
text-shadow: none;
color: var(--main-text-color);
}
/* Notifications Container */
.sb-card-arrow {
border-bottom-color: var(--sep-line-color);
}
.sb-card-body-arrow {
border-bottom-color: var(--card-light-bg-color);
}
.sb-card-border {
border-color: var(--sep-line-color);
box-shadow: none;
background: none;
}
.sb-on {
box-shadow: 0 2px 1px #1a1a1a;
}
/*================================================================
Live Chat
================================================================*/
#chat-messages yt-live-chat-header-renderer {
background-color: var(--card-bg-color);
}
iron-dropdown paper-menu#items {
background: var(--card-light-bg-color);
}
iron-dropdown #items ytd-menu-service-item-renderer:hover,
iron-dropdown #items a.ytd-menu-navigation-item-renderer:hover {
background-color: var(--card-light-hover-bg-color);
}
.yt-live-chat-renderer-0 {
background: var(--card-dark-bg-color);
}
iron-dropdown #items yt-formatted-string,
#chat-messages yt-live-chat-header-renderer,
#chat-messages iron-icon,
.yt-live-chat-renderer-0 #message,
.yt-live-chat-renderer-0 #deleted-state,
.yt-live-chat-renderer-0 #label,
.yt-live-chat-renderer-0 #input,
.yt-live-chat-renderer-0 #count,
.yt-live-chat-renderer-0,
.yt-live-chat-text-message-renderer-0 #timestamp.yt-live-chat-text-message-renderer {
color: var(--main-text-color)!important;
}
.yt-live-chat-renderer-0 #author-name {
color: var(--main-faded-text-color)!important;
}
.yt-live-chat-renderer-0 #menu {
background: transparent!important;
}
.yt-live-chat-renderer-0 a {
color: var(--link-color);
}
.yt-live-chat-renderer-0 a:hover {
color: var(--link-hover-color);
}
.yt-live-chat-renderer-0 yt-formatted-string.yt-emoji-picker-category-renderer {
background-color: var(--card-light-bg-color);
color: var(--main-text-color);
}
.yt-live-chat-message-input-renderer-0,
#watch-sidebar-live-chat,
#watch-sidebar-live-chat .yt-uix-expander-collapsed {
background: var(--card-bg-color);
}
/*================================================================
Styles contributed by Tim Cole - http://timcole.me
=================================================================*/
/* MCN Search */
.exp-searchbox-redesign #masthead-search {
background-color: var(--card-dark-bg-color);
}
.exp-searchbox-redesign #masthead-search-terms input {
padding: 5px;
}
/* MCN List of Channels */
.mc-channel-item,
.mc-actions,
.mc-channel-footer {
background-color: var(--card-bg-color);
border-color: var(--card-light-bg-color);
color: var(--main-text-color) !important;
}
.mc-channel-title-content {
color: var(--main-text-color) !important;
}
/* Upload Page */
.yt-card .yt-uix-tabs .yt-uix-button {
background-color: var(--card-bg-color);
}
.monetize-with-ads.monetize-options-box {
background-color: var(--card-bg-color);
box-shadow: none;
}
hr.metadata-separator-line,
.upload-thumb,
.basic-info-tab .custom-thumb-area {
border-bottom: none;
border-color: var(--card-light-bg-color);
}
.item-title,
.monetize-with-ads.monetize-options-box h3 {
color: var(--main-text-color) !important;
font-weight: 600;
}
/* Channel Selector Dropdown */
.yt-masthead-account-picker-option,
.yt-masthead-picker-photo-wrapper,
.not-yt-legacy-css .yt-masthead-picker-photo-wrapper .yt-thumb {
background-color: var(--card-bg-color);
}
.yt-masthead-account-picker-option:hover,
.yt-masthead-account-picker-option:hover .yt-masthead-picker-photo-wrapper,
.yt-masthead-picker-body .yt-masthead-picker-photo-wrapper,
.not-yt-legacy-css .yt-masthead-picker-photo-wrapper .yt-thumb {
background-color: var(--card-light-bg-color);
}
.yt-masthead-account-picker-option .yt-masthead-picker-name {
color: var(--main-text-color) !important;
}
.yt-uix-clickcard-card.yt-masthead-multilogin .yt-masthead-picker-header,
.yt-uix-clickcard-card.yt-masthead-multilogin .yt-masthead-multilogin-users-header {
background-color: var(--card-light-bg-color);
}
.yt-uix-clickcard-card.yt-masthead-multilogin .yt-uix-card-body-arrow {
border-bottom-color: var(--card-light-bg-color);
}
/* Channel Selector Page */
#channel-switcher-content {
background-color: var(--card-bg-color);
}
.channel-switcher-button .yt-uix-button {
background-color: var(--card-light-bg-color);
}
.channel-switcher-button:hover .yt-uix-button {
background-color: var(--card-bg-color);
}
/* Connected Accounts */
.social-connector.connected {
background-color: var(--card-light-bg-color);
}
.social-connector .connection-settings-container {
border-color: var(--menu-border-color);
}
/* Subscribe End Screen */
.ytp-ce-expanding-overlay-background {
background-color: var(--card-light-bg-color);
}
.ytp-ce-channel-this .ytp-ce-channel-metadata {
border-color: var(--menu-border-color);
}
/*================================================================
Maybe personal preference?
=================================================================*/
/* Theater mode background removed */
.watch-stage-mode #theater-background {
display: none;
}
/* Dark subscribe button instead of YT red */
/*
.yt-uix-button-subscribe-branded, .yt-uix-button-subscribe-branded[disabled], .yt-uix-button-subscribe-branded[disabled]:hover, .yt-uix-button-subscribe-branded[disabled]:active, .yt-uix-button-subscribe-branded[disabled]:focus {
filter: saturate(0.075) hue-rotate(240deg);
}
*/
}
@-moz-document url("https://www.youtube.com/feed/history") {
/*================================================================
Watch History Overrides
Fixes the entire watch history being greyed out
================================================================*/
.resume-playback-background {
opacity: 0
}
.contains-percent-duration-watched + .yt-lockup-content {
opacity: 1
}
}
@-moz-document domain("apis.google.com") {
.nbc {
background-color: #2a2a2e;
border-color: #36363f;
}
.nbc a {
color: #aaaab6;
}
}
@-moz-document url-prefix("https://plus.google.com/_/notifications/frame?origin=https%3A%2F%2Fwww.youtube.com&source=yt") {
.Lub,
.l4a,
.Xa,
.TC,
.TR,
.WR,
.vy,
.bS {
background-color: transparent;
}
.aac,
.tQb,
.xac,
.ve,
.IO,
.cp,
.wu,
.WdjWF,
.WpuQke {
background-color: #2a2a2d;
}
.qac,
.fr {
background-color: #222225;
}
.fr>.vt,
.IO,
.Fr+.bj,
.Fr>.Qp,
.cp,
.wu {
border-color: #3a3a40;
}
.Kza,
.MNn0h,
.f4a.tta,
.nfe,
.d-r {
background-color: #3a3a40;
}
.d-A-yb,
.d-A-u,
.l4a:active .f4a {
background-color: #4a4a50;
}
.Id>.eswd {
background-color: #3a3a40;
border-color: #4a4a50;
color: #ccc;
}
.Gc.esw {
background-color: #3a3a40;
border-color: #46464f;
}
.Dg:hover,
.Gc.eswd:hover {
border-color: #52525f;
}
.tta .Jub,
.Iac,
.sQb:link,
.sQb:visited,
.k4a,
.Ub,
.vy,
.bS,
.ot-hashtag,
.proflink,
.cp,
.Oub.d-r-Gk .d-A,
.d-A-yb .d-A-B,
.d-A-u .d-A-B,
.xQb {
color: #ccc;
}
.YGETNc,
.MNn0h:hover .YGETNc,
.MNn0h.RATVS .YGETNc,
.y9fV .YGETNc,
.tta .Hub,
.tta .Gub,
.SR,
.dn,
.tf,
.dR.d-s,
.Aq,
.bhsVm,
.nYXukb {
color: #999;
}
.MNn0h.RATVS,
.MNn0h:hover {
background-color: #3c3c42;
}
.nV46l,
.vwa,
.khb,
.gr,
.TR,
.hhb,
.eswd .sm,
.bxpCne,
.tubEcf {
filter: invert(0.7) brightness(3);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment