Last active
June 1, 2018 15:34
-
-
Save sidneys/dbdb1f730ac1dfac1310b91b5503dd1f to your computer and use it in GitHub Desktop.
Userstyle | YouTube | DARK FADE II (2018)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ==UserStyle== | |
| @name YouTube | DARK FADE 2 (2018) | |
| @namespace de.sidneys.userstyles | |
| @version 1.0.1 | |
| @description Reimplementation of the legendary 'YouTube Dark Fade' userstyle for YouTubes' 2018 redesign. Written from scratch, leveraging web components, CSS variable namespace (--ytd-*) and conforming to the UserCSS standard. | |
| @author sidneys <[email protected]> (https://github.com/sidneys) | |
| @homepageURL https://sidneys.github.io | |
| @license MIT | |
| ==/UserStyle== */ | |
| @-moz-document domain("youtube.com") { | |
| /** | |
| ========================================================== | |
| VARIABLE CONFIGURATION | |
| ========================================================== | |
| */ | |
| /** | |
| * :root | |
| */ | |
| :root | |
| { | |
| --width-app-drawer: 240px; | |
| --width-scrollbar: 1.5rem; | |
| --border-radius-1: 2px; | |
| --box-shadow-1: inset 0 4px 5px 0 rgba(0, 0, 0, 0.14), inset 0 1px 10px 0 rgba(0, 0, 0, 0.12), inset 0 2px 4px -1px rgba(0, 0, 0, 0.3); | |
| --color-accent-1: rgb(254, 222, 150); | |
| --color-accent-2: rgb(255, 221, 123); | |
| --color-accent-3: rgb(254, 203, 111); | |
| --color-accent-4: rgb(252, 155, 112); | |
| --color-accent-5: rgb(237, 106, 111); | |
| --color-accent-6: rgb(203, 78, 108); | |
| --color-accent-6-translucent-50: rgba(203, 78, 108, 0.50); | |
| --color-accent-7: rgb(140, 65, 104); | |
| --color-accent-7-translucent-50: rgba(140, 65, 104, 0.50); | |
| --color-accent-8: rgb(81, 60, 99); | |
| --color-accent-8-translucent-50: rgba(81, 60, 99, 0.50); | |
| --color-accent-9: rgb(57, 59, 98); | |
| --color-accent-9-translucent-50: rgba(57, 59, 98, 0.50); | |
| --color-accent-blue: rgb(52, 150, 219); | |
| --color-accent-blue-translucent-50: rgba(52, 150, 219, 0.50); | |
| --color-accent-lightblue: rgb(190, 221, 244); | |
| --color-background-1: rgb(0, 0, 0); | |
| --color-background-1-translucent-25: rgba(0, 0, 0, 0.25); | |
| --color-background-1-translucent-50: rgba(0, 0, 0, 0.50); | |
| --color-background-1-translucent-75: rgba(0, 0, 0, 0.75); | |
| --color-background-2: rgb(23, 23, 23); | |
| --color-background-3: rgb(33, 33, 33); | |
| --color-background-4: rgb(38, 38, 38); | |
| --color-background-5: rgb(66, 66, 66); | |
| --color-border-1-translucent-25: rgba(255, 255, 255, 0.25); | |
| --color-confirmation: rgb(51, 205, 95); | |
| --color-warning: rgb(204, 24, 30); | |
| --color-text-1: rgb(58, 58, 58); | |
| --color-text-2: rgb(118, 118, 118); | |
| --color-text-3: rgb(180, 180, 180); | |
| --color-text-4: rgb(250, 250, 250); | |
| --color-text-5: rgb(255, 255, 255); | |
| --color-text-5-translucent-50: rgba(255, 255, 255, 0.50); | |
| --color-text-5-translucent-75: rgba(255, 255, 255, 0.75); | |
| --color-transparent: transparent; | |
| --gradient-1: linear-gradient(45deg, var(--color-accent-3) 0%, var(--color-accent-3) 12%, var(--color-accent-4) 54%, var(--color-accent-5) 100%); | |
| --gradient-2: linear-gradient(45deg, var(--color-accent-9) 0%, var(--color-accent-8) 19%, var(--color-accent-7) 43%, var(--color-accent-6) 69%, var(--color-accent-6) 99%); | |
| --gradient-2-translucent-50: linear-gradient(45deg, var(--color-accent-9-translucent-50) 0%, var(--color-accent-8-translucent-50) 19%, var(--color-accent-7-translucent-50) 43%, var(--color-accent-6-translucent-50) 69%, var(--color-accent-6-translucent-50) 99%); | |
| --gradient-3: linear-gradient(to right, var(--color-accent-9) 0%, var(--color-accent-8) 18%, var(--color-accent-7) 35%, var(--color-accent-6) 52%, var(--color-accent-5) 70%, var(--color-accent-4) 85%, var(--color-accent-3) 100%); | |
| --gradient-4: linear-gradient(45deg, var(--color-accent-1) 0%, var(--color-accent-2) 10%, var(--color-accent-3) 20%, var(--color-accent-4) 32%, var(--color-accent-5) 45%, var(--color-accent-6) 59%, var(--color-accent-7) 72%, var(--color-accent-8) 87%, var(--color-accent-9) 100%); | |
| --gradient-5: linear-gradient(45deg, var(--color-accent-1) 0%, var(--color-accent-3) 10%, var(--color-accent-4) 32%, var(--color-accent-5) 44%, var(--color-accent-6) 52%, var(--color-accent-7) 64%, var(--color-accent-8) 87%, var(--color-accent-9) 100%); | |
| --filter-none: none; | |
| --filter-blur-4: blur(4px); | |
| --filter-blur-8: blur(8px); | |
| --filter-blur-8-opacity-100: blur(8px) opacity(1.0); | |
| --filter-opacity-0: opacity(0); | |
| --filter-opacity-50: opacity(0.5); | |
| --filter-opacity-75: opacity(0.75); | |
| --filter-opacity-100: opacity(1.0); | |
| --filter-saturate-0: saturate(0); | |
| --filter-reset: blur(0) opacity(0) saturate(1); | |
| --transition-250: all 250ms ease-in-out; | |
| --transition-500: all 500ms ease-in-out; | |
| --transition-750: all 750ms ease-in-out; | |
| } | |
| } | |
| @-moz-document domain("youtube.com") { | |
| /** | |
| ========================================================== | |
| PREDEFINED VARIABLE REPLACEMENT (-yt-*) | |
| Based on vanilla dark theme | |
| ========================================================== | |
| */ | |
| /** | |
| * <html> | |
| */ | |
| html:not([style-scope]):not(.style-scope), | |
| html[dark]:not([style-scope]):not(.style-scope), | |
| [dark]:not([style-scope]):not(.style-scope) | |
| { | |
| --yt-std-body-200: hsla(0, 100%, 100%, .26); | |
| --yt-std-body-300: hsla(0, 100%, 100%, .5); | |
| --yt-std-surface-200: var(--color-background-5); | |
| --yt-std-surface-300: hsl(0, 0%, 14%); | |
| --yt-std-surface-400: hsl(0, 0%, 16%); | |
| --yt-primary-color: var(--color-text-4); | |
| --yt-primary-text-color: hsla(0, 100%, 100%, .88); | |
| --yt-hovered-text-color: hsla(0, 100%, 100%, .74); | |
| --yt-secondary-text-color: hsla(0, 100%, 100%, .5); | |
| --yt-tertiary-text-color: hsla(0, 100%, 100%, .5); | |
| --yt-disabled-text-color: hsla(0, 100%, 100%, .26); | |
| --yt-placeholder-text-color: hsla(0, 100%, 100%, .5); | |
| --yt-border-color: var(--color-border-1-translucent-25); | |
| --yt-commentbox-border-inactive: hsla(0, 100%, 100%, .5); | |
| --yt-commentbox-border-active: hsla(0, 100%, 100%, .88); | |
| --yt-alert-background: hsla(0, 100%, 100%, .26); | |
| --yt-paper-button-ink-color: hsla(0, 0%, 100%, .2); | |
| --yt-icon-color: hsla(0, 100%, 100%, .5); | |
| --yt-icon-hover-color: hsla(0, 100%, 100%, .74); | |
| --yt-icon-active-color: hsla(0, 100%, 100%, .88); | |
| --yt-icon-disabled-color: hsla(0, 100%, 100%, .26); | |
| --yt-endpoint-color: hsl(0, 0%, 53.3%); | |
| --yt-expand-color: hsla(0, 0%, 100%, .6); | |
| --yt-metadata-color: hsl(0, 0%, 53.3%); | |
| --yt-channel-owner: hsla(0, 100%, 100%, .88); | |
| --yt-placeholder-text: hsl(0, 0%, 93.3%); | |
| --yt-playlist-background-header: var(--gradient-2-translucent-50); | |
| --yt-playlist-background-item: var(--color-background-2); | |
| --yt-playlist-title-text: hsla(0, 100%, 100%, .88); | |
| --yt-playlist-message-text: hsl(0, 0%, 93.3%); | |
| --yt-playlist-message-text-hover: hsla(0, 100%, 100%, .74); | |
| --yt-subscribe-button-text-color: hsla(0, 100%, 100%, .88); | |
| --yt-button-text-color: hsla(0, 100%, 100%, .5); | |
| --yt-button-active-color: hsla(0, 100%, 100%, .88); | |
| --yt-button-payment-text-color: hsla(0, 100%, 100%, .88); | |
| --yt-copyright-text: hsla(0, 0%, 100%, .6); | |
| --yt-guide-entry-hover-background-color: hsla(0, 0%, 53.3%, .4); | |
| --yt-thumbnail-placeholder-color: hsl(0, 0%, 16%); | |
| --yt-primary-disabled-button-text-color: hsla(0, 0%, 100%, .2); | |
| --yt-featured-channel-title-text-color: hsla(0, 100%, 100%, .5); | |
| --yt-formatted-string-deemphasize-color: hsl(0, 0%, 53.3%); | |
| --paper-listbox-background-color: var(--color-background-3); | |
| --paper-listbox-color: hsla(0, 100%, 100%, .88); | |
| --paper-dialog-background-color: hsl(0, 0%, 14%); | |
| --paper-toggle-button-unchecked-bar-color: hsl(0, 0%, 53.3%); | |
| --yt-simple-menu-header-background: hsla(0, 0%, 53.3%, .4); | |
| --yt-item-section-header-color: hsl(0, 0%, 93.3%); | |
| --yt-menu-hover-backgound-color: hsla(0, 100%, 100%, .08); | |
| --yt-menu-focus-background-color: hsla(0, 100%, 100%, .26); | |
| --yt-searchbox-text-color: var(--color-text-5); | |
| --yt-material-searchbox-inactive: hsl(0, 0%, 7%); | |
| --yt-material-searchbox-active: hsl(0, 0%, 100%); | |
| --yt-material-searchbox-inactive-shadow: hsla(0, 0%, 0%, .04); | |
| --yt-material-searchbox-active-shadow: hsla(0, 0%, 0%, .26); | |
| --yt-material-searchbox-inset: hsla(0, 0%, 0%, .04); | |
| --yt-material-searchbox-text-color: hsl(0, 0%, 6.7%); | |
| --yt-app-background: var(--color-background-4); | |
| --yt-main-app-background: var(--color-background-3); | |
| --yt-main-app-background-tmp: var(--color-background-3); | |
| --yt-guide-background: var(--color-background-5); | |
| --yt-dialog-background: hsl(0, 0%, 14%); | |
| --yt-searchbox-background: hsl(0, 0%, 7%); | |
| --yt-channel-header-background: hsla(0, 0%, 11%, .8); | |
| --yt-sidebar-background: hsla(0, 0%, 11%, .8); | |
| --yt-transcript-background: var(--color-background-5); | |
| --yt-chat-bubble-other-border-color: hsla(0, 100%, 100%, .26); | |
| --yt-chat-bubble-other-background-color: var(--color-background-5); | |
| --yt-chat-bubble-self-border-color: hsl(0, 0%, 14%); | |
| --yt-chat-bubble-self-background-color: hsl(0, 0%, 16%); | |
| --yt-blue-suggestive: transparent; | |
| --yt-spec-icon-active-button-link: #0099FF; | |
| --yt-spec-badge-chip-background: rgba(255, 255, 255, 0.10); | |
| --yt-spec-brand-icon-active: #FFFFFF; | |
| --yt-spec-brand-button-background: #FF0000; | |
| } | |
| html:not([style-scope]):not(.style-scope), | |
| html[dark]:not([style-scope]):not(.style-scope), | |
| [dark]:not([style-scope]):not(.style-scope) | |
| { | |
| --ytd-searchbox-border-color: var(--color-transparent); | |
| --ytd-searchbox-legacy-border-color: var(--color-transparent); | |
| --ytd-searchbox-legacy-border-shadow-color: var(--color-transparent); | |
| --ytd-searchbox-legacy-button-color: var(--color-background-1-translucent-25); | |
| --ytd-searchbox-legacy-button-border-color: var(--color-transparent); | |
| --ytd-searchbox-legacy-button-focus-color: var(--color-background-1-translucent-25); | |
| --ytd-searchbox-legacy-button-hover-color: var(--color-background-1-translucent-25); | |
| --ytd-searchbox-legacy-button-hover-border-color: var(--color-transparent); | |
| --ytd-searchbox-legacy-button-icon-color: var(--color-text-5); | |
| --ytd-moderation-panel-background: hsla(0, 0%, 11%, .8); | |
| --ytd-moderation-panel-hover: hsl(0, 0%, 11%); | |
| --ytd-moderation-panel-comment-text: hsla(0, 100%, 100%, .5); | |
| --ytd-moderation-panel-comment-metadata-text: hsla(0, 100%, 100%, .5); | |
| --ytd-moderation-icon-color: hsla(0, 100%, 100%, .5); | |
| --ytd-moderation-icon-hover-color: hsla(0, 100%, 100%, .74); | |
| --ytd-comment-text-color: hsla(0, 100%, 100%, .88); | |
| --ytd-comment-metadata-text-color: hsl(0, 0%, 53.3%); | |
| --ytd-watch-card-secondary-text-color: hsl(0, 0%, 93.3%); | |
| --ytd-watch-card-album-header-background: hsl(0, 0%, 6.7%); | |
| --ytd-backstage-metadata-text-color: hsla(0, 100%, 100%, .88); | |
| --ytd-backstage-video-link-background-color: hsl(0, 0%, 14%); | |
| --ytd-backstage-image-alert-color: hsla(0, 100%, 100%, .88); | |
| --ytd-backstage-cancel-background-color: hsl(0, 0%, 14%); | |
| --ytd-backstage-cancel-color: hsl(0, 0%, 100%); | |
| --ytd-backstage-creationbox-background-color: hsl(0, 0%, 11%); | |
| --ytd-backstage-creationbox-background-color-focus: hsl(0, 0%, 14%); | |
| --ytd-backstage-creationbox-inactive-color: hsla(0, 100%, 100%, .26); | |
| --ytd-backstage-creationbox-text-color: hsla(0, 100%, 100%, .5); | |
| --ytd-backstage-creationbox-input-text-color: hsla(0, 100%, 100%, .88); | |
| --ytd-backstage-creationbox-disabled-button-color: hsla(0, 100%, 100%, .08); | |
| --ytd-backstage-creationbox-disabled-button-text-color: hsla(0, 100%, 100%, .26); | |
| --ytd-backstage-attachment-icon-hover-color: hsla(0, 100%, 100%, .74); | |
| --ytd-sponsorships-background-color-focus: hsl(0, 0%, 11%); | |
| --ytd-badge-background: hsla(0, 100%, 100%, .08); | |
| --ytd-badge-disabled-color: hsla(0, 0%, 100%, .4); | |
| --ytd-collection-badge-color: hsla(0, 0%, 100%, .8); | |
| --ytd-owner-badge-color: hsla(0, 0%, 100%, .4); | |
| --ytd-simple-badge-color: hsla(0, 0%, 100%, .6); | |
| --ytd-ad-badge-text-color: hsl(0, 0%, 7%); | |
| --ytd-shopping-product-info: hsla(0, 100%, 100%, .74); | |
| --ytd-toggle-color: hsl(0, 0%, 93.3%); | |
| --ytd-survey-button-color: var(--yt-primary-text-color); | |
| --ytd-transcript-cue-hover-background-color: hsla(0, 0%, 53.3%, .4); | |
| --ytd-transcript-toolbar-background-color: hsla(0, 0%, 53.3%, .4); | |
| --ytd-transcript-toolbar-text: hsla(0, 100%, 100%, .88); | |
| --ytd-video-publish-date-color: hsla(0, 0%, 100%, .6); | |
| --ytd-vat-notice-text: var(--color-text-3); | |
| --ytd-offer-background-color: hsl(0, 0%, 14%); | |
| --ytd-video-game-watch-card-logo-color: hsl(0, 0%, 100%); | |
| --ytd-watch-split-pane-sidebar-background-color: hsl(0, 0%, 11%); | |
| } | |
| html:not([style-scope]):not(.style-scope), | |
| html[dark]:not([style-scope]):not(.style-scope), | |
| [dark]:not([style-scope]):not(.style-scope) | |
| { | |
| --yt-live-chat-action-panel-background-color: #282828; | |
| --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); | |
| --yt-live-chat-primary-text-color: hsl(0, 0%, 100%); | |
| --yt-live-chat-secondary-text-color: rgba(255, 255, 255, 0.7); | |
| --yt-live-chat-tertiary-text-color: rgba(255, 255, 255, 0.54); | |
| --yt-live-chat-disabled-icon-button-color: rgba(255, 255, 255, 0.3); | |
| --yt-live-chat-picker-button-color: var(--yt-live-chat-tertiary-text-color); | |
| --yt-formatted-string-emoji-size: 24px; | |
| } | |
| /** | |
| * <ytd-masthead> | |
| */ | |
| ytd-masthead | |
| { | |
| --yt-swatch-primary: rgb(35, 35, 35); | |
| --yt-swatch-primary-darker: rgb(32, 32, 32); | |
| --yt-swatch-text: rgb(255, 255, 255); | |
| --yt-swatch-important-text: rgb(255, 255, 255); | |
| --yt-swatch-input-text: rgba(255, 255, 255, 1); | |
| --yt-swatch-textbox-bg: rgba(19, 19, 19, 1); | |
| --yt-swatch-logo-override: rgb(40, 40, 40) !important; | |
| --yt-swatch-icon-color: rgba(136, 136, 136, 1); | |
| } | |
| /** | |
| * <ytd-app> | |
| */ | |
| ytd-app[guide-hovered], | |
| ytd-app[guide-hovered] #masthead-container.ytd-app | |
| { | |
| --ytd-app-scroll-offset: 0 !important; | |
| } | |
| } | |
| @-moz-document domain("youtube.com") { | |
| /** | |
| ========================================================== | |
| ========================================================== | |
| ELEMENTS & COMPONENTS | |
| ========================================================== | |
| ========================================================== | |
| */ | |
| /** | |
| ========================================================== | |
| STANDARD ELEMENTS | |
| ========================================================== | |
| */ | |
| /** | |
| * <html> | |
| */ | |
| html, | |
| html * | |
| { | |
| -webkit-font-smoothing: subpixel-antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /** | |
| * <body> | |
| */ | |
| body | |
| { | |
| /*noinspection CssInvalidPropertyValue*/ | |
| overflow-y: overlay !important; | |
| } | |
| /** | |
| * ::-webkit-scrollbar-* | |
| */ | |
| ::-webkit-scrollbar-track | |
| { | |
| background-color: var(--color-background-2); | |
| } | |
| ::-webkit-scrollbar | |
| { | |
| width: var(--width-scrollbar); | |
| background-color: var(--color-background-2); | |
| } | |
| ::-webkit-scrollbar-thumb, | |
| .yt-scrollbar-dark.ytd-playlist-panel-renderer::-webkit-scrollbar-thumb | |
| { | |
| background-color: var(--color-accent-9); | |
| } | |
| /** | |
| ========================================================== | |
| YOUTUBE POLYMER COMPONENTS (ytd-*) | |
| ========================================================== | |
| */ | |
| /** | |
| ---------------------------------------------------------- | |
| Watch Page | |
| ---------------------------------------------------------- | |
| */ | |
| /** | |
| * <ytd-watch> | |
| */ | |
| ytd-watch .header.ytd-playlist-panel-renderer | |
| { | |
| background-color: unset; | |
| background: var(--yt-playlist-background-header); | |
| } | |
| /** | |
| * <ytd-compact-video-renderer> | |
| */ | |
| ytd-compact-video-renderer.ytd-watch-next-secondary-results-renderer, | |
| ytd-compact-radio-renderer.ytd-watch-next-secondary-results-renderer, | |
| ytd-compact-movie-renderer.ytd-watch-next-secondary-results-renderer, | |
| ytd-compact-playlist-renderer.ytd-watch-next-secondary-results-renderer, | |
| ytd-compact-promoted-video-renderer.ytd-watch-next-secondary-results-renderer | |
| { | |
| background-color: var(--color-background-4); | |
| padding: 0; | |
| margin-bottom: 8px; | |
| border: 12px var(--color-background-4) solid; | |
| } | |
| a.yt-simple-endpoint.ytd-compact-video-renderer | |
| { | |
| padding-right: 0; | |
| } | |
| ytd-thumbnail.ytd-compact-video-renderer | |
| { | |
| height: 90px; | |
| width: 158px; | |
| } | |
| paper-button.yt-next-continuation | |
| { | |
| color: var(--color-text-5-translucent-75); | |
| background: var(--gradient-1); | |
| border-style: none; | |
| } | |
| ytd-playlist-panel-video-renderer | |
| { | |
| padding-bottom: 8px; | |
| padding-top: 8px; | |
| } | |
| ytd-thumbnail.ytd-compact-video-renderer | |
| { | |
| margin-right: 16px; | |
| } | |
| .playlist-items.ytd-playlist-panel-renderer | |
| { | |
| padding-top: 8px; | |
| } | |
| /** | |
| ---------------------------------------------------------- | |
| Playlist Page | |
| ---------------------------------------------------------- | |
| */ | |
| /** | |
| * <ytd-browse> | |
| */ | |
| ytd-browse[page-subtype="playlist"] ytd-two-column-browse-results-renderer.ytd-browse | |
| { | |
| width: 85%; | |
| } | |
| /** | |
| * #video-title | |
| */ | |
| #video-title.ytd-video-renderer, | |
| #video-title.ytd-playlist-video-renderer | |
| { | |
| color: var(--color-accent-blue); | |
| } | |
| #video-title.ytd-video-renderer:hover, | |
| #video-title.ytd-playlist-video-renderer:hover, | |
| #guide-links-primary.ytd-guide-renderer > a:hover, | |
| #guide-links-secondary.ytd-guide-renderer > a:hover | |
| { | |
| filter: brightness(1.25); | |
| transition: var(--transition-250); | |
| } | |
| /** | |
| ---------------------------------------------------------- | |
| Header Bar (Masthead) | |
| ---------------------------------------------------------- | |
| */ | |
| /** | |
| * #progress | |
| */ | |
| yt-page-navigation-progress | |
| { | |
| background-color: var(--color-background-4) !important; | |
| } | |
| #progress.yt-page-navigation-progress | |
| { | |
| height: 4px !important; | |
| background-color: var(--color-accent-blue) !important; | |
| box-shadow: 0px 0 1px white, 0 2px 8px var(--color-accent-blue), 0 2px 6px var(--color-accent-blue), 0 2px 6px var(--color-accent-blue), 0 2px 6px var(--color-accent-blue); | |
| } | |
| /** | |
| * <ytd-masthead> | |
| */ | |
| ytd-masthead | |
| { | |
| background: var(--gradient-4); | |
| } | |
| ytd-masthead[mode="legacy"] ytd-searchbox.ytd-masthead, | |
| ytd-masthead[mode="material-left"] ytd-searchbox.ytd-masthead | |
| { | |
| -webkit-justify-content: center; | |
| justify-content: center; | |
| } | |
| ytd-masthead #buttons.ytd-masthead [is-icon-button].ytd-masthead | |
| { | |
| filter: opacity(0.5); | |
| } | |
| ytd-masthead #guide-icon.ytd-masthead | |
| { | |
| fill: var(--color-text-1); | |
| } | |
| ytd-masthead #masthead-container.ytd-app::after | |
| { | |
| box-shadow: var(--box-shadow-1); | |
| } | |
| /** | |
| * <ytd-searchbox> | |
| */ | |
| ytd-searchbox | |
| { | |
| height: 40px; | |
| } | |
| ytd-searchbox[mode=legacy] #container.ytd-searchbox, | |
| ytd-searchbox[mode=legacy-centered] #container.ytd-searchbox | |
| { | |
| border-color: transparent !important; | |
| box-shadow: none !important; | |
| background: var(--color-background-1-translucent-25); | |
| } | |
| ytd-searchbox #search-icon-legacy.ytd-searchbox | |
| { | |
| border-radius: 0; | |
| } | |
| ytd-searchbox #search::-webkit-input-placeholder | |
| { | |
| color: var(--color-text-5-translucent-50); | |
| } | |
| /** | |
| * <ytd-topbar-logo-renderer> | |
| */ | |
| ytd-topbar-logo-renderer svg path | |
| { | |
| fill: var(--color-text-1); | |
| } | |
| /** | |
| ---------------------------------------------------------- | |
| Sidemenu (App Drawer) | |
| ---------------------------------------------------------- | |
| */ | |
| /** | |
| * <app-drawer> | |
| */ | |
| app-drawer #contentContainer.app-drawer, | |
| app-drawer #guide-content.ytd-app | |
| { | |
| background: transparent; | |
| } | |
| app-drawer #header.ytd-app | |
| { | |
| background: var(--gradient-4); | |
| border-bottom: none !important; | |
| } | |
| app-drawer #guide-inner-content | |
| { | |
| background: var(--color-background-5); | |
| } | |
| app-drawer #guide-section-title a | |
| { | |
| background: var(--gradient-1); | |
| -webkit-background-clip: text; | |
| /*noinspection CssInvalidPropertyValue*/ | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| app-drawer ytd-guide-entry-renderer | |
| { | |
| border-radius: 0; | |
| } | |
| app-drawer #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover .guide-icon.ytd-guide-entry-renderer, | |
| app-drawer ytd-guide-entry-renderer[active] .guide-icon.ytd-guide-entry-renderer, | |
| app-drawer ytd-guide-entry-renderer[focused] .guide-icon.ytd-guide-entry-renderer | |
| { | |
| color: var(--yt-primary-color); | |
| } | |
| app-drawer ytd-guide-entry-renderer[active] | |
| { | |
| background: var(--gradient-2); | |
| } | |
| app-drawer #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover | |
| { | |
| background: var(--gradient-2-translucent-50); | |
| } | |
| /** | |
| app-drawer #scrim.app-drawer | |
| { | |
| position: fixed; | |
| background-color: var(--color-background-1); | |
| opacity: 1 !important; | |
| transition: var(--transition-500) !important; | |
| filter: var(--filter-opacity-0); | |
| } | |
| app-drawer #scrim.app-drawer.visible | |
| { | |
| filter: var(--filter-opacity-75); | |
| } | |
| */ | |
| /** | |
| ---------------------------------------------------------- | |
| Context Menu | |
| ---------------------------------------------------------- | |
| */ | |
| /** | |
| * <ytd-menu-service-item-renderer> | |
| */ | |
| ytd-menu-service-item-renderer:hover, | |
| #items.yt-multi-page-menu-section-renderer > *.yt-multi-page-menu-section-renderer:hover | |
| { | |
| background: var(--gradient-3); | |
| background-color: var(--color-transparent); | |
| border-radius: 5px; | |
| } | |
| /** | |
| ---------------------------------------------------------- | |
| Image Thumbnails | |
| ---------------------------------------------------------- | |
| */ | |
| /** | |
| * <ytd-img-shadow> | |
| */ | |
| ytd-img-shadow | |
| { | |
| opacity: 1 !important; | |
| transition: var(--transition-750) !important; | |
| filter: var(--filter-opacity-0) !important; | |
| } | |
| ytd-img-shadow[loaded] | |
| { | |
| filter: var(--filter-opacity-100); | |
| } | |
| /** | |
| ---------------------------------------------------------- | |
| Subscribe Button | |
| ---------------------------------------------------------- | |
| */ | |
| /** | |
| * <ytd-subscribe-button-renderer> | |
| */ | |
| ytd-subscribe-button-renderer paper-button.ytd-subscribe-button-renderer, | |
| ytd-subscribe-button-renderer paper-button[subscribed] span.deemphasize.yt-formatted-string, | |
| ytd-subscribe-button-renderer ytd-toggle-button-renderer #button.ytd-toggle-button-renderer | |
| { | |
| color: var(--yt-primary-color) !important; | |
| } | |
| ytd-subscribe-button-renderer paper-button[subscribed].ytd-subscribe-button-renderer, | |
| ytd-subscribe-button-renderer #notification-preference-toggle-button yt-icon-button[aria-pressed="true"] | |
| { | |
| background-color: var(--color-confirmation); | |
| } | |
| ytd-subscribe-button-renderer paper-button.ytd-subscribe-button-renderer:not([subscribed]), | |
| ytd-subscribe-button-renderer #notification-preference-toggle-button yt-icon-button[aria-pressed="false"] | |
| { | |
| background-color: var(--color-warning); | |
| } | |
| ytd-subscribe-button-renderer #notification-preference-toggle-button yt-icon-button | |
| { | |
| height: 39px; | |
| } | |
| ytd-subscribe-button-renderer paper-button, | |
| ytd-subscribe-button-renderer ytd-toggle-button-renderer yt-icon-button | |
| { | |
| border-radius: var(--border-radius-1); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment