mirror of
https://git.sr.ht/~azikx/userstyles
synced 2024-10-30 11:26:20 +00:00
1417 lines
50 KiB
CSS
1417 lines
50 KiB
CSS
/* ==UserStyle==
|
|
@name Youtube paradisa
|
|
@namespace github.com/axax-loll/userstyles/
|
|
@homepageURL https://github.com/axax-loll/userstyles/tree/main
|
|
@version 1.0.2
|
|
@updateURL https://github.com/axax-loll/userstyles/tree/main/youtube/youtube.user.css
|
|
@supportURL https://github.com/axax-loll/userstyles/tree/main
|
|
@description Paradise for Youtube
|
|
@author azikx
|
|
@license MIT
|
|
|
|
@preprocessor less
|
|
@var select darkFlavor "Dark Flavor" ["paradisa:Paradise"]
|
|
@var select accentColor "Accent" ["pony:pony", "flaminga:flaminga", "pink:pink", "purple:purple*", "red:red", "oranga:oranga", "ogran:ogran", "yellow:yellow", "green:green", "teal:teal", "blue:blue", "sapphire:sapphire", "sky:sky", "lavender:lavender", "grey:gray"]
|
|
|
|
@var checkbox logo "Enable YouTube logo" 1
|
|
@var checkbox oled "Enable black bars" 0
|
|
==/UserStyle== */
|
|
|
|
@-moz-document domain('youtube.com') {
|
|
:root[dark] {
|
|
#paradisa(@darkFlavor, @accentColor);
|
|
}
|
|
|
|
#paradisa(@lookup, @accent) {
|
|
@pony: @paradisa[@@lookup][@pony];
|
|
@flaminga: @paradisa[@@lookup][@flaminga];
|
|
@pink: @paradisa[@@lookup][@pink];
|
|
@purple: @paradisa[@@lookup][@purple];
|
|
@red: @paradisa[@@lookup][@red];
|
|
@oranga: @paradisa[@@lookup][@oranga];
|
|
@ogran: @paradisa[@@lookup][@ogran];
|
|
@yellow: @paradisa[@@lookup][@yellow];
|
|
@green: @paradisa[@@lookup][@green];
|
|
@teal: @paradisa[@@lookup][@teal];
|
|
@sky: @paradisa[@@lookup][@sky];
|
|
@sapphire: @paradisa[@@lookup][@sapphire];
|
|
@blue: @paradisa[@@lookup][@blue];
|
|
@lavender: @paradisa[@@lookup][@lavender];
|
|
@text: @paradisa[@@lookup][@text];
|
|
@subtext1: @paradisa[@@lookup][@subtext1];
|
|
@grey: @paradisa[@@lookup][@grey];
|
|
@overlay2: @paradisa[@@lookup][@overlay2];
|
|
@overlay1: @paradisa[@@lookup][@overlay1];
|
|
@overlay0: @paradisa[@@lookup][@overlay0];
|
|
@surface2: @paradisa[@@lookup][@surface2];
|
|
@surface1: @paradisa[@@lookup][@surface1];
|
|
@surface0: @paradisa[@@lookup][@surface0];
|
|
@base: @paradisa[@@lookup][@base];
|
|
@mantle: @paradisa[@@lookup][@mantle];
|
|
@crust: @paradisa[@@lookup][@crust];
|
|
@accent-color: @paradisa[@@lookup][@@accent];
|
|
@text-filter: @paradisa[@@lookup][@text_filter];
|
|
|
|
@white: if(@lookup =latte, @base, @text);
|
|
@black: if(@lookup =latte, @text, @base);
|
|
|
|
color: @text;
|
|
background: @base !important;
|
|
color-scheme: if(@lookup =latte, light, dark);
|
|
|
|
::selection {
|
|
background-color: fade(@accent-color, 30%);
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
&::placeholder {
|
|
color: @grey !important;
|
|
}
|
|
}
|
|
|
|
&,
|
|
[dark],
|
|
[system-icons],
|
|
[darker-dark-theme],
|
|
&[dark],
|
|
&[system-icons],
|
|
&[darker-dark-theme] {
|
|
--yt-spec-white-1: @text !important;
|
|
--yt-spec-white-2: @grey !important;
|
|
--yt-spec-white-3: @subtext1 !important;
|
|
--yt-spec-white-4: darken(@subtext1, 5%) !important;
|
|
--yt-spec-black-1: @overlay1 !important;
|
|
--yt-spec-black-2: @overlay0 !important;
|
|
--yt-spec-black-3: @surface2 !important;
|
|
--yt-spec-black-4: @surface1 !important;
|
|
--yt-spec-black-pure: @surface0 !important;
|
|
--yt-spec-grey-1: @text !important;
|
|
--yt-spec-grey-2: @grey !important;
|
|
--yt-spec-grey-3: @subtext1 !important;
|
|
--yt-spec-grey-4: @overlay2 !important;
|
|
--yt-spec-grey-5: @overlay1 !important;
|
|
--yt-brand-youtube-red: @accent-color !important;
|
|
--yt-brand-medium-red: @accent-color !important;
|
|
--yt-brand-light-red: @accent-color !important;
|
|
--yt-spec-red-30: @ogran !important;
|
|
--yt-spec-red-70: @red !important;
|
|
--yt-spec-pale-blue: @sky !important;
|
|
--yt-spec-light-blue: @sky !important;
|
|
--yt-spec-dark-blue: @sapphire !important;
|
|
--yt-spec-navy-blue: @teal !important;
|
|
--yt-spec-light-green: @green !important;
|
|
--yt-spec-dark-green: @green !important;
|
|
--yt-spec-yellow: @ogran !important;
|
|
--yt-spec-black-pure-alpha-5: @grey !important;
|
|
--yt-spec-black-pure-alpha-10: @overlay2 !important;
|
|
--yt-spec-black-pure-alpha-15: fadeout(@crust, 0.15) !important;
|
|
--yt-spec-black-pure-alpha-30: fadeout(@crust, 0.3) !important;
|
|
--yt-spec-black-pure-alpha-60: fadeout(@crust, 0.6) !important;
|
|
--yt-spec-black-pure-alpha-80: fadeout(@crust, 0.8) !important;
|
|
--yt-spec-black-1-alpha-98: fadeout(@crust, 0.98) !important;
|
|
--yt-spec-black-1-alpha-95: fadeout(@crust, 0.95) !important;
|
|
--yt-spec-white-1-alpha-10: fadeout(@text, 0.1) !important;
|
|
--yt-spec-white-1-alpha-20: fadeout(@text, 0.2) !important;
|
|
--yt-spec-white-1-alpha-25: fadeout(@text, 0.25) !important;
|
|
--yt-spec-white-1-alpha-30: fadeout(@text, 0.3) !important;
|
|
--yt-spec-white-1-alpha-70: fadeout(@text, 0.7) !important;
|
|
--yt-spec-white-1-alpha-95: fadeout(@text, 0.95) !important;
|
|
--yt-spec-white-1-alpha-98: fadeout(@text, 0.98) !important;
|
|
--yt-brand-medium-red-alpha-90: fadeout(@accent-color, 0.9) !important;
|
|
--yt-brand-medium-red-alpha-30: fadeout(@accent-color, 0.3) !important;
|
|
--yt-brand-light-red-alpha-30: fadeout(@accent-color, 0.3) !important;
|
|
--yt-spec-light-blue-alpha-30: fadeout(@sapphire, 0.3) !important;
|
|
--yt-spec-dark-blue-alpha-30: fadeout(@sapphire, 0.3) !important;
|
|
|
|
--yt-spec-base-background: @base !important;
|
|
--yt-spec-raised-background: @base !important;
|
|
--yt-spec-menu-background: @mantle !important;
|
|
--yt-spec-inverted-background: @text !important;
|
|
--yt-spec-additive-background: fadeout(@surface1, 0.1) !important;
|
|
--yt-spec-outline: @surface0 !important;
|
|
--yt-spec-shadow: fadeout(@crust, 0.25) !important;
|
|
--yt-spec-text-primary: @text !important;
|
|
--yt-spec-text-secondary: @grey !important;
|
|
--yt-spec-text-disabled: @subtext1 !important;
|
|
--yt-spec-text-primary-inverse: @crust !important;
|
|
--yt-spec-call-to-action: @accent-color !important;
|
|
--yt-spec-call-to-action-inverse: @accent-color !important;
|
|
--yt-spec-suggested-action: fadeout(@accent-color, 80%) !important;
|
|
--yt-spec-suggested-action-inverse: @text !important;
|
|
--yt-spec-icon-active-other: @text !important;
|
|
--yt-spec-button-chip-background-hover: @surface1 !important;
|
|
--yt-spec-touch-response: @surface0 !important;
|
|
|
|
--yt-spec-touch-response-inverse: @accent-color !important;
|
|
--yt-spec-brand-icon-active: @accent-color !important;
|
|
--yt-spec-brand-button-background: @accent-color !important;
|
|
--yt-spec-brand-link-text: @sapphire !important;
|
|
--yt-spec-wordmark-text: @text !important;
|
|
--yt-spec-error-indicator: @red !important;
|
|
--yt-spec-themed-blue: @accent-color !important;
|
|
--yt-spec-themed-green: @green !important;
|
|
--yt-spec-ad-indicator: @teal !important;
|
|
--yt-spec-themed-overlay-background: fadeout(@crust, 0.8) !important;
|
|
--yt-spec-commerce-badge-background: @green !important;
|
|
--yt-spec-static-brand-red: @accent-color !important;
|
|
--yt-spec-static-brand-white: @text !important;
|
|
--yt-spec-static-brand-black: @base !important;
|
|
--yt-spec-static-clear-color: fadeout(@crust, 0) !important;
|
|
--yt-spec-static-clear-black: fadeout(@crust, 0) !important;
|
|
--yt-spec-static-ad-yellow: @ogran !important;
|
|
--yt-spec-static-grey: @grey !important;
|
|
--yt-spec-static-overlay-background-solid: @crust !important;
|
|
--yt-spec-static-overlay-background-heavy: @crust;
|
|
--yt-spec-static-overlay-background-medium: fade(@crust, 50%) !important;
|
|
--yt-spec-static-overlay-background-medium-light: fadeout(@crust,
|
|
0.3) !important;
|
|
--yt-spec-static-overlay-background-light: fadeout(@crust,
|
|
0.1) !important;
|
|
--yt-spec-static-overlay-text-primary: @text !important;
|
|
--yt-spec-static-overlay-text-secondary: fadeout(@grey,
|
|
0.7) !important;
|
|
--yt-spec-static-overlay-text-disabled: fadeout(@grey,
|
|
0.3) !important;
|
|
--yt-spec-static-overlay-call-to-action: @accent-color !important;
|
|
--yt-spec-static-overlay-icon-active-other: @text !important;
|
|
--yt-spec-static-overlay-icon-inactive: @surface1 !important;
|
|
--yt-spec-static-overlay-icon-disabled: @surface2 !important;
|
|
--yt-spec-static-overlay-button-primary: @accent-color !important;
|
|
--yt-spec-static-overlay-button-secondary: @surface0 !important;
|
|
--yt-spec-static-overlay-touch-response: @overlay1 !important;
|
|
--yt-spec-static-overlay-touch-response-inverse: @surface1 !important;
|
|
--yt-spec-static-overlay-background-brand: @accent-color !important;
|
|
--yt-spec-assistive-feed-themed-gradient-1: @grey !important;
|
|
--yt-spec-assistive-feed-themed-gradient-2: @lavender !important;
|
|
--yt-spec-assistive-feed-themed-gradient-3: @red !important;
|
|
--yt-spec-brand-background-solid: @base !important;
|
|
--yt-spec-brand-background-primary: @base !important;
|
|
--yt-spec-brand-background-secondary: @mantle !important;
|
|
--yt-spec-general-background-a: @base !important;
|
|
--yt-spec-general-background-b: @base !important;
|
|
--yt-spec-general-background-c: @crust !important;
|
|
--yt-spec-error-background: @base !important;
|
|
--yt-spec-10-percent-layer: @surface1 !important;
|
|
--yt-spec-snackbar-background: @mantle !important;
|
|
--yt-spec-snackbar-background-updated: @mantle !important;
|
|
--yt-spec-badge-chip-background: if(@lookup =latte,
|
|
@crust,
|
|
@surface0 ) !important;
|
|
--yt-spec-verified-badge-background: @overlay0 !important;
|
|
--yt-spec-call-to-action-fadeoutd: fadeout(@sapphire, 0.3) !important;
|
|
--yt-spec-call-to-action-hover: @accent-color !important;
|
|
--yt-spec-brand-button-background-hover: @accent-color !important;
|
|
--yt-spec-brand-link-text-fadeoutd: fadeout(@accent-color,
|
|
0.3) !important;
|
|
--yt-spec-filled-button-focus-outline: @surface0 !important;
|
|
--yt-spec-static-overlay-button-hover: @surface1 !important;
|
|
--yt-spec-mono-filled-hover: @surface1 !important;
|
|
--yt-spec-commerce-filled-hover: @accent-color !important;
|
|
--yt-spec-mono-tonal-hover: @surface1 !important;
|
|
--yt-spec-commerce-tonal-hover: @surface2 !important;
|
|
--yt-spec-static-overlay-filled-hover: @overlay1 !important;
|
|
--yt-spec-static-overlay-tonal-hover: @surface1 !important;
|
|
--yt-spec-paper-tab-ink: fadeout(@text, 0.3);
|
|
--yt-spec-filled-button-text: @text !important;
|
|
--yt-spec-selected-nav-text: @text !important;
|
|
--iron-icon-fill-color: @text !important;
|
|
|
|
/* Search bar */
|
|
--ytd-searchbox-border-color: @surface0 !important;
|
|
--ytd-searchbox-legacy-border-color: @surface0 !important;
|
|
--ytd-searchbox-legacy-border-shadow-color: fadeout(@crust, 0) !important;
|
|
--ytd-searchbox-legacy-button-color: @mantle !important;
|
|
--ytd-searchbox-legacy-button-border-color: @surface0 !important;
|
|
--ytd-searchbox-legacy-button-focus-color: @accent-color !important;
|
|
--ytd-searchbox-legacy-button-hover-color: @mantle !important;
|
|
--ytd-searchbox-legacy-button-hover-border-color: @surface0 !important;
|
|
--ytd-searchbox-legacy-button-icon-color: @accent-color !important;
|
|
--ytd-searchbox-background: @base !important;
|
|
--ytd-searchbox-text-color: @text !important;
|
|
|
|
/* System icons */
|
|
--yt-spec-icon-inactive: @text !important;
|
|
--yt-spec-icon-disabled: @overlay1 !important;
|
|
--yt-spec-brand-icon-inactive: @overlay2 !important;
|
|
|
|
/* Yt video Page */
|
|
--yt-live-chat-background-color: @base !important;
|
|
--yt-live-chat-action-panel-background-color: @base !important;
|
|
--yt-live-chat-secondary-background-color: @surface1;
|
|
--yt-live-chat-toast-background-color: @surface2 !important;
|
|
--yt-live-chat-mode-change-background-color: @base !important;
|
|
--yt-live-chat-secondary-text-color: @grey !important;
|
|
--yt-live-chat-tertiary-text-color: fadeout(@text, 0.54) !important;
|
|
--yt-live-chat-text-input-field-inactive-underline-color: @grey !important;
|
|
--yt-live-chat-text-input-field-placeholder-color: @grey !important;
|
|
--yt-live-chat-enabled-send-button-color: @text !important;
|
|
--yt-live-chat-disabled-icon-button-color: @subtext1 !important;
|
|
--yt-live-chat-picker-button-hover-color: @accent-color !important;
|
|
--yt-live-chat-mention-background-color: @accent-color !important;
|
|
--yt-live-chat-mention-text-color: @text !important;
|
|
--yt-live-chat-deleted-message-color: @grey;
|
|
--yt-live-chat-deleted-message-bar-color: @subtext1 !important;
|
|
--yt-live-chat-reconnect-message-color: @text !important;
|
|
--yt-live-chat-disabled-button-background-color: @overlay0 !important;
|
|
--yt-live-chat-sub-panel-background-color: @base !important;
|
|
--yt-live-chat-sub-panel-background-color-transparent: @mantle !important;
|
|
--yt-live-chat-moderator-color: @lavender !important;
|
|
--yt-live-chat-owner-color: @ogran !important;
|
|
--yt-live-chat-message-highlight-background-color: @base !important;
|
|
--yt-live-chat-sponsor-color: @green !important;
|
|
--yt-live-chat-overlay-color: fadeout(@mantle, 0.5);
|
|
--yt-live-chat-dialog-background-color: @base !important;
|
|
--yt-emoji-picker-variant-selector-bg-color: @base !important;
|
|
--yt-live-chat-moderation-mode-hover-background-color: fadeout(@mantle,
|
|
0.3) !important;
|
|
--yt-grey: @grey !important;
|
|
--yt-live-chat-text-input-field-suggestion-background-color: @grey !important;
|
|
--yt-live-chat-text-input-field-suggestion-background-color-hover: @subtext1 !important;
|
|
--yt-emoji-picker-search-background-color: @surface0 !important;
|
|
--yt-emoji-picker-search-color: @text !important;
|
|
--yt-emoji-picker-search-placeholder-color: @accent-color !important;
|
|
--yt-live-chat-slider-active-color: @accent-color !important;
|
|
--yt-live-chat-slider-container-color: @surface0 !important;
|
|
--yt-live-chat-slider-markers-color: @text !important;
|
|
--yt-live-chat-banner-gradient-scrim: linear-gradient(@mantle,
|
|
transparent) !important;
|
|
--yt-live-chat-action-panel-gradient-scrim: linear-gradient(to top,
|
|
@mantle,
|
|
transparent) !important;
|
|
--yt-live-chat-automod-button-background-color-hover: fadeout(@crust,
|
|
0.5) !important;
|
|
--yt-live-chat-automod-button-explanation-color: fadeout(@accent-color,
|
|
0.7) !important;
|
|
--yt-live-chat-shimmer-background-color: fadeout(@crust, 0.4) !important;
|
|
--yt-live-chat-shimmer-linear-gradient: linear-gradient(0deg,
|
|
fadeout(@text, 0.1) 40%,
|
|
fadeout(@base, 0.3) 50%,
|
|
fadeout(@text, 0.1) 60%) !important;
|
|
--yt-live-chat-vem-background-color: @mantle !important;
|
|
--yt-live-chat-product-picker-icon-color: fadeout(@text, 0.5) !important;
|
|
--yt-live-chat-product-picker-hover-color: @overlay0 !important;
|
|
--yt-live-chat-product-picker-disabled-icon-color: fadeout(@text,
|
|
0.3) !important;
|
|
--yt-live-chat-action-panel-background-color-transparent: (null) !important;
|
|
|
|
--paper-tooltip-background: @overlay0 !important;
|
|
--paper-tooltip-text-color: @text !important;
|
|
|
|
/* Links */
|
|
--yt-endpoint-color: @accent-color !important;
|
|
--yt-endpoint-visited-color: @accent-color !important;
|
|
--yt-endpoint-hover-color: @accent-color !important;
|
|
|
|
--sb-dark-red-outline: @accent-color !important;
|
|
--sb-main-bg-color: @base !important;
|
|
--sb-main-fg-color: @text !important;
|
|
--sb-grey-bg-color: @base !important;
|
|
--sb-grey-fg-color: @grey !important;
|
|
--sb-red-bg-color: @accent-color !important;
|
|
}
|
|
|
|
&:not(.style-scope) {
|
|
--primary-text-color: @text !important;
|
|
--primary-background-color: @base !important;
|
|
--secondary-text-color: @grey !important;
|
|
--disabled-text-color: @subtext1 !important;
|
|
--divider-color: @overlay0 !important;
|
|
--error-color: @red !important;
|
|
--primary-color: @accent-color !important;
|
|
--light-primary-color: @accent-color !important;
|
|
--dark-primary-color: @blue !important;
|
|
--accent-color: @accent-color !important;
|
|
--light-accent-color: @accent-color !important;
|
|
--dark-accent-color: @accent-color !important;
|
|
--light-theme-background-color: @base !important;
|
|
--light-theme-base-color: @text !important;
|
|
--light-theme-text-color: @text !important;
|
|
--light-theme-secondary-color: @grey !important;
|
|
--light-theme-disabled-color: @subtext1 !important;
|
|
--light-theme-divider-color: @overlay0 !important;
|
|
--dark-theme-background-color: @base !important;
|
|
--dark-theme-base-color: @text !important;
|
|
--dark-theme-text-color: @text !important;
|
|
--dark-theme-secondary-color: @grey !important;
|
|
--dark-theme-disabled-color: @subtext1 !important;
|
|
--dark-theme-divider-color: @overlay0 !important;
|
|
}
|
|
|
|
/* Misc */
|
|
|
|
& when (@logo =0) {
|
|
|
|
ytd-topbar-logo-renderer,
|
|
svg.ytd-consent-bump-v2-lightbox {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#channel-name.ytd-video-meta-block {
|
|
--yt-endpoint-color: @accent-color !important;
|
|
--yt-endpoint-visited-color: @accent-color !important;
|
|
color: @accent-color !important;
|
|
}
|
|
|
|
.yt-page-navigation-progress {
|
|
background: @accent-color !important;
|
|
}
|
|
|
|
/* Selected chapter */
|
|
ytd-macro-markers-list-item-renderer {
|
|
--ytd-macro-markers-list-item-background-color: @surface0 !important;
|
|
--ytd-macro-markers-list-item-title-color: @text !important;
|
|
--ytd-macro-markers-list-item-secondary-color: @subtext1 !important;
|
|
--ytd-macro-markers-list-item-timestamp-background-color: @surface1 !important;
|
|
}
|
|
|
|
ytd-playlist-panel-video-renderer {
|
|
--yt-lightsource-section2-color: @surface1 !important;
|
|
--yt-lightsource-section4-color: @surface2 !important;
|
|
--yt-lightsource-primary-title-color: @text !important;
|
|
--yt-lightsource-secondary-title-color: @text !important;
|
|
--yt-active-playlist-panel-background-color: @surface0 !important;
|
|
}
|
|
|
|
ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .header.ytd-playlist-panel-renderer {
|
|
--iron-icon-fill-color: @text !important;
|
|
background-color: @base !important;
|
|
}
|
|
|
|
#container.ytd-masthead {
|
|
--iron-icon-fill-color: @text !important;
|
|
}
|
|
|
|
#background.ytd-masthead {
|
|
--yt-frosted-glass-desktop: @base !important;
|
|
}
|
|
|
|
ytd-feed-filter-chip-bar-renderer[expand-instead-of-scroll] #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
|
|
--iron-icon-fill-color: @text !important;
|
|
background-color: @base !important;
|
|
}
|
|
|
|
#ytd-player #container when (@oled =0) {
|
|
background: #000000 !important;
|
|
}
|
|
|
|
.ytp-progress-list when not(@lookup =latte) {
|
|
background: fade(@surface0, 80%);
|
|
}
|
|
|
|
.ytp-load-progress when not(@lookup =latte) {
|
|
background: fade(@overlay0, 100%);
|
|
}
|
|
|
|
ytd-expandable-metadata-renderer {
|
|
--yt-lightsource-section1-color: @base !important;
|
|
--yt-lightsource-section2-color: @surface0 !important;
|
|
--yt-lightsource-section3-color: @surface1 !important;
|
|
--yt-lightsource-section4-color: @surface2 !important;
|
|
--yt-lightsource-primary-title-color: @text !important;
|
|
--yt-lightsource-secondary-title-color: @grey !important;
|
|
}
|
|
|
|
yt-live-chat-renderer {
|
|
--yt-button-default-text-color: @text !important;
|
|
--yt-button-default-background-color: @base !important;
|
|
--yt-button-dark-text-color: @base !important;
|
|
--yt-button-dark-background-color: @accent-color !important;
|
|
--yt-button-payment-background-color: @accent-color !important;
|
|
}
|
|
|
|
yt-icon-button.yt-live-chat-item-list-renderer {
|
|
background-color: @accent-color;
|
|
color: @crust;
|
|
|
|
&:hover {
|
|
background-color: darken(@accent-color, 5%);
|
|
}
|
|
}
|
|
|
|
ytd-author-comment-badge-renderer:not([style*="--ytd-author-comment-badge-icon-background-color: transparent;"]) {
|
|
--yt-basic-background-color: @surface0 !important;
|
|
--yt-basic-foreground-title-color: @surface0 !important;
|
|
--ytd-author-comment-badge-background-color: @surface0 !important;
|
|
--ytd-author-comment-badge-name-color: @text !important;
|
|
--ytd-author-comment-badge-icon-color: @text !important;
|
|
}
|
|
|
|
/* Skeleton */
|
|
#guide-skeleton,
|
|
#home-container-skeleton,
|
|
#home-chips {
|
|
background-color: @base;
|
|
z-index: -1;
|
|
}
|
|
|
|
#guide-skeleton .guide-ghost-icon,
|
|
#guide-skeleton .guide-ghost-text,
|
|
.masthead-skeleton-icon,
|
|
#home-page-skeleton .skeleton-bg-color,
|
|
.watch-skeleton .skeleton-bg-color {
|
|
background-color: @surface1;
|
|
}
|
|
|
|
/* Ambient mode */
|
|
#cinematics,
|
|
#cinematic-container {
|
|
mix-blend-mode: lighten;
|
|
}
|
|
|
|
.ytp-settings-button.ytp-hd-quality-badge::after,
|
|
.ytp-settings-button.ytp-hdr-quality-badge::after,
|
|
.ytp-settings-button.ytp-4k-quality-badge::after,
|
|
.ytp-settings-button.ytp-5k-quality-badge::after,
|
|
.ytp-settings-button.ytp-8k-quality-badge::after,
|
|
.ytp-settings-button.ytp-3d-badge-grey::after,
|
|
.ytp-settings-button.ytp-3d-badge::after {
|
|
background-color: @accent-color;
|
|
}
|
|
|
|
/* Icons */
|
|
|
|
[fill="red"],
|
|
[fill="#F00"],
|
|
[fill="#FF0000"],
|
|
[fill="#f03"],
|
|
[fill="#FF0033"] {
|
|
fill: @accent-color !important;
|
|
}
|
|
|
|
[fill="white"] {
|
|
fill: if(@lookup =latte, @base, @text) !important;
|
|
}
|
|
|
|
/* verification badge */
|
|
[src*="https://www.gstatic.com/images/icons/material/system/1x/check_circle_grey600_36dp.png"] {
|
|
filter: @text-filter;
|
|
}
|
|
|
|
yt-icon.ytd-logo [fill="white"] {
|
|
fill: @crust !important;
|
|
}
|
|
|
|
.yt-spec-icon-shape {
|
|
|
|
[fill="#FAFAFA"],
|
|
[fill="#000"],
|
|
[fill="#fff"],
|
|
[fill="#FFF"],
|
|
[fill="#FFFFFF"] {
|
|
fill: @crust !important;
|
|
}
|
|
}
|
|
|
|
.yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon,
|
|
.yt-spec-icon-badge-shape {
|
|
color: @text;
|
|
}
|
|
|
|
.yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {
|
|
background-color: @accent-color !important;
|
|
color: @surface0 !important;
|
|
}
|
|
|
|
/* Buttons */
|
|
|
|
.yt-spec-button-shape-next--mono {
|
|
&.yt-spec-button-shape-next--tonal {
|
|
color: @text;
|
|
background-color: @surface0;
|
|
|
|
[fill="rgb(3,3,3)"],
|
|
[fill="rgb(0,0,0)"],
|
|
[fill="rgb(255,255,255)"] {
|
|
fill: @text !important;
|
|
}
|
|
|
|
[stroke="rgb(0,0,0)"],
|
|
[stroke="rgb(255,255,255)"] {
|
|
stroke: @text !important;
|
|
}
|
|
|
|
/* Accent for filled-in thumbs up (like button) */
|
|
[animated-icon-type="LIKE"] {
|
|
g path[fill] {
|
|
fill: @accent-color !important;
|
|
|
|
+[stroke] {
|
|
stroke: @accent-color !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: @surface1;
|
|
}
|
|
}
|
|
|
|
&.yt-spec-button-shape-next--outline {
|
|
color: @text;
|
|
border-color: @surface2;
|
|
|
|
&:hover {
|
|
background-color: @surface2;
|
|
}
|
|
}
|
|
|
|
&.yt-spec-button-shape-next--text {
|
|
color: @text;
|
|
|
|
/* Accent for filled-in thumbs up (like button) */
|
|
path[d="M3,11h3v10H3V11z M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11v10h10.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z"] {
|
|
fill: @accent-color;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: @surface1;
|
|
}
|
|
}
|
|
|
|
&.yt-spec-button-shape-next--filled {
|
|
color: @crust;
|
|
background-color: @accent-color;
|
|
|
|
&:hover {
|
|
background-color: darken(@accent-color, 5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.yt-spec-button-shape-next--disabled {
|
|
background-color: fade(@overlay0, 50%);
|
|
color: @grey;
|
|
}
|
|
|
|
.yt-spec-button-shape-next--overlay {
|
|
|
|
&.yt-spec-button-shape-next--tonal,
|
|
&.yt-spec-button-shape-next--text {
|
|
color: @text;
|
|
}
|
|
|
|
&.yt-spec-button-shape-next--filled {
|
|
color: @crust;
|
|
background-color: @accent-color;
|
|
}
|
|
}
|
|
|
|
.yt-spec-button-shape-next--call-to-action {
|
|
&.yt-spec-button-shape-next--outline {
|
|
color: @accent-color;
|
|
border-color: @surface2;
|
|
|
|
&:hover {
|
|
background-color: fade(@accent-color, 30%);
|
|
color: @accent-color;
|
|
}
|
|
}
|
|
|
|
&.yt-spec-button-shape-next--text {
|
|
color: @accent-color;
|
|
|
|
&:hover {
|
|
background-color: fade(@accent-color, 30%);
|
|
}
|
|
}
|
|
|
|
&.yt-spec-button-shape-next--filled {
|
|
color: @crust;
|
|
background-color: @accent-color;
|
|
|
|
&:hover {
|
|
background-color: lighten(@accent-color, 5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.yt-spec-button-shape-next--disabled.yt-spec-button-shape-next--filled {
|
|
color: @grey;
|
|
background-color: fade(@surface1, 70%);
|
|
}
|
|
|
|
/* Search box */
|
|
|
|
ytd-searchbox[has-focus] #container.ytd-searchbox {
|
|
border-color: @accent-color;
|
|
}
|
|
|
|
.sbsb_a {
|
|
background: var(--yt-spec-raised-background);
|
|
}
|
|
|
|
.sbdd_b {
|
|
border-color: var(--yt-spec-raised-background);
|
|
background-color: var(--yt-spec-raised-background);
|
|
}
|
|
|
|
.sbpqs_a,
|
|
.gsfs {
|
|
color: var(--yt-spec-text-primary);
|
|
}
|
|
|
|
.sbsb_i {
|
|
color: var(--yt-spec-call-to-action);
|
|
}
|
|
|
|
.sbsb_d {
|
|
background-color: var(--yt-spec-additive-background);
|
|
}
|
|
|
|
.sbdd_c {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* "Suggestion removed" */
|
|
.sbpqs_c {
|
|
color: @overlay1;
|
|
}
|
|
|
|
.sbpqs_a::before,
|
|
.sbqs_c::before {
|
|
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="1 1 27 27" width="24" focusable="false" style="width:100%;height:100%" pointer-events="none" display="block"><path fill="@{text}" d="m20.87 20.17-5.59-5.59A6.96 6.96 0 0 0 17 10c0-3.87-3.13-7-7-7s-7 3.13-7 7a6.995 6.995 0 0 0 11.58 5.29l5.59 5.59zM10 16c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6"/></svg>'
|
|
);
|
|
content: url("data:image/svg+xml,@{svg}");
|
|
background: none;
|
|
}
|
|
|
|
/* Video description */
|
|
|
|
#description {
|
|
|
|
[style*="color: rgb(255, 255, 255);"],
|
|
[style*="color: rgb(19, 19, 19);"] {
|
|
color: @text !important;
|
|
}
|
|
}
|
|
|
|
.yt-core-attributed-string__link--call-to-action-color {
|
|
color: @accent-color;
|
|
}
|
|
|
|
.YtwCourseProgressViewModelHostProgressTitle,
|
|
.YtwCourseProgressViewModelHostProgressSubtitle {
|
|
color: @text;
|
|
}
|
|
|
|
.YtwCourseProgressViewModelHostProgressBar {
|
|
background-color: fade(@white, 20%);
|
|
|
|
.YtwCourseProgressViewModelHostProgressBarFill {
|
|
background-color: @text;
|
|
}
|
|
}
|
|
|
|
/* Thumbnails */
|
|
|
|
#time-status:has([aria-label="LIVE"]),
|
|
.badge[aria-label="LIVE"],
|
|
.badge[aria-label="PREMIERE"],
|
|
.badge-shape-wiz--live.badge-shape-wiz--overlay,
|
|
.badge-shape-wiz--thumbnail-live {
|
|
background: @accent-color;
|
|
color: @crust;
|
|
}
|
|
|
|
#thumbnail [style="background-color: rgba(51, 51, 51, 0.8);"],
|
|
.YtInlinePlayerControlsTopRightControlsCircleButton,
|
|
.badge-shape-wiz--default.badge-shape-wiz--overlay,
|
|
.branding-context-container-inner {
|
|
background-color: @surface0 !important;
|
|
color: @text;
|
|
}
|
|
|
|
.ytp-sb-unsubscribe {
|
|
background-color: @surface2;
|
|
color: @text;
|
|
}
|
|
|
|
.ytp-sb-subscribe {
|
|
background-color: @accent-color;
|
|
color: @crust;
|
|
}
|
|
|
|
ytd-thumbnail-overlay-resume-playback-renderer {
|
|
background-color: @surface1;
|
|
}
|
|
|
|
.badge-shape-wiz--thumbnail-default {
|
|
color: @text;
|
|
background: fade(@crust, 80%);
|
|
}
|
|
|
|
/* Panels, popups, tooltips */
|
|
|
|
.ytp-tooltip-text {
|
|
background: @surface0 !important;
|
|
color: @text;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
.ytp-popup {
|
|
background: @surface0 !important;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.ytp-panel-menu,
|
|
.ytp-panel-header,
|
|
.ytp-panel-footer,
|
|
.ytp-menuitem-label,
|
|
.ytp-premium-label,
|
|
.ytp-menuitem-content,
|
|
.ytp-menuitem-label-count,
|
|
.ytp-menu-label-secondary,
|
|
.ytd-menu-title-renderer {
|
|
color: @text;
|
|
}
|
|
|
|
.ytp-panel-header {
|
|
border-bottom-color: @surface2;
|
|
}
|
|
|
|
.ytp-panel-footer-content-link {
|
|
color: @accent-color;
|
|
}
|
|
|
|
.ytp-panel-back-button {
|
|
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 32 32" version="1.1"><path d="m19.41 20.09-4.58-4.59 4.58-4.59L18 9.5l-6 6 6 6z" fill="@{text}"/></svg>'
|
|
);
|
|
background-image: url("data:image/svg+xml,@{svg}");
|
|
}
|
|
|
|
.ytp-menuitem-toggle-checkbox {
|
|
background-color: @surface2;
|
|
|
|
&::after {
|
|
background-color: @grey;
|
|
}
|
|
}
|
|
|
|
.ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
|
|
background: @accent-color;
|
|
}
|
|
|
|
.ytp-menuitem {
|
|
&:not([aria-disabled="true"]):hover {
|
|
background-color: @surface1;
|
|
}
|
|
|
|
svg>path:not([fill="none"]) {
|
|
fill: @text !important;
|
|
}
|
|
|
|
&[aria-haspopup="true"] .ytp-menuitem-content {
|
|
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 32 32" version="1.1"><path d="m12.59 20.34 4.58-4.59-4.58-4.59L14 9.75l6 6-6 6z" fill="@{text}"/></svg>'
|
|
);
|
|
background-image: url("data:image/svg+xml,@{svg}");
|
|
}
|
|
|
|
&[role="menuitemradio"][aria-checked="true"] .ytp-menuitem-label {
|
|
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" version="1.1"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" fill="@{text}"/></svg>'
|
|
);
|
|
background-image: url("data:image/svg+xml,@{svg}");
|
|
}
|
|
}
|
|
|
|
/* Video player */
|
|
|
|
.ytp-cards-button {
|
|
.ytp-cards-button-icon {
|
|
use {
|
|
fill: @black;
|
|
}
|
|
|
|
path {
|
|
fill: @white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ytp-cards-teaser {
|
|
.ytp-cards-teaser-box {
|
|
background-color: @surface2;
|
|
border-bottom-color: @surface2;
|
|
}
|
|
|
|
.ytp-cards-teaser-text {
|
|
color: @text;
|
|
}
|
|
}
|
|
|
|
.html5-video-player {
|
|
color: @white;
|
|
|
|
.ytp-swatch-background-color,
|
|
.ytp-play-progress {
|
|
background: @accent-color !important;
|
|
}
|
|
|
|
.ytp-svg-fill,
|
|
[fill="#fff"] {
|
|
fill: @white !important;
|
|
}
|
|
|
|
.ytp-volume-slider-handle {
|
|
|
|
&,
|
|
&::before {
|
|
background-color: @white;
|
|
}
|
|
|
|
&::after {
|
|
background-color: fade(@white, 20%);
|
|
}
|
|
}
|
|
|
|
.ytp-time-current,
|
|
.ytp-time-separator,
|
|
.ytp-time-duration {
|
|
color: @white;
|
|
}
|
|
|
|
.ytp-live-badge {
|
|
&[disabled]::before {
|
|
background: @accent-color;
|
|
}
|
|
|
|
&::before {
|
|
background: @overlay0;
|
|
}
|
|
}
|
|
|
|
.ytp-button,
|
|
.ytp-subtitles-button {
|
|
&[aria-pressed]::after {
|
|
background-color: @accent-color;
|
|
}
|
|
}
|
|
|
|
/* stats for nerds */
|
|
.ytp-sfn {
|
|
background: fade(@base, 80%);
|
|
color: @text;
|
|
}
|
|
|
|
.ytp-autonav-toggle-button {
|
|
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="30" height="12" fill="none"><path opacity=".5" fill-rule="evenodd" clip-rule="evenodd" d="M22.7 11c2.95 0 5.3-2.21 5.3-5s-2.35-5-5.3-5H7.3C4.35 1 2 3.21 2 6s2.35 5 5.3 5z" fill="@{white}"/><path opacity=".5" fill-rule="evenodd" clip-rule="evenodd" d="M7.3 1C4.35 1 2 3.21 2 6s2.35 5 5.3 5h15.4A5.16 5.16 0 0 0 28 6l-.03-.54A5.16 5.16 0 0 0 22.7 1zm15.4 11c3.45 0 6.3-2.6 6.3-6s-2.85-6-6.3-6H7.3C3.85 0 1 2.6 1 6s2.85 6 6.3 6z" fill="@{black}" fill-opacity=".3"/></svg>'
|
|
);
|
|
background-image: url("data:image/svg+xml;charset=utf-8,@{svg}");
|
|
|
|
&::after {
|
|
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 17 17" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 16a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15" fill="@{surface2}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17 8.5a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0m-1 0a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0" fill="@{black}" fill-opacity=".15"/><path d="M5.5 12h2V5h-2zm4-7v7h2V5z" fill="@{white}"/></svg>'
|
|
);
|
|
background-image: url("data:image/svg+xml;charset=utf-8,@{svg}");
|
|
}
|
|
|
|
&[aria-checked="true"] {
|
|
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="30" height="12" fill="none"><path opacity=".5" fill-rule="evenodd" clip-rule="evenodd" d="M22.7 11c2.95 0 5.3-2.21 5.3-5s-2.35-5-5.3-5H7.3C4.35 1 2 3.21 2 6s2.35 5 5.3 5zm-2.7-.75v-8.5l6.7 4.26z" fill="@{white}"/><path opacity=".5" fill-rule="evenodd" clip-rule="evenodd" d="M7.3 1C4.35 1 2 3.21 2 6s2.35 5 5.3 5h15.4A5.16 5.16 0 0 0 28 6l-.03-.54A5.16 5.16 0 0 0 22.7 1zm15.4 11c3.45 0 6.3-2.6 6.3-6s-2.85-6-6.3-6H7.3C3.85 0 1 2.6 1 6s2.85 6 6.3 6z" fill="@{black}" fill-opacity=".3"/></svg>'
|
|
);
|
|
background-image: url("data:image/svg+xml;charset=utf-8,@{svg}");
|
|
|
|
&::after {
|
|
@svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 17 17" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 8.5a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0m-5 0L6.5 5v7zm-1.86 0L7.5 6.82v3.36zM8.5 16a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15" fill="@{black}" fill-opacity=".15"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0m-4 0L6.5 12V5z" fill="@{white}"/></svg>'
|
|
);
|
|
background-image: url("data:image/svg+xml;charset=utf-8,@{svg}");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Video highlight */
|
|
ytd-rich-item-renderer.ytd-rich-item-renderer-highlight {
|
|
background-color: fade(@accent-color, 10%) !important;
|
|
box-shadow: fade(@accent-color, 10%) 0 0 0 10px !important;
|
|
}
|
|
|
|
#shorts-container {
|
|
--yt-spec-static-overlay-text-primary: @white;
|
|
|
|
.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal {
|
|
color: @white;
|
|
}
|
|
|
|
.YtwFactoidRendererLabel {
|
|
color: @grey;
|
|
}
|
|
|
|
.YtwFactoidRendererValue {
|
|
color: @text;
|
|
}
|
|
|
|
ytd-reel-video-renderer:not([is-watch-while-mode]) {
|
|
.yt-spec-button-shape-with-label__label {
|
|
color: @subtext1;
|
|
}
|
|
}
|
|
|
|
ytd-reel-video-renderer[is-watch-while-mode] .yt-spec-button-shape-with-label__label {
|
|
color: @white;
|
|
}
|
|
|
|
.yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--tonal,
|
|
.YtdDesktopShortsVolumeControlsBackgroundScrim {
|
|
background-color: fade(@black, 60%);
|
|
color: @white;
|
|
}
|
|
|
|
.YtProgressBarLineProgressBarPlayed,
|
|
.YtProgressBarPlayheadProgressBarPlayheadDot {
|
|
background-color: @accent-color !important;
|
|
}
|
|
|
|
.yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--filled {
|
|
background-color: @accent-color;
|
|
color: @crust;
|
|
}
|
|
|
|
.YtdDesktopShortsVolumeControlsMuteIcon {
|
|
color: @white !important;
|
|
}
|
|
|
|
/* Buy super thanks button */
|
|
.YtdShortsSuggestedActionStaticHostContainer {
|
|
background-color: fade(@black, 60%);
|
|
|
|
.YtdShortsSuggestedActionStaticHostLeadingIcon,
|
|
.YtdShortsSuggestedActionStaticHostPrimaryText {
|
|
color: @text;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Shorts titles and views on homepage */
|
|
.ShortsLockupViewModelHostOutsideMetadataEndpoint {
|
|
color: @text;
|
|
}
|
|
|
|
.ShortsLockupViewModelHostOutsideMetadataSubhead {
|
|
color: @subtext1;
|
|
}
|
|
|
|
/* Buy super thanks bar */
|
|
#progressContainer.tp-yt-paper-progress {
|
|
background-color: @mantle !important;
|
|
}
|
|
|
|
#comment-chip-container.yt-pdg-comment-chip-renderer,
|
|
.slider-knob-inner.tp-yt-paper-slider {
|
|
background: @accent-color !important;
|
|
}
|
|
|
|
#primaryProgress.tp-yt-paper-progress {
|
|
background: linear-gradient(139deg, @ogran, @oranga, @red, @pink);
|
|
}
|
|
|
|
#container.ytd-pdg-comment-preview-renderer {
|
|
background-color: @mantle !important;
|
|
}
|
|
|
|
#comment-chip-price.yt-pdg-comment-chip-renderer,
|
|
yt-icon.yt-pdg-comment-chip-renderer {
|
|
color: @crust;
|
|
}
|
|
|
|
/* Channel pages */
|
|
.yt-tab-shape-wiz__tab {
|
|
color: @subtext1;
|
|
}
|
|
|
|
.yt-tab-shape-wiz__tab--tab-selected {
|
|
color: @text;
|
|
}
|
|
|
|
.yt-tab-group-shape-wiz__slider {
|
|
background-color: @text;
|
|
}
|
|
|
|
.yt-tab-shape-wiz:hover .yt-tab-shape-wiz__tab-bar {
|
|
background-color: @subtext1;
|
|
}
|
|
|
|
.truncated-text-wiz,
|
|
.page-header-view-model-wiz__page-header-content-metadata {
|
|
color: @subtext1;
|
|
}
|
|
|
|
.page-header-view-model-wiz__page-header-title,
|
|
[style="color: rgb(255, 255, 255);"]:has(svg),
|
|
.truncated-text-wiz__absolute-button {
|
|
color: @text !important;
|
|
}
|
|
|
|
.yt-contextual-sheet-layout-wiz {
|
|
background-color: @mantle;
|
|
|
|
.yt-list-item-view-model-wiz__container--tappable:hover {
|
|
background-color: @surface0;
|
|
}
|
|
|
|
.yt-list-item-view-model-wiz__title,
|
|
.yt-list-item-view-model-wiz__accessory,
|
|
.radio-shape-wiz__label-container {
|
|
color: @text;
|
|
}
|
|
}
|
|
|
|
/* channel details */
|
|
.profile-badge-view-model-wiz__badge-description {
|
|
color: @text !important;
|
|
}
|
|
|
|
.profile-badge-view-model-wiz__badge-subtitle {
|
|
color: @grey !important;
|
|
}
|
|
|
|
.yt-profile-identity-info-view-model-wiz__divider {
|
|
border-color: @surface0 !important;
|
|
}
|
|
|
|
/* Profiles */
|
|
.yt-profile-card-view-model-wiz {
|
|
background-color: @mantle;
|
|
}
|
|
|
|
.yt-profile-identity-info-view-model-wiz__channel-name,
|
|
.yt-profile-info-view-model-wiz__section-title,
|
|
.yt-comment-interaction-view-model-wiz__video-title,
|
|
.yt-shared-subscription-view-model-wiz__channel-name {
|
|
color: @text;
|
|
}
|
|
|
|
.yt-profile-identity-info-view-model-wiz__badge,
|
|
.yt-profile-identity-info-view-model-wiz__metadata-handle,
|
|
.yt-profile-identity-info-view-model-wiz__metadata-content,
|
|
.yt-profile-info-view-model-wiz__section-subtitle,
|
|
.yt-comment-interaction-view-model-wiz__comment-content {
|
|
color: @grey;
|
|
}
|
|
}
|
|
}
|
|
|
|
@-moz-document url-prefix('https://studio.youtube.com') {
|
|
:root[dark] {
|
|
#paradisa(@darkFlavor, @accentColor);
|
|
}
|
|
|
|
#paradisa(@lookup, @accent) {
|
|
@pony: @paradisa[@@lookup][@pony];
|
|
@flaminga: @paradisa[@@lookup][@flaminga];
|
|
@pink: @paradisa[@@lookup][@pink];
|
|
@purple: @paradisa[@@lookup][@purple];
|
|
@red: @paradisa[@@lookup][@red];
|
|
@oranga: @paradisa[@@lookup][@oranga];
|
|
@ogran: @paradisa[@@lookup][@ogran];
|
|
@yellow: @paradisa[@@lookup][@yellow];
|
|
@green: @paradisa[@@lookup][@green];
|
|
@teal: @paradisa[@@lookup][@teal];
|
|
@sky: @paradisa[@@lookup][@sky];
|
|
@sapphire: @paradisa[@@lookup][@sapphire];
|
|
@blue: @paradisa[@@lookup][@blue];
|
|
@lavender: @paradisa[@@lookup][@lavender];
|
|
@text: @paradisa[@@lookup][@text];
|
|
@subtext1: @paradisa[@@lookup][@subtext1];
|
|
@grey: @paradisa[@@lookup][@grey];
|
|
@overlay2: @paradisa[@@lookup][@overlay2];
|
|
@overlay1: @paradisa[@@lookup][@overlay1];
|
|
@overlay0: @paradisa[@@lookup][@overlay0];
|
|
@surface2: @paradisa[@@lookup][@surface2];
|
|
@surface1: @paradisa[@@lookup][@surface1];
|
|
@surface0: @paradisa[@@lookup][@surface0];
|
|
@base: @paradisa[@@lookup][@base];
|
|
@mantle: @paradisa[@@lookup][@mantle];
|
|
@crust: @paradisa[@@lookup][@crust];
|
|
@accent-color: @paradisa[@@lookup][@@accent];
|
|
|
|
color-scheme: if(@lookup =latte, light, dark);
|
|
|
|
::selection {
|
|
background-color: fade(@accent-color, 30%);
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
&::placeholder {
|
|
color: @grey !important;
|
|
}
|
|
}
|
|
|
|
[src="https://www.gstatic.com/youtube/img/creator/yt_studio_logo_white.svg"] {
|
|
@svg: escape('<svg viewBox="0 0 97.55 24" xmlns="http://www.w3.org/2000/svg"><path fill="@{accent-color}" d="M17.1 0S6.4 0 3.8.7a4.15 4.15 0 0 0-3 3C0 6.4 0 12 0 12a45 45 0 0 0 .7 8.2 4.32 4.32 0 0 0 3 3c2.7.8 13.4.8 13.4.8s10.7 0 13.4-.7a4.32 4.32 0 0 0 3-3 45 45 0 0 0 .7-8.2s.1-5.7-.6-8.3a4.32 4.32 0 0 0-3-3C27.9 0 17.1 0 17.1 0m-3.4 6.9 8.9 5.1-8.9 5.1z"/><path fill="@{text}" d="M76.3.9v4.4c0 1.1 0 2 .1 3.3h-.1A3.36 3.36 0 0 0 73.4 7c-2.3 0-3.3 2-3.3 6.6V16c0 4.9.8 6.6 3.2 6.6a3.42 3.42 0 0 0 3.2-2.4h.1l.4 2.1h2.6V.9zm6.688.4c-1.126.032-1.687.55-1.687 2.1 0 1.7.599 2.1 1.799 2.1s1.8-.5 1.8-2.1-.6-2.1-1.8-2.1zM45 1.4c-3.6 0-5 1.7-5 4.9s1.1 4.5 3.7 6.8c1.6 1.4 2.8 2.5 2.8 4.8 0 1.5-.4 2.2-1.6 2.2s-1.7-.8-1.6-3.6h-3.1c-.6 4.2.8 6.1 4.5 6.2 3.5 0 5-1.5 5-5.4 0-3.1-1.3-4.4-3.7-6.6-1.9-1.8-2.8-2.5-2.8-4.6 0-1.4.3-2.2 1.6-2.2s1.6 1.1 1.5 3.9l3.1-.2c.5-4.2-.8-6.2-4.4-6.2m7.6 1.4-.4 4.5h-1.4v2.6H52v8.8c0 2.7.4 3.8 2.6 3.8a7.4 7.4 0 0 0 3.1-.6l-.6-2.2a5.2 5.2 0 0 1-1.3.2c-.5 0-.7-.3-.7-1.7V9.9h2.2V7.3H55V2.8zM91 7c-3.3 0-4.7 1.8-4.7 6.7v2.2c0 4.7 1.1 6.7 4.6 6.7s4.7-2 4.7-6.7v-2.2C95.6 8.9 94.3 7 91 7m-31.8.3v11.4c0 2.7.9 4 2.9 4a3.46 3.46 0 0 0 3.2-2.1h.1l.3 1.8h2.7V7.3H65v12a1.51 1.51 0 0 1-1.4 1c-.7 0-1-.6-1-1.9V7.3zm22.3 0v15.1h3.2V7.3zm9.4 2c1 0 1.3 1 1.3 3.1v4.7c0 2.2-.4 3.1-1.3 3.1s-1.2-.9-1.2-3.1v-4.7c0-2 .2-3.1 1.2-3.1M75 9.4a1.56 1.56 0 0 1 1.3.8v8.5c-.2.9-.9 1.4-1.4 1.3-1 0-1.3-1-1.3-4.4v-1.9c0-3.3.3-4.3 1.4-4.3"/></svg>'
|
|
);
|
|
content: url("data:image/svg+xml,@{svg}");
|
|
}
|
|
|
|
&,
|
|
html,
|
|
html[dark],
|
|
html[dark][dark],
|
|
&[dark],
|
|
&[light],
|
|
[light],
|
|
html[light],
|
|
html[light][light] {
|
|
--yt-spec-black-pure-alpha-80: (null) !important;
|
|
--yt-spec-black-pure-alpha-60: (null) !important;
|
|
--yt-spec-black-1-alpha-98: (null) !important;
|
|
--yt-spec-black-1-alpha-95: (null) !important;
|
|
--iron-icon-fill-color: unset !important;
|
|
|
|
--yt-spec-text-primary: @text !important;
|
|
--ytcp-text-primary: @text !important;
|
|
--ytcp-text-primary-inverse: @base !important;
|
|
--ytcp-static-overlay-text-primary-inverse: @base !important;
|
|
--ytcp-wordmark-text: @text !important;
|
|
--ytcp-text-secondary: @grey !important;
|
|
--ytcp-text-disabled: @subtext1 !important;
|
|
--ytcp-overlay-text-primary: @overlay2 !important;
|
|
|
|
--ytcp-general-background-a: @base !important;
|
|
--yt-spec-base-background: @base !important;
|
|
--yt-spec-black-3: @base !important;
|
|
|
|
--yt-spec-brand-background-solid: @mantle !important;
|
|
--ytcp-brand-background-solid: @mantle !important;
|
|
--yt-spec-raised-background: @mantle !important;
|
|
--ytcp-general-background-b: @mantle !important;
|
|
--ytcp-analytics-reach-background: @mantle !important;
|
|
--yt-spec-black-2: @mantle !important;
|
|
|
|
--ytcp-general-background-c: @crust !important;
|
|
--ytcp-menu-background: @surface0 !important;
|
|
|
|
--ytcp-container-border-color: @surface0 !important;
|
|
--ytcp-container-hovered-border-color: @surface0 !important;
|
|
--ytcp-line-divider-solid: @surface0 !important;
|
|
--ytcp-container-border-color-inverse: @grey !important;
|
|
--ytcp-line-divider-solid-inverse: @grey !important;
|
|
|
|
--ytcp-call-to-action: @accent-color !important;
|
|
--ytcp-call-to-action-inverse: @mantle !important;
|
|
--ytcp-call-to-action-raised-background: @accent-color !important;
|
|
--yt-spec-brand-button-background: @accent-color !important;
|
|
--ytcp-call-to-action-raised-disabled: @surface2 !important;
|
|
--ytcp-call-to-action-raised-disabled-background: @overlay2 !important;
|
|
--ytcp-call-to-action-raised-background-inverse: @base !important;
|
|
--ytcp-call-to-action-raised-disabled-inverse: @surface2 !important;
|
|
--ytcp-call-to-action-raised-disabled-background-inverse: @overlay2 !important;
|
|
|
|
--yt-spec-brand-background-primary: @surface0 !important;
|
|
|
|
--yt-compact-link-icon-color: @overlay2 !important;
|
|
--ytcp-icon-active: @accent-color !important;
|
|
--ytcp-icon-inactive: @overlay2 !important;
|
|
--ytcp-icon-disabled: @overlay0 !important;
|
|
--ytcp-icon-active-inverse: @overlay1 !important;
|
|
--ytcp-icon-disabled-inverse: @subtext1 !important;
|
|
|
|
--ytcp-error-red: @red !important;
|
|
--ytcp-badge-red: @red !important;
|
|
--ytcp-error-red-inverse: @red !important;
|
|
--ytcp-themed-red-inverse: @red !important;
|
|
--ytcp-themed-red: @accent-color !important;
|
|
--ytcp-themed-blue: @accent-color !important;
|
|
--ytcp-badge-blue: fade(@accent-color, 30%);
|
|
--ytcp-badge-blue-solid: @blue !important;
|
|
--ytcp-themed-blue-inverse: @blue !important;
|
|
--ytcp-themed-green: @green !important;
|
|
--ytmus-genre-primary-melon: @green !important;
|
|
--ytcp-themed-green-inverse: @green !important;
|
|
--ytcp-analytics-pine: @green !important;
|
|
--ytcp-analytics-pine-inverse: @green !important;
|
|
--ytcp-analytics-parrot: @green !important;
|
|
--ytcp-themed-yellow: @ogran !important;
|
|
--ytmus-genre-primary-gold: @ogran !important;
|
|
--ytcp-yellow-inverse: @ogran !important;
|
|
--ytcp-badge-yellow: @ogran !important;
|
|
--ytcp-analytics-yellow: @ogran !important;
|
|
--ytcp-analytics-apricot: @ogran !important;
|
|
--ytcp-suggested-action: @teal !important;
|
|
--ytcp-analytics-overview: @teal !important;
|
|
--ytcp-analytics-revenue: @teal !important;
|
|
--ytcp-analytics-default-secondary: @teal !important;
|
|
--ytcp-analytics-royal-blue: @lavender !important;
|
|
--ytcp-analytics-reach: @lavender !important;
|
|
--ytcp-analytics-audience: @lavender !important;
|
|
--ytcp-analytics-engagement: @pink !important;
|
|
--ytcp-analytics-revenue-secondary: @pink !important;
|
|
--ytcp-analytics-bubblegum: @flaminga !important;
|
|
--ytmus-genre-primary-ruby: @flaminga !important;
|
|
--ytmus-genre-primary-salmon: @purple !important;
|
|
--ytmus-genre-primary-orange: @oranga !important;
|
|
--ytmus-genre-primary-sky: @sky !important;
|
|
--ytmus-genre-primary-sky-inverse: @sky !important;
|
|
|
|
--yt-spec-badge-chip-background: @surface1 !important;
|
|
--ytcp-focus-inverse: @accent-color !important;
|
|
--ytcp-focus: @accent-color !important;
|
|
--ytcp-selected-item: @accent-color !important;
|
|
--ytcp-hover-item: @overlay2 !important;
|
|
--ytcp-chip-active-focus: @accent-color !important;
|
|
--ytcp-playhead: @overlay2 !important;
|
|
--ytcp-playhead-inverse: @overlay2 !important;
|
|
}
|
|
|
|
ytcp-button.destructive.ytls-error-dialog {
|
|
color: @base !important;
|
|
}
|
|
|
|
yt-formatted-string.ytls-error-dialog,
|
|
tp-yt-iron-icon.ytls-error-dialog {
|
|
color: @text !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@-moz-document domain('m.youtube.com') {
|
|
html[darker-dark-theme] {
|
|
#paradisa(@darkFlavor, @accentColor);
|
|
}
|
|
|
|
#paradisa(@lookup, @accent) {
|
|
@pony: @paradisa[@@lookup][@pony];
|
|
@flaminga: @paradisa[@@lookup][@flaminga];
|
|
@pink: @paradisa[@@lookup][@pink];
|
|
@purple: @paradisa[@@lookup][@purple];
|
|
@red: @paradisa[@@lookup][@red];
|
|
@oranga: @paradisa[@@lookup][@oranga];
|
|
@ogran: @paradisa[@@lookup][@ogran];
|
|
@yellow: @paradisa[@@lookup][@yellow];
|
|
@green: @paradisa[@@lookup][@green];
|
|
@teal: @paradisa[@@lookup][@teal];
|
|
@sky: @paradisa[@@lookup][@sky];
|
|
@sapphire: @paradisa[@@lookup][@sapphire];
|
|
@blue: @paradisa[@@lookup][@blue];
|
|
@lavender: @paradisa[@@lookup][@lavender];
|
|
@text: @paradisa[@@lookup][@text];
|
|
@subtext1: @paradisa[@@lookup][@subtext1];
|
|
@grey: @paradisa[@@lookup][@grey];
|
|
@overlay2: @paradisa[@@lookup][@overlay2];
|
|
@overlay1: @paradisa[@@lookup][@overlay1];
|
|
@overlay0: @paradisa[@@lookup][@overlay0];
|
|
@surface2: @paradisa[@@lookup][@surface2];
|
|
@surface1: @paradisa[@@lookup][@surface1];
|
|
@surface0: @paradisa[@@lookup][@surface0];
|
|
@base: @paradisa[@@lookup][@base];
|
|
@mantle: @paradisa[@@lookup][@mantle];
|
|
@crust: @paradisa[@@lookup][@crust];
|
|
@accent-color: @paradisa[@@lookup][@@accent];
|
|
|
|
background-color: @base !important;
|
|
color: @text !important;
|
|
|
|
/* Ambient mode */
|
|
#cinematics {
|
|
mix-blend-mode: lighten;
|
|
}
|
|
|
|
.mobile-topbar-header[data-mode="watch"],
|
|
ytm-mobile-topbar-renderer:not([ambient-topbar]) {
|
|
background: @base;
|
|
}
|
|
|
|
.mobile-topbar-header[data-mode="watch"] .mobile-topbar-logo,
|
|
.mobile-topbar-header[data-mode="watch"] .mobile-topbar-title,
|
|
.mobile-topbar-header[data-mode="watch"] .mobile-topbar-header-content {
|
|
color: @text;
|
|
}
|
|
|
|
.yt-spec-bottom-sheet-layout__bottom-sheet-renderer-container,
|
|
.modern-styling {
|
|
background: @surface0;
|
|
}
|
|
|
|
.yt-spec-bottom-sheet-layout__bottom-sheet-layout-header-wrapper {
|
|
border-bottom-color: @surface0;
|
|
}
|
|
|
|
.yt-spec-bottom-sheet-layout__bottom-sheet-content {
|
|
color: @text;
|
|
}
|
|
|
|
/* Comment box */
|
|
.engagement-panel-container {
|
|
background: @mantle;
|
|
}
|
|
|
|
/* Bottom bar */
|
|
ytm-pivot-bar-renderer {
|
|
background: @mantle;
|
|
color: @text;
|
|
border-top-color: @surface0;
|
|
}
|
|
|
|
/* Chips */
|
|
.chip-bar {
|
|
background-color: @base;
|
|
}
|
|
|
|
[chip-style*="STYLE_"] {
|
|
.chip-container {
|
|
color: @text;
|
|
background-color: @surface0;
|
|
}
|
|
|
|
&.selected .chip-container {
|
|
color: @crust;
|
|
background-color: @accent-color;
|
|
}
|
|
}
|
|
|
|
/* Buttons */
|
|
|
|
.yt-spec-touch-feedback-shape--touch-response {
|
|
.yt-spec-touch-feedback-shape__fill {
|
|
background-color: @text;
|
|
}
|
|
|
|
.yt-spec-touch-feedback-shape__stroke {
|
|
border-color: @surface1;
|
|
}
|
|
}
|
|
|
|
.yt-spec-touch-feedback-shape--overlay-touch-response-inverse .yt-spec-touch-feedback-shape__fill {
|
|
background-color: @accent-color;
|
|
}
|
|
|
|
.yt-spec-touch-feedback-shape--overlay-touch-response .yt-spec-touch-feedback-shape__fill {
|
|
background-color: @text;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* prettier-ignore */
|
|
@paradisa: {
|
|
@paradisa: {
|
|
@pony: #BBB6B6;
|
|
@flaminga: #A988B0;
|
|
@pink: #A988B0;
|
|
@purple: #A988B0;
|
|
@red: #B66467;
|
|
@oranga: #B66467;
|
|
@ogran: #B66467;
|
|
@yellow: #D9BC8C;
|
|
@green: #8C977D;
|
|
@teal: #8AA6A2;
|
|
@sky: #8AA6A2;
|
|
@sapphire: #8DA3B9;
|
|
@blue: #8DA3B9;
|
|
@lavender: #8DA3B9;
|
|
@text: #E8E3E3;
|
|
@text_filter: brightness(0) saturate(100%) invert(80%) sepia(11%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%);
|
|
@subtext1: #BBB6B6;
|
|
@grey: #BBB6B6;
|
|
@overlay2: #BBB6B6;
|
|
@overlay1: #424242;
|
|
@overlay0: #424242;
|
|
@surface2: #2E2E2E;
|
|
@surface1: #2E2E2E;
|
|
@surface0: #2E2E2E;
|
|
@base: #151515;
|
|
@mantle: #1F1F1F;
|
|
@crust: #1F1F1F;
|
|
}
|
|
|
|
;
|
|
} |