diff --git a/src/chat_overlay.js b/src/chat_overlay.js new file mode 100644 index 0000000..bac00c3 --- /dev/null +++ b/src/chat_overlay.js @@ -0,0 +1,12 @@ +const message_container = document.getElementById("message_container"); + + +chrome.runtime.onMessage.addListener( + function(request, sender, sendResponse) { + + if (request.message == "messageNode"){ + message_container.innerHTML += request.node; + message_container.scrollBy(message_container.scrollHeight); + return; + } +}); \ No newline at end of file diff --git a/src/content/ChatWatcher.js b/src/content/ChatWatcher.js index 1c1c441..e575e48 100644 --- a/src/content/ChatWatcher.js +++ b/src/content/ChatWatcher.js @@ -2,8 +2,6 @@ import Emotes from './Emotes'; import Message from './Message'; import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage'; - - class ChatWatcher { constructor() { @@ -14,7 +12,6 @@ class ChatWatcher { } init() { - return new Promise((res, rej) => { this.getChatContainer().then(Emotes.init).then(() => { this.addEmotePopup(); @@ -54,8 +51,6 @@ class ChatWatcher { mutations.forEach(mutation => { - - const { addedNodes, removedNodes } = mutation; // Added nodes @@ -186,8 +181,6 @@ class ChatWatcher { emoteAppend(keysITer); } - - // add div to doc chatButtonSelectionList.appendChild(popUpDiv); diff --git a/src/content/Message.js b/src/content/Message.js index ccbfe17..1087dd6 100644 --- a/src/content/Message.js +++ b/src/content/Message.js @@ -1,6 +1,9 @@ import Emotes from './Emotes'; import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage'; +let chat_overlay_enabled = false; + + class Message { constructor(messageNode) { this.node = messageNode; @@ -17,6 +20,10 @@ class Message { this.setHtml(); this.watch(); } + + chrome.runtime.sendMessage({message: "messageNode", node: messageNode.outerHTML}, function(response) { + // dont need to do anything + }); } get textNode() { @@ -202,15 +209,7 @@ class Message { } } } - /////////////////////////////////////////////////////////////////// - - // removes color attr - removelternateLineColor(){ - this.node.classList.remove("set-background-color-one"); - this.node.classList.remove("set-background-color-two"); - } - }// end Message export default Message; \ No newline at end of file diff --git a/src/html/chat_overlay.html b/src/html/chat_overlay.html new file mode 100644 index 0000000..da0689a --- /dev/null +++ b/src/html/chat_overlay.html @@ -0,0 +1,19 @@ + + + + + + + Chat Overlay + + + + +
+ + + \ No newline at end of file diff --git a/src/html/options.html b/src/html/options.html index e4ed560..3eaba2b 100644 --- a/src/html/options.html +++ b/src/html/options.html @@ -136,6 +136,10 @@ + +
+ +
 
diff --git a/src/html/youtube_styling.css b/src/html/youtube_styling.css new file mode 100644 index 0000000..17cd713 --- /dev/null +++ b/src/html/youtube_styling.css @@ -0,0 +1,14465 @@ +html:not(.style-scope) { + --yt-live-chat-background-color: var(--yt-white); + --yt-live-chat-secondary-background-color: var(--yt-opalescence-soft-grey); + --yt-live-chat-action-panel-background-color: var(--yt-opalescence-soft-grey-opacity-lighten-3); + --yt-live-chat-action-panel-background-color-transparent: hsla(0, 0%, 97%, .8); + --yt-live-chat-mode-change-background-color: var(--yt-opalescence-soft-grey-opacity-lighten-3); + --yt-live-chat-primary-text-color: var(--yt-luna-black); + --yt-live-chat-secondary-text-color: var(--yt-luna-black-opacity-lighten-2); + --yt-live-chat-tertiary-text-color: var(--yt-luna-black-opacity-lighten-3); + --yt-live-chat-text-input-field-inactive-underline-color: #b8b8b8; + --yt-live-chat-text-input-field-placeholder-color: var(--yt-luna-black-opacity-lighten-2); + --yt-live-chat-text-input-field-underline-transition-duration: 0.25s; + --yt-live-chat-icon-button-color: var(--yt-luna-black-opacity-lighten-3); + --yt-live-chat-enabled-send-button-color: #4285f4; + --yt-live-chat-disabled-icon-button-color: var(--yt-luna-black-opacity-lighten-4); + --yt-live-chat-picker-button-color: var(--yt-luna-black-opacity-lighten-3); + --yt-live-chat-picker-button-active-color: var(--yt-luna-black-opacity-lighten-1); + --yt-live-chat-picker-button-disabled-color: var(--yt-live-chat-disabled-icon-button-color); + --yt-live-chat-picker-button-hover-color: var(--yt-luna-black-opacity-lighten-2); + --yt-live-chat-mention-background-color: #ff5722; + --yt-live-chat-mention-text-color: var(--yt-white); + --yt-live-chat-deleted-message-color: rgba(0, 0, 0, .5); + --yt-live-chat-deleted-message-bar-color: rgba(11, 11, 11, .2); + --yt-live-chat-disabled-button-background-color: var(--yt-opalescence-soft-grey); + --yt-live-chat-disabled-button-text-color: var(--yt-luna-black-opacity-lighten-3); + --yt-live-chat-sub-panel-background-color: var(--yt-opalescence-soft-grey); + --yt-live-chat-sub-panel-background-color-transparent: hsla(0, 0%, 93%, .7); + --yt-live-chat-header-background-color: var(--yt-opalescence-soft-grey-opacity-lighten-3); + --yt-live-chat-header-button-color: var(--yt-luna-black); + --yt-live-chat-count-color-early-warning: hsl(40, 76%, 55%); + --yt-live-chat-count-color-error: hsl(10, 51%, 49%); + --yt-live-chat-error-message-color: hsl(10, 51%, 49%); + --yt-live-chat-reconnect-message-color: hsla(0, 0%, 7%, 0.2); + --yt-live-chat-moderator-color: hsl(225, 84%, 66%); + --yt-live-chat-owner-color: hsl(40, 76%, 55%); + --yt-live-chat-author-chip-owner-background-color: #ffd600; + --yt-live-chat-author-chip-owner-text-color: rgba(0,0,0,0.87); + --yt-live-chat-author-chip-verified-background-color: var(--yt-spec-grey-1); + --yt-live-chat-author-chip-verified-text-color: var(--yt-spec-grey-5); + --yt-live-chat-message-highlight-background-color: #f8f8f8; + --yt-live-chat-sponsor-color: #107516; + --yt-live-chat-overlay-color: hsla(0, 0%, 0%, 0.6); + --yt-live-chat-dialog-background-color: var(--yt-white); + --yt-live-chat-dialog-text-color: var(--yt-luna-black-opacity-lighten-2); + + --yt-live-chat-banner-border-color: var(--yt-spec-10-percent-layer); + --yt-live-chat-banner-animation-duration: 0.35s; + --yt-live-chat-banner-animation-fast-duration: 0.25s; + --yt-live-chat-banner-gradient-scrim: linear-gradient(rgba(255, 255, 255, 0.95), transparent); + --yt-live-chat-banner-indeterminate-bar-background: repeating-linear-gradient(90deg, #fff, #fff 6px, #aaa 6px, #aaa 9px); + --yt-live-chat-banner-bar-animation-duration: 1s; + + --yt-live-chat-action-panel-gradient-scrim: linear-gradient(to top, rgba(255, 255, 255, 0.95), transparent); + --yt-live-chat-poll-primary-text-color: var(--yt-spec-static-overlay-text-primary); + --yt-live-chat-poll-secondary-text-color: var(--yt-spec-static-overlay-text-secondary); + --yt-live-chat-poll-tertiary-text-color: var(--yt-spec-static-overlay-text-disabled); + --yt-live-chat-poll-choice-text-color: var(--yt-live-chat-poll-primary-text-color); + --yt-live-chat-poll-choice-background-color: transparent; + --yt-live-chat-poll-choice-border-radius: 2px; + --yt-live-chat-poll-choice-border: 1px solid var(--yt-live-chat-poll-tertiary-text-color); + --yt-live-chat-poll-choice-min-height: 16px; + --yt-live-chat-poll-choice-vote-bar-background-color: var(--yt-spec-static-overlay-button-secondary); + --yt-live-chat-poll-choice-hover-color: rgba(17, 17, 16, 0.1); + --yt-live-chat-poll-choice-animation-duration: 0.5s; + --yt-live-chat-poll-choice-text-padding: 0 16px; + --yt-live-chat-poll-editor-panel-header-border-color: var(--yt-spec-10-percent-layer); + --yt-live-chat-poll-editor-start-button-color: var(--yt-spec-general-background-b); + --yt-live-chat-poll-editor-start-button-background-color: var(--yt-spec-call-to-action); + --yt-live-chat-poll-editor-start-button-background-color-disabled: var(--yt-spec-icon-disabled); + + --yt-live-interactivity-component-background-color: #264c8a; + + + --yt-live-chat-panel-animation-duration: 0.5s; + + + --yt-live-chat-universal-motion-curve: cubic-bezier(0.05, 0.00, 0.00, 1.00); + + --yt-live-chat-moderation-mode-hover-background-color: var(--yt-luna-black-opacity-lighten-4); + --yt-live-chat-additional-inline-action-button-color: var(--yt-white); + --yt-live-chat-additional-inline-action-button-background-color: hsla(0, 0%, 26%, 0.8); + --yt-live-chat-additional-inline-action-button-background-color-hover: hsla(0, 0%, 26%, 1.0); + + --yt-formatted-string-emoji-size: 24px; + --yt-live-chat-emoji-size: 24px; + + --yt-live-chat-text-input-field-suggestion-background-color: var(--yt-white); + --yt-live-chat-text-input-field-suggestion-background-color-hover: #eee; + --yt-live-chat-text-input-field-suggestion-text-color: #666; + --yt-live-chat-text-input-field-suggestion-text-color-hover: #333; + + + --yt-live-chat-ticker-arrow-background: hsl(0, 0%, 97.3%); + + --yt-emoji-picker-category-background-color: var(--yt-live-chat-action-panel-background-color-transparent); + --yt-emoji-picker-category-color: var(--yt-live-chat-secondary-text-color); + --yt-emoji-picker-category-button-color: var(--yt-live-chat-picker-button-color); + --yt-emoji-picker-search-background-color: var(--yt-white-opacity-lighten-2); + --yt-emoji-picker-search-color: var(--yt-luna-black-opacity-lighten-1); + --yt-emoji-picker-search-placeholder-color: var(--yt-luna-black-opacity-lighten-2); + + --yt-live-chat-slider-active-color: #2196f3; + --yt-live-chat-slider-container-color: #c8c8c8; + --yt-live-chat-slider-markers-color: #505050; + + --yt-live-chat-toast-action-color: #2196f3; + --yt-live-chat-toast-background-color: var(--yt-opalescence-dark-grey); + --yt-live-chat-toast-text-color: var(--yt-white); + + --yt-live-chat-automod-button-background-color: var(--yt-opalescence-soft-grey); + --yt-live-chat-automod-button-background-color-hover: var(--yt-luna-black-opacity-lighten-4); + + --yt-live-chat-creator-support-button-border-radius: 2px; + --yt-live-chat-creator-support-button-padding: 10px 16px; + --yt-live-chat-creator-support-button-font-size: inherit; + + --yt-live-chat-countdown-opacity: 0.3; + + --yt-live-chat-shimmer-background-color: rgba(136, 136, 136, 0.2); + --yt-live-chat-shimmer-linear-gradient: linear-gradient(0deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 65%); + + --yt-live-chat-vem-background-color: var(--yt-opalescence-soft-grey); + + --yt-live-chat-upsell-dialog-renderer-button-padding: 10px 16px; + + --yt-live-chat-product-picker-icon-color: rgba(17, 17, 17, 0.6); + --yt-live-chat-product-picker-hover-color: rgba(17, 17, 16, 0.1); + --yt-live-chat-product-picker-disabled-icon-color: rgba(17, 17, 17, 0.4); + + --yt-pdg-paid-stickers-tab-selection-bar-color: var(--yt-spec-dark-blue); + --yt-pdg-paid-stickers-author-name-font-size: 14px; + --yt-pdg-paid-stickers-author-subtext-font-size: 13px; + --yt-pdg-paid-stickers-margin-left: 38px; + --yt-live-chat-ninja-message-background-color: transparent; + } + + html:not(.style-scope)[dark] { + --yt-live-chat-background-color: #191919; + --yt-live-chat-action-panel-background-color: #282828; + --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8); + --yt-live-chat-secondary-background-color: #282828; + --yt-live-chat-toast-text-color: var(--yt-white); + --yt-live-chat-toast-background-color: #323232; + --yt-live-chat-mode-change-background-color: #333; + --yt-live-chat-primary-text-color: var(--yt-white); + --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-text-input-field-inactive-underline-color: #666; + --yt-live-chat-text-input-field-placeholder-color: #666; + --yt-live-chat-icon-button-color: var(--yt-live-chat-primary-text-color); + --yt-live-chat-enabled-send-button-color: #fff; + --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-live-chat-picker-button-active-color: var(--yt-white); + --yt-live-chat-picker-button-disabled-color: var(--yt-live-chat-disabled-icon-button-color); + --yt-live-chat-picker-button-hover-color: rgba(255, 255, 255, .74); + --yt-live-chat-mention-background-color: #ff5722; + --yt-live-chat-mention-text-color: #fff; + --yt-live-chat-deleted-message-color: rgba(255, 255, 255, 0.5); + --yt-live-chat-deleted-message-bar-color: rgba(255, 255, 255, 0.5); + --yt-live-chat-error-message-color: var(--yt-spec-brand-link-text); + --yt-live-chat-reconnect-message-color: #fff; + --yt-live-chat-disabled-button-background-color: #444; + --yt-live-chat-disabled-button-text-color: var(--yt-live-chat-secondary-text-color); + --yt-live-chat-sub-panel-background-color: #3e3e3e; + --yt-live-chat-sub-panel-background-color-transparent: rgba(62, 62, 62, .7); + --yt-live-chat-header-background-color: var(--yt-live-chat-action-panel-background-color); + --yt-live-chat-header-button-color: var(--yt-live-chat-secondary-text-color); + --yt-live-chat-moderator-color: #5e84f1; + --yt-live-chat-owner-color: #ffd600; + --yt-live-chat-message-highlight-background-color: #282828; + --yt-live-chat-author-chip-owner-text-color: var(--yt-luna-black); + --yt-live-chat-author-chip-verified-background-color: var(--yt-spec-grey-5); + --yt-live-chat-author-chip-verified-text-color: var(--yt-spec-white-4); + --yt-live-chat-sponsor-color: #2ba640; + --yt-live-chat-overlay-color: rgba(0, 0, 0, .5); + --yt-live-chat-dialog-background-color: #424242; + --yt-live-chat-dialog-text-color: var(--yt-white); + + --yt-live-chat-button-default-text-color: var(--yt-white); + --yt-live-chat-button-default-background-color: var(--yt-white-opacity-lighten-4); + --yt-live-chat-button-dark-text-color: var(--yt-white); + --yt-live-chat-button-dark-background-color: var(--yt-white-opacity-lighten-4); + + --yt-live-chat-moderation-mode-hover-background-color: rgba(255, 255, 255, 0.3); + --yt-live-chat-additional-inline-action-button-color: var(--yt-grey); + --yt-live-chat-additional-inline-action-button-background-color: var(--yt-opalescence-soft-grey-opacity-lighten-1); + --yt-live-chat-additional-inline-action-button-background-color-hover: var(--yt-opalescence-soft-grey); + + --yt-formatted-string-emoji-size: 24px; + --yt-live-chat-emoji-size: 24px; + + --yt-live-chat-text-input-field-suggestion-background-color: #3e3e3e; + --yt-live-chat-text-input-field-suggestion-background-color-hover: #343434; + --yt-live-chat-text-input-field-suggestion-text-color: var(--yt-white); + --yt-live-chat-text-input-field-suggestion-text-color-hover: var(--yt-white); + --yt-live-chat-text-input-field-placeholder-color: var(--yt-live-chat-secondary-text-color); + + --yt-live-chat-ticker-arrow-background: var(--yt-live-chat-action-panel-background-color); + + --yt-emoji-picker-category-background-color: var(--yt-live-chat-action-panel-background-color-transparent); + --yt-emoji-picker-category-color: var(--yt-live-chat-secondary-text-color); + --yt-emoji-picker-category-button-color: var(--yt-live-chat-picker-button-color); + --yt-emoji-picker-search-background-color: #444; + --yt-emoji-picker-search-color: #fff; + --yt-emoji-picker-search-placeholder-color: #999; + + --yt-live-chat-slider-active-color: #2196f3; + --yt-live-chat-slider-container-color: #515151; + --yt-live-chat-slider-markers-color: #fff; + + --yt-live-chat-banner-gradient-scrim: linear-gradient(rgba(40, 40, 40, 0.95), transparent); + --yt-live-chat-action-panel-gradient-scrim: linear-gradient(to top, rgba(40, 40, 40, 0.95), transparent); + --yt-live-chat-poll-editor-start-button-color: var(--yt-spec-icon-active-other); + --yt-live-chat-poll-editor-start-button-background-color-disabled: var(--yt-spec-grey-1); + + --yt-live-chat-automod-button-background-color: var(--yt-opalescence-grey-opacity-lighten-3); + --yt-live-chat-automod-button-background-color-hover: rgba(255, 255, 255, 0.5); + --yt-live-chat-automod-button-explanation-color: rgba(255, 255, 255, 0.7); + + --yt-live-chat-countdown-opacity: 0.5; + --yt-live-chat-shimmer-background-color: rgba(17, 17, 17, 0.4); + --yt-live-chat-shimmer-linear-gradient: linear-gradient(0deg, rgba(0, 0, 0, .1) 40%, rgba(100, 100, 100, .3) 50%, rgba(0, 0, 0, .1) 60%); + + --yt-live-chat-vem-background-color: #3e3e3e; + + --yt-live-chat-product-picker-icon-color: rgba(255, 255, 255, 0.5); + --yt-live-chat-product-picker-hover-color: rgba(68, 68, 68, 1); + --yt-live-chat-product-picker-disabled-icon-color: rgba(255, 255, 255, 0.3); + + --yt-pdg-paid-stickers-tab-selection-bar-color: var(--yt-spec-light-blue); + } + + html:not(.style-scope)[watch-color-update] { + --yt-live-chat-background-color: var(--yt-spec-general-background-a); + --yt-live-chat-header-background-color: var(--yt-spec-brand-background-primary); + --yt-live-chat-action-panel-background-color: var(--yt-spec-brand-background-primary); + --yt-live-chat-message-highlight-background-color: var(--yt-spec-brand-background-primary); + --yt-live-chat-ninja-message-background-color: var(--yt-spec-brand-background-primary); + } + + :not(.style-scope)[hidden] { + display: none !important; + } + + html:not(.style-scope) { + --layout_-_display: flex;; + + --layout-inline_-_display: inline-flex;; + + --layout-horizontal_-_display: var(--layout_-_display); --layout-horizontal_-_-ms-flex-direction: row; --layout-horizontal_-_-webkit-flex-direction: row; --layout-horizontal_-_flex-direction: row;; + + --layout-horizontal-reverse_-_display: var(--layout_-_display); --layout-horizontal-reverse_-_-ms-flex-direction: row-reverse; --layout-horizontal-reverse_-_-webkit-flex-direction: row-reverse; --layout-horizontal-reverse_-_flex-direction: row-reverse;; + + --layout-vertical_-_display: var(--layout_-_display); --layout-vertical_-_-ms-flex-direction: column; --layout-vertical_-_-webkit-flex-direction: column; --layout-vertical_-_flex-direction: column;; + + --layout-vertical-reverse_-_display: var(--layout_-_display); --layout-vertical-reverse_-_-ms-flex-direction: column-reverse; --layout-vertical-reverse_-_-webkit-flex-direction: column-reverse; --layout-vertical-reverse_-_flex-direction: column-reverse;; + + --layout-wrap_-_-ms-flex-wrap: wrap; --layout-wrap_-_-webkit-flex-wrap: wrap; --layout-wrap_-_flex-wrap: wrap;; + + --layout-wrap-reverse_-_-ms-flex-wrap: wrap-reverse; --layout-wrap-reverse_-_-webkit-flex-wrap: wrap-reverse; --layout-wrap-reverse_-_flex-wrap: wrap-reverse;; + + --layout-flex-auto_-_-ms-flex: 1 1 auto; --layout-flex-auto_-_-webkit-flex: 1 1 auto; --layout-flex-auto_-_flex: 1 1 auto;; + + --layout-flex-none_-_-ms-flex: none; --layout-flex-none_-_-webkit-flex: none; --layout-flex-none_-_flex: none;; + + --layout-flex_-_-ms-flex: 1 1 0.000000001px; --layout-flex_-_-webkit-flex: 1; --layout-flex_-_flex: 1; --layout-flex_-_-webkit-flex-basis: 0.000000001px; --layout-flex_-_flex-basis: 0.000000001px;; + + --layout-flex-2_-_-ms-flex: 2; --layout-flex-2_-_-webkit-flex: 2; --layout-flex-2_-_flex: 2;; + + --layout-flex-3_-_-ms-flex: 3; --layout-flex-3_-_-webkit-flex: 3; --layout-flex-3_-_flex: 3;; + + --layout-flex-4_-_-ms-flex: 4; --layout-flex-4_-_-webkit-flex: 4; --layout-flex-4_-_flex: 4;; + + --layout-flex-5_-_-ms-flex: 5; --layout-flex-5_-_-webkit-flex: 5; --layout-flex-5_-_flex: 5;; + + --layout-flex-6_-_-ms-flex: 6; --layout-flex-6_-_-webkit-flex: 6; --layout-flex-6_-_flex: 6;; + + --layout-flex-7_-_-ms-flex: 7; --layout-flex-7_-_-webkit-flex: 7; --layout-flex-7_-_flex: 7;; + + --layout-flex-8_-_-ms-flex: 8; --layout-flex-8_-_-webkit-flex: 8; --layout-flex-8_-_flex: 8;; + + --layout-flex-9_-_-ms-flex: 9; --layout-flex-9_-_-webkit-flex: 9; --layout-flex-9_-_flex: 9;; + + --layout-flex-10_-_-ms-flex: 10; --layout-flex-10_-_-webkit-flex: 10; --layout-flex-10_-_flex: 10;; + + --layout-flex-11_-_-ms-flex: 11; --layout-flex-11_-_-webkit-flex: 11; --layout-flex-11_-_flex: 11;; + + --layout-flex-12_-_-ms-flex: 12; --layout-flex-12_-_-webkit-flex: 12; --layout-flex-12_-_flex: 12;; + + + + --layout-start_-_-ms-flex-align: start; --layout-start_-_-webkit-align-items: flex-start; --layout-start_-_align-items: flex-start;; + + --layout-center_-_-ms-flex-align: center; --layout-center_-_-webkit-align-items: center; --layout-center_-_align-items: center;; + + --layout-end_-_-ms-flex-align: end; --layout-end_-_-webkit-align-items: flex-end; --layout-end_-_align-items: flex-end;; + + --layout-baseline_-_-ms-flex-align: baseline; --layout-baseline_-_-webkit-align-items: baseline; --layout-baseline_-_align-items: baseline;; + + + + --layout-start-justified_-_-ms-flex-pack: start; --layout-start-justified_-_-webkit-justify-content: flex-start; --layout-start-justified_-_justify-content: flex-start;; + + --layout-center-justified_-_-ms-flex-pack: center; --layout-center-justified_-_-webkit-justify-content: center; --layout-center-justified_-_justify-content: center;; + + --layout-end-justified_-_-ms-flex-pack: end; --layout-end-justified_-_-webkit-justify-content: flex-end; --layout-end-justified_-_justify-content: flex-end;; + + --layout-around-justified_-_-ms-flex-pack: distribute; --layout-around-justified_-_-webkit-justify-content: space-around; --layout-around-justified_-_justify-content: space-around;; + + --layout-justified_-_-ms-flex-pack: justify; --layout-justified_-_-webkit-justify-content: space-between; --layout-justified_-_justify-content: space-between;; + + --layout-center-center_-_-ms-flex-align: var(--layout-center_-_-ms-flex-align); --layout-center-center_-_-webkit-align-items: var(--layout-center_-_-webkit-align-items); --layout-center-center_-_align-items: var(--layout-center_-_align-items); --layout-center-center_-_-ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); --layout-center-center_-_-webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content); --layout-center-center_-_justify-content: var(--layout-center-justified_-_justify-content);; + + + + --layout-self-start_-_-ms-align-self: flex-start; --layout-self-start_-_-webkit-align-self: flex-start; --layout-self-start_-_align-self: flex-start;; + + --layout-self-center_-_-ms-align-self: center; --layout-self-center_-_-webkit-align-self: center; --layout-self-center_-_align-self: center;; + + --layout-self-end_-_-ms-align-self: flex-end; --layout-self-end_-_-webkit-align-self: flex-end; --layout-self-end_-_align-self: flex-end;; + + --layout-self-stretch_-_-ms-align-self: stretch; --layout-self-stretch_-_-webkit-align-self: stretch; --layout-self-stretch_-_align-self: stretch;; + + --layout-self-baseline_-_-ms-align-self: baseline; --layout-self-baseline_-_-webkit-align-self: baseline; --layout-self-baseline_-_align-self: baseline;; + + + + --layout-start-aligned_-_-ms-flex-line-pack: start; --layout-start-aligned_-_-ms-align-content: flex-start; --layout-start-aligned_-_-webkit-align-content: flex-start; --layout-start-aligned_-_align-content: flex-start;; + + --layout-end-aligned_-_-ms-flex-line-pack: end; --layout-end-aligned_-_-ms-align-content: flex-end; --layout-end-aligned_-_-webkit-align-content: flex-end; --layout-end-aligned_-_align-content: flex-end;; + + --layout-center-aligned_-_-ms-flex-line-pack: center; --layout-center-aligned_-_-ms-align-content: center; --layout-center-aligned_-_-webkit-align-content: center; --layout-center-aligned_-_align-content: center;; + + --layout-between-aligned_-_-ms-flex-line-pack: justify; --layout-between-aligned_-_-ms-align-content: space-between; --layout-between-aligned_-_-webkit-align-content: space-between; --layout-between-aligned_-_align-content: space-between;; + + --layout-around-aligned_-_-ms-flex-line-pack: distribute; --layout-around-aligned_-_-ms-align-content: space-around; --layout-around-aligned_-_-webkit-align-content: space-around; --layout-around-aligned_-_align-content: space-around;; + + + + --layout-block_-_display: block;; + + --layout-invisible_-_visibility: hidden !important;; + + --layout-relative_-_position: relative;; + + --layout-fit_-_position: absolute; --layout-fit_-_top: 0; --layout-fit_-_right: 0; --layout-fit_-_bottom: 0; --layout-fit_-_left: 0;; + + --layout-scroll_-_-webkit-overflow-scrolling: touch; --layout-scroll_-_overflow: auto;; + + --layout-fullbleed_-_margin: 0; --layout-fullbleed_-_height: 100vh;; + + + + --layout-fixed-top_-_position: fixed; --layout-fixed-top_-_top: 0; --layout-fixed-top_-_left: 0; --layout-fixed-top_-_right: 0;; + + --layout-fixed-right_-_position: fixed; --layout-fixed-right_-_top: 0; --layout-fixed-right_-_right: 0; --layout-fixed-right_-_bottom: 0;; + + --layout-fixed-bottom_-_position: fixed; --layout-fixed-bottom_-_right: 0; --layout-fixed-bottom_-_bottom: 0; --layout-fixed-bottom_-_left: 0;; + + --layout-fixed-left_-_position: fixed; --layout-fixed-left_-_top: 0; --layout-fixed-left_-_bottom: 0; --layout-fixed-left_-_left: 0;; + } + + html:not(.style-scope) { + --google-red-100: #f4c7c3; + --google-red-300: #e67c73; + --google-red-500: #db4437; + --google-red-700: #c53929; + + --google-blue-100: #c6dafc; + --google-blue-300: #7baaf7; + --google-blue-500: #4285f4; + --google-blue-700: #3367d6; + + --google-green-100: #b7e1cd; + --google-green-300: #57bb8a; + --google-green-500: #0f9d58; + --google-green-700: #0b8043; + + --google-yellow-100: #fce8b2; + --google-yellow-300: #f7cb4d; + --google-yellow-500: #f4b400; + --google-yellow-700: #f09300; + + --google-grey-100: #f5f5f5; + --google-grey-300: #e0e0e0; + --google-grey-500: #9e9e9e; + --google-grey-700: #616161; + + + + --paper-red-50: #ffebee; + --paper-red-100: #ffcdd2; + --paper-red-200: #ef9a9a; + --paper-red-300: #e57373; + --paper-red-400: #ef5350; + --paper-red-500: #f44336; + --paper-red-600: #e53935; + --paper-red-700: #d32f2f; + --paper-red-800: #c62828; + --paper-red-900: #b71c1c; + --paper-red-a100: #ff8a80; + --paper-red-a200: #ff5252; + --paper-red-a400: #ff1744; + --paper-red-a700: #d50000; + + --paper-pink-50: #fce4ec; + --paper-pink-100: #f8bbd0; + --paper-pink-200: #f48fb1; + --paper-pink-300: #f06292; + --paper-pink-400: #ec407a; + --paper-pink-500: #e91e63; + --paper-pink-600: #d81b60; + --paper-pink-700: #c2185b; + --paper-pink-800: #ad1457; + --paper-pink-900: #880e4f; + --paper-pink-a100: #ff80ab; + --paper-pink-a200: #ff4081; + --paper-pink-a400: #f50057; + --paper-pink-a700: #c51162; + + --paper-purple-50: #f3e5f5; + --paper-purple-100: #e1bee7; + --paper-purple-200: #ce93d8; + --paper-purple-300: #ba68c8; + --paper-purple-400: #ab47bc; + --paper-purple-500: #9c27b0; + --paper-purple-600: #8e24aa; + --paper-purple-700: #7b1fa2; + --paper-purple-800: #6a1b9a; + --paper-purple-900: #4a148c; + --paper-purple-a100: #ea80fc; + --paper-purple-a200: #e040fb; + --paper-purple-a400: #d500f9; + --paper-purple-a700: #aa00ff; + + --paper-deep-purple-50: #ede7f6; + --paper-deep-purple-100: #d1c4e9; + --paper-deep-purple-200: #b39ddb; + --paper-deep-purple-300: #9575cd; + --paper-deep-purple-400: #7e57c2; + --paper-deep-purple-500: #673ab7; + --paper-deep-purple-600: #5e35b1; + --paper-deep-purple-700: #512da8; + --paper-deep-purple-800: #4527a0; + --paper-deep-purple-900: #311b92; + --paper-deep-purple-a100: #b388ff; + --paper-deep-purple-a200: #7c4dff; + --paper-deep-purple-a400: #651fff; + --paper-deep-purple-a700: #6200ea; + + --paper-indigo-50: #e8eaf6; + --paper-indigo-100: #c5cae9; + --paper-indigo-200: #9fa8da; + --paper-indigo-300: #7986cb; + --paper-indigo-400: #5c6bc0; + --paper-indigo-500: #3f51b5; + --paper-indigo-600: #3949ab; + --paper-indigo-700: #303f9f; + --paper-indigo-800: #283593; + --paper-indigo-900: #1a237e; + --paper-indigo-a100: #8c9eff; + --paper-indigo-a200: #536dfe; + --paper-indigo-a400: #3d5afe; + --paper-indigo-a700: #304ffe; + + --paper-blue-50: #e3f2fd; + --paper-blue-100: #bbdefb; + --paper-blue-200: #90caf9; + --paper-blue-300: #64b5f6; + --paper-blue-400: #42a5f5; + --paper-blue-500: #2196f3; + --paper-blue-600: #1e88e5; + --paper-blue-700: #1976d2; + --paper-blue-800: #1565c0; + --paper-blue-900: #0d47a1; + --paper-blue-a100: #82b1ff; + --paper-blue-a200: #448aff; + --paper-blue-a400: #2979ff; + --paper-blue-a700: #2962ff; + + --paper-light-blue-50: #e1f5fe; + --paper-light-blue-100: #b3e5fc; + --paper-light-blue-200: #81d4fa; + --paper-light-blue-300: #4fc3f7; + --paper-light-blue-400: #29b6f6; + --paper-light-blue-500: #03a9f4; + --paper-light-blue-600: #039be5; + --paper-light-blue-700: #0288d1; + --paper-light-blue-800: #0277bd; + --paper-light-blue-900: #01579b; + --paper-light-blue-a100: #80d8ff; + --paper-light-blue-a200: #40c4ff; + --paper-light-blue-a400: #00b0ff; + --paper-light-blue-a700: #0091ea; + + --paper-cyan-50: #e0f7fa; + --paper-cyan-100: #b2ebf2; + --paper-cyan-200: #80deea; + --paper-cyan-300: #4dd0e1; + --paper-cyan-400: #26c6da; + --paper-cyan-500: #00bcd4; + --paper-cyan-600: #00acc1; + --paper-cyan-700: #0097a7; + --paper-cyan-800: #00838f; + --paper-cyan-900: #006064; + --paper-cyan-a100: #84ffff; + --paper-cyan-a200: #18ffff; + --paper-cyan-a400: #00e5ff; + --paper-cyan-a700: #00b8d4; + + --paper-teal-50: #e0f2f1; + --paper-teal-100: #b2dfdb; + --paper-teal-200: #80cbc4; + --paper-teal-300: #4db6ac; + --paper-teal-400: #26a69a; + --paper-teal-500: #009688; + --paper-teal-600: #00897b; + --paper-teal-700: #00796b; + --paper-teal-800: #00695c; + --paper-teal-900: #004d40; + --paper-teal-a100: #a7ffeb; + --paper-teal-a200: #64ffda; + --paper-teal-a400: #1de9b6; + --paper-teal-a700: #00bfa5; + + --paper-green-50: #e8f5e9; + --paper-green-100: #c8e6c9; + --paper-green-200: #a5d6a7; + --paper-green-300: #81c784; + --paper-green-400: #66bb6a; + --paper-green-500: #4caf50; + --paper-green-600: #43a047; + --paper-green-700: #388e3c; + --paper-green-800: #2e7d32; + --paper-green-900: #1b5e20; + --paper-green-a100: #b9f6ca; + --paper-green-a200: #69f0ae; + --paper-green-a400: #00e676; + --paper-green-a700: #00c853; + + --paper-light-green-50: #f1f8e9; + --paper-light-green-100: #dcedc8; + --paper-light-green-200: #c5e1a5; + --paper-light-green-300: #aed581; + --paper-light-green-400: #9ccc65; + --paper-light-green-500: #8bc34a; + --paper-light-green-600: #7cb342; + --paper-light-green-700: #689f38; + --paper-light-green-800: #558b2f; + --paper-light-green-900: #33691e; + --paper-light-green-a100: #ccff90; + --paper-light-green-a200: #b2ff59; + --paper-light-green-a400: #76ff03; + --paper-light-green-a700: #64dd17; + + --paper-lime-50: #f9fbe7; + --paper-lime-100: #f0f4c3; + --paper-lime-200: #e6ee9c; + --paper-lime-300: #dce775; + --paper-lime-400: #d4e157; + --paper-lime-500: #cddc39; + --paper-lime-600: #c0ca33; + --paper-lime-700: #afb42b; + --paper-lime-800: #9e9d24; + --paper-lime-900: #827717; + --paper-lime-a100: #f4ff81; + --paper-lime-a200: #eeff41; + --paper-lime-a400: #c6ff00; + --paper-lime-a700: #aeea00; + + --paper-yellow-50: #fffde7; + --paper-yellow-100: #fff9c4; + --paper-yellow-200: #fff59d; + --paper-yellow-300: #fff176; + --paper-yellow-400: #ffee58; + --paper-yellow-500: #ffeb3b; + --paper-yellow-600: #fdd835; + --paper-yellow-700: #fbc02d; + --paper-yellow-800: #f9a825; + --paper-yellow-900: #f57f17; + --paper-yellow-a100: #ffff8d; + --paper-yellow-a200: #ffff00; + --paper-yellow-a400: #ffea00; + --paper-yellow-a700: #ffd600; + + --paper-amber-50: #fff8e1; + --paper-amber-100: #ffecb3; + --paper-amber-200: #ffe082; + --paper-amber-300: #ffd54f; + --paper-amber-400: #ffca28; + --paper-amber-500: #ffc107; + --paper-amber-600: #ffb300; + --paper-amber-700: #ffa000; + --paper-amber-800: #ff8f00; + --paper-amber-900: #ff6f00; + --paper-amber-a100: #ffe57f; + --paper-amber-a200: #ffd740; + --paper-amber-a400: #ffc400; + --paper-amber-a700: #ffab00; + + --paper-orange-50: #fff3e0; + --paper-orange-100: #ffe0b2; + --paper-orange-200: #ffcc80; + --paper-orange-300: #ffb74d; + --paper-orange-400: #ffa726; + --paper-orange-500: #ff9800; + --paper-orange-600: #fb8c00; + --paper-orange-700: #f57c00; + --paper-orange-800: #ef6c00; + --paper-orange-900: #e65100; + --paper-orange-a100: #ffd180; + --paper-orange-a200: #ffab40; + --paper-orange-a400: #ff9100; + --paper-orange-a700: #ff6500; + + --paper-deep-orange-50: #fbe9e7; + --paper-deep-orange-100: #ffccbc; + --paper-deep-orange-200: #ffab91; + --paper-deep-orange-300: #ff8a65; + --paper-deep-orange-400: #ff7043; + --paper-deep-orange-500: #ff5722; + --paper-deep-orange-600: #f4511e; + --paper-deep-orange-700: #e64a19; + --paper-deep-orange-800: #d84315; + --paper-deep-orange-900: #bf360c; + --paper-deep-orange-a100: #ff9e80; + --paper-deep-orange-a200: #ff6e40; + --paper-deep-orange-a400: #ff3d00; + --paper-deep-orange-a700: #dd2c00; + + --paper-brown-50: #efebe9; + --paper-brown-100: #d7ccc8; + --paper-brown-200: #bcaaa4; + --paper-brown-300: #a1887f; + --paper-brown-400: #8d6e63; + --paper-brown-500: #795548; + --paper-brown-600: #6d4c41; + --paper-brown-700: #5d4037; + --paper-brown-800: #4e342e; + --paper-brown-900: #3e2723; + + --paper-grey-50: #fafafa; + --paper-grey-100: #f5f5f5; + --paper-grey-200: #eeeeee; + --paper-grey-300: #e0e0e0; + --paper-grey-400: #bdbdbd; + --paper-grey-500: #9e9e9e; + --paper-grey-600: #757575; + --paper-grey-700: #616161; + --paper-grey-800: #424242; + --paper-grey-900: #212121; + + --paper-blue-grey-50: #eceff1; + --paper-blue-grey-100: #cfd8dc; + --paper-blue-grey-200: #b0bec5; + --paper-blue-grey-300: #90a4ae; + --paper-blue-grey-400: #78909c; + --paper-blue-grey-500: #607d8b; + --paper-blue-grey-600: #546e7a; + --paper-blue-grey-700: #455a64; + --paper-blue-grey-800: #37474f; + --paper-blue-grey-900: #263238; + + + --dark-divider-opacity: 0.12; + --dark-disabled-opacity: 0.38; + --dark-secondary-opacity: 0.54; + --dark-primary-opacity: 0.87; + + + --light-divider-opacity: 0.12; + --light-disabled-opacity: 0.3; + --light-secondary-opacity: 0.7; + --light-primary-opacity: 1.0; + } + + html:not(.style-scope) { + --primary-text-color: var(--light-theme-text-color); + --primary-background-color: var(--light-theme-background-color); + --secondary-text-color: var(--light-theme-secondary-color); + --disabled-text-color: var(--light-theme-disabled-color); + --divider-color: var(--light-theme-divider-color); + --error-color: var(--paper-deep-orange-a700); + + + --primary-color: var(--paper-indigo-500); + --light-primary-color: var(--paper-indigo-100); + --dark-primary-color: var(--paper-indigo-700); + + --accent-color: var(--paper-pink-a200); + --light-accent-color: var(--paper-pink-a100); + --dark-accent-color: var(--paper-pink-a400); + + + + --light-theme-background-color: #ffffff; + --light-theme-base-color: #000000; + --light-theme-text-color: var(--paper-grey-900); + --light-theme-secondary-color: #737373; + --light-theme-disabled-color: #9b9b9b; + --light-theme-divider-color: #dbdbdb; + + + --dark-theme-background-color: var(--paper-grey-900); + --dark-theme-base-color: #ffffff; + --dark-theme-text-color: #ffffff; + --dark-theme-secondary-color: #bcbcbc; + --dark-theme-disabled-color: #646464; + --dark-theme-divider-color: #3c3c3c; + + + --text-primary-color: var(--dark-theme-text-color); + --default-primary-color: var(--primary-color); + } + + html:not(.style-scope) { + --paper-font-common-base_-_font-family: 'Roboto', 'Noto', sans-serif; --paper-font-common-base_-_-webkit-font-smoothing: antialiased;; + + --paper-font-common-code_-_font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace; --paper-font-common-code_-_-webkit-font-smoothing: antialiased;; + + --paper-font-common-expensive-kerning_-_text-rendering: optimizeLegibility;; + + --paper-font-common-nowrap_-_white-space: nowrap; --paper-font-common-nowrap_-_overflow: hidden; --paper-font-common-nowrap_-_text-overflow: ellipsis;; + + + + --paper-font-display4_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display4_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display4_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-display4_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-display4_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-display4_-_font-size: 112px; --paper-font-display4_-_font-weight: 300; --paper-font-display4_-_letter-spacing: -.044em; --paper-font-display4_-_line-height: 120px;; + + --paper-font-display3_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display3_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display3_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-display3_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-display3_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-display3_-_font-size: 56px; --paper-font-display3_-_font-weight: 400; --paper-font-display3_-_letter-spacing: -.026em; --paper-font-display3_-_line-height: 60px;; + + --paper-font-display2_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display2_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display2_-_font-size: 45px; --paper-font-display2_-_font-weight: 400; --paper-font-display2_-_letter-spacing: -.018em; --paper-font-display2_-_line-height: 48px;; + + --paper-font-display1_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display1_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display1_-_font-size: 34px; --paper-font-display1_-_font-weight: 400; --paper-font-display1_-_letter-spacing: -.01em; --paper-font-display1_-_line-height: 40px;; + + --paper-font-headline_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-headline_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-headline_-_font-size: 24px; --paper-font-headline_-_font-weight: 400; --paper-font-headline_-_letter-spacing: -.012em; --paper-font-headline_-_line-height: 32px;; + + --paper-font-title_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-title_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-title_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-title_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-title_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-title_-_font-size: 20px; --paper-font-title_-_font-weight: 500; --paper-font-title_-_line-height: 28px;; + + --paper-font-subhead_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-subhead_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-subhead_-_font-size: 16px; --paper-font-subhead_-_font-weight: 400; --paper-font-subhead_-_line-height: 24px;; + + --paper-font-body2_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-body2_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-body2_-_font-size: 14px; --paper-font-body2_-_font-weight: 500; --paper-font-body2_-_line-height: 24px;; + + --paper-font-body1_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-body1_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-body1_-_font-size: 14px; --paper-font-body1_-_font-weight: 400; --paper-font-body1_-_line-height: 20px;; + + --paper-font-caption_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-caption_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-caption_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-caption_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-caption_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-caption_-_font-size: 12px; --paper-font-caption_-_font-weight: 400; --paper-font-caption_-_letter-spacing: 0.011em; --paper-font-caption_-_line-height: 20px;; + + --paper-font-menu_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-menu_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-menu_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-menu_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-menu_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-menu_-_font-size: 13px; --paper-font-menu_-_font-weight: 500; --paper-font-menu_-_line-height: 24px;; + + --paper-font-button_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-button_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-button_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-button_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-button_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-button_-_font-size: 14px; --paper-font-button_-_font-weight: 500; --paper-font-button_-_letter-spacing: 0.018em; --paper-font-button_-_line-height: 24px; --paper-font-button_-_text-transform: uppercase;; + + --paper-font-code2_-_font-family: var(--paper-font-common-code_-_font-family); --paper-font-code2_-_-webkit-font-smoothing: var(--paper-font-common-code_-_-webkit-font-smoothing); --paper-font-code2_-_font-size: 14px; --paper-font-code2_-_font-weight: 700; --paper-font-code2_-_line-height: 20px;; + + --paper-font-code1_-_font-family: var(--paper-font-common-code_-_font-family); --paper-font-code1_-_-webkit-font-smoothing: var(--paper-font-common-code_-_-webkit-font-smoothing); --paper-font-code1_-_font-size: 14px; --paper-font-code1_-_font-weight: 500; --paper-font-code1_-_line-height: 20px;; + } + + html:not(.style-scope) { + --shadow-transition_-_transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);; + + --shadow-none_-_box-shadow: none;; + + + + --shadow-elevation-2dp_-_box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12), + 0 3px 1px -2px rgba(0, 0, 0, 0.2);; + + --shadow-elevation-3dp_-_box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), + 0 1px 8px 0 rgba(0, 0, 0, 0.12), + 0 3px 3px -2px rgba(0, 0, 0, 0.4);; + + --shadow-elevation-4dp_-_box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), + 0 1px 10px 0 rgba(0, 0, 0, 0.12), + 0 2px 4px -1px rgba(0, 0, 0, 0.4);; + + --shadow-elevation-6dp_-_box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), + 0 1px 18px 0 rgba(0, 0, 0, 0.12), + 0 3px 5px -1px rgba(0, 0, 0, 0.4);; + + --shadow-elevation-8dp_-_box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12), + 0 5px 5px -3px rgba(0, 0, 0, 0.4);; + + --shadow-elevation-12dp_-_box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14), + 0 4px 22px 3px rgba(0, 0, 0, 0.12), + 0 6px 7px -4px rgba(0, 0, 0, 0.4);; + + --shadow-elevation-16dp_-_box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), + 0 6px 30px 5px rgba(0, 0, 0, 0.12), + 0 8px 10px -5px rgba(0, 0, 0, 0.4);; + + --shadow-elevation-24dp_-_box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), + 0 9px 46px 8px rgba(0, 0, 0, 0.12), + 0 11px 15px -7px rgba(0, 0, 0, 0.4);; + } + + html:not(.style-scope)[creator-page-styling],yt-live-chat-app:not(.style-scope)[creator-page-styling] { + --yt-live-chat-upsell-dialog-renderer-border: 1px solid #d4d4d4; + --yt-live-chat-upsell-dialog-renderer-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); + + --live-chat-upsell-dialog-renderer-content_-_padding: 24px 24px 0;; + + --live-chat-upsell-dialog-renderer-title_-_font-size: 15px; --live-chat-upsell-dialog-renderer-title_-_font-weight: 500; --live-chat-upsell-dialog-renderer-title_-_line-height: 20px; --live-chat-upsell-dialog-renderer-title_-_margin-bottom: 17px;; + + --live-chat-upsell-dialog-renderer-text_-_font-size: 12px; --live-chat-upsell-dialog-renderer-text_-_line-height: 17px;; + + --live-chat-upsell-dialog-renderer-button-container_-_padding: 16px 16px 19px 24px;; + + --yt-live-chat-upsell-dialog-renderer-button-padding: 7px 15px; + --live-chat-upsell-dialog-renderer-button-font-size: 11px; + --live-chat-upsell-dialog-renderer-button-text-transform: none; + + --yt-live-chat-upsell-dialog-renderer-action-button-color: var(--yt-white); + --yt-live-chat-upsell-dialog-renderer-action-button-background: var(--yt-blue-light); + } + + yt-live-chat-app:not(.style-scope)[live-dashboard] { + --yt-live-chat-header-text-color: var(--yt-opalescence-dark-grey); + --yt-live-chat-header-background-color: var(--yt-white); + --yt-live-chat-header-bottom-border: 1px solid var(--yt-opalescence-soft-grey); + --yt-live-chat-header-button-color: var(--yt-opalescence-dark-grey); + --yt-live-chat-action-panel-top-border: 1px solid var(--yt-opalescence-soft-grey); + } + + html:not(.style-scope)[dashboard-money-feed],yt-live-chat-app:not(.style-scope)[dashboard-money-feed] { + --yt-live-chat-item-list-renderer-padding: 0; + --yt-live-chat-item-list-item-border: 1px solid #e2e2e2; + --yt-live-chat-item-timestamp-margin: 0; + --yt-live-chat-paid-message-timestamp-display: inline; + --yt-live-chat-server-error-message-display: none; + } + + html:not(.style-scope)[dark]:not(.style-scope)[dashboard-money-feed],html:not(.style-scope)[dark] yt-live-chat-app:not(.style-scope)[dashboard-money-feed] { + --yt-live-chat-item-list-item-border: none; + } + + html:not(.style-scope) { + --yt-spec-brand-background-solid: #fff; + --yt-spec-brand-background-primary: rgba(255, 255, 255, 0.98); + --yt-spec-brand-background-secondary: rgba(255, 255, 255, 0.95); + --yt-spec-general-background-a: #f9f9f9; + --yt-spec-general-background-b: #f1f1f1; + --yt-spec-general-background-c: #e9e9e9; + --yt-spec-error-background: #181818; + --yt-spec-text-primary: #030303; + --yt-spec-text-primary-inverse: #fff; + --yt-spec-text-secondary: #606060; + --yt-spec-text-disabled: #909090; + --yt-spec-call-to-action: #065fd4; + --yt-spec-icon-active-other: #606060; + --yt-spec-icon-inactive: #909090; + --yt-spec-icon-disabled: #ccc; + --yt-spec-badge-chip-background: rgba(0, 0, 0, 0.05); + --yt-spec-verified-badge-background: rgba(0, 0, 0, 0.15); + --yt-spec-suggested-action: #f2f8ff; + --yt-spec-button-chip-background-hover: rgba(0, 0, 0, 0.1); + --yt-spec-touch-response: #000; + --yt-spec-paper-tab-ink: rgba(0, 0, 0, 0.3); + --yt-spec-filled-button-text: #fff; + --yt-spec-call-to-action-inverse: #3ea6ff; + --yt-spec-brand-icon-active: #f00; + --yt-spec-brand-icon-inactive: #606060; + --yt-spec-brand-button-background: #c00; + --yt-spec-brand-link-text: #c00; + --yt-spec-filled-button-focus-outline: rgba(0, 0, 0, 0.6); + --yt-spec-call-to-action-button-focus-outline: rgba(6, 95, 212, 0.3); + --yt-spec-brand-text-button-focus-outline: rgba(204, 0, 0, 0.3); + --yt-spec-inactive-text-button-focus-outline: #ccc; + --yt-spec-ad-indicator: #00716c; + --yt-spec-brand-subscribe-button-background: var(--yt-spec-brand-button-background); + --yt-spec-wordmark-text: #212121; + --yt-spec-10-percent-layer: rgba(0, 0, 0, 0.1); + --yt-spec-snackbar-background: #212121; + --yt-spec-selected-nav-text: #c00; + --yt-spec-themed-blue: #065fd4; + --yt-spec-themed-green: #107516; + --yt-spec-themed-overlay-background: rgba(255, 255, 255, 0.7); + --yt-spec-static-brand-red: #f00; + --yt-spec-static-brand-white: #fff; + --yt-spec-static-brand-black: #212121; + --yt-spec-static-ad-yellow: #fbc02d; + --yt-spec-static-overlay-background-solid: #000; + --yt-spec-static-overlay-background-heavy: rgba(0, 0, 0, 0.8); + --yt-spec-static-overlay-background-medium: rgba(0, 0, 0, 0.6); + --yt-spec-static-overlay-background-medium-light: rgba(0, 0, 0, 0.3); + --yt-spec-static-overlay-background-light: rgba(0, 0, 0, 0.1); + --yt-spec-static-overlay-text-primary: #fff; + --yt-spec-static-overlay-text-secondary: rgba(255, 255, 255, 0.7); + --yt-spec-static-overlay-text-disabled: rgba(255, 255, 255, 0.3); + --yt-spec-static-overlay-call-to-action: #3ea6ff; + --yt-spec-static-overlay-icon-active-other: #fff; + --yt-spec-static-overlay-icon-inactive: rgba(255, 255, 255, 0.7); + --yt-spec-static-overlay-icon-disabled: rgba(255, 255, 255, 0.3); + --yt-spec-static-overlay-button-primary: rgba(255, 255, 255, 0.3); + --yt-spec-static-overlay-button-secondary: rgba(255, 255, 255, 0.1); + --yt-spec-static-overlay-background-brand: rgba(204, 0, 0, 0.9); + } + + html:not(.style-scope)[dark],:not(.style-scope)[dark] { + --yt-spec-brand-background-solid: #212121; + --yt-spec-brand-background-primary: rgba(33, 33, 33, 0.98); + --yt-spec-brand-background-secondary: rgba(33, 33, 33, 0.95); + --yt-spec-general-background-a: #181818; + --yt-spec-general-background-b: #0f0f0f; + --yt-spec-general-background-c: #030303; + --yt-spec-error-background: #f9f9f9; + --yt-spec-text-primary: #fff; + --yt-spec-text-primary-inverse: #030303; + --yt-spec-text-secondary: #aaa; + --yt-spec-text-disabled: #717171; + --yt-spec-call-to-action: #3ea6ff; + --yt-spec-icon-active-other: #fff; + --yt-spec-icon-inactive: #909090; + --yt-spec-icon-disabled: #606060; + --yt-spec-badge-chip-background: rgba(255, 255, 255, 0.1); + --yt-spec-verified-badge-background: rgba(255, 255, 255, 0.25); + --yt-spec-suggested-action: #252a3a; + --yt-spec-button-chip-background-hover: rgba(255, 255, 255, 0.2); + --yt-spec-touch-response: #fff; + --yt-spec-paper-tab-ink: rgba(255, 255, 255, 0.3); + --yt-spec-filled-button-text: #030303; + --yt-spec-call-to-action-inverse: #065fd4; + --yt-spec-brand-icon-active: #fff; + --yt-spec-brand-icon-inactive: #909090; + --yt-spec-brand-button-background: #c00; + --yt-spec-brand-link-text: #ff4e45; + --yt-spec-filled-button-focus-outline: rgba(255, 255, 255, 0.7); + --yt-spec-call-to-action-button-focus-outline: rgba(62, 166, 255, 0.3); + --yt-spec-brand-text-button-focus-outline: rgba(255, 78, 69, 0.3); + --yt-spec-inactive-text-button-focus-outline: #606060; + --yt-spec-ad-indicator: #00aaa7; + --yt-spec-brand-subscribe-button-background: var(--yt-spec-brand-button-background); + --yt-spec-wordmark-text: #fff; + --yt-spec-10-percent-layer: rgba(255, 255, 255, 0.1); + --yt-spec-snackbar-background: #030303; + --yt-spec-selected-nav-text: #fff; + --yt-spec-themed-blue: #3ea6ff; + --yt-spec-themed-green: #2ba640; + --yt-spec-themed-overlay-background: rgba(0, 0, 0, 0.8); + } + + html:not(.style-scope) { + --yt-spec-white-1: #FFFFFF; + --yt-spec-white-2: #F9F9F9; + --yt-spec-white-3: #F1F1F1; + --yt-spec-white-4: #E9E9E9; + + --yt-spec-black-1: #282828; + --yt-spec-black-2: #1F1F1F; + --yt-spec-black-3: #161616; + --yt-spec-black-4: #0D0D0D; + --yt-spec-black-pure: #000000; + + --yt-spec-grey-1: #CCCCCC; + --yt-spec-grey-2: #AAAAAA; + --yt-spec-grey-3: #909090; + --yt-spec-grey-4: #717171; + --yt-spec-grey-5: #606060; + + --yt-brand-youtube-red: #FF0000; + --yt-brand-medium-red: #CC0000; + --yt-brand-light-red: #FF4E45; + --yt-spec-red-30: #FF8983; + --yt-spec-red-70: #990412; + + --yt-spec-pale-blue: #F2F8FF; + --yt-spec-light-blue: #3EA6FF; + --yt-spec-dark-blue: #065FD4; + --yt-spec-navy-blue: #252A3A; + --yt-spec-light-green: #2BA640; + --yt-spec-dark-green: #107516; + --yt-spec-yellow: #FBC02D; + + + --yt-spec-black-pure-alpha-5: rgba(0, 0, 0, 0.05); + --yt-spec-black-pure-alpha-10: rgba(0, 0, 0, 0.10); + --yt-spec-black-pure-alpha-15: rgba(0, 0, 0, 0.15); + --yt-spec-black-pure-alpha-30: rgba(0, 0, 0, 0.30); + --yt-spec-black-pure-alpha-60: rgba(0, 0, 0, 0.60); + --yt-spec-black-pure-alpha-80: rgba(0, 0, 0, 0.80); + + --yt-spec-black-1-alpha-98: rgba(40, 40, 40, 0.98); + --yt-spec-black-1-alpha-95: rgba(40, 40, 40, 0.95); + + --yt-spec-white-1-alpha-10: rgba(255, 255, 255, 0.10); + --yt-spec-white-1-alpha-20: rgba(255, 255, 255, 0.20); + --yt-spec-white-1-alpha-25: rgba(255, 255, 255, 0.25); + --yt-spec-white-1-alpha-30: rgba(255, 255, 255, 0.30); + --yt-spec-white-1-alpha-70: rgba(255, 255, 255, 0.70); + --yt-spec-white-1-alpha-95: rgba(255, 255, 255, 0.95); + --yt-spec-white-1-alpha-98: rgba(255, 255, 255, 0.98); + + --yt-brand-medium-red-alpha-90: rgba(204, 0, 0, 0.90); + --yt-brand-medium-red-alpha-30: rgba(204, 0, 0, 0.30); + + --yt-brand-light-red-alpha-30: rgba(255, 78, 69, 0.30); + + --yt-spec-light-blue-alpha-30: rgba(62, 166, 255, 0.30); + + --yt-spec-dark-blue-alpha-30: rgba(6, 95, 212, 0.30); + } + + html:not(.style-scope) { + --yt-luna-black: #111111; + --yt-opalescence-grey: #888888; + --yt-opalescence-soft-grey: #eeeeee; + --yt-opalescence-dark-grey: #333333; + --yt-red: #e62117; + --yt-white: white; + --yt-blue: #2793e6; + --ad-yellow: #e6bc27; + --yt-surface-100: white; + --yt-surface-200: #fafafa; + --yt-surface-300: whitesmoke; + --yt-surface-400: #ededed; + --yt-body-500: rgba(0, 0, 0, 0.87); + --yt-body-400: rgba(0, 0, 0, 0.74); + --yt-body-300: rgba(0, 0, 0, 0.54); + --yt-body-200: rgba(0, 0, 0, 0.26); + --yt-body-100: rgba(0, 0, 0, 0.04); + --yt-opacity-lighten-1: 0.8; + --yt-opacity-lighten-2: 0.6; + --yt-opacity-lighten-3: 0.4; + --yt-opacity-lighten-4: 0.2; + --yt-opacity-lighten-5: 0.1; + --yt-luna-black-opacity-lighten-1: hsla(0, 0%, 6.7%, var(--yt-opacity-lighten-1)); + --yt-luna-black-opacity-lighten-2: hsla(0, 0%, 6.7%, var(--yt-opacity-lighten-2)); + --yt-luna-black-opacity-lighten-2-hex: #707070; + --yt-luna-black-opacity-lighten-3: hsla(0, 0%, 6.7%, var(--yt-opacity-lighten-3)); + --yt-luna-black-opacity-lighten-4: hsla(0, 0%, 6.7%, var(--yt-opacity-lighten-4)); + --yt-opalescence-grey-opacity-lighten-1: hsla(0, 0%, 53.3%, var(--yt-opacity-lighten-1)); + --yt-opalescence-grey-opacity-lighten-2: hsla(0, 0%, 53.3%, var(--yt-opacity-lighten-2)); + --yt-opalescence-grey-opacity-lighten-3: hsla(0, 0%, 53.3%, var(--yt-opacity-lighten-3)); + --yt-opalescence-grey-opacity-lighten-4: hsla(0, 0%, 53.3%, var(--yt-opacity-lighten-4)); + --yt-opalescence-grey-opacity-lighten-5: hsla(0, 0%, 53.3%, var(--yt-opacity-lighten-5)); + --yt-opalescence-soft-grey-opacity-lighten-1: hsla(0, 0%, 93.3%, var(--yt-opacity-lighten-1)); + --yt-opalescence-soft-grey-opacity-lighten-2: hsla(0, 0%, 93.3%, var(--yt-opacity-lighten-2)); + --yt-opalescence-soft-grey-opacity-lighten-3: hsla(0, 0%, 93.3%, var(--yt-opacity-lighten-3)); + --yt-opalescence-soft-grey-opacity-lighten-4: hsla(0, 0%, 93.3%, var(--yt-opacity-lighten-4)); + --yt-white-opacity-lighten-1: hsla(0, 0%, 100%, var(--yt-opacity-lighten-1)); + --yt-white-opacity-lighten-2: hsla(0, 0%, 100%, var(--yt-opacity-lighten-2)); + --yt-white-opacity-lighten-3: hsla(0, 0%, 100%, var(--yt-opacity-lighten-3)); + --yt-white-opacity-lighten-4: hsla(0, 0%, 100%, var(--yt-opacity-lighten-4)); + --yt-blue-opacity-lighten-2: hsla(206.1, 79.3%, 52.7%, var(--yt-opacity-lighten-2)); + --yt-blue-opacity-lighten-4: hsla(206.1, 79.3%, 52.7%, var(--yt-opacity-lighten-4)); + --yt-playability-button-color: #262626; + --yt-blue-light: #167ac6; + --yt-blue-suggestive: #f2f8ff; + --yt-grey: #222222; + --yt-section-4-light: #e3e3e3; + --yt-dark-surface-100: #121212; + --yt-dark-surface-200: #1c1c1c; + --yt-dark-surface-200-lighten-1: rgba(28, 28, 28, 0.8); + --yt-dark-surface-300: #242424; + --yt-dark-surface-400: #292929; + --yt-dark-body-500: rgba(255, 255, 255, 0.88); + --yt-dark-body-400: rgba(255, 255, 255, 0.74); + --yt-dark-body-300: rgba(255, 255, 255, 0.5); + --yt-dark-body-200: rgba(255, 255, 255, 0.26); + --yt-dark-body-100: rgba(255, 255, 255, 0.08); + --yt-section-4-dark: #292929; + --yt-subscribe-button-count: rgba(255, 255, 255, 0.85); + } + + html:not(.style-scope) { + --yt-std-body-200: var(--yt-body-200); + --yt-std-body-300: var(--yt-body-300); + --yt-std-surface-200: var(--yt-surface-200); + --yt-std-surface-300: var(--yt-surface-300); + --yt-std-surface-400: var(--yt-surface-400); + --yt-primary-color: var(--yt-luna-black); + --yt-primary-text-color: var(--yt-luna-black); + --yt-secondary-text-color: var(--yt-luna-black-opacity-lighten-1); + --yt-tertiary-text-color: var(--yt-luna-black-opacity-lighten-2); + --yt-placeholder-text-color: var(--yt-luna-black-opacity-lighten-2); + --yt-border-color: var(--yt-opalescence-soft-grey); + --yt-commentbox-border-inactive: var(--yt-opalescence-soft-grey); + --yt-commentbox-border-active: var(--yt-luna-black-opacity-lighten-2); + --yt-primary-disabled-button-text-color: var(--yt-white); + --yt-paper-radio-button-checked-color: var(--yt-opalescence-grey); + --yt-paper-button-ink-color: var(--yt-opalescence-grey); + --yt-icon-color: var(--yt-luna-black-opacity-lighten-3); + --yt-icon-hover-color: var(--yt-luna-black-opacity-lighten-1); + --yt-icon-disabled-color: var(--yt-luna-black-opacity-lighten-2); + --yt-icon-active-color: var(--yt-luna-black); + --yt-expand-color: var(--yt-luna-black-opacity-lighten-2); + --yt-metadata-color: var(--yt-luna-black-opacity-lighten-2); + --yt-placeholder-text: var(--yt-luna-black-opacity-lighten-2); + --yt-playlist-background-header: var(--yt-opalescence-soft-grey); + --yt-playlist-background-item: var(--yt-opalescence-soft-grey-opacity-lighten-2); + --yt-playlist-title-text: var(--yt-luna-black); + --yt-playlist-message-text: var(--yt-luna-black-opacity-lighten-2); + --yt-subscribe-button-text-color: var(--yt-white); + --yt-button-text-color: var(--yt-luna-black-opacity-lighten-2); + --yt-button-payment-text-color: var(--yt-white); + --yt-button-active-color: var(--yt-luna-black); + --yt-copyright-text: var(--yt-luna-black-opacity-lighten-2); + --yt-guide-entry-text-color: var(--yt-luna-black-opacity-lighten-1); + --yt-thumbnail-placeholder-color: var(--yt-section-4-light); + --yt-featured-channel-title-text-color: var(--yt-body-300); + --yt-formatted-string-deemphasize-color: var(--yt-opalescence-grey); + --yt-alert-background: var(--yt-opalescence-soft-grey-opacity-lighten-3); + --yt-video-secondary-info-description-background: var(--yt-opalescence-soft-grey-opacity-lighten-2); + --yt-searchbox-text-color: var(--yt-primary-text-color); + --yt-simple-menu-header-background: var(--yt-opalescence-soft-grey); + --yt-item-section-header-color: var(--yt-luna-black-opacity-lighten-2); + --yt-menu-hover-backgound-color: var(--yt-opalescence-soft-grey); + --yt-menu-focus-background-color: var(--yt-luna-black-opacity-lighten-4); + --yt-app-background: var(--yt-white); + --yt-main-app-background: var(--yt-surface-200); + --yt-main-app-background-tmp: var(--yt-surface-100); + --yt-guide-background: var(--yt-surface-300); + --yt-dialog-background: var(--yt-white); + --yt-searchbox-background: var(--yt-white); + --yt-channel-header-background: var(--yt-surface-200); + --yt-sidebar-background: var(--yt-surface-200); + --yt-transcript-background: var(--yt-white); + } + + html:not(.style-scope)[dark],:not(.style-scope)[dark] { + --yt-std-body-200: var(--yt-dark-body-200); + --yt-std-body-300: var(--yt-dark-body-300); + --yt-std-surface-200: var(--yt-dark-surface-200); + --yt-std-surface-300: var(--yt-dark-surface-300); + --yt-std-surface-400: var(--yt-dark-surface-400); + --yt-primary-color: var(--yt-dark-body-500); + --yt-primary-text-color: var(--yt-dark-body-500); + --yt-secondary-text-color: var(--yt-dark-body-300); + --yt-tertiary-text-color: var(--yt-dark-body-300); + --yt-disabled-text-color: var(--yt-dark-body-200); + --yt-placeholder-text-color: var(--yt-dark-body-300); + --yt-border-color: var(--yt-dark-body-100); + --yt-commentbox-border-inactive: var(--yt-dark-body-300); + --yt-commentbox-border-active: var(--yt-dark-body-500); + --yt-alert-background: var(--yt-dark-body-200); + --yt-paper-button-ink-color: var(--yt-white-opacity-lighten-4); + --yt-icon-color: var(--yt-dark-body-300); + --yt-icon-hover-color: var(--yt-dark-body-400); + --yt-icon-active-color: var(--yt-dark-body-500); + --yt-icon-disabled-color: var(--yt-dark-body-200); + --yt-expand-color: var(--yt-white-opacity-lighten-2); + --yt-metadata-color: var(--yt-opalescence-grey); + --yt-channel-owner: var(--yt-dark-body-500); + --yt-placeholder-text: var(--yt-opalescence-soft-grey); + --yt-playlist-background-header: var(--yt-opalescence-grey-opacity-lighten-3); + --yt-playlist-background-item: var(--yt-opalescence-grey-opacity-lighten-4); + --yt-playlist-title-text: var(--yt-dark-body-500); + --yt-playlist-message-text: var(--yt-opalescence-soft-grey); + --yt-subscribe-button-text-color: var(--yt-dark-body-500); + --yt-button-text-color: var(--yt-dark-body-300); + --yt-button-active-color: var(--yt-dark-body-500); + --yt-button-payment-text-color: var(--yt-dark-body-500); + --yt-copyright-text: var(--yt-white-opacity-lighten-2); + --yt-guide-entry-text-color: var(--yt-dark-body-500); + --yt-thumbnail-placeholder-color: var(--yt-section-4-dark); + --yt-primary-disabled-button-text-color: var(--yt-white-opacity-lighten-4); + --yt-featured-channel-title-text-color: var(--yt-dark-body-300); + --yt-formatted-string-deemphasize-color: var(--yt-opalescence-grey); + --yt-video-secondary-info-description-background: var(--yt-opalescence-grey-opacity-lighten-4); + --yt-simple-menu-header-background: var(--yt-opalescence-grey-opacity-lighten-3); + --yt-item-section-header-color: var(--yt-opalescence-soft-grey); + --yt-menu-hover-backgound-color: var(--yt-dark-body-100); + --yt-menu-focus-background-color: var(--yt-dark-body-200); + --yt-searchbox-text-color: var(--yt-primary-text-color); + --yt-app-background: var(--yt-dark-surface-100); + --yt-main-app-background: var(--yt-dark-surface-100); + --yt-main-app-background-tmp: var(--yt-dark-surface-100); + --yt-guide-background: var(--yt-dark-surface-200); + --yt-dialog-background: var(--yt-dark-surface-300); + --yt-searchbox-background: var(--yt-dark-surface-100); + --yt-channel-header-background: var(--yt-dark-surface-200-lighten-1); + --yt-sidebar-background: var(--yt-dark-surface-200-lighten-1); + --yt-transcript-background: var(--yt-dark-surface-200); + --yt-blue-suggestive: transparent; + } + + .theme-tester:not(.style-scope)[dark] { + background-color: var(--yt-dark-surface-100); + } + + html:not(.style-scope) { + --ytd-searchbox-border-color: var(--yt-opalescence-grey-opacity-lighten-4); + --ytd-searchbox-legacy-border-color: #ccc; + --ytd-searchbox-legacy-border-shadow-color: #eee; + --ytd-searchbox-legacy-button-color: #f8f8f8; + --ytd-searchbox-legacy-button-border-color: #d3d3d3; + --ytd-searchbox-legacy-button-focus-color: #e9e9e9; + --ytd-searchbox-legacy-button-hover-color: #f0f0f0; + --ytd-searchbox-legacy-button-hover-border-color: #c6c6c6; + --ytd-searchbox-legacy-button-icon-color: #333; + --ytd-moderation-panel-background: var(--yt-opalescence-soft-grey-opacity-lighten-2); + --ytd-moderation-panel-hover: var(--yt-opalescence-soft-grey-opacity-lighten-1); + --ytd-moderation-panel-comment-text: var(--yt-luna-black); + --ytd-moderation-panel-comment-metadata-text: var(--yt-luna-black-opacity-lighten-2); + --ytd-moderation-icon-color: var(--yt-luna-black-opacity-lighten-2); + --ytd-moderation-icon-hover-color: var(--yt-luna-black); + --ytd-moderation-panel-likely-spam-divider: var(--yt-opalescence-grey-opacity-lighten-5); + --ytd-comment-text-color: var(--yt-luna-black); + --ytd-comment-metadata-text-color: var(--yt-spec-text-secondary); + --ytd-watch-card-secondary-text-color: var(--yt-opalescence-grey); + --ytd-watch-card-album-header-background: var(--yt-white); + --ytd-watch-header-background: var(--yt-surface-300); + --ytd-backstage-metadata-text-color: var(--yt-opalescence-grey); + --ytd-backstage-video-link-background-color: var(--yt-opalescence-soft-grey-opacity-lighten-3); + --ytd-backstage-image-alert-color: var(--yt-luna-black-opacity-lighten-2); + --ytd-backstage-cancel-background-color: var(--yt-white); + --ytd-backstage-cancel-color: var(--yt-luna-black-opacity-lighten-3); + --ytd-backstage-attachment-background-color: var(--yt-surface-100); + --ytd-backstage-creationbox-inactive-color: var(--yt-body-200); + --ytd-backstage-creationbox-text-color: var(--yt-body-300); + --ytd-backstage-creationbox-input-text-color: var(--yt-body-500); + --ytd-backstage-creationbox-disabled-button-color: var(--yt-body-100); + --ytd-backstage-creationbox-disabled-button-text-color: var(--yt-white); + --ytd-backstage-attachment-icon-hover-color: var(--yt-body-400); + --ytd-sponsorships-background-color-focus: var(--yt-opalescence-soft-grey-opacity-lighten-3); + --ytd-badge-disabled-color: var(--yt-opalescence-grey-opacity-lighten-3); + --ytd-collection-badge-color: var(--yt-luna-black-opacity-lighten-1); + --ytd-owner-badge-color: var(--yt-luna-black-opacity-lighten-3); + --ytd-simple-badge-color: var(--yt-luna-black-opacity-lighten-2); + --ytd-shopping-product-info: var(--yt-luna-black-opacity-lighten-1); + --ytd-transcript-cue-hover-background-color: var(--yt-opalescence-soft-grey); + --ytd-transcript-toolbar-background-color: var(--yt-opalescence-soft-grey); + --ytd-transcript-toolbar-text: var(--yt-luna-black); + --ytd-video-publish-date-color: var(--yt-luna-black-opacity-lighten-2); + --ytd-vat-notice-text: var(--yt-luna-black-opacity-lighten-2); + --ytd-offer-background-color: var(--yt-opalescence-soft-grey-opacity-lighten-3); + --ytd-video-game-watch-card-logo-color: var(--yt-luna-black); + --ytd-watch-split-pane-sidebar-background-color: var(--yt-surface-200); + } + + html:not(.style-scope)[dark],:not(.style-scope)[dark] { + --ytd-searchbox-border-color: var(--yt-opalescence-grey-opacity-lighten-4); + --ytd-searchbox-legacy-border-color: #303030; + --ytd-searchbox-legacy-border-shadow-color: rgba(0, 0, 0, 0); + --ytd-searchbox-legacy-button-color: rgba(255, 255, 255, 0.08); + --ytd-searchbox-legacy-button-border-color: #303030; + --ytd-searchbox-legacy-button-focus-color: rgba(255, 255, 255, 0.08); + --ytd-searchbox-legacy-button-hover-color: rgba(255, 255, 255, 0.08); + --ytd-searchbox-legacy-button-hover-border-color: #303030; + --ytd-searchbox-legacy-button-icon-color: var(--yt-dark-body-300); + --ytd-moderation-panel-background: var(--yt-dark-surface-200-lighten-1); + --ytd-moderation-panel-hover: var(--yt-dark-surface-200); + --ytd-moderation-panel-comment-text: var(--yt-dark-body-300); + --ytd-moderation-panel-comment-metadata-text: var(--yt-dark-body-300); + --ytd-moderation-icon-color: var(--yt-dark-body-300); + --ytd-moderation-icon-hover-color: var(--yt-dark-body-400); + --ytd-comment-text-color: var(--yt-dark-body-500); + --ytd-comment-metadata-text-color: var(--yt-opalescence-grey); + --ytd-watch-card-secondary-text-color: var(--yt-opalescence-soft-grey); + --ytd-watch-card-album-header-background: var(--yt-luna-black); + --ytd-watch-header-background: var(--yt-dark-surface-200); + --ytd-backstage-metadata-text-color: var(--yt-dark-body-500); + --ytd-backstage-video-link-background-color: var(--yt-dark-surface-300); + --ytd-backstage-image-alert-color: var(--yt-dark-body-500); + --ytd-backstage-cancel-background-color: var(--yt-dark-surface-300); + --ytd-backstage-cancel-color: var(--yt-white); + --ytd-backstage-attachment-background-color: var(--yt-dark-surface-100); + --ytd-backstage-creationbox-inactive-color: var(--yt-dark-body-200); + --ytd-backstage-creationbox-text-color: var(--yt-dark-body-300); + --ytd-backstage-creationbox-input-text-color: var(--yt-dark-body-500); + --ytd-backstage-creationbox-disabled-button-color: var(--yt-dark-body-100); + --ytd-backstage-creationbox-disabled-button-text-color: var(--yt-dark-body-200); + --ytd-backstage-attachment-icon-hover-color: var(--yt-dark-body-400); + --ytd-sponsorships-background-color-focus: var(--yt-dark-surface-200); + --ytd-badge-disabled-color: var(--yt-white-opacity-lighten-3); + --ytd-collection-badge-color: var(--yt-white-opacity-lighten-1); + --ytd-owner-badge-color: var(--yt-white-opacity-lighten-3); + --ytd-simple-badge-color: var(--yt-white-opacity-lighten-2); + --ytd-shopping-product-info: var(--yt-dark-body-400); + --ytd-transcript-cue-hover-background-color: var(--yt-opalescence-grey-opacity-lighten-3); + --ytd-transcript-toolbar-background-color: var(--yt-opalescence-grey-opacity-lighten-3); + --ytd-transcript-toolbar-text: var(--yt-dark-body-500); + --ytd-video-publish-date-color: var(--yt-white-opacity-lighten-2); + --ytd-vat-notice-text: var(--yt-white-opacity-lighten-2); + --ytd-offer-background-color: var(--yt-dark-surface-300); + --ytd-video-game-watch-card-logo-color: var(--yt-white); + --ytd-watch-split-pane-sidebar-background-color: var(--yt-dark-surface-200); + } + + html:not(.style-scope) { + --ytd-z-index-report-form-overlay: 100; + --ytd-z-index-watch-fixie-secondary-section-detached: 500; + --ytd-z-index-engagement-panel-scrim: 600; + --ytd-z-index-engagement-panel-scrimmed: 601; + --ytd-z-index-miniplayer-bar: 2008; + --ytd-z-index-masthead: 2020; + --ytd-z-index-user-mention-suggestions-container: 2022; + --ytd-z-index-notification: 2024; + --ytd-z-index-miniplayer: 2025; + --ytd-z-index-channel-name: 300; + --ytd-thumbnail-height: 118px; + --ytd-grid-1-columns-width: 214px; + --ytd-grid-2-columns-width: 428px; + --ytd-grid-3-columns-width: 642px; + --ytd-grid-4-columns-width: 856px; + --ytd-grid-5-columns-width: 1070px; + --ytd-grid-6-columns-width: 1284px; + --ytd-grid-max-width: 1284px; + --ytd-grid-thumbnail_-_height: 118px; --ytd-grid-thumbnail_-_width: 210px;; + --ytd-grid-section_-_margin-bottom: 24px;; + --ytd-grid-video-item_-_display: inline-block; --ytd-grid-video-item_-_width: 210px;; + --ytd-grid-subheader_-_margin: 24px 0;; + --ytd-grid-video-title_-_display: var(--ytd-link-two-lines_-_display, block); --ytd-grid-video-title_-_margin: 8px 0 8px; --ytd-grid-video-title_-_max-height: var(--ytd-link-two-lines_-_max-height); --ytd-grid-video-title_-_overflow: var(--ytd-link-two-lines_-_overflow); --ytd-grid-video-title_-_font-size: var(--ytd-link-two-lines_-_font-size); --ytd-grid-video-title_-_font-weight: var(--ytd-link-two-lines_-_font-weight); --ytd-grid-video-title_-_line-height: var(--ytd-link-two-lines_-_line-height); --ytd-grid-video-title_-_letter-spacing: var(--ytd-link-two-lines_-_letter-spacing);; + --ytd-grid-info-container_-_padding-right: 24px;; + --ytd-scrollbar-width: 8px; + --ytd-scrollbar-scrubber_-_height: 56px; --ytd-scrollbar-scrubber_-_background: var(--yt-opalescence-grey-opacity-lighten-3);; + --ytd-fixed-width-container_-_position: relative; --ytd-fixed-width-container_-_overflow: hidden; --ytd-fixed-width-container_-_display: block;; + --ytd-default-promo-panel-renderer-height: 600px; + } + + body:not(.style-scope)[no-y-overflow] { + overflow-y: hidden; + } + + html:not(.style-scope) { + --ytd-grid-base: 103px; + --ytd-margin-base: 4px; + --ytd-avatar-size: 32px; + --ytd-toolbar-height: 56px; + --ytd-margin-2x: 8px; + --ytd-margin-3x: 12px; + --ytd-margin-4x: 16px; + --ytd-margin-5x: 20px; + --ytd-margin-6x: 24px; + --ytd-margin-7x: 28px; + --ytd-margin-8x: 32px; + --ytd-margin-9x: 36px; + --ytd-margin-10x: 40px; + --ytd-margin-11x: 44px; + --ytd-margin-12x: 48px; + --ytd-margin-14x: 56px; + --ytd-margin-16x: 64px; + --ytd-margin-17x: 68px; + --ytd-margin-24x: 96px; + --ytd-margin-25x: 100px; + --ytd-margin-35x: 140px; + --ytd-neg-margin-base: -4px; + --ytd-neg-margin-2x: -8px; + --ytd-neg-margin-3x: -12px; + --ytd-neg-margin-4x: -16px; + --ytd-neg-margin-5x: -20px; + --ytd-neg-margin-6x: -24px; + --ytd-neg-margin-7x: -28px; + --ytd-neg-margin-8x: -32px; + --ytd-neg-margin-10x: -40px; + --ytd-neg-margin-11x: -44px; + --ytd-neg-margin-12x: -48px; + --ytd-neg-margin-14x: -56px; + --ytd-neg-margin-16x: -64px; + --ytd-neg-margin-24x: -96px; + --ytd-neg-margin-25x: -100px; + --ytd-grid-1x1_-_height: 103px; --ytd-grid-1x1_-_width: 103px;; + --ytd-safari-layout-fix_-_-ms-flex: var(--layout-flex-none_-_-ms-flex); --ytd-safari-layout-fix_-_-webkit-flex: var(--layout-flex-none_-_-webkit-flex); --ytd-safari-layout-fix_-_flex: var(--layout-flex-none_-_flex);; + --yt-report-form-modal-renderer-min-width: 250px; + --yt-legal-report-details-form-renderer-min-width: 250px; + --yt-circular_-_border-radius: 50%; --yt-circular_-_background-color: transparent; --yt-circular_-_overflow: hidden;; + --yt-multi-line-ellipsis_-_-webkit-box-orient: vertical; --yt-multi-line-ellipsis_-_text-overflow: ellipsis; --yt-multi-line-ellipsis_-_white-space: normal; --yt-multi-line-ellipsis_-_display: -webkit-box;; + --yt-upsell-dialog-layout-vertical-width: 400px; + --yt-upsell-dialog-layout-horizontal-width: 800px; + } + + html:not(.style-scope) { + --yt-redeem-code-title_-_font-size: 2.4rem; --yt-redeem-code-title_-_font-weight: 400; --yt-redeem-code-title_-_line-height: 2.8rem;; + + --yt-redeem-input-text_-_font-size: 1.6rem; --yt-redeem-input-text_-_font-weight: 400; --yt-redeem-input-text_-_line-height: 1.6rem;; + + --yt-redeem-error-message_-_font-size: 1.2rem; --yt-redeem-error-message_-_font-weight: 400; --yt-redeem-error-message_-_line-height: 2.0rem;; + + --yt-post-redemption-section-title_-_font-size: 2.6rem; --yt-post-redemption-section-title_-_font-weight: 400; --yt-post-redemption-section-title_-_font-family: 'YT Sans'; --yt-post-redemption-section-title_-_line-height: 3rem; --yt-post-redemption-section-title_-_-moz-osx-font-smoothing: grayscale; --yt-post-redemption-section-title_-_-webkit-font-smoothing: antialiased;; + } + + html:not(.style-scope)[noto] { + --paper-font-common-base_-_font-family: 'Roboto', 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans TC', 'Noto Sans SC', 'Arial', sans-serif; --paper-font-common-base_-_-webkit-font-smoothing: antialiased;; + } + + html:not(.style-scope)[typography] { + --yt-channel-line-height: 3.4rem; + --yt-navbar-title-line-height: 2.6rem; + --yt-subheadline-line-height: 2.2rem; + --yt-subheadline-letter-spacing: .1px; + --yt-subheadline-link-letter-spacing: .15px; + --yt-link-line-height: 2rem; + --yt-link-letter-spacing: .25px; + --yt-thumbnail-attribution-font-size: 1.2rem; + --yt-thumbnail-attribution-line-height: 1.8rem; + --yt-thumbnail-attribution-letter-spacing: .3px; + --yt-user-comment-line-height: 2rem; + --yt-user-comment-letter-spacing: .2px; + --yt-guide-highlight-line-height: 2rem; + --yt-guide-highlight-letter-spacing: .25px; + --yt-caption-font-size: 1.2rem; + --yt-caption-line-height: 1.8rem; + --yt-caption-letter-spacing: .35px; + } + + html:not(.style-scope) { + --ytd-channel-title_-_font-size: var(--yt-channel-title-font-size, 2.4rem); --ytd-channel-title_-_font-weight: 400; --ytd-channel-title_-_line-height: var(--yt-channel-title-line-height, 3rem);; + + --yt-navbar-title-font-size: 1.8rem; + + --ytd-navbar-title_-_font-size: var(--yt-navbar-title-font-size); --ytd-navbar-title_-_font-weight: 400; --ytd-navbar-title_-_line-height: var(--yt-navbar-title-line-height, 2.4rem);; + + --ytd-navbar-title-two-lines_-_display: block; --ytd-navbar-title-two-lines_-_max-height: calc(2 * var(--yt-navbar-title-line-height, 2.4rem)); --ytd-navbar-title-two-lines_-_overflow: hidden; --ytd-navbar-title-two-lines_-_font-size: var(--ytd-navbar-title_-_font-size); --ytd-navbar-title-two-lines_-_font-weight: var(--ytd-navbar-title_-_font-weight); --ytd-navbar-title-two-lines_-_line-height: var(--ytd-navbar-title_-_line-height);; + + --ytd-subheadline_-_font-size: var(--yt-subheadline-font-size, 1.6rem); --ytd-subheadline_-_font-weight: 400; --ytd-subheadline_-_line-height: var(--yt-subheadline-line-height, 2rem); --ytd-subheadline_-_letter-spacing: var(--yt-subheadline-letter-spacing, normal);; + + --ytd-subheadline-one-line_-_display: block; --ytd-subheadline-one-line_-_max-height: var(--yt-subheadline-line-height, 2rem); --ytd-subheadline-one-line_-_overflow: hidden; --ytd-subheadline-one-line_-_font-size: var(--ytd-subheadline_-_font-size); --ytd-subheadline-one-line_-_font-weight: var(--ytd-subheadline_-_font-weight); --ytd-subheadline-one-line_-_line-height: var(--ytd-subheadline_-_line-height); --ytd-subheadline-one-line_-_letter-spacing: var(--ytd-subheadline_-_letter-spacing);; + + --ytd-subheadline-one-line-ellipsis_-_white-space: nowrap; --ytd-subheadline-one-line-ellipsis_-_text-overflow: ellipsis; --ytd-subheadline-one-line-ellipsis_-_display: var(--ytd-subheadline-one-line_-_display); --ytd-subheadline-one-line-ellipsis_-_max-height: var(--ytd-subheadline-one-line_-_max-height); --ytd-subheadline-one-line-ellipsis_-_overflow: var(--ytd-subheadline-one-line_-_overflow); --ytd-subheadline-one-line-ellipsis_-_font-size: var(--ytd-subheadline-one-line_-_font-size); --ytd-subheadline-one-line-ellipsis_-_font-weight: var(--ytd-subheadline-one-line_-_font-weight); --ytd-subheadline-one-line-ellipsis_-_line-height: var(--ytd-subheadline-one-line_-_line-height); --ytd-subheadline-one-line-ellipsis_-_letter-spacing: var(--ytd-subheadline-one-line_-_letter-spacing);; + + --ytd-subheadline-link_-_font-size: var(--yt-subheadline-font-size, 1.6rem); --ytd-subheadline-link_-_font-weight: 500; --ytd-subheadline-link_-_line-height: var(--yt-subheadline-line-height, 2rem); --ytd-subheadline-link_-_letter-spacing: var(--yt-subheadline-link-letter-spacing, normal);; + + --ytd-link_-_font-size: var(--yt-link-font-size, 1.4rem); --ytd-link_-_font-weight: 500; --ytd-link_-_line-height: var(--yt-link-line-height, 1.6rem); --ytd-link_-_letter-spacing: var(--yt-link-letter-spacing, normal);; + + --ytd-link-one-line_-_display: block; --ytd-link-one-line_-_max-height: var(--yt-link-line-height, 1.6rem); --ytd-link-one-line_-_white-space: nowrap; --ytd-link-one-line_-_overflow: hidden; --ytd-link-one-line_-_font-size: var(--ytd-link_-_font-size); --ytd-link-one-line_-_font-weight: var(--ytd-link_-_font-weight); --ytd-link-one-line_-_line-height: var(--ytd-link_-_line-height); --ytd-link-one-line_-_letter-spacing: var(--ytd-link_-_letter-spacing);; + + --ytd-link-two-lines_-_display: block; --ytd-link-two-lines_-_max-height: calc(2 * var(--yt-link-line-height, 1.6rem)); --ytd-link-two-lines_-_overflow: hidden; --ytd-link-two-lines_-_font-size: var(--ytd-link_-_font-size); --ytd-link-two-lines_-_font-weight: var(--ytd-link_-_font-weight); --ytd-link-two-lines_-_line-height: var(--ytd-link_-_line-height); --ytd-link-two-lines_-_letter-spacing: var(--ytd-link_-_letter-spacing);; + + --ytd-thumbnail-attribution_-_font-size: var(--yt-thumbnail-attribution-font-size, 1.3rem); --ytd-thumbnail-attribution_-_font-weight: 400; --ytd-thumbnail-attribution_-_line-height: var(--yt-thumbnail-attribution-line-height, 1.8rem); --ytd-thumbnail-attribution_-_letter-spacing: var(--yt-thumbnail-attribution-letter-spacing, inherit); --ytd-thumbnail-attribution_-_text-transform: none;; + + --ytd-thumbnail-attribution-one-line_-_display: block; --ytd-thumbnail-attribution-one-line_-_max-height: var(--yt-thumbnail-attribution-line-height, 1.8rem); --ytd-thumbnail-attribution-one-line_-_overflow: hidden; --ytd-thumbnail-attribution-one-line_-_font-size: var(--ytd-thumbnail-attribution_-_font-size); --ytd-thumbnail-attribution-one-line_-_font-weight: var(--ytd-thumbnail-attribution_-_font-weight); --ytd-thumbnail-attribution-one-line_-_line-height: var(--ytd-thumbnail-attribution_-_line-height); --ytd-thumbnail-attribution-one-line_-_letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); --ytd-thumbnail-attribution-one-line_-_text-transform: var(--ytd-thumbnail-attribution_-_text-transform);; + + --ytd-thumbnail-attribution-two-line_-_display: block; --ytd-thumbnail-attribution-two-line_-_max-height: calc(2 * var(--yt-thumbnail-attribution-line-height, 1.8rem)); --ytd-thumbnail-attribution-two-line_-_overflow: hidden; --ytd-thumbnail-attribution-two-line_-_font-size: var(--ytd-thumbnail-attribution_-_font-size); --ytd-thumbnail-attribution-two-line_-_font-weight: var(--ytd-thumbnail-attribution_-_font-weight); --ytd-thumbnail-attribution-two-line_-_line-height: var(--ytd-thumbnail-attribution_-_line-height); --ytd-thumbnail-attribution-two-line_-_letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); --ytd-thumbnail-attribution-two-line_-_text-transform: var(--ytd-thumbnail-attribution_-_text-transform);; + + --ytd-thumbnail-attribution-two-line-ellipsis_-_display: -webkit-box; --ytd-thumbnail-attribution-two-line-ellipsis_-_-webkit-box-orient: vertical; --ytd-thumbnail-attribution-two-line-ellipsis_-_max-height: calc(2 * var(--yt-thumbnail-attribution-line-height, 1.8rem)); --ytd-thumbnail-attribution-two-line-ellipsis_-_overflow: hidden; --ytd-thumbnail-attribution-two-line-ellipsis_-_text-overflow: ellipsis; --ytd-thumbnail-attribution-two-line-ellipsis_-_white-space: normal; --ytd-thumbnail-attribution-two-line-ellipsis_-_-webkit-line-clamp: 2; --ytd-thumbnail-attribution-two-line-ellipsis_-_font-size: var(--ytd-thumbnail-attribution_-_font-size); --ytd-thumbnail-attribution-two-line-ellipsis_-_font-weight: var(--ytd-thumbnail-attribution_-_font-weight); --ytd-thumbnail-attribution-two-line-ellipsis_-_line-height: var(--ytd-thumbnail-attribution_-_line-height); --ytd-thumbnail-attribution-two-line-ellipsis_-_letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); --ytd-thumbnail-attribution-two-line-ellipsis_-_text-transform: var(--ytd-thumbnail-attribution_-_text-transform);; + + --ytd-user-comment_-_font-size: var(--yt-user-comment-font-size, 1.4rem); --ytd-user-comment_-_font-weight: 400; --ytd-user-comment_-_line-height: var(--yt-user-comment-line-height, 2.1rem); --ytd-user-comment_-_letter-spacing: var(--yt-user-comment-letter-spacing, normal);; + + --ytd-user-comment-two-line_-_display: block; --ytd-user-comment-two-line_-_max-height: calc(2 * var(--yt-user-comment-line-height, 2.1rem)); --ytd-user-comment-two-line_-_overflow: hidden; --ytd-user-comment-two-line_-_font-size: var(--ytd-user-comment_-_font-size); --ytd-user-comment-two-line_-_font-weight: var(--ytd-user-comment_-_font-weight); --ytd-user-comment-two-line_-_line-height: var(--ytd-user-comment_-_line-height); --ytd-user-comment-two-line_-_letter-spacing: var(--ytd-user-comment_-_letter-spacing);; + + --ytd-tab-system_-_font-size: var(--yt-tab-system-font-size, 1.4rem); --ytd-tab-system_-_font-weight: 500; --ytd-tab-system_-_letter-spacing: .007px; --ytd-tab-system_-_text-transform: uppercase;; + + --ytd-caption_-_font-size: var(--yt-caption-font-size, 1.3rem); --ytd-caption_-_line-height: var(--yt-caption-line-height, normal); --ytd-caption_-_font-weight: 500; --ytd-caption_-_letter-spacing: var(--yt-caption-letter-spacing, .007px); --ytd-caption_-_text-transform: uppercase;; + + + --ytd-floating-input-thumbnail-attribution_-_font-size: 1.7rem; --ytd-floating-input-thumbnail-attribution_-_font-weight: 400; --ytd-floating-input-thumbnail-attribution_-_line-height: 2.4rem;; + + --ytd-badge_-_font-size: var(--yt-badge-font-size, 1.2rem); --ytd-badge_-_font-weight: 500; --ytd-badge_-_line-height: var(--yt-badge-line-height, 1.2rem);; + + --ytd-comment-link_-_font-size: 1.3rem; --ytd-comment-link_-_font-weight: 500; --ytd-comment-link_-_line-height: 1.8rem;; + + --ytd-mini-attribution_-_font-size: 1.2rem; --ytd-mini-attribution_-_font-weight: 400; --ytd-mini-attribution_-_line-height: 1.5rem;; + + --ytd-mini-attribution-endpoint_-_font-size: 1.2rem; --ytd-mini-attribution-endpoint_-_font-weight: 500; --ytd-mini-attribution-endpoint_-_line-height: 1.5rem;; + + --ytd-label_-_font-size: 1.0rem; --ytd-label_-_font-weight: 400; --ytd-label_-_line-height: 1.4rem;; + + --ytd-label-one-line-ellipsis_-_display: block; --ytd-label-one-line-ellipsis_-_max-height: 1.4rem; --ytd-label-one-line-ellipsis_-_overflow: hidden; --ytd-label-one-line-ellipsis_-_text-overflow: ellipsis; --ytd-label-one-line-ellipsis_-_white-space: nowrap; --ytd-label-one-line-ellipsis_-_font-size: var(--ytd-label_-_font-size); --ytd-label-one-line-ellipsis_-_font-weight: var(--ytd-label_-_font-weight); --ytd-label-one-line-ellipsis_-_line-height: var(--ytd-label_-_line-height);; + + --ytd-code-snippet_-_font-family: 'Roboto Mono', monospace; --ytd-code-snippet_-_font-size: 1.4rem; --ytd-code-snippet_-_font-weight: 400; --ytd-code-snippet_-_line-height: 2.4rem;; + + --ytd-conversation-metadata_-_font-size: 1.2rem; --ytd-conversation-metadata_-_font-weight: 400; --ytd-conversation-metadata_-_line-height: 1.6rem;; + + --yt-code_-_font-family: 'Roboto Mono', monospace; --yt-code_-_font-size: 1.4rem; --yt-code_-_font-weight: 500; --yt-code_-_line-height: 2.1rem;; + + --ytd-guide-highlight_-_font-size: 1.4rem; --ytd-guide-highlight_-_font-weight: 500; --ytd-guide-highlight_-_line-height: var(--yt-guide-highlight-line-height, 1.8rem); --ytd-guide-highlight_-_letter-spacing: var(--yt-guide-highlight-letter-spacing, normal);; + + --ytd-item-section-header-title_-_font-size: 1.6em; --ytd-item-section-header-title_-_line-height: 1.4em; --ytd-item-section-header-title_-_font-weight: 500;; + } + + html:not(.style-scope) { + --paper-tooltip_-_margin: 8px; --paper-tooltip_-_font-size: var(--ytd-thumbnail-attribution_-_font-size); --paper-tooltip_-_font-weight: var(--ytd-thumbnail-attribution_-_font-weight); --paper-tooltip_-_line-height: var(--ytd-thumbnail-attribution_-_line-height); --paper-tooltip_-_letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); --paper-tooltip_-_text-transform: var(--ytd-thumbnail-attribution_-_text-transform);; + --paper-tooltip-delay-in: 1ms; + --paper-tooltip-delay-out: 0; + --paper-tooltip-duration-in: 150ms; + --paper-tooltip-duration-out: 75ms; + --iron-overlay-backdrop-opacity: 0.8; + --paper-tab-content-focused_-_font-weight: 500;; + } + + html:not(.style-scope) { + --paper-dialog-background-color: var(--yt-spec-brand-background-solid); + --paper-listbox-background-color: var(--yt-spec-brand-background-solid); + --paper-listbox-color: var(--yt-spec-text-primary); + --paper-spinner-layer-1-color: var(--yt-spec-icon-inactive); + --paper-spinner-layer-2-color: var(--yt-spec-icon-inactive); + --paper-spinner-layer-3-color: var(--yt-spec-icon-inactive); + --paper-spinner-layer-4-color: var(--yt-spec-icon-inactive); + --paper-spinner-color: var(--yt-spec-icon-inactive); + --paper-input-container-focus-color: var(--yt-spec-themed-blue); + --paper-input-container-input-color: var(--yt-spec-text-primary); + --paper-input-container-label-floating_-_font-size: var(--ytd-floating-input-thumbnail-attribution_-_font-size); --paper-input-container-label-floating_-_font-weight: var(--ytd-floating-input-thumbnail-attribution_-_font-weight); --paper-input-container-label-floating_-_line-height: var(--ytd-floating-input-thumbnail-attribution_-_line-height);; + --paper-input-container-invalid-color: var(--yt-spec-brand-link-text); + --paper-checkbox-unchecked-color: var(--yt-spec-icon-inactive); + --paper-checkbox-unchecked-ink-color: var(--yt-spec-icon-inactive); + --paper-checkbox-checked-color: var(--yt-spec-call-to-action); + --paper-checkbox-checked-ink-color: var(--yt-spec-call-to-action); + --paper-checkbox-label-color: var(--yt-spec-text-primary); + --paper-checkbox-label-spacing: 16px; + --paper-checkbox-size: 20px; + --paper-checkbox-checkmark-color: var(--yt-spec-text-primary-inverse); + --paper-radio-button-unchecked-color: var(--yt-spec-icon-inactive); + --paper-radio-button-unchecked-ink-color: var(--yt-spec-icon-inactive); + --paper-radio-button-checked-color: var(--yt-spec-call-to-action); + --paper-radio-button-checked-ink-color: var(--yt-spec-call-to-action); + --paper-radio-button-label-spacing: 16px; + --paper-radio-button-label-color: var(--yt-spec-text-primary); + --paper-radio-button-size: 20px; + --paper-item_-_white-space: nowrap; --paper-item_-_font-size: initial; --paper-item_-_font-weight: initial; --paper-item_-_line-height: initial; --paper-item_-_letter-spacing: initial;; + --paper-input-error_-_overflow: hidden;; + --paper-toggle-button-unchecked-bar-color: var(--yt-spec-icon-disabled); + --paper-toggle-button-unchecked-button-color: var(--yt-spec-icon-inactive); + --paper-toggle-button-checked-bar-color: var(--yt-spec-icon-disabled); + --paper-toggle-button-checked-button-color: var(--yt-spec-call-to-action); + --paper-toggle-button-checked-ink-color: var(--yt-spec-call-to-action); + --paper-toggle-button-unchecked-ink-color: var(--yt-spec-touch-response); + --paper-tab-content-unselected_-_opacity: 1;; + --paper-menu-disabled-color: var(--yt-spec-text-primary); + --paper-menu-background-color: var(--yt-spec-brand-background-solid); + --paper-menu-color: var(--yt-spec-text-primary); + --yt-icon-width: 40px; + --yt-icon-height: 40px; + --yt-search-correction_-_margin-top: 24px;; + --yt-search-correction-corrected_-_color: var(--yt-spec-text-primary); --yt-search-correction-corrected_-_font-size: var(--ytd-thumbnail-attribution_-_font-size); --yt-search-correction-corrected_-_font-weight: var(--ytd-thumbnail-attribution_-_font-weight); --yt-search-correction-corrected_-_line-height: var(--ytd-thumbnail-attribution_-_line-height); --yt-search-correction-corrected_-_letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); --yt-search-correction-corrected_-_text-transform: var(--ytd-thumbnail-attribution_-_text-transform);; + --yt-search-correction-corrected-link_-_font-size: var(--ytd-link_-_font-size); --yt-search-correction-corrected-link_-_font-weight: var(--ytd-link_-_font-weight); --yt-search-correction-corrected-link_-_line-height: var(--ytd-link_-_line-height); --yt-search-correction-corrected-link_-_letter-spacing: var(--ytd-link_-_letter-spacing);; + --yt-search-correction-original_-_padding-left: 8px; --yt-search-correction-original_-_color: var(--yt-spec-text-primary); --yt-search-correction-original_-_font-size: var(--ytd-thumbnail-attribution_-_font-size); --yt-search-correction-original_-_font-weight: var(--ytd-thumbnail-attribution_-_font-weight); --yt-search-correction-original_-_line-height: var(--ytd-thumbnail-attribution_-_line-height); --yt-search-correction-original_-_letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); --yt-search-correction-original_-_text-transform: var(--ytd-thumbnail-attribution_-_text-transform);; + --yt-search-correction-original-link_-_font-size: var(--ytd-link_-_font-size); --yt-search-correction-original-link_-_font-weight: var(--ytd-link_-_font-weight); --yt-search-correction-original-link_-_line-height: var(--ytd-link_-_line-height); --yt-search-correction-original-link_-_letter-spacing: var(--ytd-link_-_letter-spacing);; + --yt-endpoint_-_display: inline-block; --yt-endpoint_-_cursor: pointer; --yt-endpoint_-_text-decoration: none; --yt-endpoint_-_color: var(--yt-endpoint-color, var(--yt-spec-text-primary));; + --yt-endpoint-hover_-_color: var(--yt-endpoint-hover-color, var(--yt-spec-text-primary)); --yt-endpoint-hover_-_text-decoration: var(--yt-endpoint-text-decoration, none);; + --yt-notification-button-bubble_-_color: var(--yt-swatch-important-text, var(--yt-white)); --yt-notification-button-bubble_-_background-color: var(--yt-spec-brand-button-background); --yt-notification-button-bubble_-_width: 18px; --yt-notification-button-bubble_-_height: 18px; --yt-notification-button-bubble_-_border-radius: 50%; --yt-notification-button-bubble_-_line-height: 18px; --yt-notification-button-bubble_-_font-size: 10px; --yt-notification-button-bubble_-_text-align: center; --yt-notification-button-bubble_-_cursor: pointer;; + } + + html:not(.style-scope) { + --ytd-rich-grid-items-per-row: 4; + --ytd-rich-grid-posts-per-row: 3; + --ytd-rich-grid-movies-per-row: 6; + --ytd-rich-grid-item-margin: 16px; + --ytd-rich-grid-item-min-width: 320px; + --ytd-rich-grid-item-max-width: 360px; + --ytd-rich-grid-mini-item-min-width: 240px; + --ytd-rich-grid-mini-item-max-width: 320px; + --ytd-rich-grid-movie-max-width: 220px; + } + + html:not(.style-scope) { + --paper-input-container-shared-input-style_-_position: relative; --paper-input-container-shared-input-style_-_outline: none; --paper-input-container-shared-input-style_-_box-shadow: none; --paper-input-container-shared-input-style_-_padding: 0; --paper-input-container-shared-input-style_-_margin: 0; --paper-input-container-shared-input-style_-_width: 100%; --paper-input-container-shared-input-style_-_max-width: 100%; --paper-input-container-shared-input-style_-_background: transparent; --paper-input-container-shared-input-style_-_border: none; --paper-input-container-shared-input-style_-_color: var(--paper-input-container-input-color, var(--primary-text-color)); --paper-input-container-shared-input-style_-_-webkit-appearance: none; --paper-input-container-shared-input-style_-_text-align: apply-shim-inherit; --paper-input-container-shared-input-style_-_vertical-align: var(--paper-input-container-input-align, bottom); --paper-input-container-shared-input-style_-_font-family: var(--paper-font-subhead_-_font-family); --paper-input-container-shared-input-style_-_-webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); --paper-input-container-shared-input-style_-_font-size: var(--paper-font-subhead_-_font-size); --paper-input-container-shared-input-style_-_font-weight: var(--paper-font-subhead_-_font-weight); --paper-input-container-shared-input-style_-_line-height: var(--paper-font-subhead_-_line-height);; + } + + html:not(.style-scope) { + --yt-live-chat-32px-icon-button_-_width: 40px; --yt-live-chat-32px-icon-button_-_height: 40px; --yt-live-chat-32px-icon-button_-_padding: 8px;; + } + + html:not(.style-scope) { + --yt-button-margin: 0; + --yt-button-padding: 10px 16px; + + --yt-button-padding-minus-border: 9px 15px; + --yt-button-padding-minus-focus-outline: 8px 14px; + --yt-button-padding-minus-focus-outline-width: 2px; + --yt-button-with-icon-padding-minus-focus-outline: 4px 14px; + --yt-button-border-radius: 2px; + } + + iron-overlay-backdrop { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--iron-overlay-backdrop-background-color, #000); + opacity: 0; + transition: opacity 0.2s; + pointer-events: none; + ; + } + + iron-overlay-backdrop.opened { + opacity: var(--iron-overlay-backdrop-opacity, 0.6); + pointer-events: auto; + ; + } + + paper-item,.paper-item.paper-item { + display: block; + position: relative; + min-height: var(--paper-item-min-height, 48px); + padding: 0px 16px; + } + + .paper-item.paper-item { + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height); + border:none; + outline: none; + background: white; + width: 100%; + text-align: left; + } + + paper-item[hidden],.paper-item.paper-item[hidden] { + display: none !important; + } + + paper-item.iron-selected,.paper-item.iron-selected.paper-item { + font-weight: var(--paper-item-selected-weight, bold); + + ; + } + + paper-item[disabled],.paper-item.paper-item[disabled] { + color: var(--paper-item-disabled-color, var(--disabled-text-color)); + + ; + } + + paper-item:focus,.paper-item.paper-item:focus { + position: relative; + outline: 0; + + ; + } + + paper-item:focus:before,.paper-item.paper-item:focus:before { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + + background: currentColor; + content: ''; + opacity: var(--dark-divider-opacity); + pointer-events: none; + + ; + } + + paper-item { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height); + + white-space: var(--paper-item_-_white-space); font-size: var(--paper-item_-_font-size, var(--paper-font-subhead_-_font-size)); font-weight: var(--paper-item_-_font-weight, var(--paper-font-subhead_-_font-weight)); line-height: var(--paper-item_-_line-height, var(--paper-font-subhead_-_line-height)); letter-spacing: var(--paper-item_-_letter-spacing); + + min-height: var(--paper-item-min-height, 48px); + } + + paper-listbox { + display: block; + padding: 8px 0; + + background: var(--paper-listbox-background-color, var(--primary-background-color)); + color: var(--paper-listbox-color, var(--primary-text-color)); + + ; + } + + a.ytd-menu-navigation-item-renderer { + display: block; + } + + paper-item.ytd-menu-navigation-item-renderer { + --yt-endpoint-force-cursor: pointer; + --paper-item-min-height: 36px; + padding: 0 36px 0 16px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + } + + paper-item.ytd-menu-navigation-item-renderer:hover { + background-color: var(--yt-spec-10-percent-layer); + } + + paper-item.ytd-menu-navigation-item-renderer:focus { + background-color: var(--yt-spec-badge-chip-background); + outline: 0; + position: relative; + } + + yt-formatted-string.ytd-menu-navigation-item-renderer { + color: var(--yt-spec-text-primary); + white-space: nowrap; + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + yt-icon.ytd-menu-navigation-item-renderer { + display: var(--yt-menu-item-icon-display, none); + margin-right: 16px; + width: 24px; + height: 24px; + color: var(--yt-spec-icon-inactive); + -ms-flex: none; + -webkit-flex: none; + flex: none; + } + + ytd-menu-navigation-item-renderer[use-icons] { + --yt-menu-item-icon-display: inline-block; + } + + ytd-menu-navigation-item-renderer[has-separator]:not(:last-child)::after { + content: ""; + display: block; + height: 1px; + background-color: var(--yt-spec-10-percent-layer); + margin: 8px 0; + } + + paper-item.ytd-menu-navigation-item-renderer[disabled] yt-formatted-string.ytd-menu-navigation-item-renderer { + color: var(--yt-spec-text-disabled); + } + + paper-item.ytd-menu-navigation-item-renderer[disabled] yt-icon.ytd-menu-navigation-item-renderer { + color: var(--yt-spec-icon-disabled); + } + + ytd-menu-navigation-item-renderer,.paper-item.ytd-menu-navigation-item-renderer { + display: block; + position: relative; + min-height: var(--paper-item-min-height, 48px); + padding: 0px 16px; + } + + .paper-item.ytd-menu-navigation-item-renderer { + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height); + border:none; + outline: none; + background: white; + width: 100%; + text-align: left; + } + + ytd-menu-navigation-item-renderer[hidden],.paper-item.ytd-menu-navigation-item-renderer[hidden] { + display: none !important; + } + + ytd-menu-navigation-item-renderer.iron-selected,.paper-item.iron-selected.ytd-menu-navigation-item-renderer { + font-weight: var(--paper-item-selected-weight, bold); + + ; + } + + ytd-menu-navigation-item-renderer[disabled],.paper-item.ytd-menu-navigation-item-renderer[disabled] { + color: var(--paper-item-disabled-color, var(--disabled-text-color)); + + ; + } + + ytd-menu-navigation-item-renderer:focus,.paper-item.ytd-menu-navigation-item-renderer:focus { + position: relative; + outline: 0; + + ; + } + + ytd-menu-navigation-item-renderer:focus:before,.paper-item.ytd-menu-navigation-item-renderer:focus:before { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + + background: currentColor; + content: ''; + opacity: var(--dark-divider-opacity); + pointer-events: none; + + ; + } + + ytd-menu-navigation-item-renderer { + min-height: 0; + padding: 0; + } + + yt-icon,.yt-icon-container.yt-icon { + display: -ms-inline-flexbox; + display: -webkit-inline-flex; + display: inline-flex; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + vertical-align: middle; + fill: var(--iron-icon-fill-color, currentcolor); + stroke: var(--iron-icon-stroke-color, none); + width: var(--iron-icon-width, 24px); + height: var(--iron-icon-height, 24px); + ; + ; + } + + yt-icon.external-container { + display: none !important; + } + + yt-formatted-string:not(.use-shadow):empty { + display: none; + } + + yt-formatted-string span.yt-formatted-string:empty { + display: none; + } + + yt-formatted-string[dir="auto"] { + text-align: right; + } + + .bold.yt-formatted-string { + font-weight: var(--yt-formatted-string-bold-font-weight, 500); + font-size: var(--yt-formatted-string-bold_-_font-size); font-weight: var(--yt-formatted-string-bold_-_font-weight, var(--yt-formatted-string-bold-font-weight, 500)); line-height: var(--yt-formatted-string-bold_-_line-height); letter-spacing: var(--yt-formatted-string-bold_-_letter-spacing); + } + + .yt-formatted-string:not(a).bold { + color: var(--yt-formatted-string-bold-color, inherit); + } + + .deemphasize.yt-formatted-string { + color: var(--yt-formatted-string-deemphasize-color); + margin-left: var(--yt-formatted-string-deemphasize_-_margin-left); + } + + .italic.yt-formatted-string { + font-style: italic; + ; + } + + .strikethrough.yt-formatted-string { + text-decoration: line-through; + ; + } + + yt-formatted-string > .emoji,yt-formatted-string > .small-emoji { + margin: -1px 2px 1px 2px; + vertical-align: middle; + } + + yt-formatted-string > .emoji { + width: var(--yt-formatted-string-emoji-size, 24px); + height: var(--yt-formatted-string-emoji-size, 24px); + } + + yt-formatted-string > .emoji.small-emoji { + width: var(--yt-formatted-string-small-emoji-size, 16px); + height: var(--yt-formatted-string-small-emoji-size, 16px); + } + + a.yt-formatted-string { + color: var(--yt-spec-call-to-action); + } + + a.yt-simple-endpoint.yt-formatted-string { + color: var(--yt-endpoint-color, var(--yt-spec-call-to-action)); + text-decoration: var(--yt-endpoint-text-regular-decoration, none); + } + + a.yt-simple-endpoint.yt-formatted-string:visited { + color: var(--yt-endpoint-visited-color, var(--yt-spec-call-to-action)); + } + + a.yt-simple-endpoint.yt-formatted-string:hover { + color: var(--yt-endpoint-hover-color, var(--yt-spec-call-to-action)); + text-decoration: var(--yt-endpoint-text-decoration, none); + } + + yt-formatted-string[has-link-only_]:not([force-default-style]) a.yt-simple-endpoint.yt-formatted-string { + color: var(--yt-endpoint-color, var(--yt-spec-text-primary)); + } + + yt-formatted-string[has-link-only_]:not([force-default-style]) a.yt-simple-endpoint.yt-formatted-string:visited { + color: var(--yt-endpoint-visited-color, var(--yt-spec-text-primary)); + } + + yt-formatted-string[has-link-only_]:not([force-default-style]) a.yt-simple-endpoint.yt-formatted-string:hover { + color: var(--yt-endpoint-hover-color, var(--yt-spec-text-primary)); + } + + yt-formatted-string[contenteditable] a.yt-simple-endpoint.yt-formatted-string,#contenteditable-root.yt-formatted-string a.yt-simple-endpoint.yt-formatted-string { + ; + } + + yt-formatted-string[split-lines] { + white-space: pre-wrap; + } + + yt-formatted-string[ellipsis-truncate].complex-string { + white-space: pre; + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + } + + yt-formatted-string[dir="auto"][ellipsis-truncate].complex-string { + display: inline-block; + } + + yt-formatted-string[dir="auto"][ellipsis-truncate].complex-string > *.yt-formatted-string:not(style) { + display: inline; + } + + yt-formatted-string[ellipsis-truncate] { + display: block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + yt-formatted-string[ellipsis-truncate] a.yt-formatted-string { + display: block; + + margin-right: -0.1em; + padding-right: 0.1em; + } + + yt-formatted-string[ellipsis-truncate] a.yt-formatted-string:last-child { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + yt-formatted-string::-webkit-scrollbar-thumb { + height: var(--ytd-scrollbar-scrubber_-_height); background: var(--ytd-scrollbar-scrubber_-_background); + } + + yt-formatted-string::-webkit-scrollbar { + width: var(--ytd-scrollbar-width); + } + + #contenteditable-root.yt-formatted-string .emoji.yt-formatted-string { + ; + } + + #contenteditable-root.yt-formatted-string .small-emoji.yt-formatted-string { + ; + } + + #contenteditable-root.yt-formatted-string { + ; + } + + #contenteditable-root.yt-formatted-string:empty:before { + ; + } + + #contenteditable-root.yt-formatted-string[aria-label].yt-formatted-string:empty:before { + ; + } + + ytd-menu-service-item-download-renderer { + cursor: pointer; + --yt-menu-item-icon-display: inline-block; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + paper-item.ytd-menu-service-item-download-renderer { + --paper-item-min-height: 36px; + padding: 0 36px 0 16px; + } + + paper-item.ytd-menu-service-item-download-renderer:hover { + background-color: var(--yt-spec-10-percent-layer); + } + + yt-formatted-string.ytd-menu-service-item-download-renderer { + color: var(--yt-spec-text-primary); + white-space: nowrap; + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + yt-icon.ytd-menu-service-item-download-renderer { + margin-right: 16px; + width: 24px; + height: 24px; + color: var(--yt-spec-icon-inactive); + display: var(--yt-menu-item-icon-display, none); + -ms-flex: none; + -webkit-flex: none; + flex: none; + } + + ytd-menu-service-item-renderer { + cursor: pointer; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + paper-item.ytd-menu-service-item-renderer { + --paper-item-min-height: 36px; + padding: 0 36px 0 16px; + } + + paper-item.ytd-menu-service-item-renderer:hover { + background-color: var(--yt-spec-10-percent-layer); + } + + yt-formatted-string.ytd-menu-service-item-renderer { + color: var(--yt-spec-text-primary); + white-space: nowrap; + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + yt-icon.ytd-menu-service-item-renderer { + margin-right: 16px; + width: 24px; + height: 24px; + color: var(--yt-spec-icon-inactive); + display: var(--yt-menu-item-icon-display, none); + -ms-flex: none; + -webkit-flex: none; + flex: none; + } + + ytd-menu-service-item-renderer[is-selected] { + background-color: var(--yt-spec-10-percent-layer); + } + + ytd-menu-service-item-renderer[is-selected] paper-item.ytd-menu-service-item-renderer:hover { + background-color: var(--yt-spec-badge-chip-background); + } + + ytd-menu-service-item-renderer[use-icons] { + --yt-menu-item-icon-display: inline-block; + } + + ytd-menu-service-item-renderer[has-separator_]:not(:last-child)::after { + content: ""; + display: block; + height: 1px; + background-color: var(--yt-spec-10-percent-layer); + margin: 8px 0; + } + + paper-item.ytd-menu-service-item-renderer[disabled] yt-formatted-string.ytd-menu-service-item-renderer { + color: var(--yt-spec-text-disabled); + } + + paper-item.ytd-menu-service-item-renderer[disabled] yt-icon.ytd-menu-service-item-renderer { + color: var(--yt-spec-icon-disabled); + } + + ytd-menu-popup-renderer { + display: inline-grid; + grid-template-columns: min-content; + background-color: var(--yt-spec-brand-background-primary); + border-radius: 4px; + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + } + + ytd-menu-popup-tip-renderer { + display: inline-block; + background-color: var(--yt-spec-brand-background-solid); + color: var(--yt-spec-text-primary); + padding: 10px 16px; + border-top: 1px solid var(--yt-spec-10-percent-layer); + font-size: 1.2rem; + font-weight: 400; + line-height: 1.5rem; + } + + ytd-toggle-menu-service-item-renderer { + cursor: pointer; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + span.ytd-toggle-menu-service-item-renderer { + color: var(--yt-spec-text-primary); + white-space: nowrap; + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + ytd-toggle-menu-service-item-renderer:hover { + background-color: var(--yt-spec-10-percent-layer); + } + + yt-icon.ytd-toggle-menu-service-item-renderer { + margin-right: 16px; + width: 24px; + height: 24px; + color: var(--yt-spec-icon-inactive); + display: var(--yt-menu-item-icon-display, none); + -ms-flex: none; + -webkit-flex: none; + flex: none; + } + + ytd-toggle-menu-service-item-renderer[use-icons] { + --yt-menu-item-icon-display: inline-block; + } + + paper-item.ytd-toggle-menu-service-item-renderer { + --paper-item-min-height: 36px; + padding: 0 36px 0 16px; + } + + ytd-menu-custom-icon-item-renderer { + cursor: pointer; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + paper-item.ytd-menu-custom-icon-item-renderer { + --paper-item-min-height: 40px; + } + + paper-item.ytd-menu-custom-icon-item-renderer:hover { + background-color: var(--yt-spec-10-percent-layer); + } + + .custom-icon.ytd-menu-custom-icon-item-renderer { + height: 24px; + width: 24px; + margin-right: 16px; + } + + .action-text.ytd-menu-custom-icon-item-renderer { + color: var(--yt-spec-text-primary); + text-decoration: none; + -ms-flex: none; + -webkit-flex: none; + flex: none; + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + .launch-icon.ytd-menu-custom-icon-item-renderer { + color: var(--yt-spec-call-to-action); + height: 16px; + padding-bottom: 2px; + width: 16px; + } + + yt-live-chat-vc-balance-renderer { + display: block; + } + + yt-live-chat-vc-balance-renderer:hover { + cursor: pointer; + } + + yt-img-shadow { + display: inline-block; + opacity: 0; + transition: opacity 0.2s; + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + yt-img-shadow.no-transition { + opacity: 1; + transition: none; + } + + yt-img-shadow.with-placeholder { + background-color: var(--yt-img-shadow-placeholder-color, transparent); + + min-height: var(--yt-img-shadow-min-height, unset); + min-width: var(--yt-img-shadow-min-width, unset) + } + + yt-img-shadow[loaded] { + opacity: 1; + } + + yt-img-shadow.empty img.yt-img-shadow { + visibility: hidden; + } + + yt-img-shadow[fit-height] img.yt-img-shadow { + height: 100%; + width: auto; + } + + yt-img-shadow[object-fit="FILL"] img.yt-img-shadow,yt-img-shadow[fit] img.yt-img-shadow { + width: 100%; + height: 100%; + } + + yt-img-shadow[object-fit="COVER"] img.yt-img-shadow { + width: 100%; + height: 100%; + object-fit: cover; + } + + yt-img-shadow[object-fit="CONTAIN"] img.yt-img-shadow { + width: 100%; + height: 100%; + object-fit: contain; + } + + yt-img-shadow[object-position="LEFT"] img.yt-img-shadow { + object-position: left; + } + + img.yt-img-shadow { + display: block; + margin-left: var(--yt-img-margin-left, auto); + margin-right: var(--yt-img-margin-right, auto); + max-height: var(--yt-img-max-height, none); + max-width: var(--yt-img-max-width, 100%); + border-radius: var(--yt-img-border-radius, none); + } + + yt-themed-image-renderer { + --yt-img-margin-left: 0; + --yt-img-margin-right: 0; + + display: block; + } + + yt-themed-image-renderer[is-circular_] yt-img-shadow.yt-themed-image-renderer,yt-themed-image-renderer[is-circular_] yt-icon.yt-themed-image-renderer { + border-radius: var(--yt-circular_-_border-radius); background-color: var(--yt-circular_-_background-color); overflow: var(--yt-circular_-_overflow); + } + + #image.yt-themed-image-renderer { + display: block; + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_1"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_1"] { + margin-top: var(--ytd-margin-base); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_1"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_1"] { + margin-bottom: var(--ytd-margin-base); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_1"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_1"] { + margin-left: var(--ytd-margin-base); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_1"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_1"] { + margin-right: var(--ytd-margin-base); + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_2"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_2"] { + margin-top: var(--ytd-margin-2x); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_2"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_2"] { + margin-bottom: var(--ytd-margin-2x); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_2"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_2"] { + margin-left: var(--ytd-margin-2x); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_2"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_2"] { + margin-right: var(--ytd-margin-2x); + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_3"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_3"] { + margin-top: var(--ytd-margin-3x); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_3"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_3"] { + margin-bottom: var(--ytd-margin-3x); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_3"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_3"] { + margin-left: var(--ytd-margin-3x); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_3"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_3"] { + margin-right: var(--ytd-margin-3x); + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_4"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_4"] { + margin-top: var(--ytd-margin-4x); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_4"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_4"] { + margin-bottom: var(--ytd-margin-4x); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_4"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_4"] { + margin-left: var(--ytd-margin-4x); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_4"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_4"] { + margin-right: var(--ytd-margin-4x); + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_5"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_5"] { + margin-top: var(--ytd-margin-5x); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_5"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_5"] { + margin-bottom: var(--ytd-margin-5x); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_5"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_5"] { + margin-left: var(--ytd-margin-5x); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_5"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_5"] { + margin-right: var(--ytd-margin-5x); + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_6"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_6"] { + margin-top: var(--ytd-margin-6x); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_6"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_6"] { + margin-bottom: var(--ytd-margin-6x); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_6"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_6"] { + margin-left: var(--ytd-margin-6x); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_6"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_6"] { + margin-right: var(--ytd-margin-6x); + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_7"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_7"] { + margin-top: var(--ytd-margin-7x); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_7"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_7"] { + margin-bottom: var(--ytd-margin-7x); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_7"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_7"] { + margin-left: var(--ytd-margin-7x); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_7"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_7"] { + margin-right: var(--ytd-margin-7x); + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_8"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_8"] { + margin-top: var(--ytd-margin-8x); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_8"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_8"] { + margin-bottom: var(--ytd-margin-8x); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_8"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_8"] { + margin-left: var(--ytd-margin-8x); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_8"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_8"] { + margin-right: var(--ytd-margin-8x); + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_9"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_9"] { + margin-top: var(--ytd-margin-9x); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_9"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_9"] { + margin-bottom: var(--ytd-margin-9x); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_9"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_9"] { + margin-left: var(--ytd-margin-9x); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_9"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_9"] { + margin-right: var(--ytd-margin-9x); + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_10"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_10"] { + margin-top: var(--ytd-margin-10x); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_10"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_10"] { + margin-bottom: var(--ytd-margin-10x); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_10"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_10"] { + margin-left: var(--ytd-margin-10x); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_10"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_10"] { + margin-right: var(--ytd-margin-10x); + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_11"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_11"] { + margin-top: var(--ytd-margin-11x); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_11"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_11"] { + margin-bottom: var(--ytd-margin-11x); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_11"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_11"] { + margin-left: var(--ytd-margin-11x); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_11"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_10"] { + margin-right: var(--ytd-margin-11x); + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_12"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_12"] { + margin-top: var(--ytd-margin-12x); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_12"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_12"] { + margin-bottom: var(--ytd-margin-12x); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_12"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_12"] { + margin-left: var(--ytd-margin-12x); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_12"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_10"] { + margin-right: var(--ytd-margin-12x); + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_13"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_13"] { + margin-top: var(--ytd-margin-13x); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_13"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_13"] { + margin-bottom: var(--ytd-margin-13x); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_13"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_13"] { + margin-left: var(--ytd-margin-13x); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_13"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_10"] { + margin-right: var(--ytd-margin-13x); + } + + yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_14"],.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_14"] { + margin-top: var(--ytd-margin-14x); + } + + yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_14"],.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_14"] { + margin-bottom: var(--ytd-margin-14x); + } + + yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_14"],.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_14"] { + margin-left: var(--ytd-margin-14x); + } + + yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_14"],.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_10"] { + margin-right: var(--ytd-margin-14x); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_1"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_1"] { + padding-top: var(--ytd-margin-base); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_1"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_1"] { + padding-bottom: var(--ytd-margin-base); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_1"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_1"] { + padding-left: var(--ytd-margin-base); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_1"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_1"] { + padding-right: var(--ytd-margin-base); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_2"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_2"] { + padding-top: var(--ytd-margin-2x); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_2"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_2"] { + padding-bottom: var(--ytd-margin-2x); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_2"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_2"] { + padding-left: var(--ytd-margin-2x); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_2"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_2"] { + padding-right: var(--ytd-margin-2x); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_3"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_3"] { + padding-top: var(--ytd-margin-3x); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_3"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_3"] { + padding-bottom: var(--ytd-margin-3x); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_3"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_3"] { + padding-left: var(--ytd-margin-3x); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_3"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_3"] { + padding-right: var(--ytd-margin-3x); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_4"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_4"] { + padding-top: var(--ytd-margin-4x); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_4"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_4"] { + padding-bottom: var(--ytd-margin-4x); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_4"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_4"] { + padding-left: var(--ytd-margin-4x); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_4"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_4"] { + padding-right: var(--ytd-margin-4x); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_5"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_5"] { + padding-top: var(--ytd-margin-5x); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_5"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_5"] { + padding-bottom: var(--ytd-margin-5x); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_5"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_5"] { + padding-left: var(--ytd-margin-5x); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_5"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_5"] { + padding-right: var(--ytd-margin-5x); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_6"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_6"] { + padding-top: var(--ytd-margin-6x); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_6"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_6"] { + padding-bottom: var(--ytd-margin-6x); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_6"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_6"] { + padding-left: var(--ytd-margin-6x); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_6"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_6"] { + padding-right: var(--ytd-margin-6x); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_7"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_7"] { + padding-top: var(--ytd-margin-7x); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_7"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_7"] { + padding-bottom: var(--ytd-margin-7x); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_7"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_7"] { + padding-left: var(--ytd-margin-7x); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_7"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_7"] { + padding-right: var(--ytd-margin-7x); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_8"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_8"] { + padding-top: var(--ytd-margin-8x); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_8"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_8"] { + padding-bottom: var(--ytd-margin-8x); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_8"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_8"] { + padding-left: var(--ytd-margin-8x); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_8"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_8"] { + padding-right: var(--ytd-margin-8x); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_9"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_9"] { + padding-top: var(--ytd-margin-9x); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_9"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_9"] { + padding-bottom: var(--ytd-margin-9x); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_9"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_9"] { + padding-left: var(--ytd-margin-9x); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_9"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_9"] { + padding-right: var(--ytd-margin-9x); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_10"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_10"] { + padding-top: var(--ytd-margin-10x); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_10"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_10"] { + padding-bottom: var(--ytd-margin-10x); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_10"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_10"] { + padding-left: var(--ytd-margin-10x); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_10"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_10"] { + padding-right: var(--ytd-margin-10x); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_11"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_11"] { + padding-top: var(--ytd-margin-11x); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_11"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_11"] { + padding-bottom: var(--ytd-margin-11x); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_11"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_11"] { + padding-left: var(--ytd-margin-11x); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_11"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_11"] { + padding-right: var(--ytd-margin-11x); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_12"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_12"] { + padding-top: var(--ytd-margin-12x); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_12"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_12"] { + padding-bottom: var(--ytd-margin-12x); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_12"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_12"] { + padding-left: var(--ytd-margin-12x); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_12"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_12"] { + padding-right: var(--ytd-margin-12x); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_13"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_13"] { + padding-top: var(--ytd-margin-13x); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_13"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_13"] { + padding-bottom: var(--ytd-margin-13x); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_13"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_13"] { + padding-left: var(--ytd-margin-13x); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_13"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_13"] { + padding-right: var(--ytd-margin-13x); + } + + yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_14"],.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_14"] { + padding-top: var(--ytd-margin-14x); + } + + yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_14"],.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_14"] { + padding-bottom: var(--ytd-margin-14x); + } + + yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_14"],.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_14"] { + padding-left: var(--ytd-margin-14x); + } + + yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_14"],.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_14"] { + padding-right: var(--ytd-margin-14x); + } + + yt-vc-balance-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + yt-vc-balance-renderer[vc-balance-widget-style="VC_BALANCE_WIDGET_STYLE_UNKNOWN"] #vc-icon.yt-vc-balance-renderer,yt-vc-balance-renderer[vc-balance-widget-style="VC_BALANCE_WIDGET_STYLE_PRIMARY_TEXT"] #vc-icon.yt-vc-balance-renderer { + margin-right: var(--ytd-margin-2x); + } + + #vc-balance.yt-vc-balance-renderer { + position: relative; + top: 1px; + } + + yt-vc-balance-renderer[vc-balance-widget-style="VC_BALANCE_WIDGET_STYLE_UNKNOWN"] #vc-balance.yt-vc-balance-renderer,yt-vc-balance-renderer[vc-balance-widget-style="VC_BALANCE_WIDGET_STYLE_PRIMARY_TEXT"] #vc-balance.yt-vc-balance-renderer { + color: var(--yt-spec-text-primary); + + font-size: var(--ytd-subheadline-link_-_font-size); font-weight: var(--ytd-subheadline-link_-_font-weight); line-height: var(--ytd-subheadline-link_-_line-height); letter-spacing: var(--ytd-subheadline-link_-_letter-spacing); + line-height: 1.8rem; + } + + yt-vc-balance-renderer[vc-balance-widget-style="VC_BALANCE_WIDGET_STYLE_SECONDARY_TEXT"] #vc-icon.yt-vc-balance-renderer { + margin-right: var(--ytd-margin-base); + } + + yt-vc-balance-renderer[vc-balance-widget-style="VC_BALANCE_WIDGET_STYLE_SECONDARY_TEXT"] #vc-balance.yt-vc-balance-renderer { + color: var(--yt-spec-text-disabled); + + font-size: var(--ytd-subheadline-link_-_font-size); font-weight: var(--ytd-subheadline-link_-_font-weight); line-height: var(--ytd-subheadline-link_-_line-height); letter-spacing: var(--ytd-subheadline-link_-_letter-spacing); + line-height: 1.8rem; + } + + iron-a11y-announcer { + display: inline-block; + position: fixed; + clip: rect(0px,0px,0px,0px); + } + + iron-autogrow-textarea { + display: inline-block; + position: relative; + width: 400px; + border: 1px solid; + padding: 2px; + -moz-appearance: textarea; + -webkit-appearance: textarea; + overflow: hidden; + } + + .mirror-text.iron-autogrow-textarea { + visibility: hidden; + word-wrap: break-word; + white-space: pre-wrap; + ; + } + + .fit.iron-autogrow-textarea { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + } + + textarea.iron-autogrow-textarea { + position: relative; + outline: none; + border: none; + resize: none; + background: inherit; + color: inherit; + + width: 100%; + height: 100%; + font-size: inherit; + font-family: inherit; + line-height: inherit; + text-align: inherit; + ; + } + + textarea.iron-autogrow-textarea::-webkit-input-placeholder { + padding: var(--iron-autogrow-textarea-placeholder_-_padding); + } + + textarea.iron-autogrow-textarea:-moz-placeholder { + padding: var(--iron-autogrow-textarea-placeholder_-_padding); + } + + textarea.iron-autogrow-textarea::-moz-placeholder { + padding: var(--iron-autogrow-textarea-placeholder_-_padding); + } + + textarea.iron-autogrow-textarea:-ms-input-placeholder { + padding: var(--iron-autogrow-textarea-placeholder_-_padding); + } + + iron-dropdown { + position: fixed; + } + + #contentWrapper.iron-dropdown > * { + overflow: auto; + } + + #contentWrapper.animating.iron-dropdown > * { + overflow: hidden; + pointer-events: none; + } + + iron-icon { + display: var(--layout-inline_-_display); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + position: relative; + + vertical-align: middle; + + fill: var(--iron-icon-fill-color, currentcolor); + stroke: var(--iron-icon-stroke-color, none); + + width: var(--iron-icon-width, 24px); + height: var(--iron-icon-height, 24px); + ; + } + + iron-icon[hidden] { + display: none; + } + + iron-input { + display: inline-block; + } + + iron-pages { + display: block; + } + + iron-pages > :not(slot):not(.iron-selected) { + display: none !important; + } + + paper-ripple { + display: block; + position: absolute; + border-radius: inherit; + overflow: hidden; + top: 0; + left: 0; + right: 0; + bottom: 0; + + + pointer-events: none; + } + + paper-ripple[animating] { + -webkit-transform: translate(0, 0); + transform: translate3d(0, 0, 0); + } + + #background.paper-ripple,#waves.paper-ripple,.wave-container.paper-ripple,.wave.paper-ripple { + pointer-events: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + #background.paper-ripple,.wave.paper-ripple { + opacity: 0; + } + + #waves.paper-ripple,.wave.paper-ripple { + overflow: hidden; + } + + .wave-container.paper-ripple,.wave.paper-ripple { + border-radius: 50%; + } + + paper-ripple.circle #background.paper-ripple,paper-ripple.circle #waves.paper-ripple { + border-radius: 50%; + } + + paper-ripple.circle .wave-container.paper-ripple { + overflow: hidden; + } + + paper-button,html.paper-button { + --paper-material_-_display: block; --paper-material_-_position: relative;; + --paper-material-elevation-1_-_box-shadow: var(--shadow-elevation-2dp_-_box-shadow);; + --paper-material-elevation-2_-_box-shadow: var(--shadow-elevation-4dp_-_box-shadow);; + --paper-material-elevation-3_-_box-shadow: var(--shadow-elevation-6dp_-_box-shadow);; + --paper-material-elevation-4_-_box-shadow: var(--shadow-elevation-8dp_-_box-shadow);; + --paper-material-elevation-5_-_box-shadow: var(--shadow-elevation-16dp_-_box-shadow);; + } + + paper-button.paper-material,.paper-material.paper-button { + display: var(--paper-material_-_display); position: var(--paper-material_-_position); + } + + paper-button.paper-material[elevation="1"],.paper-material.paper-button[elevation="1"] { + box-shadow: var(--paper-material-elevation-1_-_box-shadow); + } + + paper-button.paper-material[elevation="2"],.paper-material.paper-button[elevation="2"] { + box-shadow: var(--paper-material-elevation-2_-_box-shadow); + } + + paper-button.paper-material[elevation="3"],.paper-material.paper-button[elevation="3"] { + box-shadow: var(--paper-material-elevation-3_-_box-shadow); + } + + paper-button.paper-material[elevation="4"],.paper-material.paper-button[elevation="4"] { + box-shadow: var(--paper-material-elevation-4_-_box-shadow); + } + + paper-button.paper-material[elevation="5"],.paper-material.paper-button[elevation="5"] { + box-shadow: var(--paper-material-elevation-5_-_box-shadow); + } + + paper-button { + display: var(--layout-inline_-_display); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + position: relative; + box-sizing: border-box; + min-width: 5.14em; + margin: 0 0.29em; + background: transparent; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; + font: inherit; + text-transform: uppercase; + outline-width: 0; + border-radius: 3px; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + cursor: pointer; + z-index: 0; + padding: 0.7em 0.57em; + + font-family: var(--paper-font-common-base_-_font-family); -webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); + min-width: var(--paper-button_-_min-width, 5.14em); + } + + paper-button[elevation="1"] { + box-shadow: var(--paper-material-elevation-1_-_box-shadow); + } + + paper-button[elevation="2"] { + box-shadow: var(--paper-material-elevation-2_-_box-shadow); + } + + paper-button[elevation="3"] { + box-shadow: var(--paper-material-elevation-3_-_box-shadow); + } + + paper-button[elevation="4"] { + box-shadow: var(--paper-material-elevation-4_-_box-shadow); + } + + paper-button[elevation="5"] { + box-shadow: var(--paper-material-elevation-5_-_box-shadow); + } + + paper-button[hidden] { + display: none !important; + } + + paper-button[raised].keyboard-focus { + font-weight: bold; + ; + } + + paper-button:not([raised]).keyboard-focus { + font-weight: bold; + ; + } + + paper-button[disabled] { + background: none; + color: #a8a8a8; + cursor: auto; + pointer-events: none; + + ; + } + + paper-button[disabled][raised] { + background: #eaeaea; + } + + paper-button[animated] { + transition: var(--shadow-transition_-_transition); + } + + paper-ripple.paper-button { + color: var(--paper-button-ink-color); + } + + paper-checkbox { + display: inline-block; + white-space: nowrap; + cursor: pointer; + --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px); + + --calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1px); + font-family: var(--paper-font-common-base_-_font-family); -webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); + line-height: 0; + -webkit-tap-highlight-color: transparent; + } + + paper-checkbox[hidden] { + display: none !important; + } + + paper-checkbox:focus { + outline: none; + } + + .hidden.paper-checkbox { + display: none; + } + + #checkboxContainer.paper-checkbox { + display: inline-block; + position: relative; + width: var(--calculated-paper-checkbox-size); + height: var(--calculated-paper-checkbox-size); + min-width: var(--calculated-paper-checkbox-size); + margin: var(--paper-checkbox-margin, initial); + vertical-align: var(--paper-checkbox-vertical-align, middle); + background-color: var(--paper-checkbox-unchecked-background-color, transparent); + } + + #ink.paper-checkbox { + position: absolute; + + + top: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2); + left: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2); + width: var(--calculated-paper-checkbox-ink-size); + height: var(--calculated-paper-checkbox-ink-size); + color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-color)); + opacity: 0.6; + pointer-events: none; + } + + [dir="rtl"] #ink.paper-checkbox, #ink.paper-checkbox[dir="rtl"] { + right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2); + left: auto; + } + + #ink.paper-checkbox[checked] { + color: var(--paper-checkbox-checked-ink-color, var(--primary-color)); + } + + #checkbox.paper-checkbox { + position: relative; + box-sizing: border-box; + height: 100%; + border: solid 2px; + border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color)); + border-radius: 2px; + pointer-events: none; + -webkit-transition: background-color 140ms, border-color 140ms; + transition: background-color 140ms, border-color 140ms; + + -webkit-transition-duration: var(--paper-checkbox-animation-duration, 140ms); + transition-duration: var(--paper-checkbox-animation-duration, 140ms); + } + + #checkbox.checked.paper-checkbox #checkmark.paper-checkbox { + -webkit-animation: checkmark-expand 140ms ease-out forwards; + animation: checkmark-expand 140ms ease-out forwards; + + -webkit-animation-duration: var(--paper-checkbox-animation-duration, 140ms); + animation-duration: var(--paper-checkbox-animation-duration, 140ms); + } + + @-webkit-keyframes checkmark-expand { + 0% { + -webkit-transform: scale(0, 0) rotate(45deg); + } + + 100% { + -webkit-transform: scale(1, 1) rotate(45deg); + } + + } + + @keyframes checkmark-expand { + 0% { + transform: scale(0, 0) rotate(45deg); + } + + 100% { + transform: scale(1, 1) rotate(45deg); + } + + } + + #checkbox.checked.paper-checkbox { + background-color: var(--paper-checkbox-checked-color, var(--primary-color)); + border-color: var(--paper-checkbox-checked-color, var(--primary-color)); + } + + #checkmark.paper-checkbox { + position: absolute; + width: 36%; + height: 70%; + border-style: solid; + border-top: none; + border-left: none; + border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size)); + border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size)); + border-color: var(--paper-checkbox-checkmark-color, white); + -webkit-transform-origin: 97% 86%; + transform-origin: 97% 86%; + box-sizing: content-box; + } + + [dir="rtl"] #checkmark.paper-checkbox, #checkmark.paper-checkbox[dir="rtl"] { + -webkit-transform-origin: 50% 14%; + transform-origin: 50% 14%; + } + + #checkboxLabel.paper-checkbox { + position: relative; + display: inline-block; + vertical-align: middle; + padding-left: var(--paper-checkbox-label-spacing, 8px); + white-space: normal; + line-height: normal; + color: var(--paper-checkbox-label-color, var(--primary-text-color)); + margin-right: var(--paper-checkbox-label_-_margin-right); + } + + paper-checkbox[checked] #checkboxLabel.paper-checkbox { + color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-label-color, var(--primary-text-color))); + ; + } + + [dir="rtl"] #checkboxLabel.paper-checkbox, #checkboxLabel.paper-checkbox[dir="rtl"] { + padding-right: var(--paper-checkbox-label-spacing, 8px); + padding-left: 0; + } + + #checkboxLabel.paper-checkbox[hidden] { + display: none; + } + + paper-checkbox[disabled] #checkbox.paper-checkbox { + opacity: 0.5; + border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color)); + } + + paper-checkbox[disabled][checked] #checkbox.paper-checkbox { + background-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color)); + opacity: 0.5; + } + + paper-checkbox[disabled] #checkboxLabel.paper-checkbox { + opacity: 0.65; + } + + #checkbox.invalid.paper-checkbox:not(.checked) { + border-color: var(--paper-checkbox-error-color, var(--error-color)); + } + + paper-dialog-scrollable { + display: block; + position: var(--layout-relative_-_position); + } + + paper-dialog-scrollable.is-scrolled:not(:first-child)::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: var(--divider-color); + } + + paper-dialog-scrollable.can-scroll:not(.scrolled-to-bottom):not(:last-child)::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: var(--divider-color); + } + + .scrollable.paper-dialog-scrollable { + padding: 0 24px; + + -webkit-overflow-scrolling: var(--layout-scroll_-_-webkit-overflow-scrolling); overflow: var(--layout-scroll_-_overflow); + padding: var(--paper-dialog-scrollable_-_padding, 0 24px); min-width: var(--paper-dialog-scrollable_-_min-width); box-sizing: var(--paper-dialog-scrollable_-_box-sizing); overflow-x: var(--paper-dialog-scrollable_-_overflow-x); + } + + .fit.paper-dialog-scrollable { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + } + + paper-dialog { + display: block; + margin: 24px 40px; + + background: var(--paper-dialog-background-color, var(--primary-background-color)); + color: var(--paper-dialog-color, var(--primary-text-color)); + + font-family: var(--paper-font-body1_-_font-family); -webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing); font-size: var(--paper-font-body1_-_font-size); font-weight: var(--paper-font-body1_-_font-weight); line-height: var(--paper-font-body1_-_line-height); + box-shadow: var(--shadow-elevation-16dp_-_box-shadow); + ; + } + + paper-dialog > * { + margin-top: 20px; + padding: 0 24px; + } + + paper-dialog > .no-padding { + padding: 0; + } + + paper-dialog > *:first-child { + margin-top: 24px; + } + + paper-dialog > *:last-child { + margin-bottom: 24px; + } + + paper-dialog > h2 { + position: relative; + margin: 0; + + font-family: var(--paper-font-title_-_font-family); -webkit-font-smoothing: var(--paper-font-title_-_-webkit-font-smoothing); white-space: var(--paper-font-title_-_white-space); overflow: var(--paper-font-title_-_overflow); text-overflow: var(--paper-font-title_-_text-overflow); font-size: var(--paper-font-title_-_font-size); font-weight: var(--paper-font-title_-_font-weight); line-height: var(--paper-font-title_-_line-height); + ; + } + + paper-dialog > h2:first-child { + margin-top: 24px; + ; + } + + paper-dialog > h2:last-child { + margin-bottom: 24px; + ; + } + + paper-dialog > .paper-dialog-buttons,paper-dialog > .buttons { + position: relative; + padding: 8px 8px 8px 24px; + margin: 0; + + color: var(--paper-dialog-button-color, var(--primary-color)); + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-pack: var(--layout-end-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-end-justified_-_-webkit-justify-content); justify-content: var(--layout-end-justified_-_justify-content); + } + + paper-menu-button { + display: inline-block; + position: relative; + padding: 8px; + outline: none; + + ; + } + + paper-menu-button[disabled] { + cursor: auto; + color: var(--disabled-text-color); + + ; + } + + iron-dropdown.paper-menu-button { + ; + } + + .dropdown-content.paper-menu-button { + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + + position: relative; + border-radius: 2px; + background-color: var(--paper-menu-button-dropdown-background, var(--primary-background-color)); + + ; + } + + paper-menu-button[vertical-align="top"] .dropdown-content.paper-menu-button { + margin-bottom: 20px; + margin-top: -10px; + top: 10px; + } + + paper-menu-button[vertical-align="bottom"] .dropdown-content.paper-menu-button { + bottom: 10px; + margin-bottom: -10px; + margin-top: 20px; + } + + #trigger.paper-menu-button { + cursor: pointer; + } + + paper-dropdown-menu-light { + display: inline-block; + position: relative; + text-align: left; + + + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: transparent; + + --paper-input-container-input_-_overflow: hidden; --paper-input-container-input_-_white-space: nowrap; --paper-input-container-input_-_text-overflow: ellipsis; --paper-input-container-input_-_max-width: 100%; --paper-input-container-input_-_box-sizing: border-box; --paper-input-container-input_-_cursor: pointer; --paper-input-container-input_-_font-size: initial; --paper-input-container-input_-_font-weight: initial; --paper-input-container-input_-_line-height: initial; --paper-input-container-input_-_letter-spacing: initial; --paper-input-container-input_-_color: initial; --paper-input-container-input_-_padding: initial; --paper-input-container-input_-_height: initial; --paper-input-container-input_-_text-align: initial;; + + ; + } + + paper-dropdown-menu-light:focus { + outline: none; + } + + [dir="rtl"] paper-dropdown-menu-light, paper-dropdown-menu-light[dir="rtl"] { + text-align: right; + + ; + } + + paper-dropdown-menu-light[disabled] { + ; + } + + paper-dropdown-menu-light[noink] paper-ripple.paper-dropdown-menu-light { + display: none; + } + + paper-dropdown-menu-light[no-label-float] paper-ripple.paper-dropdown-menu-light { + top: 8px; + } + + paper-ripple.paper-dropdown-menu-light { + top: 12px; + left: 0px; + bottom: 8px; + right: 0px; + + ; + } + + paper-menu-button.paper-dropdown-menu-light { + display: block; + padding: 0; + + ; + } + + paper-input.paper-dropdown-menu-light { + border-bottom: var(--paper-dropdown-menu-input_-_border-bottom); font-size: var(--paper-dropdown-menu-input_-_font-size); font-weight: var(--paper-dropdown-menu-input_-_font-weight); line-height: var(--paper-dropdown-menu-input_-_line-height); letter-spacing: var(--paper-dropdown-menu-input_-_letter-spacing); + } + + iron-icon.paper-dropdown-menu-light { + color: var(--disabled-text-color); + + color: var(--paper-dropdown-menu-icon_-_color, var(--disabled-text-color)); + } + + paper-dropdown-menu-light { + width: 200px; + } + + .paper-dropdown-menu-light[slot="dropdown-trigger"] { + box-sizing: border-box; + position: relative; + width: 100%; + padding: 16px 0 8px 0; + } + + .paper-dropdown-menu-light[slot="dropdown-trigger"].paper-dropdown-menu-light:focus { + outline: none; + } + + paper-dropdown-menu-light[disabled] .paper-dropdown-menu-light[slot="dropdown-trigger"] { + pointer-events: none; + opacity: var(--paper-dropdown-menu-disabled-opacity, 0.33); + } + + paper-dropdown-menu-light[no-label-float] .paper-dropdown-menu-light[slot="dropdown-trigger"] { + padding-top: 8px; + } + + #input.paper-dropdown-menu-light { + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height); + white-space: var(--paper-font-common-nowrap_-_white-space); overflow: var(--paper-font-common-nowrap_-_overflow); text-overflow: var(--paper-font-common-nowrap_-_text-overflow); + line-height: 1.5; + border-bottom: 1px solid var(--paper-dropdown-menu-color, var(--secondary-text-color)); + color: var(--paper-dropdown-menu-color, var(--primary-text-color)); + width: 100%; + box-sizing: border-box; + padding: 12px 20px 0 0; + outline: none; + border-bottom: var(--paper-dropdown-menu-input_-_border-bottom, 1px solid var(--paper-dropdown-menu-color, var(--secondary-text-color))); font-size: var(--paper-dropdown-menu-input_-_font-size, var(--paper-font-subhead_-_font-size)); font-weight: var(--paper-dropdown-menu-input_-_font-weight, var(--paper-font-subhead_-_font-weight)); line-height: var(--paper-dropdown-menu-input_-_line-height, 1.5); letter-spacing: var(--paper-dropdown-menu-input_-_letter-spacing); + } + + [dir="rtl"] #input.paper-dropdown-menu-light, #input.paper-dropdown-menu-light[dir="rtl"] { + padding-right: 0px; + padding-left: 20px; + } + + paper-dropdown-menu-light[disabled] #input.paper-dropdown-menu-light { + border-bottom: 1px dashed var(--paper-dropdown-menu-color, var(--secondary-text-color)); + } + + paper-dropdown-menu-light[invalid] #input.paper-dropdown-menu-light { + border-bottom: 2px solid var(--paper-dropdown-error-color, var(--error-color)); + } + + paper-dropdown-menu-light[no-label-float] #input.paper-dropdown-menu-light { + padding-top: 0; + } + + label.paper-dropdown-menu-light { + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height); + white-space: var(--paper-font-common-nowrap_-_white-space); overflow: var(--paper-font-common-nowrap_-_overflow); text-overflow: var(--paper-font-common-nowrap_-_text-overflow); + display: block; + position: absolute; + bottom: 0; + left: 0; + right: 0; + + top: 28px; + box-sizing: border-box; + width: 100%; + padding-right: 20px; + text-align: left; + transition-duration: .2s; + transition-timing-function: cubic-bezier(.4,0,.2,1); + color: var(--paper-dropdown-menu-color, var(--secondary-text-color)); + font-size: var(--paper-dropdown-menu-label_-_font-size, var(--paper-font-subhead_-_font-size)); font-weight: var(--paper-dropdown-menu-label_-_font-weight, var(--paper-font-subhead_-_font-weight)); line-height: var(--paper-dropdown-menu-label_-_line-height, var(--paper-font-subhead_-_line-height)); letter-spacing: var(--paper-dropdown-menu-label_-_letter-spacing); + } + + [dir="rtl"] label.paper-dropdown-menu-light, label.paper-dropdown-menu-light[dir="rtl"] { + padding-right: 0px; + padding-left: 20px; + text-align: right; + } + + paper-dropdown-menu-light[no-label-float] label.paper-dropdown-menu-light { + top: 8px; + + transition-duration: 0s; + } + + label.label-is-floating.paper-dropdown-menu-light { + font-size: 12px; + top: 8px; + } + + label.label-is-hidden.paper-dropdown-menu-light { + visibility: hidden; + } + + paper-dropdown-menu-light[focused] label.label-is-floating.paper-dropdown-menu-light { + color: var(--paper-dropdown-menu-focus-color, var(--primary-color)); + } + + paper-dropdown-menu-light[invalid] label.label-is-floating.paper-dropdown-menu-light { + color: var(--paper-dropdown-error-color, var(--error-color)); + } + + label.paper-dropdown-menu-light:after { + background-color: var(--paper-dropdown-menu-focus-color, var(--primary-color)); + bottom: 7px; + content: ''; + height: 2px; + left: 45%; + position: absolute; + transition-duration: .2s; + transition-timing-function: cubic-bezier(.4,0,.2,1); + visibility: hidden; + width: 8px; + z-index: 10; + ; + } + + paper-dropdown-menu-light[invalid] label.paper-dropdown-menu-light:after { + background-color: var(--paper-dropdown-error-color, var(--error-color)); + } + + paper-dropdown-menu-light[no-label-float] label.paper-dropdown-menu-light:after { + bottom: 7px; + } + + paper-dropdown-menu-light[focused]:not([disabled]) label.paper-dropdown-menu-light:after { + left: 0; + visibility: visible; + width: 100%; + } + + iron-icon.paper-dropdown-menu-light { + position: absolute; + right: 0px; + bottom: 8px; + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height); + color: var(--disabled-text-color); + color: var(--paper-dropdown-menu-icon_-_color, var(--disabled-text-color)); + } + + [dir="rtl"] iron-icon.paper-dropdown-menu-light, iron-icon.paper-dropdown-menu-light[dir="rtl"] { + left: 0; + right: auto; + } + + paper-dropdown-menu-light[no-label-float] iron-icon.paper-dropdown-menu-light { + margin-top: 0px; + } + + .error.paper-dropdown-menu-light { + display: inline-block; + visibility: hidden; + color: var(--paper-dropdown-error-color, var(--error-color)); + font-family: var(--paper-font-caption_-_font-family); -webkit-font-smoothing: var(--paper-font-caption_-_-webkit-font-smoothing); white-space: var(--paper-font-caption_-_white-space); overflow: var(--paper-font-caption_-_overflow); text-overflow: var(--paper-font-caption_-_text-overflow); font-size: var(--paper-font-caption_-_font-size); font-weight: var(--paper-font-caption_-_font-weight); letter-spacing: var(--paper-font-caption_-_letter-spacing); line-height: var(--paper-font-caption_-_line-height); + position: absolute; + left:0; + right:0; + bottom: -12px; + } + + paper-dropdown-menu-light[invalid] .error.paper-dropdown-menu-light { + visibility: visible; + } + + paper-input-char-counter { + display: inline-block; + float: right; + + font-family: var(--paper-font-caption_-_font-family); -webkit-font-smoothing: var(--paper-font-caption_-_-webkit-font-smoothing); white-space: var(--paper-font-caption_-_white-space); overflow: var(--paper-font-caption_-_overflow); text-overflow: var(--paper-font-caption_-_text-overflow); font-size: var(--paper-font-caption_-_font-size); font-weight: var(--paper-font-caption_-_font-weight); letter-spacing: var(--paper-font-caption_-_letter-spacing); line-height: var(--paper-font-caption_-_line-height); + color: var(--paper-input-char-counter_-_color); margin-top: var(--paper-input-char-counter_-_margin-top); margin-right: var(--paper-input-char-counter_-_margin-right); + } + + paper-input-char-counter[hidden] { + display: none !important; + } + + [dir="rtl"] paper-input-char-counter, paper-input-char-counter[dir="rtl"] { + float: left; + } + + paper-input-container { + display: block; + padding: 8px 0; + height: var(--paper-input-container_-_height); padding: var(--paper-input-container_-_padding, 8px 0); + } + + paper-input-container[inline] { + display: inline-block; + } + + paper-input-container[disabled] { + pointer-events: none; + opacity: 0.33; + + ; + } + + paper-input-container[hidden] { + display: none !important; + } + + .paper-input-container[hidden] { + display: none !important; + } + + .floated-label-placeholder.paper-input-container { + display: var(--paper-input-container-floated-label-placeholder-display, block); + font-family: var(--paper-font-caption_-_font-family); -webkit-font-smoothing: var(--paper-font-caption_-_-webkit-font-smoothing); white-space: var(--paper-font-caption_-_white-space); overflow: var(--paper-font-caption_-_overflow); text-overflow: var(--paper-font-caption_-_text-overflow); font-size: var(--paper-font-caption_-_font-size); font-weight: var(--paper-font-caption_-_font-weight); letter-spacing: var(--paper-font-caption_-_letter-spacing); line-height: var(--paper-font-caption_-_line-height); + } + + .underline.paper-input-container { + height: var(--paper-input-container-underline-wrapper-height, 2px); + position: relative; + } + + .focused-line.paper-input-container { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + border-bottom: + var(--paper-input-container-underline-focus-height, 2px) + solid + var(--paper-input-container-underline-focus-color, + var(--paper-input-container-focus-color, + var(--primary-color))); + + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: scale3d(0,1,1); + transform: scale3d(0,1,1); + display: var(--paper-input-container-underline-focus-display, block); + + display: var(--paper-input-container-underline-focus_-_display, var(--paper-input-container-underline-focus-display, block)); + } + + .underline.is-highlighted.paper-input-container .focused-line.paper-input-container { + -webkit-transform: none; + transform: none; + -webkit-transition: -webkit-transform 0.25s; + transition: transform 0.25s; + + ; + } + + .underline.is-invalid.paper-input-container .focused-line.paper-input-container { + border-bottom: + var(--paper-input-container-underline-focus-height, 2px) + solid + var(--paper-input-container-underline-invalid-focus-color, + var(--paper-input-container-invalid-color, + var(--error-color))); + -webkit-transform: none; + transform: none; + -webkit-transition: -webkit-transform 0.25s; + transition: transform 0.25s; + display: var(--paper-input-container-underline-focus-display, block); + + ; + } + + .unfocused-line.paper-input-container { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + border-bottom: + var(--paper-input-container-underline-height, 1px) + solid + var(--paper-input-container-underline-color, + var(--paper-input-container-color, + var(--secondary-text-color))); + height: var(--paper-input-container-underline-legacy-height); + display: var(--paper-input-container-underline-display, block); + + background: var(--paper-input-container-underline_-_background); display: var(--paper-input-container-underline_-_display, var(--paper-input-container-underline-display, block)); + } + + paper-input-container[disabled] .unfocused-line.paper-input-container { + border-bottom: + var(--paper-input-container-underline-height, 1px) + dashed + var(--paper-input-container-underline-color, + var(--paper-input-container-color, + var(--secondary-text-color))); + display: var(--paper-input-container-underline-disabled-display, block); + + display: var(--paper-input-container-underline-disabled_-_display, var(--paper-input-container-underline-disabled-display, block)); + } + + .input-wrapper.paper-input-container { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + position: relative; + } + + .input-content.paper-input-container { + -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex); + position: var(--layout-relative_-_position); + max-width: 100%; + } + + .input-content.paper-input-container > label,.input-content.paper-input-container > .paper-input-label { + position: absolute; + top: 0; + left: 0; + width: 100%; + font: inherit; + color: var(--paper-input-container-color, var(--secondary-text-color)); + -webkit-transition: -webkit-transform 0.25s, width 0.25s; + transition: transform 0.25s, width 0.25s; + -webkit-transform-origin: left top; + transform-origin: left top; + + min-height: 1px; + + white-space: var(--paper-font-common-nowrap_-_white-space); overflow: var(--paper-font-common-nowrap_-_overflow); text-overflow: var(--paper-font-common-nowrap_-_text-overflow); + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height); + ; + ; + } + + .input-content.paper-input-container > label:before,.input-content.paper-input-container > .paper-input-label:before { + ; + } + + .input-content.paper-input-container > label:after,.input-content.paper-input-container > .paper-input-label:after { + ; + } + + .input-content.label-is-floating.paper-input-container > label,.input-content.label-is-floating.paper-input-container > .paper-input-label { + -webkit-transform: translateY(-75%) scale(0.75); + transform: translateY(-75%) scale(0.75); + + + width: 133%; + + font-size: var(--paper-input-container-label-floating_-_font-size); font-weight: var(--paper-input-container-label-floating_-_font-weight); line-height: var(--paper-input-container-label-floating_-_line-height); + } + + [dir="rtl"] paper-input-container .input-content.label-is-floating.paper-input-container > label, paper-input-container[dir="rtl"] .input-content.label-is-floating.paper-input-container > label,[dir="rtl"] paper-input-container .input-content.label-is-floating.paper-input-container > .paper-input-label, paper-input-container[dir="rtl"] .input-content.label-is-floating.paper-input-container > .paper-input-label { + right: 0; + left: auto; + -webkit-transform-origin: right top; + transform-origin: right top; + } + + .input-content.label-is-highlighted.paper-input-container > label,.input-content.label-is-highlighted.paper-input-container > .paper-input-label { + color: var(--paper-input-container-focus-color, var(--primary-color)); + + ; + } + + .input-content.is-invalid.paper-input-container > label,.input-content.is-invalid.paper-input-container > .paper-input-label { + color: var(--paper-input-container-invalid-color, var(--error-color)); + } + + .input-content.label-is-hidden.paper-input-container > label,.input-content.label-is-hidden.paper-input-container > .paper-input-label { + visibility: hidden; + } + + .input-content.paper-input-container > input,.input-content.paper-input-container > iron-input,.input-content.paper-input-container > textarea,.input-content.paper-input-container > iron-autogrow-textarea,.input-content.paper-input-container > .paper-input-input { + position: var(--paper-input-container-shared-input-style_-_position); outline: var(--paper-input-container-shared-input-style_-_outline); box-shadow: var(--paper-input-container-shared-input-style_-_box-shadow); padding: var(--paper-input-container-shared-input-style_-_padding); margin: var(--paper-input-container-shared-input-style_-_margin); width: var(--paper-input-container-shared-input-style_-_width); max-width: var(--paper-input-container-shared-input-style_-_max-width); background: var(--paper-input-container-shared-input-style_-_background); border: var(--paper-input-container-shared-input-style_-_border); color: var(--paper-input-container-shared-input-style_-_color); -webkit-appearance: var(--paper-input-container-shared-input-style_-_-webkit-appearance); text-align: var(--paper-input-container-shared-input-style_-_text-align); vertical-align: var(--paper-input-container-shared-input-style_-_vertical-align); font-family: var(--paper-input-container-shared-input-style_-_font-family); -webkit-font-smoothing: var(--paper-input-container-shared-input-style_-_-webkit-font-smoothing); font-size: var(--paper-input-container-shared-input-style_-_font-size); font-weight: var(--paper-input-container-shared-input-style_-_font-weight); line-height: var(--paper-input-container-shared-input-style_-_line-height); + + color: var(--paper-input-container-input-color, var(--primary-text-color)); + overflow: var(--paper-input-container-input_-_overflow); white-space: var(--paper-input-container-input_-_white-space); text-overflow: var(--paper-input-container-input_-_text-overflow); max-width: var(--paper-input-container-input_-_max-width, var(--paper-input-container-shared-input-style_-_max-width)); box-sizing: var(--paper-input-container-input_-_box-sizing); cursor: var(--paper-input-container-input_-_cursor); font-size: var(--paper-input-container-input_-_font-size, var(--paper-input-container-shared-input-style_-_font-size)); font-weight: var(--paper-input-container-input_-_font-weight, var(--paper-input-container-shared-input-style_-_font-weight)); line-height: var(--paper-input-container-input_-_line-height, var(--paper-input-container-shared-input-style_-_line-height)); letter-spacing: var(--paper-input-container-input_-_letter-spacing); color: var(--paper-input-container-input_-_color, var(--paper-input-container-input-color, var(--primary-text-color))); padding: var(--paper-input-container-input_-_padding, var(--paper-input-container-shared-input-style_-_padding)); height: var(--paper-input-container-input_-_height); text-align: var(--paper-input-container-input_-_text-align, var(--paper-input-container-shared-input-style_-_text-align)); + } + + .input-content.paper-input-container > input::-webkit-outer-spin-button,.input-content.paper-input-container > input::-webkit-inner-spin-button { + ; + } + + .input-content.focused.paper-input-container > input,.input-content.focused.paper-input-container > iron-input,.input-content.focused.paper-input-container > textarea,.input-content.focused.paper-input-container > iron-autogrow-textarea,.input-content.focused.paper-input-container > .paper-input-input { + ; + } + + .input-content.is-invalid.paper-input-container > input,.input-content.is-invalid.paper-input-container > iron-input,.input-content.is-invalid.paper-input-container > textarea,.input-content.is-invalid.paper-input-container > iron-autogrow-textarea,.input-content.is-invalid.paper-input-container > .paper-input-input { + ; + } + + .prefix.paper-input-container > * { + display: inline-block; + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height); + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + color: var(--paper-input-prefix_-_color); + } + + .suffix.paper-input-container > * { + display: inline-block; + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height); + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + + ; + } + + .input-content.paper-input-container > input { + min-width: 0; + } + + .input-content.paper-input-container > textarea { + resize: none; + } + + .add-on-content.paper-input-container { + position: relative; + } + + .add-on-content.is-invalid.paper-input-container > * { + color: var(--paper-input-container-invalid-color, var(--error-color)); + } + + .add-on-content.is-highlighted.paper-input-container > * { + color: var(--paper-input-container-focus-color, var(--primary-color)); + } + + paper-input-error { + display: inline-block; + visibility: hidden; + + color: var(--paper-input-container-invalid-color, var(--error-color)); + + font-family: var(--paper-font-caption_-_font-family); -webkit-font-smoothing: var(--paper-font-caption_-_-webkit-font-smoothing); white-space: var(--paper-font-caption_-_white-space); overflow: var(--paper-font-caption_-_overflow); text-overflow: var(--paper-font-caption_-_text-overflow); font-size: var(--paper-font-caption_-_font-size); font-weight: var(--paper-font-caption_-_font-weight); letter-spacing: var(--paper-font-caption_-_letter-spacing); line-height: var(--paper-font-caption_-_line-height); + overflow: var(--paper-input-error_-_overflow, var(--paper-font-caption_-_overflow)); + position: absolute; + left:0; + right:0; + } + + paper-input-error[invalid] { + visibility: visible; + } + + #a11yWrapper.paper-input-error { + visibility: hidden; + } + + paper-input-error[invalid] #a11yWrapper.paper-input-error { + visibility: visible; + } + + paper-input { + display: block; + } + + paper-input[focused] { + outline: none; + } + + paper-input[hidden] { + display: none !important; + } + + input.paper-input { + min-width: 0; + ; + } + + iron-input.paper-input > input.paper-input { + position: var(--paper-input-container-shared-input-style_-_position); outline: var(--paper-input-container-shared-input-style_-_outline); box-shadow: var(--paper-input-container-shared-input-style_-_box-shadow); padding: var(--paper-input-container-shared-input-style_-_padding); margin: var(--paper-input-container-shared-input-style_-_margin); width: var(--paper-input-container-shared-input-style_-_width); max-width: var(--paper-input-container-shared-input-style_-_max-width); background: var(--paper-input-container-shared-input-style_-_background); border: var(--paper-input-container-shared-input-style_-_border); color: var(--paper-input-container-shared-input-style_-_color); -webkit-appearance: var(--paper-input-container-shared-input-style_-_-webkit-appearance); text-align: var(--paper-input-container-shared-input-style_-_text-align); vertical-align: var(--paper-input-container-shared-input-style_-_vertical-align); font-family: var(--paper-input-container-shared-input-style_-_font-family); -webkit-font-smoothing: var(--paper-input-container-shared-input-style_-_-webkit-font-smoothing); font-size: var(--paper-input-container-shared-input-style_-_font-size); font-weight: var(--paper-input-container-shared-input-style_-_font-weight); line-height: var(--paper-input-container-shared-input-style_-_line-height); + font-family: inherit; + font-weight: inherit; + font-size: inherit; + letter-spacing: inherit; + word-spacing: inherit; + line-height: inherit; + text-shadow: inherit; + color: inherit; + cursor: inherit; + } + + input.paper-input:disabled { + ; + } + + input.paper-input::-webkit-outer-spin-button,input.paper-input::-webkit-inner-spin-button { + ; + } + + input.paper-input::-webkit-clear-button { + ; + } + + input.paper-input::-webkit-calendar-picker-indicator { + ; + } + + input.paper-input::-webkit-input-placeholder { + color: var(--paper-input-container-color, var(--secondary-text-color)); + } + + input.paper-input:-moz-placeholder { + color: var(--paper-input-container-color, var(--secondary-text-color)); + } + + input.paper-input::-moz-placeholder { + color: var(--paper-input-container-color, var(--secondary-text-color)); + } + + input.paper-input::-ms-clear { + display: var(--paper-input-container-ms-clear_-_display); + } + + input.paper-input::-ms-reveal { + ; + } + + input.paper-input:-ms-input-placeholder { + color: var(--paper-input-container-color, var(--secondary-text-color)); + } + + label.paper-input { + pointer-events: none; + } + + paper-dropdown-menu { + display: inline-block; + position: relative; + text-align: left; + + + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: transparent; + + --paper-input-container-input_-_overflow: hidden; --paper-input-container-input_-_white-space: nowrap; --paper-input-container-input_-_text-overflow: ellipsis; --paper-input-container-input_-_max-width: 100%; --paper-input-container-input_-_box-sizing: border-box; --paper-input-container-input_-_cursor: pointer; --paper-input-container-input_-_font-size: initial; --paper-input-container-input_-_font-weight: initial; --paper-input-container-input_-_line-height: initial; --paper-input-container-input_-_letter-spacing: initial; --paper-input-container-input_-_color: initial; --paper-input-container-input_-_padding: initial; --paper-input-container-input_-_height: initial; --paper-input-container-input_-_text-align: initial;; + + ; + } + + paper-dropdown-menu:focus { + outline: none; + } + + [dir="rtl"] paper-dropdown-menu, paper-dropdown-menu[dir="rtl"] { + text-align: right; + + ; + } + + paper-dropdown-menu[disabled] { + ; + } + + paper-dropdown-menu[noink] paper-ripple.paper-dropdown-menu { + display: none; + } + + paper-dropdown-menu[no-label-float] paper-ripple.paper-dropdown-menu { + top: 8px; + } + + paper-ripple.paper-dropdown-menu { + top: 12px; + left: 0px; + bottom: 8px; + right: 0px; + + ; + } + + paper-menu-button.paper-dropdown-menu { + display: block; + padding: 0; + + ; + } + + paper-input.paper-dropdown-menu { + border-bottom: var(--paper-dropdown-menu-input_-_border-bottom); font-size: var(--paper-dropdown-menu-input_-_font-size); font-weight: var(--paper-dropdown-menu-input_-_font-weight); line-height: var(--paper-dropdown-menu-input_-_line-height); letter-spacing: var(--paper-dropdown-menu-input_-_letter-spacing); + } + + iron-icon.paper-dropdown-menu { + color: var(--disabled-text-color); + + color: var(--paper-dropdown-menu-icon_-_color, var(--disabled-text-color)); + } + + paper-icon-button { + display: inline-block; + position: relative; + padding: 8px; + outline: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + z-index: 0; + line-height: 1; + + width: 40px; + height: 40px; + + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; + + + box-sizing: border-box !important; + + ; + } + + paper-icon-button #ink.paper-icon-button { + color: var(--paper-icon-button-ink-color, var(--primary-text-color)); + opacity: 0.6; + } + + paper-icon-button[disabled] { + color: var(--paper-icon-button-disabled-text, var(--disabled-text-color)); + pointer-events: none; + cursor: auto; + + ; + } + + paper-icon-button[hidden] { + display: none !important; + } + + paper-icon-button:hover { + ; + } + + iron-icon.paper-icon-button { + --iron-icon-width: 100%; + --iron-icon-height: 100%; + } + + paper-textarea { + display: block; + } + + paper-textarea[hidden] { + display: none !important; + } + + label.paper-textarea { + pointer-events: none; + } + + paper-item-body { + overflow: hidden; + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content); justify-content: var(--layout-center-justified_-_justify-content); + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + paper-item-body[two-line] { + min-height: var(--paper-item-body-two-line-min-height, 72px); + } + + paper-item-body[three-line] { + min-height: var(--paper-item-body-three-line-min-height, 88px); + } + + paper-item-body > * { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + paper-item-body > [secondary] { + font-family: var(--paper-font-body1_-_font-family); -webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing); font-size: var(--paper-font-body1_-_font-size); font-weight: var(--paper-font-body1_-_font-weight); line-height: var(--paper-font-body1_-_line-height); + + color: var(--paper-item-body-secondary-color, var(--secondary-text-color)); + + ; + } + + paper-progress { + display: block; + width: 200px; + position: relative; + overflow: hidden; + } + + paper-progress[hidden],.paper-progress[hidden] { + display: none !important; + } + + #progressContainer.paper-progress { + ; + position: relative; + } + + #progressContainer.paper-progress,.indeterminate.paper-progress::after { + height: var(--paper-progress-height, 4px); + } + + #primaryProgress.paper-progress,#secondaryProgress.paper-progress,.indeterminate.paper-progress::after { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + } + + #progressContainer.paper-progress,.indeterminate.paper-progress::after { + background: var(--paper-progress-container-color, var(--google-grey-300)); + } + + paper-progress.transiting #primaryProgress.paper-progress,paper-progress.transiting #secondaryProgress.paper-progress { + -webkit-transition-property: -webkit-transform; + transition-property: transform; + + + -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s); + transition-duration: var(--paper-progress-transition-duration, 0.08s); + + + -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease); + transition-timing-function: var(--paper-progress-transition-timing-function, ease); + + + -webkit-transition-delay: var(--paper-progress-transition-delay, 0s); + transition-delay: var(--paper-progress-transition-delay, 0s); + } + + #primaryProgress.paper-progress,#secondaryProgress.paper-progress { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + -webkit-transform-origin: left center; + transform-origin: left center; + -webkit-transform: scaleX(0); + transform: scaleX(0); + will-change: transform; + } + + #primaryProgress.paper-progress { + background: var(--paper-progress-active-color, var(--google-green-500)); + } + + #secondaryProgress.paper-progress { + background: var(--paper-progress-secondary-color, var(--google-green-100)); + } + + paper-progress[disabled] #primaryProgress.paper-progress { + background: var(--paper-progress-disabled-active-color, var(--google-grey-500)); + } + + paper-progress[disabled] #secondaryProgress.paper-progress { + background: var(--paper-progress-disabled-secondary-color, var(--google-grey-300)); + } + + paper-progress:not([disabled]) #primaryProgress.indeterminate.paper-progress { + -webkit-transform-origin: right center; + transform-origin: right center; + -webkit-animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite; + animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite; + } + + paper-progress:not([disabled]) #primaryProgress.indeterminate.paper-progress::after { + content: ""; + -webkit-transform-origin: center center; + transform-origin: center center; + + -webkit-animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite; + animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite; + } + + @-webkit-keyframes indeterminate-bar { + 0% { + -webkit-transform: scaleX(1) translateX(-100%); + } + + 50% { + -webkit-transform: scaleX(1) translateX(0%); + } + + 75% { + -webkit-transform: scaleX(1) translateX(0%); + -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91); + } + + 100% { + -webkit-transform: scaleX(0) translateX(0%); + } + + } + + @-webkit-keyframes indeterminate-splitter { + 0% { + -webkit-transform: scaleX(.75) translateX(-125%); + } + + 30% { + -webkit-transform: scaleX(.75) translateX(-125%); + -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8); + } + + 90% { + -webkit-transform: scaleX(.75) translateX(125%); + } + + 100% { + -webkit-transform: scaleX(.75) translateX(125%); + } + + } + + @keyframes indeterminate-bar { + 0% { + transform: scaleX(1) translateX(-100%); + } + + 50% { + transform: scaleX(1) translateX(0%); + } + + 75% { + transform: scaleX(1) translateX(0%); + animation-timing-function: cubic-bezier(.28,.62,.37,.91); + } + + 100% { + transform: scaleX(0) translateX(0%); + } + + } + + @keyframes indeterminate-splitter { + 0% { + transform: scaleX(.75) translateX(-125%); + } + + 30% { + transform: scaleX(.75) translateX(-125%); + animation-timing-function: cubic-bezier(.42,0,.6,.8); + } + + 90% { + transform: scaleX(.75) translateX(125%); + } + + 100% { + transform: scaleX(.75) translateX(125%); + } + + } + + paper-radio-button { + display: inline-block; + line-height: 0; + white-space: nowrap; + cursor: pointer; + font-family: var(--paper-font-common-base_-_font-family); -webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); + --calculated-paper-radio-button-size: var(--paper-radio-button-size, 16px); + + --calculated-paper-radio-button-ink-size: var(--paper-radio-button-ink-size, -1px); + } + + paper-radio-button:focus { + outline: none; + } + + #radioContainer.paper-radio-button { + display: var(--layout-inline_-_display); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + position: relative; + width: var(--calculated-paper-radio-button-size); + height: var(--calculated-paper-radio-button-size); + vertical-align: middle; + + ; + } + + #ink.paper-radio-button { + position: absolute; + top: 50%; + left: 50%; + right: auto; + width: var(--calculated-paper-radio-button-ink-size); + height: var(--calculated-paper-radio-button-ink-size); + color: var(--paper-radio-button-unchecked-ink-color, var(--primary-text-color)); + opacity: 0.6; + pointer-events: none; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + } + + #ink.paper-radio-button[checked] { + color: var(--paper-radio-button-checked-ink-color, var(--primary-color)); + } + + #offRadio.paper-radio-button,#onRadio.paper-radio-button { + position: absolute; + box-sizing: border-box; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 50%; + } + + #offRadio.paper-radio-button { + border: 2px solid var(--paper-radio-button-unchecked-color, var(--primary-text-color)); + background-color: var(--paper-radio-button-unchecked-background-color, transparent); + transition: border-color 0.28s; + } + + #onRadio.paper-radio-button { + background-color: var(--paper-radio-button-checked-color, var(--primary-color)); + -webkit-transform: scale(0); + transform: scale(0); + transition: -webkit-transform ease 0.28s; + transition: transform ease 0.28s; + will-change: transform; + } + + paper-radio-button[checked] #offRadio.paper-radio-button { + border-color: var(--paper-radio-button-checked-color, var(--primary-color)); + } + + paper-radio-button[checked] #onRadio.paper-radio-button { + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + + #radioLabel.paper-radio-button { + line-height: normal; + position: relative; + display: inline-block; + vertical-align: middle; + margin-left: var(--paper-radio-button-label-spacing, 10px); + white-space: normal; + color: var(--paper-radio-button-label-color, var(--primary-text-color)); + + ; + } + + paper-radio-button[checked] #radioLabel.paper-radio-button { + ; + } + + [dir="rtl"] #radioLabel.paper-radio-button, #radioLabel.paper-radio-button[dir="rtl"] { + margin-left: 0; + margin-right: var(--paper-radio-button-label-spacing, 10px); + } + + #radioLabel.paper-radio-button[hidden] { + display: none; + } + + paper-radio-button[disabled] #offRadio.paper-radio-button { + border-color: var(--paper-radio-button-unchecked-color, var(--primary-text-color)); + opacity: 0.5; + } + + paper-radio-button[disabled][checked] #onRadio.paper-radio-button { + background-color: var(--paper-radio-button-unchecked-color, var(--primary-text-color)); + opacity: 0.5; + } + + paper-radio-button[disabled] #radioLabel.paper-radio-button { + opacity: 0.65; + } + + paper-radio-group { + display: inline-block; + } + + paper-radio-group > * { + padding: var(--paper-radio-group-item-padding, 12px); + } + + paper-slider { + display: var(--layout_-_display); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + width: 200px; + cursor: default; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + --paper-progress-active-color: var(--paper-slider-active-color, var(--google-blue-700)); + --paper-progress-secondary-color: var(--paper-slider-secondary-color, var(--google-blue-300)); + --paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, var(--paper-grey-400)); + --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, var(--paper-grey-400)); + --calculated-paper-slider-height: var(--paper-slider-height, 2px); + } + + paper-slider:focus { + outline: none; + } + + [dir="rtl"] .paper-slider #sliderContainer.paper-slider, .paper-slider[dir="rtl"] #sliderContainer.paper-slider { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + } + + paper-slider[dir="rtl"] #sliderContainer.paper-slider { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + } + + paper-slider[dir="ltr"] #sliderContainer.paper-slider { + -webkit-transform: scaleX(1); + transform: scaleX(1); + } + + #sliderContainer.paper-slider { + position: relative; + width: 100%; + height: calc(30px + var(--calculated-paper-slider-height)); + margin-left: calc(15px + var(--calculated-paper-slider-height)/2); + margin-right: calc(15px + var(--calculated-paper-slider-height)/2); + } + + #sliderContainer.paper-slider:focus { + outline: 0; + } + + #sliderContainer.editable.paper-slider { + margin-top: 12px; + margin-bottom: 12px; + } + + .bar-container.paper-slider { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow: hidden; + } + + .ring.paper-slider > .bar-container.paper-slider { + left: calc(5px + var(--calculated-paper-slider-height)/2); + transition: left 0.18s ease; + } + + .ring.expand.dragging.paper-slider > .bar-container.paper-slider { + transition: none; + } + + .ring.expand.paper-slider:not(.pin) > .bar-container.paper-slider { + left: calc(8px + var(--calculated-paper-slider-height)/2); + } + + #sliderBar.paper-slider { + padding: 15px 0; + width: 100%; + background-color: var(--paper-slider-bar-color, transparent); + --paper-progress-container-color: var(--paper-slider-container-color, var(--paper-grey-400)); + --paper-progress-height: var(--calculated-paper-slider-height); + } + + .slider-markers.paper-slider { + position: absolute; + + top: 15px; + height: var(--calculated-paper-slider-height); + left: 0; + right: -1px; + box-sizing: border-box; + pointer-events: none; + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + } + + .slider-marker.paper-slider { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + .slider-markers.paper-slider::after,.slider-marker.paper-slider::after { + content: ""; + display: block; + margin-left: -1px; + width: 2px; + height: var(--calculated-paper-slider-height); + border-radius: 50%; + background-color: var(--paper-slider-markers-color, #000); + } + + .slider-knob.paper-slider { + position: absolute; + left: 0; + top: 0; + margin-left: calc(-15px - var(--calculated-paper-slider-height)/2); + width: calc(30px + var(--calculated-paper-slider-height)); + height: calc(30px + var(--calculated-paper-slider-height)); + } + + .transiting.paper-slider > .slider-knob.paper-slider { + transition: left 0.08s ease; + } + + .slider-knob.paper-slider:focus { + outline: none; + } + + .slider-knob.dragging.paper-slider { + transition: none; + } + + .snaps.paper-slider > .slider-knob.dragging.paper-slider { + transition: -webkit-transform 0.08s ease; + transition: transform 0.08s ease; + } + + .slider-knob-inner.paper-slider { + margin: 10px; + width: calc(100% - 20px); + height: calc(100% - 20px); + background-color: var(--paper-slider-knob-color, var(--google-blue-700)); + border: 2px solid var(--paper-slider-knob-color, var(--google-blue-700)); + border-radius: 50%; + + -moz-box-sizing: border-box; + box-sizing: border-box; + + transition-property: -webkit-transform, background-color, border; + transition-property: transform, background-color, border; + transition-duration: 0.18s; + transition-timing-function: ease; + } + + .expand.paper-slider:not(.pin) > .slider-knob.paper-slider > .slider-knob-inner.paper-slider { + -webkit-transform: scale(1.5); + transform: scale(1.5); + } + + .ring.paper-slider > .slider-knob.paper-slider > .slider-knob-inner.paper-slider { + background-color: var(--paper-slider-knob-start-color, transparent); + border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400)); + } + + .slider-knob-inner.paper-slider::before { + background-color: var(--paper-slider-pin-color, var(--google-blue-700)); + } + + .pin.paper-slider > .slider-knob.paper-slider > .slider-knob-inner.paper-slider::before { + content: ""; + position: absolute; + top: 0; + left: 50%; + margin-left: -13px; + width: 26px; + height: 26px; + border-radius: 50% 50% 50% 0; + + -webkit-transform: rotate(-45deg) scale(0) translate(0); + transform: rotate(-45deg) scale(0) translate(0); + } + + .slider-knob-inner.paper-slider::before,.slider-knob-inner.paper-slider::after { + transition: -webkit-transform .18s ease, background-color .18s ease; + transition: transform .18s ease, background-color .18s ease; + } + + .pin.ring.paper-slider > .slider-knob.paper-slider > .slider-knob-inner.paper-slider::before { + background-color: var(--paper-slider-pin-start-color, var(--paper-grey-400)); + } + + .pin.expand.paper-slider > .slider-knob.paper-slider > .slider-knob-inner.paper-slider::before { + -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px); + transform: rotate(-45deg) scale(1) translate(17px, -17px); + } + + .pin.paper-slider > .slider-knob.paper-slider > .slider-knob-inner.paper-slider::after { + content: attr(value); + position: absolute; + top: 0; + left: 50%; + margin-left: -16px; + width: 32px; + height: 26px; + text-align: center; + color: var(--paper-slider-font-color, #fff); + font-size: 10px; + + -webkit-transform: scale(0) translate(0); + transform: scale(0) translate(0); + } + + .pin.expand.paper-slider > .slider-knob.paper-slider > .slider-knob-inner.paper-slider::after { + -webkit-transform: scale(1) translate(0, -17px); + transform: scale(1) translate(0, -17px); + } + + .slider-input.paper-slider { + width: 50px; + overflow: hidden; + --paper-input-container-input_-_text-align: center; --paper-input-container-input_-_overflow: initial; --paper-input-container-input_-_white-space: initial; --paper-input-container-input_-_text-overflow: initial; --paper-input-container-input_-_max-width: initial; --paper-input-container-input_-_box-sizing: initial; --paper-input-container-input_-_cursor: initial; --paper-input-container-input_-_font-size: initial; --paper-input-container-input_-_font-weight: initial; --paper-input-container-input_-_line-height: initial; --paper-input-container-input_-_letter-spacing: initial; --paper-input-container-input_-_color: initial; --paper-input-container-input_-_padding: initial; --paper-input-container-input_-_height: initial;; + ; + } + + #sliderContainer.disabled.paper-slider { + pointer-events: none; + } + + .disabled.paper-slider > .slider-knob.paper-slider > .slider-knob-inner.paper-slider { + background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400)); + border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400)); + -webkit-transform: scale3d(0.75, 0.75, 1); + transform: scale3d(0.75, 0.75, 1); + } + + .disabled.ring.paper-slider > .slider-knob.paper-slider > .slider-knob-inner.paper-slider { + background-color: var(--paper-slider-knob-start-color, transparent); + border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400)); + } + + paper-ripple.paper-slider { + color: var(--paper-slider-knob-color, var(--google-blue-700)); + } + + paper-spinner-lite { + display: inline-block; + position: relative; + width: 28px; + height: 28px; + + + --paper-spinner-container-rotation-duration: 1568ms; + + + --paper-spinner-expand-contract-duration: 1333ms; + + + --paper-spinner-full-cycle-duration: 5332ms; + + + --paper-spinner-cooldown-duration: 400ms; + } + + #spinnerContainer.paper-spinner-lite { + width: 100%; + height: 100%; + + + direction: ltr; + } + + #spinnerContainer.active.paper-spinner-lite { + -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite; + animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite; + } + + @-webkit-keyframes container-rotate { + to { + -webkit-transform: rotate(360deg) + } + + } + + @keyframes container-rotate { + to { + transform: rotate(360deg) + } + + } + + .spinner-layer.paper-spinner-lite { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + white-space: nowrap; + color: var(--paper-spinner-color, var(--google-blue-500)); + } + + .layer-1.paper-spinner-lite { + color: var(--paper-spinner-layer-1-color, var(--google-blue-500)); + } + + .layer-2.paper-spinner-lite { + color: var(--paper-spinner-layer-2-color, var(--google-red-500)); + } + + .layer-3.paper-spinner-lite { + color: var(--paper-spinner-layer-3-color, var(--google-yellow-500)); + } + + .layer-4.paper-spinner-lite { + color: var(--paper-spinner-layer-4-color, var(--google-green-500)); + } + + .active.paper-spinner-lite .spinner-layer.paper-spinner-lite { + -webkit-animation-name: fill-unfill-rotate; + -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); + -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); + -webkit-animation-iteration-count: infinite; + animation-name: fill-unfill-rotate; + animation-duration: var(--paper-spinner-full-cycle-duration); + animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); + animation-iteration-count: infinite; + opacity: 1; + } + + .active.paper-spinner-lite .spinner-layer.layer-1.paper-spinner-lite { + -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; + animation-name: fill-unfill-rotate, layer-1-fade-in-out; + } + + .active.paper-spinner-lite .spinner-layer.layer-2.paper-spinner-lite { + -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; + animation-name: fill-unfill-rotate, layer-2-fade-in-out; + } + + .active.paper-spinner-lite .spinner-layer.layer-3.paper-spinner-lite { + -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; + animation-name: fill-unfill-rotate, layer-3-fade-in-out; + } + + .active.paper-spinner-lite .spinner-layer.layer-4.paper-spinner-lite { + -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; + animation-name: fill-unfill-rotate, layer-4-fade-in-out; + } + + @-webkit-keyframes fill-unfill-rotate { + 12.5% { + -webkit-transform: rotate(135deg) + } + + 25% { + -webkit-transform: rotate(270deg) + } + + 37.5% { + -webkit-transform: rotate(405deg) + } + + 50% { + -webkit-transform: rotate(540deg) + } + + 62.5% { + -webkit-transform: rotate(675deg) + } + + 75% { + -webkit-transform: rotate(810deg) + } + + 87.5% { + -webkit-transform: rotate(945deg) + } + + to { + -webkit-transform: rotate(1080deg) + } + + } + + @keyframes fill-unfill-rotate { + 12.5% { + transform: rotate(135deg) + } + + 25% { + transform: rotate(270deg) + } + + 37.5% { + transform: rotate(405deg) + } + + 50% { + transform: rotate(540deg) + } + + 62.5% { + transform: rotate(675deg) + } + + 75% { + transform: rotate(810deg) + } + + 87.5% { + transform: rotate(945deg) + } + + to { + transform: rotate(1080deg) + } + + } + + @-webkit-keyframes layer-1-fade-in-out { + 0% { + opacity: 1 + } + + 25% { + opacity: 1 + } + + 26% { + opacity: 0 + } + + 89% { + opacity: 0 + } + + 90% { + opacity: 1 + } + + to { + opacity: 1 + } + + } + + @keyframes layer-1-fade-in-out { + 0% { + opacity: 1 + } + + 25% { + opacity: 1 + } + + 26% { + opacity: 0 + } + + 89% { + opacity: 0 + } + + 90% { + opacity: 1 + } + + to { + opacity: 1 + } + + } + + @-webkit-keyframes layer-2-fade-in-out { + 0% { + opacity: 0 + } + + 15% { + opacity: 0 + } + + 25% { + opacity: 1 + } + + 50% { + opacity: 1 + } + + 51% { + opacity: 0 + } + + to { + opacity: 0 + } + + } + + @keyframes layer-2-fade-in-out { + 0% { + opacity: 0 + } + + 15% { + opacity: 0 + } + + 25% { + opacity: 1 + } + + 50% { + opacity: 1 + } + + 51% { + opacity: 0 + } + + to { + opacity: 0 + } + + } + + @-webkit-keyframes layer-3-fade-in-out { + 0% { + opacity: 0 + } + + 40% { + opacity: 0 + } + + 50% { + opacity: 1 + } + + 75% { + opacity: 1 + } + + 76% { + opacity: 0 + } + + to { + opacity: 0 + } + + } + + @keyframes layer-3-fade-in-out { + 0% { + opacity: 0 + } + + 40% { + opacity: 0 + } + + 50% { + opacity: 1 + } + + 75% { + opacity: 1 + } + + 76% { + opacity: 0 + } + + to { + opacity: 0 + } + + } + + @-webkit-keyframes layer-4-fade-in-out { + 0% { + opacity: 0 + } + + 65% { + opacity: 0 + } + + 75% { + opacity: 1 + } + + 90% { + opacity: 1 + } + + to { + opacity: 0 + } + + } + + @keyframes layer-4-fade-in-out { + 0% { + opacity: 0 + } + + 65% { + opacity: 0 + } + + 75% { + opacity: 1 + } + + 90% { + opacity: 1 + } + + to { + opacity: 0 + } + + } + + .circle-clipper.paper-spinner-lite { + display: inline-block; + position: relative; + width: 50%; + height: 100%; + overflow: hidden; + } + + .spinner-layer.paper-spinner-lite::after { + content: ''; + left: 45%; + width: 10%; + border-top-style: solid; + } + + .spinner-layer.paper-spinner-lite::after,.circle-clipper.paper-spinner-lite .circle.paper-spinner-lite { + box-sizing: border-box; + position: absolute; + top: 0; + border-width: var(--paper-spinner-stroke-width, 3px); + border-radius: 50%; + } + + .circle-clipper.paper-spinner-lite .circle.paper-spinner-lite { + bottom: 0; + width: 200%; + border-style: solid; + border-bottom-color: transparent !important; + } + + .circle-clipper.left.paper-spinner-lite .circle.paper-spinner-lite { + left: 0; + border-right-color: transparent !important; + -webkit-transform: rotate(129deg); + transform: rotate(129deg); + } + + .circle-clipper.right.paper-spinner-lite .circle.paper-spinner-lite { + left: -100%; + border-left-color: transparent !important; + -webkit-transform: rotate(-129deg); + transform: rotate(-129deg); + } + + .active.paper-spinner-lite .gap-patch.paper-spinner-lite::after,.active.paper-spinner-lite .circle-clipper.paper-spinner-lite .circle.paper-spinner-lite { + -webkit-animation-duration: var(--paper-spinner-expand-contract-duration); + -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); + -webkit-animation-iteration-count: infinite; + animation-duration: var(--paper-spinner-expand-contract-duration); + animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); + animation-iteration-count: infinite; + } + + .active.paper-spinner-lite .circle-clipper.left.paper-spinner-lite .circle.paper-spinner-lite { + -webkit-animation-name: left-spin; + animation-name: left-spin; + } + + .active.paper-spinner-lite .circle-clipper.right.paper-spinner-lite .circle.paper-spinner-lite { + -webkit-animation-name: right-spin; + animation-name: right-spin; + } + + @-webkit-keyframes left-spin { + 0% { + -webkit-transform: rotate(130deg) + } + + 50% { + -webkit-transform: rotate(-5deg) + } + + to { + -webkit-transform: rotate(130deg) + } + + } + + @keyframes left-spin { + 0% { + transform: rotate(130deg) + } + + 50% { + transform: rotate(-5deg) + } + + to { + transform: rotate(130deg) + } + + } + + @-webkit-keyframes right-spin { + 0% { + -webkit-transform: rotate(-130deg) + } + + 50% { + -webkit-transform: rotate(5deg) + } + + to { + -webkit-transform: rotate(-130deg) + } + + } + + @keyframes right-spin { + 0% { + transform: rotate(-130deg) + } + + 50% { + transform: rotate(5deg) + } + + to { + transform: rotate(-130deg) + } + + } + + #spinnerContainer.cooldown.paper-spinner-lite { + -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1); + animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1); + } + + @-webkit-keyframes fade-out { + 0% { + opacity: 1 + } + + to { + opacity: 0 + } + + } + + @keyframes fade-out { + 0% { + opacity: 1 + } + + to { + opacity: 0 + } + + } + + paper-spinner { + display: inline-block; + position: relative; + width: 28px; + height: 28px; + + + --paper-spinner-container-rotation-duration: 1568ms; + + + --paper-spinner-expand-contract-duration: 1333ms; + + + --paper-spinner-full-cycle-duration: 5332ms; + + + --paper-spinner-cooldown-duration: 400ms; + } + + #spinnerContainer.paper-spinner { + width: 100%; + height: 100%; + + + direction: ltr; + } + + #spinnerContainer.active.paper-spinner { + -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite; + animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite; + } + + @-webkit-keyframes container-rotate { + to { + -webkit-transform: rotate(360deg) + } + + } + + @keyframes container-rotate { + to { + transform: rotate(360deg) + } + + } + + .spinner-layer.paper-spinner { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + white-space: nowrap; + color: var(--paper-spinner-color, var(--google-blue-500)); + } + + .layer-1.paper-spinner { + color: var(--paper-spinner-layer-1-color, var(--google-blue-500)); + } + + .layer-2.paper-spinner { + color: var(--paper-spinner-layer-2-color, var(--google-red-500)); + } + + .layer-3.paper-spinner { + color: var(--paper-spinner-layer-3-color, var(--google-yellow-500)); + } + + .layer-4.paper-spinner { + color: var(--paper-spinner-layer-4-color, var(--google-green-500)); + } + + .active.paper-spinner .spinner-layer.paper-spinner { + -webkit-animation-name: fill-unfill-rotate; + -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); + -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); + -webkit-animation-iteration-count: infinite; + animation-name: fill-unfill-rotate; + animation-duration: var(--paper-spinner-full-cycle-duration); + animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); + animation-iteration-count: infinite; + opacity: 1; + } + + .active.paper-spinner .spinner-layer.layer-1.paper-spinner { + -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; + animation-name: fill-unfill-rotate, layer-1-fade-in-out; + } + + .active.paper-spinner .spinner-layer.layer-2.paper-spinner { + -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; + animation-name: fill-unfill-rotate, layer-2-fade-in-out; + } + + .active.paper-spinner .spinner-layer.layer-3.paper-spinner { + -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; + animation-name: fill-unfill-rotate, layer-3-fade-in-out; + } + + .active.paper-spinner .spinner-layer.layer-4.paper-spinner { + -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; + animation-name: fill-unfill-rotate, layer-4-fade-in-out; + } + + @-webkit-keyframes fill-unfill-rotate { + 12.5% { + -webkit-transform: rotate(135deg) + } + + 25% { + -webkit-transform: rotate(270deg) + } + + 37.5% { + -webkit-transform: rotate(405deg) + } + + 50% { + -webkit-transform: rotate(540deg) + } + + 62.5% { + -webkit-transform: rotate(675deg) + } + + 75% { + -webkit-transform: rotate(810deg) + } + + 87.5% { + -webkit-transform: rotate(945deg) + } + + to { + -webkit-transform: rotate(1080deg) + } + + } + + @keyframes fill-unfill-rotate { + 12.5% { + transform: rotate(135deg) + } + + 25% { + transform: rotate(270deg) + } + + 37.5% { + transform: rotate(405deg) + } + + 50% { + transform: rotate(540deg) + } + + 62.5% { + transform: rotate(675deg) + } + + 75% { + transform: rotate(810deg) + } + + 87.5% { + transform: rotate(945deg) + } + + to { + transform: rotate(1080deg) + } + + } + + @-webkit-keyframes layer-1-fade-in-out { + 0% { + opacity: 1 + } + + 25% { + opacity: 1 + } + + 26% { + opacity: 0 + } + + 89% { + opacity: 0 + } + + 90% { + opacity: 1 + } + + to { + opacity: 1 + } + + } + + @keyframes layer-1-fade-in-out { + 0% { + opacity: 1 + } + + 25% { + opacity: 1 + } + + 26% { + opacity: 0 + } + + 89% { + opacity: 0 + } + + 90% { + opacity: 1 + } + + to { + opacity: 1 + } + + } + + @-webkit-keyframes layer-2-fade-in-out { + 0% { + opacity: 0 + } + + 15% { + opacity: 0 + } + + 25% { + opacity: 1 + } + + 50% { + opacity: 1 + } + + 51% { + opacity: 0 + } + + to { + opacity: 0 + } + + } + + @keyframes layer-2-fade-in-out { + 0% { + opacity: 0 + } + + 15% { + opacity: 0 + } + + 25% { + opacity: 1 + } + + 50% { + opacity: 1 + } + + 51% { + opacity: 0 + } + + to { + opacity: 0 + } + + } + + @-webkit-keyframes layer-3-fade-in-out { + 0% { + opacity: 0 + } + + 40% { + opacity: 0 + } + + 50% { + opacity: 1 + } + + 75% { + opacity: 1 + } + + 76% { + opacity: 0 + } + + to { + opacity: 0 + } + + } + + @keyframes layer-3-fade-in-out { + 0% { + opacity: 0 + } + + 40% { + opacity: 0 + } + + 50% { + opacity: 1 + } + + 75% { + opacity: 1 + } + + 76% { + opacity: 0 + } + + to { + opacity: 0 + } + + } + + @-webkit-keyframes layer-4-fade-in-out { + 0% { + opacity: 0 + } + + 65% { + opacity: 0 + } + + 75% { + opacity: 1 + } + + 90% { + opacity: 1 + } + + to { + opacity: 0 + } + + } + + @keyframes layer-4-fade-in-out { + 0% { + opacity: 0 + } + + 65% { + opacity: 0 + } + + 75% { + opacity: 1 + } + + 90% { + opacity: 1 + } + + to { + opacity: 0 + } + + } + + .circle-clipper.paper-spinner { + display: inline-block; + position: relative; + width: 50%; + height: 100%; + overflow: hidden; + } + + .spinner-layer.paper-spinner::after { + content: ''; + left: 45%; + width: 10%; + border-top-style: solid; + } + + .spinner-layer.paper-spinner::after,.circle-clipper.paper-spinner .circle.paper-spinner { + box-sizing: border-box; + position: absolute; + top: 0; + border-width: var(--paper-spinner-stroke-width, 3px); + border-radius: 50%; + } + + .circle-clipper.paper-spinner .circle.paper-spinner { + bottom: 0; + width: 200%; + border-style: solid; + border-bottom-color: transparent !important; + } + + .circle-clipper.left.paper-spinner .circle.paper-spinner { + left: 0; + border-right-color: transparent !important; + -webkit-transform: rotate(129deg); + transform: rotate(129deg); + } + + .circle-clipper.right.paper-spinner .circle.paper-spinner { + left: -100%; + border-left-color: transparent !important; + -webkit-transform: rotate(-129deg); + transform: rotate(-129deg); + } + + .active.paper-spinner .gap-patch.paper-spinner::after,.active.paper-spinner .circle-clipper.paper-spinner .circle.paper-spinner { + -webkit-animation-duration: var(--paper-spinner-expand-contract-duration); + -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); + -webkit-animation-iteration-count: infinite; + animation-duration: var(--paper-spinner-expand-contract-duration); + animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); + animation-iteration-count: infinite; + } + + .active.paper-spinner .circle-clipper.left.paper-spinner .circle.paper-spinner { + -webkit-animation-name: left-spin; + animation-name: left-spin; + } + + .active.paper-spinner .circle-clipper.right.paper-spinner .circle.paper-spinner { + -webkit-animation-name: right-spin; + animation-name: right-spin; + } + + @-webkit-keyframes left-spin { + 0% { + -webkit-transform: rotate(130deg) + } + + 50% { + -webkit-transform: rotate(-5deg) + } + + to { + -webkit-transform: rotate(130deg) + } + + } + + @keyframes left-spin { + 0% { + transform: rotate(130deg) + } + + 50% { + transform: rotate(-5deg) + } + + to { + transform: rotate(130deg) + } + + } + + @-webkit-keyframes right-spin { + 0% { + -webkit-transform: rotate(-130deg) + } + + 50% { + -webkit-transform: rotate(5deg) + } + + to { + -webkit-transform: rotate(-130deg) + } + + } + + @keyframes right-spin { + 0% { + transform: rotate(-130deg) + } + + 50% { + transform: rotate(5deg) + } + + to { + transform: rotate(-130deg) + } + + } + + #spinnerContainer.cooldown.paper-spinner { + -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1); + animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1); + } + + @-webkit-keyframes fade-out { + 0% { + opacity: 1 + } + + to { + opacity: 0 + } + + } + + @keyframes fade-out { + 0% { + opacity: 1 + } + + to { + opacity: 0 + } + + } + + paper-tab { + display: var(--layout-inline_-_display); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + -ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content); justify-content: var(--layout-center-justified_-_justify-content); + -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex); + + position: relative; + padding: 0 12px; + overflow: hidden; + cursor: pointer; + vertical-align: middle; + + font-family: var(--paper-font-common-base_-_font-family); -webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); + ; + } + + paper-tab:focus { + outline: none; + } + + paper-tab[link] { + padding: 0; + } + + .tab-content.paper-tab { + height: 100%; + transform: translateZ(0); + -webkit-transform: translateZ(0); + transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1); + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex); + ; + } + + paper-tab:not(.iron-selected) > .tab-content.paper-tab { + opacity: 0.8; + + opacity: var(--paper-tab-content-unselected_-_opacity, 0.8); + } + + paper-tab:focus .tab-content.paper-tab { + opacity: 1; + font-weight: 700; + + font-weight: var(--paper-tab-content-focused_-_font-weight, 700); + } + + paper-ripple.paper-tab { + color: var(--paper-tab-ink, var(--paper-yellow-a100)); + } + + .tab-content.paper-tab > a { + -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex); + + height: 100%; + } + + paper-tabs { + display: var(--layout_-_display); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + + height: 48px; + font-size: 14px; + font-weight: 500; + overflow: hidden; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; + + ; + } + + [dir="rtl"] paper-tabs, paper-tabs[dir="rtl"] { + display: var(--layout-horizontal-reverse_-_display); -ms-flex-direction: var(--layout-horizontal-reverse_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal-reverse_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal-reverse_-_flex-direction); + } + + #tabsContainer.paper-tabs { + position: relative; + height: 100%; + white-space: nowrap; + overflow: hidden; + -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex); + ; + } + + #tabsContent.paper-tabs { + height: 100%; + -moz-flex-basis: auto; + -ms-flex-basis: auto; + flex-basis: auto; + ; + } + + #tabsContent.scrollable.paper-tabs { + position: absolute; + white-space: nowrap; + } + + #tabsContent.paper-tabs:not(.scrollable),#tabsContent.scrollable.fit-container.paper-tabs { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + } + + #tabsContent.scrollable.fit-container.paper-tabs { + min-width: 100%; + } + + #tabsContent.scrollable.fit-container.paper-tabs > * { + -ms-flex: 1 0 auto; + -webkit-flex: 1 0 auto; + flex: 1 0 auto; + } + + .hidden.paper-tabs { + display: none; + } + + .not-visible.paper-tabs { + opacity: 0; + cursor: default; + } + + paper-icon-button.paper-tabs { + width: 48px; + height: 48px; + padding: 12px; + margin: 0 4px; + } + + #selectionBar.paper-tabs { + position: absolute; + height: 0; + bottom: 0; + left: 0; + right: 0; + border-bottom: 2px solid var(--paper-tabs-selection-bar-color, var(--paper-yellow-a100)); + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: left center; + transform-origin: left center; + transition: -webkit-transform; + transition: transform; + + ; + } + + #selectionBar.align-bottom.paper-tabs { + top: 0; + bottom: auto; + } + + #selectionBar.expand.paper-tabs { + transition-duration: 0.15s; + transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1); + } + + #selectionBar.contract.paper-tabs { + transition-duration: 0.18s; + transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); + } + + #tabsContent.paper-tabs > :not(#selectionBar) { + height: 100%; + } + + paper-tooltip { + display: block; + position: absolute; + outline: none; + z-index: 1002; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + cursor: default; + } + + #tooltip.paper-tooltip { + display: block; + outline: none; + font-family: var(--paper-font-common-base_-_font-family); -webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); + font-size: 10px; + line-height: 1; + background-color: var(--paper-tooltip-background, #616161); + color: var(--paper-tooltip-text-color, white); + padding: 8px; + border-radius: 2px; + margin: var(--paper-tooltip_-_margin); font-size: var(--paper-tooltip_-_font-size, 10px); font-weight: var(--paper-tooltip_-_font-weight); line-height: var(--paper-tooltip_-_line-height, 1); letter-spacing: var(--paper-tooltip_-_letter-spacing); text-transform: var(--paper-tooltip_-_text-transform); + } + + @keyframes keyFrameScaleUp { + 0% { + transform: scale(0.0); + } + + 100% { + transform: scale(1.0); + } + + } + + @keyframes keyFrameScaleDown { + 0% { + transform: scale(1.0); + } + + 100% { + transform: scale(0.0); + } + + } + + @keyframes keyFrameFadeInOpacity { + 0% { + opacity: 0; + } + + 100% { + opacity: var(--paper-tooltip-opacity, 0.9); + } + + } + + @keyframes keyFrameFadeOutOpacity { + 0% { + opacity: var(--paper-tooltip-opacity, 0.9); + } + + 100% { + opacity: 0; + } + + } + + @keyframes keyFrameSlideDownIn { + 0% { + transform: translateY(-2000px); + opacity: 0; + } + + 10% { + opacity: 0.2; + } + + 100% { + transform: translateY(0); + opacity: var(--paper-tooltip-opacity, 0.9); + } + + } + + @keyframes keyFrameSlideDownOut { + 0% { + transform: translateY(0); + opacity: var(--paper-tooltip-opacity, 0.9); + } + + 10% { + opacity: 0.2; + } + + 100% { + transform: translateY(-2000px); + opacity: 0; + } + + } + + .fade-in-animation.paper-tooltip { + opacity: 0; + animation-delay: var(--paper-tooltip-delay-in, 500ms); + animation-name: keyFrameFadeInOpacity; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: var(--paper-tooltip-duration-in, 500ms); + animation-fill-mode: forwards; + ; + } + + .fade-out-animation.paper-tooltip { + opacity: var(--paper-tooltip-opacity, 0.9); + animation-delay: var(--paper-tooltip-delay-out, 0ms); + animation-name: keyFrameFadeOutOpacity; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: var(--paper-tooltip-duration-out, 500ms); + animation-fill-mode: forwards; + ; + } + + .scale-up-animation.paper-tooltip { + transform: scale(0); + opacity: var(--paper-tooltip-opacity, 0.9); + animation-delay: var(--paper-tooltip-delay-in, 500ms); + animation-name: keyFrameScaleUp; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: var(--paper-tooltip-duration-in, 500ms); + animation-fill-mode: forwards; + ; + } + + .scale-down-animation.paper-tooltip { + transform: scale(1); + opacity: var(--paper-tooltip-opacity, 0.9); + animation-delay: var(--paper-tooltip-delay-out, 500ms); + animation-name: keyFrameScaleDown; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: var(--paper-tooltip-duration-out, 500ms); + animation-fill-mode: forwards; + ; + } + + .slide-down-animation.paper-tooltip { + transform: translateY(-2000px); + opacity: 0; + animation-delay: var(--paper-tooltip-delay-out, 500ms); + animation-name: keyFrameSlideDownIn; + animation-iteration-count: 1; + animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); + animation-duration: var(--paper-tooltip-duration-out, 500ms); + animation-fill-mode: forwards; + ; + } + + .slide-down-animation-out.paper-tooltip { + transform: translateY(0); + opacity: var(--paper-tooltip-opacity, 0.9); + animation-delay: var(--paper-tooltip-delay-out, 500ms); + animation-name: keyFrameSlideDownOut; + animation-iteration-count: 1; + animation-timing-function: cubic-bezier(0.4, 0.0, 1, 1); + animation-duration: var(--paper-tooltip-duration-out, 500ms); + animation-fill-mode: forwards; + ; + } + + .cancel-animation.paper-tooltip { + animation-delay: -30s !important; + } + + .hidden.paper-tooltip { + display: none !important; + } + + yt-live-chat-message-buy-flow-heading-renderer { + --yt-endpoint-color: rgb(39, 147, 230); + --yt-endpoint-visited-color: rgb(39, 147, 230); + + display: block; + margin: 10px 0 12px; + } + + yt-formatted-string.yt-live-chat-message-buy-flow-heading-renderer { + display: block; + } + + #heading-title.yt-live-chat-message-buy-flow-heading-renderer { + font-size: 16px; + font-weight: 500; + line-height: 20px; + color: var(--yt-live-chat-primary-text-color); + } + + #heading-text.yt-live-chat-message-buy-flow-heading-renderer { + margin-top: 4px; + font-size: 14px; + line-height: 17px; + } + + #container.yt-live-chat-paid-message-footer-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + } + + #icon.yt-live-chat-paid-message-footer-renderer { + min-width: 40px; + margin-right: 16px; + + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + display: var(--layout_-_display); + } + + #text.yt-live-chat-paid-message-footer-renderer { + font-size: 12px; + line-height: 16px; + margin-bottom: 3px; + + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + display: var(--layout_-_display); + } + + yt-icon-button { + display: inline-block; + position: relative; + width: 24px; + height: 24px; + box-sizing: border-box; + font-size: 0; + } + + button.yt-icon-button { + vertical-align: middle; + color: inherit; + outline: none; + background: none; + margin: 0; + border: none; + padding: 0; + width: 100%; + height: 100%; + line-height: 0; + cursor: pointer; + + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; + } + + button.yt-icon-button > yt-icon { + width: var(--yt-icon-button-icon-width, 100%); + height: var(--yt-icon-button-icon-height, 100%); + } + + button.yt-icon-button[disabled] { + pointer-events: none; + cursor: auto; + } + + paper-ripple.yt-icon-button { + opacity: 0.6; + color: currentColor; + } + + yt-button-renderer { + --paper-button-ink-color: var(--yt-paper-button-ink-color); + --yt-formatted-string-deemphasize-color: var(--yt-spec-static-brand-white); + + + --yt-formatted-string-deemphasize_-_margin-left: var(--ytd-margin-base);; + } + + yt-button-renderer { + vertical-align: middle; + white-space: nowrap; + font-size: var(--ytd-tab-system_-_font-size); font-weight: var(--ytd-tab-system_-_font-weight); letter-spacing: var(--ytd-tab-system_-_letter-spacing); text-transform: var(--ytd-tab-system_-_text-transform); + } + + yt-button-renderer[is-paper-button](:not[button-raised]),yt-button-renderer[is-paper-button](:not[button-raised]) a.yt-button-renderer { + overflow: hidden; + } + + yt-button-renderer[disabled][is-paper-button] a.yt-button-renderer { + cursor: initial; + } + + yt-button-renderer[is-paper-button] yt-icon.yt-button-renderer { + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + yt-button-renderer yt-formatted-string.yt-button-renderer { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + paper-button.yt-button-renderer { + min-width: var(--yt-paper-button-min-width, var(--ytd-paper-button-min-width, 5.14em)); + font-size: var(--yt-paper-button-font-size, inherit); + } + + paper-button.keyboard-focus.yt-button-renderer { + font-weight: inherit; + } + + yt-button-renderer.force-icon-button { + font-size: var(--ytd-caption_-_font-size); line-height: var(--ytd-caption_-_line-height); font-weight: var(--ytd-caption_-_font-weight); letter-spacing: var(--ytd-caption_-_letter-spacing); text-transform: var(--ytd-caption_-_text-transform); + } + + yt-button-renderer.force-icon-button a.yt-button-renderer { + padding-right: var(--yt-button-icon-padding, var(--ytd-margin-2x)); + } + + yt-button-renderer[is-paper-button] { + background-color: var(--yt-basic-background-color, var(--yt-button-background-color)); + color: var(--yt-basic-foreground-title-color, var(--yt-spec-text-secondary)); + border-color: var(--yt-basic-foreground-title-color, var(--yt-spec-text-secondary)); + } + + yt-button-renderer[is-paper-button-with-icon] { + --yt-button-padding-minus-focus-outline: var(--yt-button-with-icon-padding-minus-focus-outline); + } + + yt-button-renderer.style-suggestive.size-small[is-paper-button-with-icon] { + --yt-button-padding: 6px 12px; + --yt-button-padding-minus-border: 5px 11px; + } + + yt-button-renderer[is-paper-button-with-icon] { + --yt-button-padding: 6px 16px; + --yt-button-padding-minus-border: 5px 15px; + } + + yt-button-renderer[is-paper-button-with-icon][button-size="size-large"] { + --yt-button-padding: 10px 16px; + --yt-button-padding-minus-border: 9px 15px; + --yt-button-padding-minus-focus-outline: 9px 15px; + } + + yt-button-renderer[is-icon-button] { + color: var(--yt-button-color, var(--yt-spec-icon-inactive)); + } + + yt-button-renderer.style-text[is-icon-button],yt-button-renderer.style-default[is-icon-button],yt-button-renderer.style-opacity[is-icon-button] { + color: var(--yt-spec-icon-inactive); + } + + yt-button-renderer.style-text[is-icon-button] #text.yt-button-renderer,yt-button-renderer.style-default[is-icon-button] #text.yt-button-renderer,yt-button-renderer.style-opacity[is-icon-button] #text.yt-button-renderer { + color: var(--yt-spec-text-secondary); + } + + yt-button-renderer.style-black[is-icon-button] { + color: var(--yt-spec-text-primary); + } + + yt-button-renderer.style-opacity[is-icon-button][disabled] { + color: var(--yt-spec-icon-disabled); + } + + yt-button-renderer.style-blue-text[is-icon-button] { + color: var(--yt-spec-call-to-action); + } + + yt-button-renderer.style-visibly-disabled[is-icon-button] { + color: var(--yt-spec-icon-disabled); + } + + paper-tooltip.yt-button-renderer { + white-space: nowrap; + } + + yt-button-renderer.style-primary[is-paper-button] { + background-color: var(--yt-spec-call-to-action); + color: var(--yt-spec-text-primary-inverse); + } + + yt-button-renderer.style-primary[disabled][is-paper-button] { + background-color: var(--yt-spec-icon-disabled); + color: var(--yt-spec-text-primary-inverse); + } + + yt-button-renderer.style-payment[is-paper-button] { + background-color: var(--yt-button-payment-background-color, var(--yt-spec-call-to-action)); + color: var(--yt-spec-text-primary-inverse); + } + + yt-button-renderer.style-payment[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer.style-primary[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer.style-payment[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer,yt-button-renderer.style-primary[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-filled-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + yt-button-renderer.style-suggestive[is-paper-button] { + --yt-formatted-string-deemphasize-color: var(--yt-blue-opacity-lighten-2); + background-color: transparent; + color: var(--yt-spec-call-to-action); + } + + yt-button-renderer.style-suggestive[is-paper-button] paper-button.yt-button-renderer { + border: 1px solid var(--yt-spec-call-to-action); + padding: var(--yt-button-padding-minus-border); + } + + yt-button-renderer.style-suggestive[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer.style-suggestive[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-call-to-action); + padding: var(--yt-button-padding-minus-focus-outline); + } + + yt-button-renderer.palette-with-border[is-paper-button] paper-button.yt-button-renderer { + border-width: 1px; + border-style: solid; + padding: var(--yt-button-padding-minus-border); + } + + yt-button-renderer.palette-with-border[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer.palette-with-border[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer { + border-width: var(--yt-button-padding-minus-focus-outline-width); + border-style: solid; + padding: var(--yt-button-padding-minus-focus-outline); + } + + yt-button-renderer.style-blue-text[is-paper-button] { + --yt-formatted-string-deemphasize-color: var(--yt-spec-icon-disabled); + color: var(--yt-spec-call-to-action); + } + + yt-button-renderer.style-blue-text[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer.style-blue-text[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-call-to-action-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + yt-button-renderer.style-destructive[is-paper-button] { + background-color: var(--yt-spec-brand-subscribe-button-background); + color: var(--yt-spec-static-brand-white); + } + + yt-button-renderer.style-destructive[new-subscribe-color][is-paper-button] { + background-color: var(--yt-spec-brand-button-background); + } + + yt-button-renderer.style-destructive[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer.style-destructive[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-filled-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + yt-button-renderer.style-destructive[disabled][is-paper-button] { + background-color: + var(--yt-button-destructive-background-color, var(--yt-opalescence-soft-grey)); + color: var(--yt-button-destructive-color, var(--yt-opalescence-grey-opacity-lighten-2)); + } + + yt-button-renderer.style-brand[is-paper-button] { + color: var(--yt-spec-brand-link-text); + } + + yt-button-renderer.style-brand[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer.style-brand[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-brand-text-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + yt-button-renderer.style-default[is-paper-button] { + background-color: var(--yt-button-default-background-color, var(--yt-spec-badge-chip-background)); + color: var(--yt-button-default-text-color, var(--yt-spec-text-secondary)); + } + + yt-button-renderer.style-default[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer.style-default[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-filled-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + yt-button-renderer.style-inactive-outline[is-paper-button] { + color: var(--yt-spec-text-secondary); + } + + yt-button-renderer.style-inactive-outline[is-paper-button] paper-button.yt-button-renderer { + border: 1px solid var(--yt-spec-text-secondary); + padding: var(--yt-button-padding-minus-border); + } + + yt-button-renderer.style-inactive-outline[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer.style-inactive-outline[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-text-secondary); + padding: var(--yt-button-padding-minus-focus-outline); + } + + yt-button-renderer.style-suggested-action[is-paper-button] { + background-color: var(--yt-spec-suggested-action); + color: var(--yt-spec-call-to-action); + } + + yt-button-renderer.style-suggested-action[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer.style-suggested-action[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-call-to-action-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + yt-button-renderer.style-compact-gray[is-paper-button] { + background-color: var(--yt-spec-badge-chip-background); + color: var(--yt-spec-text-secondary); + } + + yt-button-renderer.style-compact-gray[is-paper-button] paper-button.yt-button-renderer { + padding: var(--ytd-margin-base) var(--ytd-margin-2x); + } + + yt-button-renderer.style-text[is-paper-button] { + color: var(--yt-spec-text-secondary); + } + + yt-button-renderer[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer.style-text[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer,yt-button-renderer.style-text[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-inactive-text-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + yt-button-renderer.style-overlay[is-paper-button] { + background-color: var(--yt-spec-static-overlay-button-primary); + color: var(--yt-spec-static-overlay-text-primary); + } + + yt-button-renderer.style-overlay[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer.style-overlay[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-static-overlay-text-secondary); + padding: var(--yt-button-padding-minus-focus-outline); + } + + yt-button-renderer.style-white-with-border[is-paper-button] { + background-color: transparent; + border: 1px solid var(--yt-spec-static-brand-white); + color: var(--yt-spec-static-brand-white); + } + + yt-button-renderer.style-white-with-border[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.yt-button-renderer,yt-button-renderer.style-white-with-border[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-static-brand-white); + padding: var(--yt-button-padding-minus-focus-outline); + } + + yt-button-renderer.style-alert-info[is-paper-button] { + color: var(--yt-blue); + } + + yt-button-renderer.style-alert-info[is-paper-button]:hover { + color: var(--yt-icon-hover-color); + } + + yt-button-renderer.style-dark[is-paper-button] { + background-color: var(--yt-button-dark-background-color, var(--yt-opalescence-soft-grey)); + color: var(--yt-button-dark-text-color, var(--yt-luna-black)); + } + + yt-button-renderer.style-light[is-paper-button] { + background-color: var(--yt-button-light-background-color, var(--yt-opalescence-soft-grey)); + color: var(--yt-button-light-text-color, var(--yt-luna-black-opacity-lighten-2)); + } + + yt-button-renderer.style-light-text[is-paper-button] { + color: var(--yt-white); + } + + yt-button-renderer.style-black[is-paper-button] { + color: var(--yt-spec-text-primary); + } + + yt-button-renderer.style-visibly-disabled[is-paper-button] { + background-color: transparent; + color: var(--yt-spec-text-disabled); + } + + yt-button-renderer.style-black[disabled][is-paper-button] { + color: var(--yt-button-black-color, var(--yt-opalescence-soft-grey-opacity-lighten-1)); + } + + yt-button-renderer.style-dark-on-black[is-paper-button] { + background-color: var(--yt-playability-button-color); + border: none; + color: var(--yt-white-opacity-lighten-1); + } + + yt-button-renderer.style-blue-text-with-inverse-theme[is-paper-button] { + color: var(--yt-spec-call-to-action-inverse); + } + + yt-button-renderer.style-count { + font-size: var(--ytd-thumbnail-attribution_-_font-size); font-weight: var(--ytd-thumbnail-attribution_-_font-weight); line-height: var(--ytd-thumbnail-attribution_-_line-height); letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); text-transform: var(--ytd-thumbnail-attribution_-_text-transform); + } + + paper-button.yt-button-renderer { + display: inline-block; + text-align: center; + font-family: inherit; + } + + yt-button-renderer { + display: inline-block; + text-transform: uppercase; + } + + yt-button-renderer.force-icon-button a.yt-button-renderer { + cursor: pointer; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + } + + yt-button-renderer[disabled] a.yt-button-renderer:focus { + outline: none; + } + + yt-button-renderer[is-icon-button][has-no-text] { + font-size: 0; + } + + a.yt-button-renderer { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + } + + a.yt-simple-endpoint.yt-button-renderer { + color: inherit; + border-radius: inherit; + text-decoration: none; + } + + yt-button-renderer[is-paper-button] { + border-radius: var(--yt-button-border-radius, 3px); + margin: var(--yt-button-margin, 0 0.29em); + } + + yt-button-renderer[is-paper-button][disabled] { + color: var(--yt-spec-text-disabled); + background-color: transparent; + } + + yt-button-renderer[is-icon-button][disabled] { + color: #9b9b9b; + } + + yt-button-renderer[is-paper-button][align-by-text]:not(:empty) { + margin-left: -16px; + } + + yt-button-renderer[is-paper-button][button-size=size-large] { + line-height: 24px; + } + + paper-button.yt-button-renderer { + width: var(--yt-paper-button-width, auto); + height: var(--yt-paper-button-height, auto); + border-radius: inherit; + margin: 0; + padding: var(--yt-button-padding, 0.7em 0.57em); + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -ms-flex: 1 1 auto; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + ; + } + + yt-button-renderer[start-justified] paper-button.yt-button-renderer { + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + } + + yt-button-renderer[vertically-aligned] paper-button.yt-button-renderer { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + #button.yt-button-renderer { + color: var(--yt-button-color); + background-color: var(--yt-button-background-color); + } + + yt-button-renderer #button.yt-button-renderer { + color: var(--yt-button-color, inherit); + background-color: transparent; + text-transform: inherit; + } + + button.yt-button-renderer,yt-icon-button.yt-button-renderer { + padding: 1px 6px; + } + + yt-icon-button.yt-button-renderer { + width: var(--yt-button-icon-size, 40px); + height: var(--yt-button-icon-size, 40px); + color: var(--yt-endpoint-color, var(--yt-luna-black)); + } + + yt-icon-button.yt-button-renderer::-moz-focus-inner { + padding: 0; + margin: 0; + border: 0; + } + + yt-icon-button.yt-button-renderer[disabled] { + color: var(--yt-button-disabled-color, rgba(17, 17, 17, 0.2)); + } + + yt-icon-button.yt-button-renderer { + line-height: 1; + padding: var(--yt-button-icon-padding, 8px); + width: var(--yt-button-icon-size, var(--yt-icon-width, 40px)); + height: var(--yt-button-icon-size, var(--yt-icon-height, 40px)); + } + + yt-icon-button.yt-button-renderer > yt-icon.yt-button-renderer { + width: 100%; + height: 100%; + } + + #button.yt-button-renderer yt-icon.yt-button-renderer + yt-formatted-string.yt-button-renderer { + margin-left: var(--yt-string-icon-padding, 8px); + } + + #button.yt-button-renderer yt-formatted-string.yt-button-renderer + yt-icon.yt-button-renderer { + margin-left: var(--yt-button-icon-padding, 8px); + } + + yt-button-renderer[vertically-aligned] #button.yt-button-renderer yt-icon.yt-button-renderer + yt-formatted-string.yt-button-renderer { + margin-left: 0; + margin-top: var(--yt-string-icon-padding, 4px); + } + + yt-button-renderer[vertically-aligned] #button.yt-button-renderer yt-formatted-string.yt-button-renderer + yt-icon.yt-button-renderer { + margin-left: 0; + margin-top: var(--yt-button-icon-padding, 4px); + } + + paper-item.yt-live-chat-text-input-field-suggestion { + font-size: 15px; + min-height: 40px; + color: var(--yt-live-chat-text-input-field-suggestion-text-color, #666); + cursor: pointer; + } + + yt-live-chat-text-input-field-suggestion:hover paper-item.yt-live-chat-text-input-field-suggestion,yt-live-chat-text-input-field-suggestion[active] paper-item.yt-live-chat-text-input-field-suggestion { + background-color: var(--yt-live-chat-text-input-field-suggestion-background-color-hover, #eee); + color: var(--yt-live-chat-text-input-field-suggestion-text-color-hover, #333); + } + + img.yt-live-chat-text-input-field-suggestion { + width: 24px; + height: 24px; + margin-right: 8px; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + img.yt-live-chat-text-input-field-suggestion[author] { + border-radius: 12px; + } + + yt-live-chat-text-input-field-renderer { + display: block; + position: relative; + font-size: 13px; + --yt-live-chat-text-input-field-placeholder-top: 0; + --yt-live-chat-text-input-field-placeholder-left: 0; + --yt-live-chat-text-input-field-white-space: initial; + } + + #label.yt-live-chat-text-input-field-renderer { + color: var(--yt-live-chat-text-input-field-placeholder-color, var(--yt-luna-black-opacity-lighten-2)); + position: absolute; + top: var(--yt-live-chat-text-input-field-placeholder-top); + left: var(--yt-live-chat-text-input-field-placeholder-left); + line-height: 18px; + padding: 2px 0; + } + + yt-live-chat-text-input-field-renderer[has-text] #label.yt-live-chat-text-input-field-renderer { + display: none; + } + + #input.yt-live-chat-text-input-field-renderer { + position: relative; + min-height: 18px; + max-height: 100px; + overflow-y: auto; + overflow-x: hidden; + overflow-wrap: break-word; + outline: none; + word-break: break-word; + white-space: var(--yt-live-chat-text-input-field-white-space); + color: inherit; + line-height: 18px; + padding: 2px 0; + + + ; + } + + #input.yt-live-chat-text-input-field-renderer::after { + content: ''; + } + + #input.yt-live-chat-text-input-field-renderer img.yt-live-chat-text-input-field-renderer { + width: 20px; + height: 20px; + + margin: -5px 2px; + } + + #underline.yt-live-chat-text-input-field-renderer { + position: relative; + height: 2px; + } + + #unfocused.yt-live-chat-text-input-field-renderer { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + + background-color: var(--yt-live-chat-text-input-field-inactive-underline-color, #b8b8b8); + } + + #focused.yt-live-chat-text-input-field-renderer { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + + background-color: var(--yt-live-chat-text-input-field-active-underline-color, var(--yt-blue)); + + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: scale3d(0,1,1); + transform: scale3d(0,1,1); + -webkit-transition: -webkit-transform; + -webkit-transition-duration: var(--yt-live-chat-text-input-field-underline-transition-duration, 0.25s); + transition: transform; + transition-duration: var(--yt-live-chat-text-input-field-underline-transition-duration, 0.25s); + } + + yt-live-chat-text-input-field-renderer[focused] #focused.yt-live-chat-text-input-field-renderer { + -webkit-transform: none; + transform: none; + } + + #dropdown.yt-live-chat-text-input-field-renderer { + background-color: var(--yt-live-chat-text-input-field-suggestion-background-color, #fff); + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + } + + #dropdown-content.yt-live-chat-text-input-field-renderer { + max-height: 200px; + padding: 8px 0; + } + + yt-live-chat-paid-message-renderer { + position: relative; + display: block; + + padding: 4px 24px; + font-size: 15px; + + --yt-live-chat-paid-message-background-color: var(--yt-live-chat-paid-message-primary-color); + --yt-live-chat-paid-message-header-background-color: var(--yt-live-chat-paid-message-secondary-color); + --yt-live-chat-text-input-field-placeholder-color: var(--yt-live-chat-paid-message-color); + + --yt-live-chat-item-timestamp-display: var(--yt-live-chat-paid-message-timestamp-display, none); + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] { + padding: 0; + padding-bottom: 8px; + + + --yt-live-chat-paid-message-background-color: transparent; + --yt-live-chat-paid-message-header-background-color: transparent; + --yt-live-chat-item-timestamp-display: block; + } + + #card.yt-live-chat-paid-message-renderer { + border-radius: 4px; + + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] #card.yt-live-chat-paid-message-renderer { + border-radius: 0; + box-shadow: none; + } + + #header.yt-live-chat-paid-message-renderer { + position: relative; + + background-color: var(--yt-live-chat-paid-message-header-background-color, #125aac); + color: var(--yt-live-chat-paid-message-header-color, #fff); + font-weight: 500; + padding: 8px 16px; + min-height: 20px; + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + + yt-live-chat-paid-message-renderer[show-only-header] #header.yt-live-chat-paid-message-renderer { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] #header.yt-live-chat-paid-message-renderer { + color: var(--yt-live-chat-secondary-text-color); + padding-bottom: 0; + } + + #author-photo.yt-live-chat-paid-message-renderer { + width: 40px; + height: 40px; + } + + yt-icon#author-photo.yt-live-chat-paid-message-renderer { + display: none; + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] yt-icon#author-photo.yt-live-chat-paid-message-renderer { + display: block; + } + + #header-content.yt-live-chat-paid-message-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + -ms-flex-align: var(--layout-baseline_-_-ms-flex-align); -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); align-items: var(--layout-baseline_-_align-items); + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] #header-content.yt-live-chat-paid-message-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + #header-content-primary-column.yt-live-chat-paid-message-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] #header-content-primary-column.yt-live-chat-paid-message-renderer { + margin-bottom: 4px; + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-baseline_-_-ms-flex-align); -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); align-items: var(--layout-baseline_-_align-items); + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #author-name.yt-live-chat-paid-message-renderer { + color: var(--yt-live-chat-paid-message-author-name-color, rgba(255, 255, 255, 0.7)); + font-size: 14px; + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer { + margin-right: 8px; + } + + #currency-img.yt-live-chat-paid-message-renderer { + margin-right: 4px; + } + + #purchase-amount-column.yt-live-chat-paid-message-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] #purchase-amount.yt-live-chat-paid-message-renderer { + display: inline; + height: 24px; + min-width: 16px; + border-radius: 12px; + margin-right: 8px; + padding: 0 12px; + background-color: var(--yt-live-chat-paid-message-primary-color); + color: var(--yt-live-chat-paid-message-color); + display: var(--layout-inline_-_display, inline); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + font-size: var(--ytd-badge_-_font-size); font-weight: var(--ytd-badge_-_font-weight); line-height: var(--ytd-badge_-_line-height); + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer { + display: block; + color: var(--yt-live-chat-secondary-text-color); + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer[is-deleted].yt-live-chat-paid-message-renderer::before { + content: '​'; + display: inline; + width: 0; + } + + #menu.yt-live-chat-paid-message-renderer { + background: linear-gradient(to right, transparent, var(--yt-live-chat-paid-message-header-background-color, #125aac) 100%); + border-radius: 0 4px 4px 0; + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] #menu.yt-live-chat-paid-message-renderer { + margin-top: 8px; + background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%); + } + + yt-live-chat-paid-message-renderer[allow-animations] #content.yt-live-chat-paid-message-renderer,yt-live-chat-paid-message-renderer[allow-animations] #header.yt-live-chat-paid-message-renderer { + transition-property: background-color, color; + transition-duration: var(--yt-live-chat-animation-duration, 0.2s); + } + + #content.yt-live-chat-paid-message-renderer { + background-color: var(--yt-live-chat-paid-message-background-color, #1565c0); + color: var(--yt-live-chat-paid-message-color, #fff); + padding: 8px 16px; + word-wrap: break-word; + word-break: break-word; + + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + + #content.yt-live-chat-paid-message-renderer img.yt-live-chat-paid-message-renderer { + width: var(--yt-live-chat-emoji-size); + height: var(--yt-live-chat-emoji-size); + + margin: -1px 2px 1px 2px; + vertical-align: middle; + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] #content.yt-live-chat-paid-message-renderer { + padding: 0; + padding-left: 72px; + color: var(--yt-live-chat-secondary-text-color); + } + + yt-live-chat-paid-message-renderer[show-only-header] #content.yt-live-chat-paid-message-renderer { + visibility: hidden; + padding: 0; + } + + a.yt-live-chat-paid-message-renderer { + display: inline; + text-decoration: underline; + } + + #message.yt-live-chat-paid-message-renderer a.yt-live-chat-paid-message-renderer { + word-break: break-all; + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] #message.yt-live-chat-paid-message-renderer { + margin-top: 4px; + } + + #message.yt-live-chat-paid-message-renderer a.yt-live-chat-paid-message-renderer .mention.yt-live-chat-paid-message-renderer { + text-decoration: underline; + } + + #message.yt-live-chat-paid-message-renderer:empty,#author-name.yt-live-chat-paid-message-renderer:empty:not([is-deleted]).yt-live-chat-paid-message-renderer,#deleted-state.yt-live-chat-paid-message-renderer:empty { + display: none; + } + + #deleted-state.yt-live-chat-paid-message-renderer { + display: block; + font-style: italic; + opacity: 0.7; + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] #deleted-state.yt-live-chat-paid-message-renderer[is-deleted] { + margin-top: 4px; + } + + yt-live-chat-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-paid-message-renderer { + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + yt-live-chat-paid-message-renderer[show-footer-divider] #footer.yt-live-chat-paid-message-renderer::before { + content: ""; + display: flex; + border-top: 1px solid rgba(0, 0, 0, 0.12); + margin: 8px 0; + } + + yt-live-chat-paid-message-renderer[is-user-editable] #footer.yt-live-chat-paid-message-renderer:not(:empty) { + padding-top: 8px; + } + + #buy-flow-button.yt-live-chat-paid-message-renderer yt-button-renderer.yt-live-chat-paid-message-renderer { + width: 100%; + text-align: center; + margin-top: 12px; + + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + } + + #timestamp.yt-live-chat-paid-message-renderer { + display: var(--yt-live-chat-item-timestamp-display, inline); + margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0); + color: var(--yt-live-chat-tertiary-text-color); + font-size: 11px; + } + + #author-photo.yt-live-chat-paid-message-renderer { + display: block; + margin-right: 16px; + + overflow: hidden; + border-radius: 50%; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #menu-button.yt-live-chat-paid-message-renderer { + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + #menu.yt-live-chat-paid-message-renderer { + position: absolute; + top: 0; + bottom: 0; + right: 0; + + + transform: translateX(100px); + } + + yt-live-chat-paid-message-renderer:hover #menu.yt-live-chat-paid-message-renderer,yt-live-chat-paid-message-renderer[menu-visible] #menu.yt-live-chat-paid-message-renderer { + transform: none; + } + + yt-live-chat-paid-message-renderer:focus-within #menu.yt-live-chat-paid-message-renderer { + transform: none; + } + + #inline-action-button-container.yt-live-chat-paid-message-renderer { + position: absolute; + top: -4px; + right: 0; + bottom: -4px; + left: 0; + + background-color: var(--yt-live-chat-moderation-mode-hover-background-color); + display: none; + + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + yt-live-chat-paid-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-paid-message-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + + + display: var(--yt-live-chat-inline-action-button-container-display, none); + } + + yt-live-chat-paid-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-paid-message-renderer { + display: none; + } + + yt-live-chat-paid-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-paid-message-renderer { + display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block); + } + + #inline-action-buttons.yt-live-chat-paid-message-renderer > *.yt-live-chat-paid-message-renderer,#additional-inline-action-buttons.yt-live-chat-paid-message-renderer > *.yt-live-chat-paid-message-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; + + color: var(--yt-white); + border-radius: 2px; + } + + #inline-action-buttons.yt-live-chat-paid-message-renderer > *.yt-live-chat-paid-message-renderer { + background: var(--yt-luna-black-opacity-lighten-1); + } + + #inline-action-buttons.yt-live-chat-paid-message-renderer > .yt-live-chat-paid-message-renderer:hover { + background: var(--yt-luna-black); + } + + #additional-inline-action-buttons.yt-live-chat-paid-message-renderer > *.yt-live-chat-paid-message-renderer { + color: var(--yt-live-chat-additional-inline-action-button-color); + background: var(--yt-live-chat-additional-inline-action-button-background-color); + } + + #additional-inline-action-buttons.yt-live-chat-paid-message-renderer > .yt-live-chat-paid-message-renderer:hover { + background: var(--yt-live-chat-additional-inline-action-button-background-color-hover); + } + + #additional-inline-action-buttons.yt-live-chat-paid-message-renderer:not(:empty) { + margin-left: 32px; + } + + #inline-action-buttons.yt-live-chat-paid-message-renderer > *.yt-live-chat-paid-message-renderer:not(:first-child),#additional-inline-action-buttons.yt-live-chat-paid-message-renderer > *.yt-live-chat-paid-message-renderer:not(:first-child) { + margin-left: 8px; + } + + yt-live-chat-dialog-renderer { + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: var(--yt-live-chat-overlay-color); + + display: var(--layout-vertical_-_display, block); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + #inner.yt-live-chat-dialog-renderer { + max-width: calc(100% - 32px); + + margin: 0 16px; + color: var(--yt-live-chat-primary-text-color); + background-color: var(--yt-live-chat-dialog-background-color); + border-radius: 4px; + box-shadow: var(--shadow-elevation-4dp_-_box-shadow); + } + + #live-chat-dialog-title.yt-live-chat-dialog-renderer { + display: block; + font-size: 20px; + margin: 24px 24px 8px 24px; + } + + #live-chat-dialog-body.yt-live-chat-dialog-renderer { + margin: 16px 24px 0 24px; + font-size: 14px; + color: var(--yt-live-chat-dialog-text-color); + line-height: 24px; + } + + #live-chat-dialog-body.yt-live-chat-dialog-renderer yt-formatted-string.yt-live-chat-dialog-renderer { + display: block; + margin: 16px 0; + } + + #button.yt-live-chat-dialog-renderer { + margin: 8px; + font-size: 15px; + font-weight: 500; + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-align: var(--layout-end_-_-ms-flex-align); -webkit-align-items: var(--layout-end_-_-webkit-align-items); align-items: var(--layout-end_-_align-items); + } + + yt-live-chat-error-message-renderer { + color: var(--yt-live-chat-error-message-color, #f44336); + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + yt-icon-button.yt-live-chat-error-message-renderer { + margin-right: 8px; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + yt-formatted-string.yt-live-chat-error-message-renderer { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + yt-live-chat-icon-toggle-button-renderer { + display: inline-block; + } + + #button.yt-live-chat-icon-toggle-button-renderer { + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + position: relative; + } + + #bubble.yt-live-chat-icon-toggle-button-renderer { + border-radius: 50%; + background-color: var(--yt-live-chat-monetization-button-glow, gold); + position: absolute; + width: 50px; + height: 50px; + top: -5px; + left: -5px; + + transform: scale(0); + + animation-duration: 1s; + animation-timing-function: ease-in; + animation-fill-mode: forwards; + animation-iteration-count: 5; + } + + yt-live-chat-icon-toggle-button-renderer[bubble] #bubble.yt-live-chat-icon-toggle-button-renderer { + animation-name: bubble; + } + + @keyframes bubble { + 0% { + transform: scale(0); + opacity: 100%; + } + + 70% { + opacity: 100%; + } + + 100% { + transform: scale(1); + opacity: 0; + } + + } + + yt-live-chat-author-badge-renderer { + display: inline-block; + } + + yt-live-chat-author-badge-renderer[type='moderator'] { + color: var(--yt-live-chat-moderator-color, #5e84f1); + } + + yt-live-chat-author-badge-renderer[type='owner'] { + color: var(--yt-live-chat-owner-color, #ffd600); + } + + yt-live-chat-author-badge-renderer[type='member'] { + color: var(--yt-live-chat-sponsor-color, #107516); + } + + yt-live-chat-author-badge-renderer[type='verified'] { + color: var(--yt-live-chat-verified-color, #999); + } + + img.yt-live-chat-author-badge-renderer,yt-icon.yt-live-chat-author-badge-renderer { + display: block; + + width: 16px; + height: 16px; + } + + yt-live-chat-author-chip { + display: var(--layout-inline_-_display); + -ms-flex-align: var(--layout-baseline_-_-ms-flex-align); -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); align-items: var(--layout-baseline_-_align-items); + } + + #author-name.yt-live-chat-author-chip { + box-sizing: border-box; + border-radius: 2px; + + color: var(--yt-live-chat-secondary-text-color); + font-weight: 500; + } + + yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip { + padding: 2px 4px; + + + color: var(--yt-live-chat-author-chip-verified-text-color); + background-color: var(--yt-live-chat-author-chip-verified-background-color); + } + + yt-live-chat-author-chip[show-unified-verified-badge] { + overflow: hidden; + } + + yt-live-chat-author-chip[show-unified-verified-badge] #author-name.yt-live-chat-author-chip { + border-radius: 0px; + z-index: 1; + position: relative; + padding: 0 1px 0 4px; + color: var(--yt-live-chat-author-chip-verified-text-color); + + margin-right: 9px; + } + + yt-live-chat-author-chip[show-unified-verified-badge] #author-name.yt-live-chat-author-chip::after { + background-color: var(--yt-live-chat-author-chip-verified-background-color); + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + bottom: 0; + right: 0; + transform: skewX(-30deg); + transform-origin: bottom; + + left: -9px; + } + + [dir="rtl"] yt-live-chat-author-chip[show-unified-verified-badge] #author-name.yt-live-chat-author-chip::after, yt-live-chat-author-chip[dir="rtl"][show-unified-verified-badge] #author-name.yt-live-chat-author-chip::after { + transform: skewX(30deg); + } + + yt-live-chat-author-chip[is-highlighted] #author-name.owner.yt-live-chat-author-chip,#author-name.owner.yt-live-chat-author-chip { + background-color: var(--yt-live-chat-author-chip-owner-background-color); + color: var(--yt-live-chat-author-chip-owner-text-color); + } + + yt-live-chat-author-chip[is-highlighted][show-unified-verified-badge] #author-name.owner.yt-live-chat-author-chip { + color: var(--yt-live-chat-author-chip-owner-text-color); + } + + yt-live-chat-author-chip[is-highlighted][show-unified-verified-badge] #author-name.owner.yt-live-chat-author-chip::after { + background-color: var(--yt-live-chat-author-chip-owner-background-color); + } + + #author-name.moderator.yt-live-chat-author-chip { + color: var(--yt-live-chat-moderator-color); + } + + #author-name.member.yt-live-chat-author-chip { + color: var(--yt-live-chat-sponsor-color); + } + + #chip-badges.yt-live-chat-author-chip:empty { + display: none; + } + + yt-live-chat-author-chip[is-highlighted] #chat-badges.yt-live-chat-author-chip:not(:empty) { + margin-left: 1px; + } + + yt-live-chat-author-chip[show-unified-verified-badge] #chat-badges.yt-live-chat-author-chip:not(:empty) { + margin-left: -2px; + } + + yt-live-chat-author-badge-renderer.yt-live-chat-author-chip { + margin: 0 0 0 2px; + vertical-align: sub; + } + + yt-live-chat-author-chip[is-highlighted] #chip-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer.yt-live-chat-author-chip { + color: inherit; + } + + #chip-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer.yt-live-chat-author-chip:last-of-type { + margin-right: -2px; + } + + yt-live-chat-membership-item-renderer { + position: relative; + display: block; + + --yt-live-chat-sponsor-header-color: #0a8043; + --yt-live-chat-sponsor-color: #0f9d58; + --yt-live-chat-sponsor-text-color: #fff; + --yt-live-chat-item-timestamp-display: var(--yt-live-chat-paid-message-timestamp-display, none); + + padding: 4px 24px; + } + + yt-live-chat-membership-item-renderer[dashboard-money-feed] { + padding: 0; + + --yt-live-chat-item-timestamp-display: block; + } + + #card.yt-live-chat-membership-item-renderer { + overflow: hidden; + font-size: 14px; + border-radius: 4px; + + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + } + + yt-live-chat-membership-item-renderer[dashboard-money-feed] #card.yt-live-chat-membership-item-renderer { + border-radius: 0; + box-shadow: none; + } + + #header.yt-live-chat-membership-item-renderer { + position: relative; + + background-color: var(--yt-live-chat-sponsor-header-color); + padding: 8px 16px; + color: #fff; + min-height: 20px; + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + yt-live-chat-membership-item-renderer[show-only-header] #header.yt-live-chat-membership-item-renderer { + background-color: var(--yt-live-chat-sponsor-color); + } + + yt-live-chat-membership-item-renderer[dashboard-money-feed] #header.yt-live-chat-membership-item-renderer { + color: var(--yt-live-chat-secondary-text-color); + background-color: var(--yt-live-chat-background-color); + -ms-flex-align: var(--layout-start_-_-ms-flex-align); -webkit-align-items: var(--layout-start_-_-webkit-align-items); align-items: var(--layout-start_-_align-items); + } + + #header-content.yt-live-chat-membership-item-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + -ms-flex-align: var(--layout-baseline_-_-ms-flex-align); -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); align-items: var(--layout-baseline_-_align-items); + } + + yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-content.yt-live-chat-membership-item-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-content-inner-column.yt-live-chat-membership-item-renderer { + margin-bottom: 4px; + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #author-photo.yt-live-chat-membership-item-renderer { + width: 40px; + height: 40px; + } + + yt-icon#author-photo.yt-live-chat-membership-item-renderer { + display: none; + } + + yt-live-chat-membership-item-renderer[dashboard-money-feed] yt-icon#author-photo.yt-live-chat-membership-item-renderer { + display: block; + } + + yt-live-chat-membership-item-renderer:not([dashboard-money-feed]) yt-live-chat-author-chip.yt-live-chat-membership-item-renderer { + --yt-live-chat-sponsor-color: var(--yt-live-chat-sponsor-text-color); + --yt-live-chat-secondary-text-color: var(--yt-live-chat-sponsor-text-color); + } + + yt-live-chat-membership-item-renderer[dashboard-money-feed] yt-live-chat-author-chip.yt-live-chat-membership-item-renderer { + margin-right: 8px; + font-weight: 500; + --yt-live-chat-sponsor-color: var(--yt-live-chat-secondary-text-color); + } + + #header-subtext.yt-live-chat-membership-item-renderer { + margin-top: 2px; + color: rgba(255, 255, 255, 0.7); + font-weight: 500; + font-size: 15px; + } + + #header-subtext.yt-live-chat-membership-item-renderer:empty { + display: none; + } + + yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-subtext.yt-live-chat-membership-item-renderer { + margin: 4px 0 13px; + font-size: 11px; + font-weight: normal; + color: var(--yt-live-chat-secondary-text-color); + } + + #header-primary-text.yt-live-chat-membership-item-renderer { + word-wrap: break-word; + word-break: break-word; + font-weight: 500; + color: rgba(255, 255, 255, 1); + } + + #header-primary-text.yt-live-chat-membership-item-renderer:empty { + display: none; + } + + yt-live-chat-membership-item-renderer[has-primary-header-text]:not([dashboard-money-feed]) yt-live-chat-author-chip.yt-live-chat-membership-item-renderer,yt-live-chat-membership-item-renderer[has-primary-header-text]:not([dashboard-money-feed]) #header-subtext.yt-live-chat-membership-item-renderer { + font-size: 12px; + } + + yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-primary-text.yt-live-chat-membership-item-renderer { + display: inline; + height: 24px; + min-width: 16px; + border-radius: 12px; + margin-right: 8px; + padding: 0 12px; + background-color: var(--yt-live-chat-sponsor-color); + color: var(--yt-white); + display: var(--layout-inline_-_display, inline); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + font-size: var(--ytd-badge_-_font-size); font-weight: var(--ytd-badge_-_font-weight); line-height: var(--ytd-badge_-_line-height); + } + + #content.yt-live-chat-membership-item-renderer { + background-color: var(--yt-live-chat-sponsor-color); + color: var(--yt-live-chat-sponsor-text-color); + padding: 8px 16px; + word-wrap: break-word; + word-break: break-word; + font-size: 15px; + line-height: 20px; + } + + yt-live-chat-membership-item-renderer[dashboard-money-feed] #content.yt-live-chat-membership-item-renderer { + background-color: unset; + font-size: unset; + color: var(--yt-live-chat-secondary-text-color); + padding: 0 0 16px 72px; + } + + #content.yt-live-chat-membership-item-renderer img.yt-live-chat-membership-item-renderer { + width: var(--yt-live-chat-emoji-size); + height: var(--yt-live-chat-emoji-size); + + margin: -1px 2px 1px 2px; + vertical-align: middle; + } + + yt-live-chat-membership-item-renderer[show-only-header] #content.yt-live-chat-membership-item-renderer,#deleted-state.yt-live-chat-membership-item-renderer:empty { + display: none; + } + + #deleted-state.yt-live-chat-membership-item-renderer { + display: block; + font-style: italic; + opacity: 0.7; + } + + a.yt-live-chat-membership-item-renderer { + display: inline; + text-decoration: underline; + } + + #message.yt-live-chat-membership-item-renderer a.yt-live-chat-membership-item-renderer { + word-break: break-all; + } + + #message.yt-live-chat-membership-item-renderer a.yt-live-chat-membership-item-renderer .mention.yt-live-chat-membership-item-renderer { + text-decoration: underline; + } + + #menu.yt-live-chat-membership-item-renderer { + background: linear-gradient(to right, transparent, var(--yt-live-chat-sponsor-header-color) 100%); + border-radius: 0 4px 4px 0; + } + + yt-live-chat-membership-item-renderer[show-only-header] #menu.yt-live-chat-membership-item-renderer { + background: linear-gradient(to right, transparent, var(--yt-live-chat-sponsor-color) 100%); + } + + yt-live-chat-membership-item-renderer[dashboard-money-feed] #menu.yt-live-chat-membership-item-renderer { + margin-top: 8px; + background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%); + } + + #timestamp.yt-live-chat-membership-item-renderer { + display: var(--yt-live-chat-item-timestamp-display, inline); + margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0); + color: var(--yt-live-chat-tertiary-text-color); + font-size: 11px; + } + + #author-photo.yt-live-chat-membership-item-renderer { + display: block; + margin-right: 16px; + + overflow: hidden; + border-radius: 50%; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #menu-button.yt-live-chat-membership-item-renderer { + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + #menu.yt-live-chat-membership-item-renderer { + position: absolute; + top: 0; + bottom: 0; + right: 0; + + + transform: translateX(100px); + } + + yt-live-chat-membership-item-renderer:hover #menu.yt-live-chat-membership-item-renderer,yt-live-chat-membership-item-renderer[menu-visible] #menu.yt-live-chat-membership-item-renderer { + transform: none; + } + + yt-live-chat-membership-item-renderer:focus-within #menu.yt-live-chat-membership-item-renderer { + transform: none; + } + + #inline-action-button-container.yt-live-chat-membership-item-renderer { + position: absolute; + top: -4px; + right: 0; + bottom: -4px; + left: 0; + + background-color: var(--yt-live-chat-moderation-mode-hover-background-color); + display: none; + + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + yt-live-chat-membership-item-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-membership-item-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + + + display: var(--yt-live-chat-inline-action-button-container-display, none); + } + + yt-live-chat-membership-item-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-membership-item-renderer { + display: none; + } + + yt-live-chat-membership-item-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-membership-item-renderer { + display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block); + } + + #inline-action-buttons.yt-live-chat-membership-item-renderer > *.yt-live-chat-membership-item-renderer,#additional-inline-action-buttons.yt-live-chat-membership-item-renderer > *.yt-live-chat-membership-item-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; + + color: var(--yt-white); + border-radius: 2px; + } + + #inline-action-buttons.yt-live-chat-membership-item-renderer > *.yt-live-chat-membership-item-renderer { + background: var(--yt-luna-black-opacity-lighten-1); + } + + #inline-action-buttons.yt-live-chat-membership-item-renderer > .yt-live-chat-membership-item-renderer:hover { + background: var(--yt-luna-black); + } + + #additional-inline-action-buttons.yt-live-chat-membership-item-renderer > *.yt-live-chat-membership-item-renderer { + color: var(--yt-live-chat-additional-inline-action-button-color); + background: var(--yt-live-chat-additional-inline-action-button-background-color); + } + + #additional-inline-action-buttons.yt-live-chat-membership-item-renderer > .yt-live-chat-membership-item-renderer:hover { + background: var(--yt-live-chat-additional-inline-action-button-background-color-hover); + } + + #additional-inline-action-buttons.yt-live-chat-membership-item-renderer:not(:empty) { + margin-left: 32px; + } + + #inline-action-buttons.yt-live-chat-membership-item-renderer > *.yt-live-chat-membership-item-renderer:not(:first-child),#additional-inline-action-buttons.yt-live-chat-membership-item-renderer > *.yt-live-chat-membership-item-renderer:not(:first-child) { + margin-left: 8px; + } + + yt-emoji-picker-category-button-renderer { + display: inline-block; + color: var(--yt-emoji-picker-category-button-color, var(--yt-live-chat-tertiary-text-color, var(--yt-icon-color))); + } + + yt-emoji-picker-category-button-renderer[active] { + color: var(--yt-live-chat-primary-text-color, var(--yt-icon-active-color)); + } + + yt-icon-button.yt-emoji-picker-category-button-renderer { + width: 18px; + height: 18px; + margin: 4px; + } + + #button.yt-emoji-picker-category-button-renderer > paper-tooltip { + white-space: nowrap; + } + + yt-emoji-picker-category-renderer { + display: block; + + z-index: 0; + + margin-left: var(--yt-emoji-picker-category-margin-left); + + outline: none; + } + + #emoji.yt-emoji-picker-category-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-wrap: var(--layout-wrap_-_-ms-flex-wrap); -webkit-flex-wrap: var(--layout-wrap_-_-webkit-flex-wrap); flex-wrap: var(--layout-wrap_-_flex-wrap); + + + contain: content; + } + + #title.yt-emoji-picker-category-renderer { + position: sticky; + top: 0; + + display: block; + + background-color: var(--yt-emoji-picker-category-background-color); + color: var(--yt-emoji-picker-category-color); + line-height: 16px; + font-size: 13px; + font-weight: 500; + letter-spacing: 0.5px; + text-transform: uppercase; + + pointer-events: none; + + padding: 2px; + + z-index: 1; + } + + img.yt-emoji-picker-category-renderer { + border-radius: 2px; + padding: 4px; + cursor: pointer; + } + + img.yt-emoji-picker-category-renderer:hover,img.yt-emoji-picker-category-renderer[aria-selected="true"] { + background-color: rgba(0, 0, 0, 0.10); + } + + yt-emoji-picker-upsell-category-renderer { + display: block; + + z-index: 0; + + margin-left: var(--yt-emoji-picker-category-margin-left); + + outline: none; + } + + #emoji.yt-emoji-picker-upsell-category-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-wrap: var(--layout-wrap_-_-ms-flex-wrap); -webkit-flex-wrap: var(--layout-wrap_-_-webkit-flex-wrap); flex-wrap: var(--layout-wrap_-_flex-wrap); + } + + #title.yt-emoji-picker-upsell-category-renderer { + display: block; + position: relative; + + background-color: var(--yt-emoji-picker-category-background-color); + color: var(--yt-emoji-picker-category-color); + line-height: 16px; + font-size: 13px; + font-weight: 500; + letter-spacing: 0.5px; + text-transform: uppercase; + + pointer-events: none; + + padding: 2px; + + z-index: 1; + } + + img.yt-emoji-picker-upsell-category-renderer { + width: 24px; + height: 24px; + padding: 4px; + opacity: 0.9; + cursor: pointer; + } + + img.yt-emoji-picker-upsell-category-renderer:hover,img.yt-emoji-picker-upsell-category-renderer[aria-selected="true"] { + background-color: rgba(0, 0, 0, 0.10); + border-radius: 2px; + } + + svg.yt-emoji-picker-upsell-category-renderer { + position: relative; + width: 12px; + height: 12px; + margin-left: -12px; + fill: var(--yt-live-chat-primary-text-color); + pointer-events: none; + } + + path#lock-border.yt-emoji-picker-upsell-category-renderer { + fill: var(--yt-emoji-picker-category-background-color); + } + + yt-emoji-picker-renderer { + position: relative; + + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + + height: var(--yt-emoji-picker-renderer-height, 220px); + max-width: var(--yt-emoji-picker-renderer-max-width, none); + + --paper-input-container_-_padding: 0; --paper-input-container_-_height: 24px;; + --paper-input-container-input_-_font-size: 13px; --paper-input-container-input_-_color: var(--yt-emoji-picker-search-color, var(--yt-luna-black-opacity-lighten-1)); --paper-input-container-input_-_height: 24px; --paper-input-container-input_-_text-align: initial; --paper-input-container-input_-_overflow: initial; --paper-input-container-input_-_white-space: initial; --paper-input-container-input_-_text-overflow: initial; --paper-input-container-input_-_max-width: initial; --paper-input-container-input_-_box-sizing: initial; --paper-input-container-input_-_cursor: initial; --paper-input-container-input_-_font-weight: initial; --paper-input-container-input_-_line-height: initial; --paper-input-container-input_-_letter-spacing: initial; --paper-input-container-input_-_padding: initial;; + --paper-input-container-color: var(--yt-emoji-picker-search-placeholder-color, var(--yt-luna-black-opacity-lighten-3)); + --paper-input-container-underline-focus_-_display: none;; + --paper-input-container-underline-disabled_-_display: none;; + --paper-input-container-underline_-_display: none; --paper-input-container-underline_-_background: initial;; + --paper-input-container-ms-clear_-_display: none;; + } + + input.yt-emoji-picker-renderer::-ms-clear { + display: none; + } + + #search-panel.yt-emoji-picker-renderer,#search-empty.yt-emoji-picker-renderer,#category-buttons.yt-emoji-picker-renderer { + margin: var(--yt-emoji-picker-renderer-content_-_margin); + } + + #categories.yt-emoji-picker-renderer,#search-category.yt-emoji-picker-renderer { + overflow: auto; + + + min-height: 0; + } + + #search-category.yt-emoji-picker-renderer { + margin-top: 8px; + } + + #categories-wrapper.yt-emoji-picker-renderer { + margin-top: 8px; + + + position: relative; + + + min-height: 0; + + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + yt-emoji-picker-category-button-renderer.yt-emoji-picker-renderer:only-child { + display: none; + } + + #categories.yt-emoji-picker-renderer > *.yt-emoji-picker-renderer:not(:first-child) { + margin-top: 8px; + } + + #category-buttons.yt-emoji-picker-renderer { + margin-top: 8px; + color: var(--yt-luna-black-opacity-lighten-3); + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content); justify-content: var(--layout-center-justified_-_justify-content); + -ms-flex-wrap: var(--layout-wrap_-_-ms-flex-wrap); -webkit-flex-wrap: var(--layout-wrap_-_-webkit-flex-wrap); flex-wrap: var(--layout-wrap_-_flex-wrap); + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #search-panel.yt-emoji-picker-renderer { + background-color: var(--yt-emoji-picker-search-background-color, var(--yt-white-opacity-lighten-2)); + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + color: var(--yt-luna-black-opacity-lighten-2); + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #search.yt-emoji-picker-renderer { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + #clear-search.yt-emoji-picker-renderer { + width: 18px; + height: 18px; + color: var(--yt-live-chat-primary-text-color); + } + + #search-empty.yt-emoji-picker-renderer { + color: var(--yt-primary-text-color); + } + + #skin-tone.yt-emoji-picker-renderer { + margin-left: 12px; + position: relative; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + button.yt-emoji-picker-renderer { + width: 16px; + height: 16px; + padding: 0; + background-color: transparent; + border: 2px solid; + border-radius: 4px; + cursor: pointer; + } + + button.yt-emoji-picker-renderer + button.yt-emoji-picker-renderer { + margin-left: 4px; + } + + button.yt-emoji-picker-renderer[tone='0'] { + border-color: #fcc21b; + } + + button.yt-emoji-picker-renderer[tone='1'] { + border-color: #fadcbc; + } + + button.yt-emoji-picker-renderer[tone='2'] { + border-color: #e0bb95; + } + + button.yt-emoji-picker-renderer[tone='3'] { + border-color: #bf8f68; + } + + button.yt-emoji-picker-renderer[tone='4'] { + border-color: #9b643d; + } + + button.yt-emoji-picker-renderer[tone='5'] { + border-color: #594539; + } + + button.yt-emoji-picker-renderer[tone='0'].yt-emoji-picker-renderer[selected] { + background-color: #fcc21b; + } + + button.yt-emoji-picker-renderer[tone='1'].yt-emoji-picker-renderer[selected] { + background-color: #fadcbc; + } + + button.yt-emoji-picker-renderer[tone='2'].yt-emoji-picker-renderer[selected] { + background-color: #e0bb95; + } + + button.yt-emoji-picker-renderer[tone='3'].yt-emoji-picker-renderer[selected] { + background-color: #bf8f68; + } + + button.yt-emoji-picker-renderer[tone='4'].yt-emoji-picker-renderer[selected] { + background-color: #9b643d; + } + + button.yt-emoji-picker-renderer[tone='5'].yt-emoji-picker-renderer[selected] { + background-color: #594539; + } + + yt-emoji-picker-renderer[searching] #categories-wrapper.yt-emoji-picker-renderer { + display: none; + } + + yt-emoji-picker-renderer:not([searching]) #search-category.yt-emoji-picker-renderer { + display: none; + } + + yt-live-chat-message-buy-flow-renderer { + display: block; + font-size: 15px; + background-color: var(--yt-live-chat-action-panel-background-color, var(--yt-opalescence-soft-grey)); + color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color)); + + --yt-live-chat-buy-flow-price-input-font-size: 20px; + + --yt-emoji-picker-category-background-color: var(--yt-live-chat-sub-panel-background-color-transparent, hsla(0, 0%, 97%, .7)); + --yt-emoji-picker-category-button-color: var(--yt-live-chat-secondary-text-color, var(--yt-secondary-text-color)); + --yt-emoji-picker-category-margin-left: 16px; + --yt-emoji-picker-renderer-content_-_margin: 0 16px;; + --yt-emoji-picker-renderer-height: 160px; + } + + paper-button.yt-live-chat-message-buy-flow-renderer { + display: inline-block; + text-align: center; + font-family: inherit; + } + + #preview.yt-live-chat-message-buy-flow-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + #loading.yt-live-chat-message-buy-flow-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + #header.yt-live-chat-message-buy-flow-renderer { + font-size: 16px; + padding: 8px; + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #close-button.yt-live-chat-message-buy-flow-renderer { + margin-right: 16px; + color: var(--yt-live-chat-icon-button-color); + + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + #help.yt-live-chat-message-buy-flow-renderer { + margin-left: auto; + } + + #help.yt-live-chat-message-buy-flow-renderer > *.yt-live-chat-message-buy-flow-renderer { + color: var(--yt-live-chat-icon-button-color); + } + + #dialog.yt-live-chat-message-buy-flow-renderer yt-live-chat-dialog-renderer.yt-live-chat-message-buy-flow-renderer { + z-index: 3; + } + + #info.yt-live-chat-message-buy-flow-renderer { + font-size: 12px; + padding: 4px 16px; + + color: var(--yt-live-chat-secondary-text-color, var(--yt-secondary-text-color)); + + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + #info-content.yt-live-chat-message-buy-flow-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + } + + #subtitle.yt-live-chat-message-buy-flow-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #subtitle.yt-live-chat-message-buy-flow-renderer yt-icon.yt-live-chat-message-buy-flow-renderer { + width: 16px; + height: 16px; + margin-right: 4px; + } + + yt-live-chat-message-buy-flow-renderer[hide-duration-label] #subtitle.yt-live-chat-message-buy-flow-renderer { + visibility: hidden; + } + + yt-live-chat-message-buy-flow-renderer[message-too-long] #characters.yt-live-chat-message-buy-flow-renderer { + color: var(--yt-live-chat-count-color-error, var(--yt-spec-brand-link-text)); + } + + #message.yt-live-chat-message-buy-flow-renderer { + margin: 0 16px; + } + + #message-renderer.yt-live-chat-message-buy-flow-renderer > *.yt-live-chat-message-buy-flow-renderer { + position: relative; + padding: 0; + } + + #pickers-container.yt-live-chat-message-buy-flow-renderer { + box-sizing: border-box; + padding-top: 4px; + margin-top: -4px; + border-radius: 0 0 4px 4px; + background-color: var(--yt-live-chat-sub-panel-background-color, #d9d9d9); + } + + yt-emoji-picker-renderer.yt-live-chat-message-buy-flow-renderer { + margin: 16px 0 -4px 0; + } + + #picker-buttons.yt-live-chat-message-buy-flow-renderer { + padding: 4px 8px; + } + + #price.yt-live-chat-message-buy-flow-renderer { + font-weight: 100; + margin: 8px 16px; + } + + #price-slider.yt-live-chat-message-buy-flow-renderer { + width: 100%; + height: 48px; + + --paper-slider-active-color: var(--yt-live-chat-slider-active-color, #2196f3); + --paper-slider-container-color: var(--yt-live-chat-slider-container-color, #c8c8c8); + --paper-slider-markers-color: var(--yt-live-chat-slider-markers-color, #505050); + + --paper-progress-active-color: var(--paper-slider-active-color); + --paper-progress-container-color: var(--paper-slider-container-color); + --paper-slider-knob-color: var(--paper-slider-active-color); + --paper-slider-knob-start-border-color: var(--paper-slider-active-color); + --paper-slider-knob-start-color: var(--paper-slider-active-color); + --paper-slider-pin-color: var(--paper-slider-active-color); + --paper-slider-pin-start-color: var(--paper-slider-active-color); + } + + #price-input-container.yt-live-chat-message-buy-flow-renderer { + font-size: var(--yt-live-chat-buy-flow-price-input-font-size); + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + .dim.yt-live-chat-message-buy-flow-renderer { + color: var(--yt-live-chat-secondary-text-color, var(--yt-secondary-text-color)); + } + + #price-input.yt-live-chat-message-buy-flow-renderer { + --paper-input-container-focus-color: var(--yt-live-chat-primary-text-color); + --paper-input-container_-_height: 24px; --paper-input-container_-_padding: initial;; + --paper-input-container-input_-_font-size: var(--yt-live-chat-buy-flow-price-input-font-size); --paper-input-container-input_-_color: var(--yt-live-chat-primary-text-color); --paper-input-container-input_-_height: initial; --paper-input-container-input_-_text-align: initial; --paper-input-container-input_-_overflow: initial; --paper-input-container-input_-_white-space: initial; --paper-input-container-input_-_text-overflow: initial; --paper-input-container-input_-_max-width: initial; --paper-input-container-input_-_box-sizing: initial; --paper-input-container-input_-_cursor: initial; --paper-input-container-input_-_font-weight: initial; --paper-input-container-input_-_line-height: initial; --paper-input-container-input_-_letter-spacing: initial; --paper-input-container-input_-_padding: initial;; + + --paper-input-container-underline-color: var(--yt-live-chat-secondary-text-color); + + margin: 0 4px; + width: var(--price-input-width, 64px); + text-align: center; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #button.yt-live-chat-message-buy-flow-renderer { + margin: 8px 16px 16px; + border-radius: 2px; + background-color: var(--yt-blue); + color: var(--yt-white); + font-weight: 500; + transition-property: background-color, color; + transition-duration: var(--yt-live-chat-animation-duration, 0.2s); + } + + #button.yt-live-chat-message-buy-flow-renderer[disabled] { + background-color: var(--yt-live-chat-disabled-button-background-color, var(--yt-opalescence-soft-grey-opacity-lighten-3)); + color: var(--yt-live-chat-disabled-button-text-color, rgba(0, 0, 0, 0.5)); + } + + #error.yt-live-chat-message-buy-flow-renderer { + font-size: 13px; + margin: 0 16px; + } + + yt-live-chat-super-sticker-pack-button-renderer { + display: block; + height: 24px; + width: 24px; + + --selected-visibility: hidden; + --unselected-visibility: visible; + --selected-z-index: -1; + --unselected-z-index: 0; + } + + yt-live-chat-super-sticker-pack-button-renderer[selected] { + --selected-visibility: visible; + --unselected-visibility: hidden; + --selected-z-index: 0; + --unselected-z-index: -1; + } + + #selected.yt-live-chat-super-sticker-pack-button-renderer,#unselected.yt-live-chat-super-sticker-pack-button-renderer { + height: 24px; + width: 24px; + position:absolute; + background-color: var(--yt-spec-text-primary); + opacity: 0.1; + } + + #selected.yt-live-chat-super-sticker-pack-button-renderer { + visibility: var(--selected-visibility); + z-index: var(--selected-z-index); + } + + #unselected.yt-live-chat-super-sticker-pack-button-renderer { + visibility: var(--unselected-visibility); + z-index: var(--unselected-z-index); + } + + #selected.icon-loaded.yt-live-chat-super-sticker-pack-button-renderer,#unselected.icon-loaded.yt-live-chat-super-sticker-pack-button-renderer { + background-color: transparent; + opacity: 1; + } + + yt-live-chat-super-sticker-pack-backstory-renderer { + display: block; + background-color: var(--yt-live-chat-background-color); + } + + #container.yt-live-chat-super-sticker-pack-backstory-renderer { + background-repeat: repeat-x; + background-position: bottom; + background-size: contain; + padding: var(--ytd-margin-4x) ; + padding-bottom: var(--ytd-margin-6x); + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + } + + #sticker.yt-live-chat-super-sticker-pack-backstory-renderer { + margin-right: var(--ytd-margin-4x); + } + + #content.yt-live-chat-super-sticker-pack-backstory-renderer { + max-width: 440px; + color: var(--yt-live-chat-primary-text-color); + } + + #title.yt-live-chat-super-sticker-pack-backstory-renderer { + font-size: 14px; + font-weight: 500; + margin-bottom: var(--ytd-margin-2x); + } + + #description.yt-live-chat-super-sticker-pack-backstory-renderer { + font-size: 12px; + } + + yt-live-chat-super-sticker-pack-item-button-renderer { + display: block; + background-color: var(--yt-live-chat-background-color); + justify-self: center; + + --yt-live-chat-paid-sticker-container-loaded-style_-_background-color: transparent; --yt-live-chat-paid-sticker-container-loaded-style_-_opacity: 1;; + } + + yt-live-chat-super-sticker-pack-item-button-renderer:focus { + outline: none; + } + + yt-live-chat-super-sticker-pack-item-button-renderer:hover { + cursor: pointer; + background-color: var(--yt-menu-hover-backgound-color); + } + + #sticker.yt-live-chat-super-sticker-pack-item-button-renderer { + width: 96px; + height: 96px; + padding: 12px; + padding-bottom: 24px; + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #unselected.yt-live-chat-super-sticker-pack-item-button-renderer { + display: inline-block; + width: 96px; + height: 96px; + background-color: var(--yt-spec-text-primary); + opacity: 0.1; + } + + yt-live-chat-super-sticker-pack-item-button-renderer.focus #unselected.yt-live-chat-super-sticker-pack-item-button-renderer { + display: none; + } + + #unselected.sticker-loaded.yt-live-chat-super-sticker-pack-item-button-renderer { + background-color: var(--yt-live-chat-paid-sticker-container-loaded-style_-_background-color); opacity: var(--yt-live-chat-paid-sticker-container-loaded-style_-_opacity); + } + + #selected.yt-live-chat-super-sticker-pack-item-button-renderer { + display: none; + } + + yt-live-chat-super-sticker-pack-item-button-renderer.focus #selected.yt-live-chat-super-sticker-pack-item-button-renderer { + display: block; + } + + #price.yt-live-chat-super-sticker-pack-item-button-renderer { + display: block; + color: var(--yt-live-chat-paid-sticker-chip-text-color); + background-color: var(--yt-live-chat-paid-sticker-chip-background-color); + margin-top: var(--ytd-margin-base); + padding: 0 4px; + min-width: 16px; + border-radius: 2px; + + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + yt-live-chat-super-sticker-pack-renderer { + height: 300px; + display: block; + background-color: var(--yt-live-chat-background-color); + + overflow-y: auto; + overflow-x: hidden; + } + + #pack.yt-live-chat-super-sticker-pack-renderer { + margin: 0 auto; + } + + #backstory.yt-live-chat-super-sticker-pack-renderer { + margin-top: var(--ytd-margin-6x); + } + + yt-live-chat-super-sticker-pack-item-button-renderer.yt-live-chat-super-sticker-pack-renderer { + margin-bottom: 4px; + } + + #pack-stickers.yt-live-chat-super-sticker-pack-renderer { + display: var(--layout_-_display); + -ms-flex-wrap: var(--layout-wrap_-_-ms-flex-wrap); -webkit-flex-wrap: var(--layout-wrap_-_-webkit-flex-wrap); flex-wrap: var(--layout-wrap_-_flex-wrap); + } + + @supports (display: grid) { + #pack-stickers.yt-live-chat-super-sticker-pack-renderer { + display: grid; + grid-template-columns: repeat( auto-fit, minmax(120px, 1fr) ); + + -ms-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + flex-wrap: nowrap; + } + + } + + yt-live-chat-paid-sticker-renderer { + display: block; + + position: relative; + + --yt-live-chat-paid-sticker-container-loaded-style_-_background-color: transparent; --yt-live-chat-paid-sticker-container-loaded-style_-_opacity: 1;; + --yt-live-chat-item-timestamp-display: none; + } + + yt-live-chat-paid-sticker-renderer[dashboard-money-feed] { + --yt-pdg-paid-stickers-margin-left: 56px; + } + + yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) #card.yt-live-chat-paid-sticker-renderer { + position: relative; + border-radius: 4px; + padding: 8px; + padding-left: 16px; + background-color: var(--yt-live-chat-paid-sticker-background-color); + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + } + + yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) #menu.yt-live-chat-paid-sticker-renderer { + background: linear-gradient(to right, transparent, var(--yt-live-chat-paid-sticker-background-color) 100%); + border-radius: 0 4px 4px 0; + color: var(--yt-live-chat-paid-sticker-chip-text-color); + } + + yt-live-chat-paid-sticker-renderer[dashboard-money-feed] #menu.yt-live-chat-paid-sticker-renderer { + color: var(--yt-live-chat-secondary-text-color); + margin: 8px 0; + background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%); + } + + #author-name.yt-live-chat-paid-sticker-renderer { + margin-right: 8px; + display: block; + font-weight: 500; + color: var(--yt-live-chat-secondary-text-color); + -webkit-line-clamp: 1; + overflow: hidden; + -webkit-box-orient: var(--yt-multi-line-ellipsis_-_-webkit-box-orient); text-overflow: var(--yt-multi-line-ellipsis_-_text-overflow); white-space: var(--yt-multi-line-ellipsis_-_white-space); display: var(--yt-multi-line-ellipsis_-_display, block); + } + + yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) #author-name.yt-live-chat-paid-sticker-renderer { + color: var(--yt-live-chat-paid-sticker-author-name-text-color); + } + + #author-info.yt-live-chat-paid-sticker-renderer { + font-size: var(--yt-pdg-paid-stickers-author-name-font-size); + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-start_-_-ms-flex-align); -webkit-align-items: var(--layout-start_-_-webkit-align-items); align-items: var(--layout-start_-_align-items); + } + + yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) #author-info.yt-live-chat-paid-sticker-renderer { + max-height: 40px; + } + + #author-info.yt-live-chat-paid-sticker-renderer:focus { + outline: none; + } + + yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) #price-column.yt-live-chat-paid-sticker-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-align-self: var(--layout-self-center_-_-ms-align-self); -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); align-self: var(--layout-self-center_-_align-self); + } + + #purchase-amount-chip.yt-live-chat-paid-sticker-renderer { + height: 18px; + border-radius: 12px; + color: var(--yt-live-chat-paid-sticker-chip-text-color); + + font-size: var(--ytd-badge_-_font-size); font-weight: var(--ytd-badge_-_font-weight); line-height: var(--ytd-badge_-_line-height); + display: var(--layout-inline_-_display); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + yt-live-chat-paid-sticker-renderer[dashboard-money-feed] #purchase-amount-chip.yt-live-chat-paid-sticker-renderer { + height: 24px; + margin-right: var(--ytd-margin-2x); + padding: 0 12px; + background-color: var(--yt-live-chat-paid-sticker-chip-background-color); + } + + yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) #purchase-amount-chip.yt-live-chat-paid-sticker-renderer { + font-size: 15px; + padding-right: 8px; + } + + #sticker-container.yt-live-chat-paid-sticker-renderer { + display: flex; + align-items: center; + flex-shrink: 0; + background-color: var(--yt-spec-text-primary); + opacity: 0.1; + margin-left: var(--yt-pdg-paid-stickers-margin-left); + margin-top: 4px; + } + + yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) #sticker-container.yt-live-chat-paid-sticker-renderer { + margin: 0; + margin-left: auto; + } + + #sticker-container.sticker-loaded.yt-live-chat-paid-sticker-renderer { + background-color: var(--yt-live-chat-paid-sticker-container-loaded-style_-_background-color); opacity: var(--yt-live-chat-paid-sticker-container-loaded-style_-_opacity); + } + + #sticker.yt-live-chat-paid-sticker-renderer:focus { + outline: none; + } + + #dashboard-deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted],#deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted] { + font-style: italic; + } + + #deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted] { + color: var(--yt-live-chat-paid-sticker-chip-text-color); + font-size: 13px; + opacity: 0.7; + display: none; + } + + #dashboard-deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted] { + color: var(--yt-live-chat-secondary-text-color); + font-size: 12px; + opacity: 0.7; + display: none; + } + + yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) #deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted] { + max-height: 1.4em; + margin: 0; + -webkit-line-clamp: 1; + overflow: hidden; + + -ms-align-self: var(--layout-self-center_-_-ms-align-self); -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); align-self: var(--layout-self-center_-_align-self); + -webkit-box-orient: var(--yt-multi-line-ellipsis_-_-webkit-box-orient); text-overflow: var(--yt-multi-line-ellipsis_-_text-overflow); white-space: var(--yt-multi-line-ellipsis_-_white-space); display: var(--yt-multi-line-ellipsis_-_display); + } + + yt-live-chat-paid-sticker-renderer[dashboard-money-feed] #dashboard-deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted] { + margin-top: 4px; + margin-left: var(--yt-pdg-paid-stickers-margin-left); + display: block; + } + + #content.yt-live-chat-paid-sticker-renderer { + -ms-align-self: var(--layout-self-center_-_-ms-align-self); -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); align-self: var(--layout-self-center_-_align-self); + } + + yt-live-chat-paid-sticker-renderer[dashboard-money-feed] #content.yt-live-chat-paid-sticker-renderer { + padding: 0; + color: rgba(0, 0, 0, 0.87); + + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + display: var(--layout-vertical-reverse_-_display); -ms-flex-direction: var(--layout-vertical-reverse_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical-reverse_-_-webkit-flex-direction); flex-direction: var(--layout-vertical-reverse_-_flex-direction); + -ms-flex-align: var(--layout-baseline_-_-ms-flex-align); -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); align-items: var(--layout-baseline_-_align-items); + } + + #content-primary-column.yt-live-chat-paid-sticker-renderer { + display: inline-block; + } + + #sticker-icon.yt-live-chat-paid-sticker-renderer { + vertical-align: bottom; + } + + yt-live-chat-paid-sticker-renderer[dashboard-money-feed] #content-primary-column.yt-live-chat-paid-sticker-renderer { + margin-bottom: 4px; + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-baseline_-_-ms-flex-align); -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); align-items: var(--layout-baseline_-_align-items); + } + + yt-live-chat-paid-sticker-renderer[dashboard-money-feed] #timestamp.yt-live-chat-paid-sticker-renderer { + display: inline; + color: var(--yt-live-chat-tertiary-text-color); + font-size: 11px; + font-weight: 500; + } + + #timestamp.yt-live-chat-paid-sticker-renderer { + display: var(--yt-live-chat-item-timestamp-display, inline); + margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0); + color: var(--yt-live-chat-tertiary-text-color); + font-size: 11px; + } + + #author-photo.yt-live-chat-paid-sticker-renderer { + display: block; + margin-right: 16px; + + overflow: hidden; + border-radius: 50%; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #menu-button.yt-live-chat-paid-sticker-renderer { + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + #menu.yt-live-chat-paid-sticker-renderer { + position: absolute; + top: 0; + bottom: 0; + right: 0; + + + transform: translateX(100px); + } + + yt-live-chat-paid-sticker-renderer:hover #menu.yt-live-chat-paid-sticker-renderer,yt-live-chat-paid-sticker-renderer[menu-visible] #menu.yt-live-chat-paid-sticker-renderer { + transform: none; + } + + yt-live-chat-paid-sticker-renderer:focus-within #menu.yt-live-chat-paid-sticker-renderer { + transform: none; + } + + #inline-action-button-container.yt-live-chat-paid-sticker-renderer { + position: absolute; + top: -4px; + right: 0; + bottom: -4px; + left: 0; + + background-color: var(--yt-live-chat-moderation-mode-hover-background-color); + display: none; + + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + yt-live-chat-paid-sticker-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-paid-sticker-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + + + display: var(--yt-live-chat-inline-action-button-container-display, none); + } + + yt-live-chat-paid-sticker-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-paid-sticker-renderer { + display: none; + } + + yt-live-chat-paid-sticker-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-paid-sticker-renderer { + display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block); + } + + #inline-action-buttons.yt-live-chat-paid-sticker-renderer > *.yt-live-chat-paid-sticker-renderer,#additional-inline-action-buttons.yt-live-chat-paid-sticker-renderer > *.yt-live-chat-paid-sticker-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; + + color: var(--yt-white); + border-radius: 2px; + } + + #inline-action-buttons.yt-live-chat-paid-sticker-renderer > *.yt-live-chat-paid-sticker-renderer { + background: var(--yt-luna-black-opacity-lighten-1); + } + + #inline-action-buttons.yt-live-chat-paid-sticker-renderer > .yt-live-chat-paid-sticker-renderer:hover { + background: var(--yt-luna-black); + } + + #additional-inline-action-buttons.yt-live-chat-paid-sticker-renderer > *.yt-live-chat-paid-sticker-renderer { + color: var(--yt-live-chat-additional-inline-action-button-color); + background: var(--yt-live-chat-additional-inline-action-button-background-color); + } + + #additional-inline-action-buttons.yt-live-chat-paid-sticker-renderer > .yt-live-chat-paid-sticker-renderer:hover { + background: var(--yt-live-chat-additional-inline-action-button-background-color-hover); + } + + #additional-inline-action-buttons.yt-live-chat-paid-sticker-renderer:not(:empty) { + margin-left: 32px; + } + + #inline-action-buttons.yt-live-chat-paid-sticker-renderer > *.yt-live-chat-paid-sticker-renderer:not(:first-child),#additional-inline-action-buttons.yt-live-chat-paid-sticker-renderer > *.yt-live-chat-paid-sticker-renderer:not(:first-child) { + margin-left: 8px; + } + + yt-live-chat-super-sticker-preview-renderer { + display: block; + background-color: var(--yt-live-chat-background-color); + font-size: 15px; + } + + yt-live-chat-super-sticker-preview-renderer:focus { + outline: none; + } + + h3.yt-live-chat-super-sticker-preview-renderer { + color: var(--yt-live-chat-primary-text-color); + font-size: 16px; + font-weight: normal; + display: inline-block; + } + + #close.yt-live-chat-super-sticker-preview-renderer { + margin-right: var(--ytd-margin-3x); + color: var(--yt-live-chat-icon-button-color); + } + + #left.yt-live-chat-super-sticker-preview-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #preview.yt-live-chat-super-sticker-preview-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + #loading.yt-live-chat-super-sticker-preview-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + #right.yt-live-chat-super-sticker-preview-renderer { + font-size: 12px; + color: var(--yt-live-chat-secondary-text-color, var(--yt-secondary-text-color)); + display: inline-block; + display: var(--layout-horizontal_-_display, inline-block); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #right.yt-live-chat-super-sticker-preview-renderer yt-icon.yt-live-chat-super-sticker-preview-renderer { + width: 16px; + height: 16px; + margin-right: 4px; + } + + #header.yt-live-chat-super-sticker-preview-renderer { + padding: 12px 16px; + background-color: var(--yt-live-chat-header-background-color); + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + } + + yt-live-chat-paid-sticker-renderer.yt-live-chat-super-sticker-preview-renderer { + padding: 12px; + padding-bottom: 0; + } + + #footer.yt-live-chat-super-sticker-preview-renderer { + background-color: var(--yt-live-chat-background-color); + padding: 12px; + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + } + + #buy-button.yt-live-chat-super-sticker-preview-renderer { + width: 100%; + margin: 0; + border-radius: 2px; + background-color: var(--yt-blue); + color: var(--yt-white); + font-size: 16px; + font-weight: 500; + display: inline-block; + text-align: center; + } + + #back-button.yt-live-chat-super-sticker-preview-renderer { + width: 100%; + margin: 0; + background-color: var(--yt-live-chat-background-color); + color: var(--yt-blue); + font-size: 16px; + font-weight: 500; + display: inline-block; + text-align: center; + } + + #footer.yt-live-chat-super-sticker-preview-renderer yt-button-renderer.yt-live-chat-super-sticker-preview-renderer { + width: 100%; + } + + #error.yt-live-chat-super-sticker-preview-renderer { + font-size: 13px; + margin: 0 16px; + } + + yt-live-chat-paid-sticker-panel-renderer { + display: block; + background-color: var(--yt-live-chat-background-color); + position: relative; + } + + #header.yt-live-chat-paid-sticker-panel-renderer { + padding-top: 16px; + background-color: var(--yt-live-chat-header-background-color, var(--yt-opalescence-soft-grey-opacity-lighten-3)); + box-shadow: 0px 2px 2px 0px rgba(199,193,199,1); + } + + yt-icon.yt-live-chat-paid-sticker-panel-renderer { + color: var(--yt-live-chat-icon-button-color); + } + + #header-top.yt-live-chat-paid-sticker-panel-renderer { + display: var(--layout_-_display); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #header-text.yt-live-chat-paid-sticker-panel-renderer { + color: var(--yt-live-chat-secondary-text-color); + font-size: 12px; + } + + h3.yt-live-chat-paid-sticker-panel-renderer { + color: var(--yt-live-chat-primary-text-color); + font-size: 16px; + font-weight: normal; + } + + #left.yt-live-chat-paid-sticker-panel-renderer { + display: var(--layout_-_display); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #header-bottom.yt-live-chat-paid-sticker-panel-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #header-bottom.yt-live-chat-paid-sticker-panel-renderer[is-at-front] { + margin-left: 24px; + } + + #header-bottom.yt-live-chat-paid-sticker-panel-renderer[is-at-back] { + margin-right: 24px; + } + + yt-icon-button.yt-live-chat-paid-sticker-panel-renderer { + width: 40px; + height: 48px; + } + + yt-icon-button.yt-live-chat-paid-sticker-panel-renderer[disabled] { + cursor: default; + } + + #scroll-back-button.yt-live-chat-paid-sticker-panel-renderer { + padding: 0 4px 0 8px; + left: 0; + } + + #scroll-forward-button.yt-live-chat-paid-sticker-panel-renderer { + padding: 0 8px 0 4px; + right: 0; + } + + #sticker-tabs.yt-live-chat-paid-sticker-panel-renderer { + display: inline-block; + width: 100%; + overflow: hidden; + --paper-tabs-selection-bar-color: var(--yt-pdg-paid-stickers-tab-selection-bar-color); + } + + #close-button.yt-live-chat-paid-sticker-panel-renderer,#help-button.yt-live-chat-paid-sticker-panel-renderer { + margin: 0 var(--ytd-margin-3x); + } + + #close-button.yt-live-chat-paid-sticker-panel-renderer > *.yt-live-chat-paid-sticker-panel-renderer,#help-button.yt-live-chat-paid-sticker-panel-renderer > *.yt-live-chat-paid-sticker-panel-renderer { + color: var(--yt-live-chat-icon-button-color); + } + + yt-live-chat-super-sticker-pack-renderer.yt-live-chat-paid-sticker-panel-renderer { + max-height: 300px; + -ms-flex-wrap: var(--layout-wrap_-_-ms-flex-wrap); -webkit-flex-wrap: var(--layout-wrap_-_-webkit-flex-wrap); flex-wrap: var(--layout-wrap_-_flex-wrap); + } + + #stickers-container.yt-live-chat-paid-sticker-panel-renderer:focus { + outline: none; + } + + #dialog.yt-live-chat-paid-sticker-panel-renderer { + z-index: 3; + } + + yt-live-chat-ticker-paid-message-item-renderer { + display: inline-block; + font-size: 14px; + outline: none; + transition: width 0.2s; + vertical-align: top; + cursor: pointer; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + } + + #container.yt-live-chat-ticker-paid-message-item-renderer { + border-radius: 999px; + padding: 4px; + } + + yt-live-chat-ticker-paid-message-item-renderer.sliding-down #container.yt-live-chat-ticker-paid-message-item-renderer { + opacity: 0.5; + transform: translateY(44px); + transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0.0, 1, 1); + } + + yt-live-chat-ticker-paid-message-item-renderer.collapsing { + margin-right: 0; + transition: margin-right 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0.0, 0.2, 1); + } + + yt-live-chat-ticker-paid-message-item-renderer[dimmed] { + opacity: 0.5; + } + + yt-img-shadow.yt-live-chat-ticker-paid-message-item-renderer { + margin-right: -4px; + + overflow: hidden; + border-radius: 50%; + } + + #content.yt-live-chat-ticker-paid-message-item-renderer { + height: 24px; + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #text.yt-live-chat-ticker-paid-message-item-renderer { + margin: 0 8px; + font-weight: 500; + } + + yt-live-chat-ticker-paid-message-item-renderer[is-deleted] #author-photo.yt-live-chat-ticker-paid-message-item-renderer { + display: none; + } + + #content.yt-live-chat-ticker-paid-sticker-item-renderer { + padding-right: 8px; + } + + #content.multiple-thumbnails.yt-live-chat-ticker-paid-sticker-item-renderer { + padding-right: 6px; + } + + #author-photo.yt-live-chat-ticker-paid-sticker-item-renderer { + margin-right: 4px; + } + + .sticker-thumbnail.yt-live-chat-ticker-paid-sticker-item-renderer { + border-radius: 0; + margin-right: 0; + } + + yt-live-chat-ticker-paid-sticker-item-renderer { + display: inline-block; + font-size: 14px; + outline: none; + transition: width 0.2s; + vertical-align: top; + cursor: pointer; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + } + + #container.yt-live-chat-ticker-paid-sticker-item-renderer { + border-radius: 999px; + padding: 4px; + } + + yt-live-chat-ticker-paid-sticker-item-renderer.sliding-down #container.yt-live-chat-ticker-paid-sticker-item-renderer { + opacity: 0.5; + transform: translateY(44px); + transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0.0, 1, 1); + } + + yt-live-chat-ticker-paid-sticker-item-renderer.collapsing { + margin-right: 0; + transition: margin-right 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0.0, 0.2, 1); + } + + yt-live-chat-ticker-paid-sticker-item-renderer[dimmed] { + opacity: 0.5; + } + + yt-img-shadow.yt-live-chat-ticker-paid-sticker-item-renderer { + margin-right: -4px; + + overflow: hidden; + border-radius: 50%; + } + + #content.yt-live-chat-ticker-paid-sticker-item-renderer { + height: 24px; + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #text.yt-live-chat-ticker-paid-sticker-item-renderer { + margin: 0 8px; + font-weight: 500; + } + + yt-live-chat-ticker-paid-sticker-item-renderer[is-deleted] #author-photo.yt-live-chat-ticker-paid-sticker-item-renderer { + display: none; + } + + yt-live-chat-poll-choice { + display: block; + position: relative; + } + + #text-container.yt-live-chat-poll-choice { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + padding: var(--yt-live-chat-poll-choice-text-padding); + } + + #content.yt-live-chat-poll-choice { + min-height: var(--yt-live-chat-poll-choice-min-height); + padding: 8px 16px; + position: relative; + font-size: 13px; + } + + #content.yt-live-chat-poll-choice[disabled] { + color: inherit; + } + + yt-live-chat-poll-choice[selected] #endpoint.yt-live-chat-poll-choice { + animation: border-and-text-highlight var(--yt-live-chat-universal-motion-curve) forwards; + animation-duration: var(--yt-live-chat-poll-choice-animation-duration); + } + + #label-text.yt-live-chat-poll-choice,#vote-percentage-text.yt-live-chat-poll-choice { + font-weight: 500; + } + + #label-text.yt-live-chat-poll-choice { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + #percentage-container.yt-live-chat-poll-choice { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + } + + #vote-percentage-bar.yt-live-chat-poll-choice { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + + + transform: var(--yt-live-chat-poll-choice-vote-bar-transform, translateX(-100%)); + transition: transform cubic-bezier(0.05, 0.00, 0.00, 1.00); + transition-duration: var(--yt-live-chat-poll-choice-animation-duration); + } + + #endpoint.yt-live-chat-poll-choice { + display: block; + box-sizing: border-box; + border-radius: var(--yt-live-chat-poll-choice-border-radius); + border: var(--yt-live-chat-poll-choice-border); + color: var(--yt-live-chat-poll-choice-text-color); + background-color: var(--yt-live-chat-poll-choice-background-color); + overflow: hidden; + } + + #selected-icon.yt-live-chat-poll-choice,yt-live-chat-poll-choice[selected][vote-request-in-flight][show-spinner] #selected-icon.yt-live-chat-poll-choice,paper-spinner-lite.yt-live-chat-poll-choice { + display: none; + } + + yt-live-chat-poll-choice[selected][vote-request-in-flight] #selected-icon.yt-live-chat-poll-choice,yt-live-chat-poll-choice[show-spinner] paper-spinner-lite.yt-live-chat-poll-choice { + display: inline; + position: absolute; + right: 16px; + --iron-icon-width: 20px; + --iron-icon-height: 20px; + } + + paper-spinner-lite.yt-live-chat-poll-choice { + --paper-spinner-color: var(--yt-live-chat-poll-primary-text-color); + height: 20px; + width: 20px; + } + + yt-live-chat-poll-choice[has-voted] #endpoint.yt-live-chat-poll-choice { + cursor: initial; + } + + yt-live-chat-poll-choice[has-voted] #vote-percentage-bar.yt-live-chat-poll-choice { + background-color: var(--yt-live-chat-poll-choice-vote-bar-background-color); + } + + yt-live-chat-poll-choice:not([has-voted]) #endpoint.yt-live-chat-poll-choice:hover { + background-color: var(--yt-live-chat-poll-choice-hover-color); + } + + @keyframes border-and-text-highlight { + 20% { + border: 1px solid var(--yt-live-chat-primary-text-color); + color: var(--yt-live-chat-primary-text-color); + } + + 100% { + border: 1px solid var(--yt-live-chat-poll-primary-text-color); + color: var(--yt-live-chat-poll-primary-text-color); + } + + } + + yt-live-chat-button { + display: block; + } + + yt-button-renderer.yt-live-chat-button { + color: inherit; + } + + yt-live-chat-poll-header-renderer { + font-size: 13px; + padding: 8px 0; + + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + yt-live-chat-poll-header-renderer[in-collapsed-banner] { + transition: padding var(--yt-live-chat-universal-motion-curve); + transition-duration: var(--yt-live-chat-banner-animation-duration); + padding-bottom: 0; + } + + yt-img-shadow.yt-live-chat-poll-header-renderer,.metadata.yt-live-chat-poll-header-renderer,#poll-question.yt-live-chat-poll-header-renderer { + transition: opacity var(--yt-live-chat-banner-animation-duration) + var(--yt-live-chat-universal-motion-curve); + + transition-delay: 0.1s; + } + + yt-live-chat-poll-header-renderer[in-collapsed-banner] yt-img-shadow.yt-live-chat-poll-header-renderer,yt-live-chat-poll-header-renderer[in-collapsed-banner] .metadata.yt-live-chat-poll-header-renderer,yt-live-chat-poll-header-renderer[in-collapsed-banner] #poll-question.yt-live-chat-poll-header-renderer { + opacity: 0; + transition-duration: var(--yt-live-chat-banner-animation-fast-duration); + transition-delay: 0s; + } + + #menu.yt-live-chat-poll-header-renderer yt-live-chat-button.yt-live-chat-poll-header-renderer,.metadata.yt-live-chat-poll-header-renderer { + color: var(--yt-live-chat-poll-secondary-text-color); + } + + #poll-question.yt-live-chat-poll-header-renderer { + margin-bottom: 12px; + color: var(--yt-live-chat-poll-primary-text-color); + word-break: break-word; + overflow-wrap: break-word; + word-wrap: break-word; + } + + #game-photo.yt-live-chat-poll-header-renderer,#creator-photo.yt-live-chat-poll-header-renderer { + margin-right: 12px; + } + + #creator-photo.yt-live-chat-poll-header-renderer { + overflow: hidden; + border-radius: 50%; + } + + #content-top.yt-live-chat-poll-header-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + .metadata.yt-live-chat-poll-header-renderer { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + #menu.yt-live-chat-poll-header-renderer { + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #main-content.yt-live-chat-poll-header-renderer { + transition: height var(--yt-live-chat-universal-motion-curve), + padding var(--yt-live-chat-universal-motion-curve); + transition-duration: var(--yt-live-chat-banner-animation-duration); + padding: 14px 20px 4px 0; + color: var(--yt-live-chat-primary-text-color); + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + } + + yt-live-chat-poll-header-renderer[in-collapsed-banner] #main-content.yt-live-chat-poll-header-renderer { + height: 0; + padding-top: 0; + padding-bottom: 0; + } + + #content-top.yt-live-chat-poll-header-renderer,#main-content.yt-live-chat-poll-header-renderer { + z-index: 1; + } + + #col-right.yt-live-chat-poll-header-renderer { + overflow: hidden; + + margin-top: -2px; + + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + #menu.yt-live-chat-poll-header-renderer { + --yt-button-icon-size: 24px; + --yt-button-icon-padding: 0; + } + + yt-live-chat-poll-renderer { + display: block; + padding: 4px 8px 10px 16px; + font-size: 13px; + } + + #poll-choice-container.yt-live-chat-poll-renderer { + position: relative; + box-sizing: border-box; + padding: 0 8px 10px 0; + + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + yt-live-chat-poll-renderer[in-banner],yt-live-chat-poll-renderer[in-banner] #poll-choice-container.yt-live-chat-poll-renderer { + padding-right: 0; + } + + yt-live-chat-poll-choice.yt-live-chat-poll-renderer:not(:first-of-type) { + margin-top: 8px; + } + + #button.yt-live-chat-poll-renderer { + margin-right: 8px; + display: var(--layout_-_display); + -ms-flex-pack: var(--layout-end-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-end-justified_-_-webkit-justify-content); justify-content: var(--layout-end-justified_-_justify-content); + } + + yt-live-chat-poll-renderer[in-banner] #button.yt-live-chat-poll-renderer { + margin-right: -8px; + } + + #button.yt-live-chat-poll-renderer yt-button-renderer.yt-live-chat-poll-renderer { + color: var(--yt-live-chat-poll-primary-text-color); + } + + yt-live-chat-poll-renderer[highlight-winning-option] yt-live-chat-poll-choice.yt-live-chat-poll-renderer[is-winning].yt-live-chat-poll-renderer[has-votes] { + --yt-live-chat-poll-choice-text-color: var(--yt-live-chat-poll-primary-text-color); + --yt-live-chat-poll-choice-border: 1px solid var(--yt-live-chat-poll-tertiary-text-color); + + --yt-live-chat-poll-choice-min-height: 6px; + --yt-live-chat-poll-choice-text-padding: 0 11px; + } + + yt-live-chat-poll-renderer[in-banner] { + --yt-live-chat-poll-choice-border: none; + --yt-live-chat-poll-choice-min-height: 8px; + --yt-live-chat-poll-choice-text-padding: 0 12px; + --yt-live-chat-poll-choice-text-color: var(--yt-live-chat-poll-secondary-text-color); + padding-bottom: 0; + } + + yt-live-chat-poll-renderer[in-collapsed-banner] { + padding-bottom: 8px; + } + + yt-live-chat-poll-renderer[in-collapsed-banner] #poll-choice-container.yt-live-chat-poll-renderer { + padding-bottom: 2px; + transition: padding-right var(--yt-live-chat-universal-motion-curve); + } + + yt-live-chat-poll-renderer[in-banner] #collapse-container.yt-live-chat-poll-renderer { + padding-right: 8px; + transition: transform var(--yt-live-chat-universal-motion-curve), + height var(--yt-live-chat-universal-motion-curve), + padding var(--yt-live-chat-universal-motion-curve); + transition-duration: var(--yt-live-chat-banner-animation-duration); + } + + yt-live-chat-poll-renderer[in-collapsed-banner] #collapse-container.yt-live-chat-poll-renderer { + padding-right: 28px; + } + + yt-live-chat-poll-renderer[highlight-winning-option] yt-live-chat-poll-choice.yt-live-chat-poll-renderer:not([is-winning]).yt-live-chat-poll-renderer { + transition: opacity var(--yt-live-chat-banner-animation-duration) + var(--yt-live-chat-universal-motion-curve); + } + + yt-live-chat-poll-renderer[highlight-winning-option][in-collapsed-banner] yt-live-chat-poll-choice.yt-live-chat-poll-renderer:not([is-winning]).yt-live-chat-poll-renderer { + opacity: 0; + } + + yt-live-chat-poll-renderer[in-banner][is-transitioning-collapse] yt-live-chat-poll-choice.yt-live-chat-poll-renderer[is-winning] { + transition: transform var(--yt-live-chat-banner-animation-duration) + var(--yt-live-chat-universal-motion-curve); + } + + yt-live-interactivity-component-background,svg.yt-live-interactivity-component-background { + display: block; + } + + yt-live-interactivity-component-background[use-large-background] { + display: var(--yt-live-chat-interactivity-component-background-display, block); + } + + yt-live-interactivity-component-background[use-large-background] svg.yt-live-interactivity-component-background { + height: 100%; + + min-height: 350px; + } + + .gradient-stop.yt-live-interactivity-component-background { + stop-color: var(--yt-live-chat-banner-background-gradient-stop-color, #26477f); + } + + yt-live-chat-action-panel-renderer { + display: block; + overflow: hidden; + background-color: var(--yt-live-chat-action-panel-renderer-background-color, + var(--yt-live-chat-background-color)); + border-radius: 4px; + } + + yt-live-chat-action-panel-renderer,#header.yt-live-chat-action-panel-renderer,#contents.yt-live-chat-action-panel-renderer { + position: relative; + } + + .background.yt-live-chat-action-panel-renderer { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + } + + yt-live-chat-message-subtext-renderer { + display: block; + } + + yt-live-chat-message-renderer { + display: block; + color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color)); + background: var(--yt-live-chat-action-panel-background-color, var(--yt-opalescence-soft-grey-opacity-lighten-3)); + + display: var(--layout-vertical_-_display, block); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + + --yt-paper-button-width: 100%; + } + + #subtext.yt-live-chat-message-renderer { + color: var(--yt-live-chat-secondary-text-color, var(--yt-luna-black-opacity-lighten-2)); + margin-bottom: 12px; + } + + #text.yt-live-chat-message-renderer,#subtext.yt-live-chat-message-renderer { + text-align: var(--yt-live-chat-message-renderer-text-align, inherit); + + -ms-align-self: var(--layout-self-center_-_-ms-align-self); -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); align-self: var(--layout-self-center_-_align-self); + } + + #text.yt-live-chat-message-renderer:empty,#subtext.yt-live-chat-message-renderer:empty,#button.yt-live-chat-message-renderer:empty { + display: none; + } + + yt-live-chat-message-renderer[subtext-on-bottom] #subtext.yt-live-chat-message-renderer { + order: 1; + margin-bottom: 0; + margin-top: 12px; + } + + #button.yt-live-chat-message-renderer { + width: 100%; + } + + #button.yt-live-chat-message-renderer .style-default.yt-live-chat-message-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + #button.yt-live-chat-message-renderer > *.yt-live-chat-message-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + yt-dropdown-menu { + display: inline-block; + max-width: 100%; + } + + paper-button.yt-dropdown-menu { + display: inline-block; + text-align: center; + font-family: inherit; + } + + paper-menu-button.yt-dropdown-menu { + color: var(--yt-spec-text-secondary); + --paper-menu-button-dropdown-background: transparent; + } + + paper-menu-button.yt-dropdown-menu,#label-text.yt-dropdown-menu { + max-width: 100%; + } + + #label-text.yt-dropdown-menu { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + paper-menu-button.yt-dropdown-menu { + padding: 0; + } + + paper-listbox.yt-dropdown-menu { + background-color: var(--yt-dialog-background); + } + + paper-listbox.yt-dropdown-menu paper-item.yt-dropdown-menu:hover { + background-color: var(--yt-menu-hover-backgound-color); + } + + paper-listbox.yt-dropdown-menu .iron-selected.yt-dropdown-menu { + font-weight: inherit; + background-color: var(--yt-menu-hover-backgound-color); + } + + #label.yt-dropdown-menu { + cursor: pointer; + text-transform: var(--yt-dropdown-menu-label-transform, none); + padding: 0; + margin: 0; + min-width: 0; + font-size: var(--ytd-subheadline_-_font-size); font-weight: var(--ytd-subheadline_-_font-weight); line-height: var(--ytd-subheadline_-_line-height); letter-spacing: var(--ytd-subheadline_-_letter-spacing); + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #label-text.yt-dropdown-menu { + color: var(--yt-primary-text-color); + ; + } + + #icon-label.yt-dropdown-menu { + color: var(--yt-spec-text-secondary); + font-size: var(--ytd-tab-system_-_font-size); font-weight: var(--ytd-tab-system_-_font-weight); letter-spacing: var(--ytd-tab-system_-_letter-spacing); text-transform: var(--ytd-tab-system_-_text-transform); + } + + #label.keyboard-focus.yt-dropdown-menu #icon-label.yt-dropdown-menu { + font-weight: 700; + } + + #label.keyboard-focus.yt-dropdown-menu #label-text.yt-dropdown-menu { + font-weight: 500; + } + + #label-icon.yt-dropdown-menu { + flex-shrink: 0; + margin-right: var(--ytd-margin-2x); + color: var(--yt-spec-text-secondary); + } + + #icon.yt-dropdown-menu { + color: var(--yt-spec-text-secondary); + } + + .item.yt-dropdown-menu { + color: var(--yt-primary-text-color); + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + #subtitle.yt-dropdown-menu { + color: var(--yt-secondary-text-color); + white-space: normal; + font-size: var(--ytd-mini-attribution_-_font-size); font-weight: var(--ytd-mini-attribution_-_font-weight); line-height: var(--ytd-mini-attribution_-_line-height); + } + + .yt-simple-endpoint.yt-dropdown-menu { + display: var(--yt-endpoint_-_display); cursor: var(--yt-endpoint_-_cursor); text-decoration: var(--yt-endpoint_-_text-decoration); color: var(--yt-endpoint_-_color); + outline: none; + } + + .yt-simple-endpoint.yt-dropdown-menu:hover { + color: var(--yt-endpoint-hover_-_color); text-decoration: var(--yt-endpoint-hover_-_text-decoration); + } + + a.yt-simple-endpoint.yt-dropdown-menu { + display: block; + color: var(--yt-primary-text-color); + } + + yt-dropdown-menu:not(.has-items) #label-icon.yt-dropdown-menu { + display: none; + } + + yt-dropdown-menu:not(.has-items) #label.yt-dropdown-menu { + cursor: default; + } + + yt-dropdown-menu:not(.has-items) #label.yt-dropdown-menu:focus { + outline: none; + } + + paper-item-body.yt-dropdown-menu { + max-width: 100%; + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + yt-sort-filter-sub-menu-renderer { + --yt-endpoint-force-cursor: pointer; + display: inline-block; + } + + yt-live-chat-header-renderer { + height: 48px; + padding: 8px; + box-sizing: border-box; + font-size: var(--yt-live-chat-header-font-size, 18px); + background-color: var(--yt-live-chat-header-background-color, var(--yt-opalescence-soft-grey-opacity-lighten-3)); + color: var(--yt-live-chat-header-text-color, var(--yt-live-chat-primary-text-color)); + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + + + display: var(--yt-live-chat-header-renderer-display, flex); + } + + #overflow.yt-live-chat-header-renderer { + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + #action-buttons.yt-live-chat-header-renderer > *.yt-live-chat-header-renderer,#overflow.yt-live-chat-header-renderer { + color: var(--yt-live-chat-header-button-color); + } + + #primary-content.yt-live-chat-header-renderer { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + margin-left: 16px; + } + + yt-icon-button.yt-live-chat-header-renderer yt-icon.yt-live-chat-header-renderer { + color: var(--yt-spec-icon-inactive); + } + + yt-icon-button.yt-live-chat-header-renderer:hover yt-icon.yt-live-chat-header-renderer { + color: var(--yt-spec-icon-active-other); + } + + yt-live-chat-text-message-renderer { + position: relative; + + font-size: 13px; + padding: 4px 24px; + + overflow: hidden; + contain: content; + + --yt-endpoint-color: var(--yt-live-chat-primary-text-color, var(--yt-luna-black)); + --yt-endpoint-hover-color: var(--yt-live-chat-primary-text-color, var(--yt-endpoint-color)); + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-start_-_-ms-flex-align); -webkit-align-items: var(--layout-start_-_-webkit-align-items); align-items: var(--layout-start_-_align-items); + } + + yt-live-chat-text-message-renderer:hover { + overflow: initial; + } + + yt-live-chat-text-message-renderer[author-is-owner] { + background-color: var(--yt-live-chat-message-highlight-background-color); + } + + #content.yt-live-chat-text-message-renderer { + -ms-align-self: var(--layout-self-center_-_-ms-align-self); -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); align-self: var(--layout-self-center_-_align-self); + + min-width: 0; + } + + yt-live-chat-author-chip.yt-live-chat-text-message-renderer { + margin-right: 8px; + } + + #message.yt-live-chat-text-message-renderer { + color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color)); + line-height: 16px; + overflow: hidden; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + + font-style: var(--yt-live-chat-text-message-renderer-message-message-style_-_font-style); opacity: var(--yt-live-chat-text-message-renderer-message-message-style_-_opacity); + } + + #message.yt-live-chat-text-message-renderer .emoji.yt-live-chat-text-message-renderer { + width: var(--yt-live-chat-emoji-size); + height: var(--yt-live-chat-emoji-size); + + margin: -1px 2px 1px 2px; + vertical-align: middle; + } + + a.yt-live-chat-text-message-renderer { + display: inline; + text-decoration: underline; + } + + #message.yt-live-chat-text-message-renderer a.yt-live-chat-text-message-renderer { + display: inline; + text-decoration: underline; + word-break: break-all; + } + + #message.yt-live-chat-text-message-renderer a.yt-live-chat-text-message-renderer .mention.yt-live-chat-text-message-renderer { + text-decoration: underline; + } + + #show-original.yt-live-chat-text-message-renderer { + margin-left: 2px; + } + + #message.yt-live-chat-text-message-renderer:empty,#deleted-state.yt-live-chat-text-message-renderer:empty,#show-original.yt-live-chat-text-message-renderer:empty,yt-live-chat-text-message-renderer[show-original] #deleted-state.yt-live-chat-text-message-renderer,yt-live-chat-text-message-renderer[show-original] #show-original.yt-live-chat-text-message-renderer,yt-live-chat-text-message-renderer[is-deleted]:not([show-original]) #message.yt-live-chat-text-message-renderer { + display: none; + } + + #menu.yt-live-chat-text-message-renderer { + color: var(--yt-live-chat-secondary-text-color); + background: linear-gradient(to right, transparent 0%, var(--yt-live-chat-background-color, var(--yt-white)) 100%); + } + + yt-live-chat-text-message-renderer[author-is-owner] #menu.yt-live-chat-text-message-renderer { + background: linear-gradient(to right, transparent 0%, var(--yt-live-chat-message-highlight-background-color, var(--yt-luna-black)) 100%); + } + + .mention.yt-live-chat-text-message-renderer { + background: var(--yt-live-chat-mention-background-color); + color: var(--yt-live-chat-mention-text-color); + padding: 2px 4px; + border-radius: 2px; + } + + #deleted-state.yt-live-chat-text-message-renderer,#show-original.yt-live-chat-text-message-renderer,yt-live-chat-text-message-renderer[is-deleted] #message.yt-live-chat-text-message-renderer { + font-style: italic; + color: var(--yt-live-chat-deleted-message-color, rgba(0, 0, 0, 0.5)); + } + + yt-live-chat-text-message-renderer[show-bar]::before { + content: ''; + position: absolute; + display: block; + left: 8px; + top: 4px; + bottom: 4px; + width: 4px; + box-sizing: border-box; + border-radius: 2px; + } + + yt-live-chat-text-message-renderer[is-deleted]::before { + background: var(--yt-live-chat-deleted-message-bar-color, rgba(0, 0, 0, 0.5)); + } + + yt-live-chat-text-message-renderer[is-dimmed] #message.yt-live-chat-text-message-renderer { + opacity: 0.25; + } + + yt-live-chat-text-message-renderer[is-dimmed]::before { + background: var(--yt-live-chat-error-message-color, #f44336); + } + + yt-live-chat-text-message-renderer[in-collapsed-banner] #content.yt-live-chat-text-message-renderer { + color: var(--yt-live-chat-primary-text-color); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + #timestamp.yt-live-chat-text-message-renderer { + display: var(--yt-live-chat-item-timestamp-display, inline); + margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0); + color: var(--yt-live-chat-tertiary-text-color); + font-size: 11px; + } + + #author-photo.yt-live-chat-text-message-renderer { + display: block; + margin-right: 16px; + + overflow: hidden; + border-radius: 50%; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #menu-button.yt-live-chat-text-message-renderer { + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + #menu.yt-live-chat-text-message-renderer { + position: absolute; + top: 0; + bottom: 0; + right: 0; + + + transform: translateX(100px); + } + + yt-live-chat-text-message-renderer:hover #menu.yt-live-chat-text-message-renderer,yt-live-chat-text-message-renderer[menu-visible] #menu.yt-live-chat-text-message-renderer { + transform: none; + } + + yt-live-chat-text-message-renderer:focus-within #menu.yt-live-chat-text-message-renderer { + transform: none; + } + + #inline-action-button-container.yt-live-chat-text-message-renderer { + position: absolute; + top: -4px; + right: 0; + bottom: -4px; + left: 0; + + background-color: var(--yt-live-chat-moderation-mode-hover-background-color); + display: none; + + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + yt-live-chat-text-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-text-message-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + + + display: var(--yt-live-chat-inline-action-button-container-display, none); + } + + yt-live-chat-text-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-text-message-renderer { + display: none; + } + + yt-live-chat-text-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-text-message-renderer { + display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block); + } + + #inline-action-buttons.yt-live-chat-text-message-renderer > *.yt-live-chat-text-message-renderer,#additional-inline-action-buttons.yt-live-chat-text-message-renderer > *.yt-live-chat-text-message-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; + + color: var(--yt-white); + border-radius: 2px; + } + + #inline-action-buttons.yt-live-chat-text-message-renderer > *.yt-live-chat-text-message-renderer { + background: var(--yt-luna-black-opacity-lighten-1); + } + + #inline-action-buttons.yt-live-chat-text-message-renderer > .yt-live-chat-text-message-renderer:hover { + background: var(--yt-luna-black); + } + + #additional-inline-action-buttons.yt-live-chat-text-message-renderer > *.yt-live-chat-text-message-renderer { + color: var(--yt-live-chat-additional-inline-action-button-color); + background: var(--yt-live-chat-additional-inline-action-button-background-color); + } + + #additional-inline-action-buttons.yt-live-chat-text-message-renderer > .yt-live-chat-text-message-renderer:hover { + background: var(--yt-live-chat-additional-inline-action-button-background-color-hover); + } + + #additional-inline-action-buttons.yt-live-chat-text-message-renderer:not(:empty) { + margin-left: 32px; + } + + #inline-action-buttons.yt-live-chat-text-message-renderer > *.yt-live-chat-text-message-renderer:not(:first-child),#additional-inline-action-buttons.yt-live-chat-text-message-renderer > *.yt-live-chat-text-message-renderer:not(:first-child) { + margin-left: 8px; + } + + yt-live-chat-auto-mod-message-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + font-size: 13px; + padding: 0 0 4px 0; + position: relative; + + --paper-button_-_min-width: 88px;; + --yt-live-chat-text-message-renderer-message-message-style_-_font-style: italic; --yt-live-chat-text-message-renderer-message-message-style_-_opacity: 0.5;; + --yt-button-icon-size: 16px; + --yt-button-icon-padding: 0; + --ytd-paper-button-min-width: 88px; + } + + #explanation.yt-live-chat-auto-mod-message-renderer { + color: var(--yt-live-chat-automod-button-explanation-color); + margin: 4px 0 4px 28px; + } + + #button.yt-live-chat-auto-mod-message-renderer { + display: inline-block; + } + + #button.yt-live-chat-auto-mod-message-renderer > *.yt-live-chat-auto-mod-message-renderer { + width: 32px; + --yt-button-icon-size: 16px; + } + + #moderation-buttons.yt-live-chat-auto-mod-message-renderer:not(:empty) { + margin: 8px 0 4px 64px; + } + + #moderation-buttons.yt-live-chat-auto-mod-message-renderer > *.yt-live-chat-auto-mod-message-renderer:not(:last-child) { + margin-right: 8px; + } + + #moderation-buttons.yt-live-chat-auto-mod-message-renderer > *.yt-live-chat-auto-mod-message-renderer { + background-color: var(--yt-live-chat-automod-button-background-color); + border-radius: 2px; + font-weight: 500; + } + + #moderation-buttons.yt-live-chat-auto-mod-message-renderer > *.yt-live-chat-auto-mod-message-renderer:hover { + background-color: var(--yt-live-chat-automod-button-background-color-hover); + } + + yt-live-chat-auto-mod-message-renderer::before { + background-color: var(--yt-live-chat-deleted-message-bar-color); + content: ''; + position: absolute; + display: block; + left: 8px; + top: 4px; + bottom: 4px; + width: 4px; + box-sizing: border-box; + border-radius: 2px; + } + + #timestamp.yt-live-chat-auto-mod-message-renderer { + display: var(--yt-live-chat-item-timestamp-display, inline); + margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0); + color: var(--yt-live-chat-tertiary-text-color); + font-size: 11px; + } + + #author-photo.yt-live-chat-auto-mod-message-renderer { + display: block; + margin-right: 16px; + + overflow: hidden; + border-radius: 50%; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #menu-button.yt-live-chat-auto-mod-message-renderer { + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + #menu.yt-live-chat-auto-mod-message-renderer { + position: absolute; + top: 0; + bottom: 0; + right: 0; + + + transform: translateX(100px); + } + + yt-live-chat-auto-mod-message-renderer:hover #menu.yt-live-chat-auto-mod-message-renderer,yt-live-chat-auto-mod-message-renderer[menu-visible] #menu.yt-live-chat-auto-mod-message-renderer { + transform: none; + } + + yt-live-chat-auto-mod-message-renderer:focus-within #menu.yt-live-chat-auto-mod-message-renderer { + transform: none; + } + + #inline-action-button-container.yt-live-chat-auto-mod-message-renderer { + position: absolute; + top: -4px; + right: 0; + bottom: -4px; + left: 0; + + background-color: var(--yt-live-chat-moderation-mode-hover-background-color); + display: none; + + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + yt-live-chat-auto-mod-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-auto-mod-message-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + + + display: var(--yt-live-chat-inline-action-button-container-display, none); + } + + yt-live-chat-auto-mod-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-auto-mod-message-renderer { + display: none; + } + + yt-live-chat-auto-mod-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-auto-mod-message-renderer { + display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block); + } + + #inline-action-buttons.yt-live-chat-auto-mod-message-renderer > *.yt-live-chat-auto-mod-message-renderer,#additional-inline-action-buttons.yt-live-chat-auto-mod-message-renderer > *.yt-live-chat-auto-mod-message-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; + + color: var(--yt-white); + border-radius: 2px; + } + + #inline-action-buttons.yt-live-chat-auto-mod-message-renderer > *.yt-live-chat-auto-mod-message-renderer { + background: var(--yt-luna-black-opacity-lighten-1); + } + + #inline-action-buttons.yt-live-chat-auto-mod-message-renderer > .yt-live-chat-auto-mod-message-renderer:hover { + background: var(--yt-luna-black); + } + + #additional-inline-action-buttons.yt-live-chat-auto-mod-message-renderer > *.yt-live-chat-auto-mod-message-renderer { + color: var(--yt-live-chat-additional-inline-action-button-color); + background: var(--yt-live-chat-additional-inline-action-button-background-color); + } + + #additional-inline-action-buttons.yt-live-chat-auto-mod-message-renderer > .yt-live-chat-auto-mod-message-renderer:hover { + background: var(--yt-live-chat-additional-inline-action-button-background-color-hover); + } + + #additional-inline-action-buttons.yt-live-chat-auto-mod-message-renderer:not(:empty) { + margin-left: 32px; + } + + #inline-action-buttons.yt-live-chat-auto-mod-message-renderer > *.yt-live-chat-auto-mod-message-renderer:not(:first-child),#additional-inline-action-buttons.yt-live-chat-auto-mod-message-renderer > *.yt-live-chat-auto-mod-message-renderer:not(:first-child) { + margin-left: 8px; + } + + yt-live-chat-banner-header-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + position: relative; + padding: 4px 0; + color: var(--yt-live-chat-secondary-text-color); + + overflow-x: hidden; + } + + yt-icon.yt-live-chat-banner-header-renderer,yt-button-renderer.yt-live-chat-banner-header-renderer { + color: var(--yt-spec-static-overlay-icon-inactive); + } + + yt-live-chat-banner-header-renderer[in-collapsed-banner] #title.yt-live-chat-banner-header-renderer { + opacity: 0; + transition-delay: unset; + } + + #title.yt-live-chat-banner-header-renderer { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + font-size: 13px; + margin-left: 20px; + opacity: 1; + transition: opacity var(--yt-live-chat-universal-motion-curve); + + transition-delay: 0.1s; + transition-duration: var(--yt-live-chat-banner-animation-duration); + } + + #close-button.yt-live-chat-banner-header-renderer { + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + yt-icon.yt-live-chat-banner-header-renderer { + width: 16px; + height: 16px; + } + + #menu.yt-live-chat-banner-header-renderer { + --yt-button-icon-size: 24px; + --yt-button-icon-padding: 0; + } + + ytd-donations-progress-bar-renderer { + display: block; + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + color: rgba(255, 255, 255, 0.7); + } + + ytd-donations-progress-bar-renderer[in-collapsed-banner]:not([no-goal]) { + margin: 2px 8px 0px 16px; + padding-top: 1px; + } + + ytd-donations-progress-bar-renderer[in-collapsed-banner][no-goal] { + margin: 0px 8px 0px 16px; + padding-top: 6px; + } + + #container.ytd-donations-progress-bar-renderer { + width: 100%; + border-radius: 4px; + overflow: hidden; + } + + #expanded-title.ytd-donations-progress-bar-renderer,#target-row.ytd-donations-progress-bar-renderer { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + } + + #raised-amount.ytd-donations-progress-bar-renderer,#separator.ytd-donations-progress-bar-renderer,#target-amount.ytd-donations-progress-bar-renderer,#campaign-title.ytd-donations-progress-bar-renderer { + padding-inline-end: 5px; + } + + #target-amount.ytd-donations-progress-bar-renderer { + --yt-formatted-string-bold: var(--ytd-navbar-title);--yt-formatted-string-bold_-_font-size: var(--ytd-navbar-title_-_font-size); --yt-formatted-string-bold_-_font-weight: var(--ytd-navbar-title_-_font-weight); --yt-formatted-string-bold_-_line-height: var(--ytd-navbar-title_-_line-height); --yt-formatted-string-bold_-_letter-spacing: initial;; + } + + #raised-amount.ytd-donations-progress-bar-renderer { + --yt-formatted-string-bold: var(--ytd-navbar-title);--yt-formatted-string-bold_-_font-size: var(--ytd-navbar-title_-_font-size); --yt-formatted-string-bold_-_font-weight: var(--ytd-navbar-title_-_font-weight); --yt-formatted-string-bold_-_line-height: var(--ytd-navbar-title_-_line-height); --yt-formatted-string-bold_-_letter-spacing: initial;; + --yt-formatted-string-bold-color: var(--yt-spec-static-brand-white); + } + + ytd-donations-progress-bar-renderer[in-collapsed-banner] #raised-amount.ytd-donations-progress-bar-renderer { + --yt-formatted-string-bold: var(--ytd-link);--yt-formatted-string-bold_-_font-size: var(--ytd-link_-_font-size); --yt-formatted-string-bold_-_font-weight: var(--ytd-link_-_font-weight); --yt-formatted-string-bold_-_line-height: var(--ytd-link_-_line-height); --yt-formatted-string-bold_-_letter-spacing: var(--ytd-link_-_letter-spacing);; + } + + #progress-bar.ytd-donations-progress-bar-renderer { + height: 2px; + background-color: var(--yt-spec-static-overlay-text-disabled); + border-radius: 2px; + overflow: hidden; + margin: 2px 16px 6px 0px; + } + + ytd-donations-progress-bar-renderer:not([in-collapsed-banner]) #progress-bar.ytd-donations-progress-bar-renderer { + margin-top: 2px; + } + + #progress-bar-fill.ytd-donations-progress-bar-renderer { + height: 2px; + background-color: var(--yt-spec-static-brand-white); + width: var(--progress-bar-completion, 0); + border-radius: 2px; + } + + #match-label.ytd-donations-progress-bar-renderer { + margin: 2px 16px 4px 0px; + } + + #goal-reached-label.ytd-donations-progress-bar-renderer { + color: var(--yt-spec-static-brand-white); + } + + yt-icon.ytd-donations-progress-bar-renderer { + color: var(--yt-spec-static-brand-white); + width: 16px; + height: 16px; + } + + #button-row.ytd-donations-progress-bar-renderer { + margin-top: 4px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + } + + #goal-reached.ytd-donations-progress-bar-renderer { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + } + + #goal-reached-label.ytd-donations-progress-bar-renderer { + padding-right: 3px; + } + + ytd-donations-progress-bar-renderer[in-collapsed-banner] #target-row.ytd-donations-progress-bar-renderer,ytd-donations-progress-bar-renderer[in-collapsed-banner] #match-label.ytd-donations-progress-bar-renderer,ytd-donations-progress-bar-renderer[in-collapsed-banner] #button-row.ytd-donations-progress-bar-renderer { + display: none; + } + + #donate-button.ytd-donations-progress-bar-renderer ytd-button-renderer.ytd-donations-progress-bar-renderer { + background-color: transparent; + } + + ytd-button-renderer { + --paper-button-ink-color: var(--yt-paper-button-ink-color); + --yt-formatted-string-deemphasize-color: var(--yt-spec-static-brand-white); + + + --yt-formatted-string-deemphasize_-_margin-left: var(--ytd-margin-base);; + } + + ytd-button-renderer { + vertical-align: middle; + white-space: nowrap; + font-size: var(--ytd-tab-system_-_font-size); font-weight: var(--ytd-tab-system_-_font-weight); letter-spacing: var(--ytd-tab-system_-_letter-spacing); text-transform: var(--ytd-tab-system_-_text-transform); + } + + ytd-button-renderer[is-paper-button](:not[button-raised]),ytd-button-renderer[is-paper-button](:not[button-raised]) a.ytd-button-renderer { + overflow: hidden; + } + + ytd-button-renderer[disabled][is-paper-button] a.ytd-button-renderer { + cursor: initial; + } + + ytd-button-renderer[is-paper-button] yt-icon.ytd-button-renderer { + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + ytd-button-renderer yt-formatted-string.ytd-button-renderer { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + paper-button.ytd-button-renderer { + min-width: var(--yt-paper-button-min-width, var(--ytd-paper-button-min-width, 5.14em)); + font-size: var(--yt-paper-button-font-size, inherit); + } + + paper-button.keyboard-focus.ytd-button-renderer { + font-weight: inherit; + } + + ytd-button-renderer.force-icon-button { + font-size: var(--ytd-caption_-_font-size); line-height: var(--ytd-caption_-_line-height); font-weight: var(--ytd-caption_-_font-weight); letter-spacing: var(--ytd-caption_-_letter-spacing); text-transform: var(--ytd-caption_-_text-transform); + } + + ytd-button-renderer.force-icon-button a.ytd-button-renderer { + padding-right: var(--yt-button-icon-padding, var(--ytd-margin-2x)); + } + + ytd-button-renderer[is-paper-button] { + background-color: var(--yt-basic-background-color, var(--yt-button-background-color)); + color: var(--yt-basic-foreground-title-color, var(--yt-spec-text-secondary)); + border-color: var(--yt-basic-foreground-title-color, var(--yt-spec-text-secondary)); + } + + ytd-button-renderer[is-paper-button-with-icon] { + --yt-button-padding-minus-focus-outline: var(--yt-button-with-icon-padding-minus-focus-outline); + } + + ytd-button-renderer.style-suggestive.size-small[is-paper-button-with-icon] { + --yt-button-padding: 6px 12px; + --yt-button-padding-minus-border: 5px 11px; + } + + ytd-button-renderer[is-paper-button-with-icon] { + --yt-button-padding: 6px 16px; + --yt-button-padding-minus-border: 5px 15px; + } + + ytd-button-renderer[is-paper-button-with-icon][button-size="size-large"] { + --yt-button-padding: 10px 16px; + --yt-button-padding-minus-border: 9px 15px; + --yt-button-padding-minus-focus-outline: 9px 15px; + } + + ytd-button-renderer[is-icon-button] { + color: var(--yt-button-color, var(--yt-spec-icon-inactive)); + } + + ytd-button-renderer.style-text[is-icon-button],ytd-button-renderer.style-default[is-icon-button],ytd-button-renderer.style-opacity[is-icon-button] { + color: var(--yt-spec-icon-inactive); + } + + ytd-button-renderer.style-text[is-icon-button] #text.ytd-button-renderer,ytd-button-renderer.style-default[is-icon-button] #text.ytd-button-renderer,ytd-button-renderer.style-opacity[is-icon-button] #text.ytd-button-renderer { + color: var(--yt-spec-text-secondary); + } + + ytd-button-renderer.style-black[is-icon-button] { + color: var(--yt-spec-text-primary); + } + + ytd-button-renderer.style-opacity[is-icon-button][disabled] { + color: var(--yt-spec-icon-disabled); + } + + ytd-button-renderer.style-blue-text[is-icon-button] { + color: var(--yt-spec-call-to-action); + } + + ytd-button-renderer.style-visibly-disabled[is-icon-button] { + color: var(--yt-spec-icon-disabled); + } + + paper-tooltip.ytd-button-renderer { + white-space: nowrap; + } + + ytd-button-renderer.style-primary[is-paper-button] { + background-color: var(--yt-spec-call-to-action); + color: var(--yt-spec-text-primary-inverse); + } + + ytd-button-renderer.style-primary[disabled][is-paper-button] { + background-color: var(--yt-spec-icon-disabled); + color: var(--yt-spec-text-primary-inverse); + } + + ytd-button-renderer.style-payment[is-paper-button] { + background-color: var(--yt-button-payment-background-color, var(--yt-spec-call-to-action)); + color: var(--yt-spec-text-primary-inverse); + } + + ytd-button-renderer.style-payment[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.style-primary[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.style-payment[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer,ytd-button-renderer.style-primary[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-filled-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + ytd-button-renderer.style-suggestive[is-paper-button] { + --yt-formatted-string-deemphasize-color: var(--yt-blue-opacity-lighten-2); + background-color: transparent; + color: var(--yt-spec-call-to-action); + } + + ytd-button-renderer.style-suggestive[is-paper-button] paper-button.ytd-button-renderer { + border: 1px solid var(--yt-spec-call-to-action); + padding: var(--yt-button-padding-minus-border); + } + + ytd-button-renderer.style-suggestive[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.style-suggestive[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-call-to-action); + padding: var(--yt-button-padding-minus-focus-outline); + } + + ytd-button-renderer.palette-with-border[is-paper-button] paper-button.ytd-button-renderer { + border-width: 1px; + border-style: solid; + padding: var(--yt-button-padding-minus-border); + } + + ytd-button-renderer.palette-with-border[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.palette-with-border[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer { + border-width: var(--yt-button-padding-minus-focus-outline-width); + border-style: solid; + padding: var(--yt-button-padding-minus-focus-outline); + } + + ytd-button-renderer.style-blue-text[is-paper-button] { + --yt-formatted-string-deemphasize-color: var(--yt-spec-icon-disabled); + color: var(--yt-spec-call-to-action); + } + + ytd-button-renderer.style-blue-text[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.style-blue-text[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-call-to-action-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + ytd-button-renderer.style-destructive[is-paper-button] { + background-color: var(--yt-spec-brand-subscribe-button-background); + color: var(--yt-spec-static-brand-white); + } + + ytd-button-renderer.style-destructive[new-subscribe-color][is-paper-button] { + background-color: var(--yt-spec-brand-button-background); + } + + ytd-button-renderer.style-destructive[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.style-destructive[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-filled-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + ytd-button-renderer.style-destructive[disabled][is-paper-button] { + background-color: + var(--yt-button-destructive-background-color, var(--yt-opalescence-soft-grey)); + color: var(--yt-button-destructive-color, var(--yt-opalescence-grey-opacity-lighten-2)); + } + + ytd-button-renderer.style-brand[is-paper-button] { + color: var(--yt-spec-brand-link-text); + } + + ytd-button-renderer.style-brand[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.style-brand[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-brand-text-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + ytd-button-renderer.style-default[is-paper-button] { + background-color: var(--yt-button-default-background-color, var(--yt-spec-badge-chip-background)); + color: var(--yt-button-default-text-color, var(--yt-spec-text-secondary)); + } + + ytd-button-renderer.style-default[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.style-default[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-filled-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + ytd-button-renderer.style-inactive-outline[is-paper-button] { + color: var(--yt-spec-text-secondary); + } + + ytd-button-renderer.style-inactive-outline[is-paper-button] paper-button.ytd-button-renderer { + border: 1px solid var(--yt-spec-text-secondary); + padding: var(--yt-button-padding-minus-border); + } + + ytd-button-renderer.style-inactive-outline[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.style-inactive-outline[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-text-secondary); + padding: var(--yt-button-padding-minus-focus-outline); + } + + ytd-button-renderer.style-suggested-action[is-paper-button] { + background-color: var(--yt-spec-suggested-action); + color: var(--yt-spec-call-to-action); + } + + ytd-button-renderer.style-suggested-action[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.style-suggested-action[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-call-to-action-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + ytd-button-renderer.style-compact-gray[is-paper-button] { + background-color: var(--yt-spec-badge-chip-background); + color: var(--yt-spec-text-secondary); + } + + ytd-button-renderer.style-compact-gray[is-paper-button] paper-button.ytd-button-renderer { + padding: var(--ytd-margin-base) var(--ytd-margin-2x); + } + + ytd-button-renderer.style-text[is-paper-button] { + color: var(--yt-spec-text-secondary); + } + + ytd-button-renderer[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.style-text[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer,ytd-button-renderer.style-text[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-inactive-text-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); + } + + ytd-button-renderer.style-overlay[is-paper-button] { + background-color: var(--yt-spec-static-overlay-button-primary); + color: var(--yt-spec-static-overlay-text-primary); + } + + ytd-button-renderer.style-overlay[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.style-overlay[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-static-overlay-text-secondary); + padding: var(--yt-button-padding-minus-focus-outline); + } + + ytd-button-renderer.style-white-with-border[is-paper-button] { + background-color: transparent; + border: 1px solid var(--yt-spec-static-brand-white); + color: var(--yt-spec-static-brand-white); + } + + ytd-button-renderer.style-white-with-border[is-paper-button]:not([use-keyboard-focused]) paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.style-white-with-border[is-paper-button][use-keyboard-focused][keyboard-focused] paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid var(--yt-spec-static-brand-white); + padding: var(--yt-button-padding-minus-focus-outline); + } + + ytd-button-renderer.style-alert-info[is-paper-button] { + color: var(--yt-blue); + } + + ytd-button-renderer.style-alert-info[is-paper-button]:hover { + color: var(--yt-icon-hover-color); + } + + ytd-button-renderer.style-dark[is-paper-button] { + background-color: var(--yt-button-dark-background-color, var(--yt-opalescence-soft-grey)); + color: var(--yt-button-dark-text-color, var(--yt-luna-black)); + } + + ytd-button-renderer.style-light[is-paper-button] { + background-color: var(--yt-button-light-background-color, var(--yt-opalescence-soft-grey)); + color: var(--yt-button-light-text-color, var(--yt-luna-black-opacity-lighten-2)); + } + + ytd-button-renderer.style-light-text[is-paper-button] { + color: var(--yt-white); + } + + ytd-button-renderer.style-black[is-paper-button] { + color: var(--yt-spec-text-primary); + } + + ytd-button-renderer.style-visibly-disabled[is-paper-button] { + background-color: transparent; + color: var(--yt-spec-text-disabled); + } + + ytd-button-renderer.style-black[disabled][is-paper-button] { + color: var(--yt-button-black-color, var(--yt-opalescence-soft-grey-opacity-lighten-1)); + } + + ytd-button-renderer.style-dark-on-black[is-paper-button] { + background-color: var(--yt-playability-button-color); + border: none; + color: var(--yt-white-opacity-lighten-1); + } + + ytd-button-renderer.style-blue-text-with-inverse-theme[is-paper-button] { + color: var(--yt-spec-call-to-action-inverse); + } + + ytd-button-renderer.style-count { + font-size: var(--ytd-thumbnail-attribution_-_font-size); font-weight: var(--ytd-thumbnail-attribution_-_font-weight); line-height: var(--ytd-thumbnail-attribution_-_line-height); letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); text-transform: var(--ytd-thumbnail-attribution_-_text-transform); + } + + paper-button.ytd-button-renderer { + display: inline-block; + text-align: center; + font-family: inherit; + } + + ytd-button-renderer { + display: inline-block; + text-transform: uppercase; + } + + ytd-button-renderer.force-icon-button a.ytd-button-renderer { + cursor: pointer; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + } + + ytd-button-renderer[disabled] a.ytd-button-renderer:focus { + outline: none; + } + + ytd-button-renderer[is-icon-button][has-no-text] { + font-size: 0; + } + + a.ytd-button-renderer { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + } + + a.yt-simple-endpoint.ytd-button-renderer { + color: inherit; + border-radius: inherit; + text-decoration: none; + } + + ytd-button-renderer[is-paper-button] { + border-radius: var(--yt-button-border-radius, 3px); + margin: var(--yt-button-margin, 0 0.29em); + } + + ytd-button-renderer[is-paper-button][disabled] { + color: var(--yt-spec-text-disabled); + background-color: transparent; + } + + ytd-button-renderer[is-icon-button][disabled] { + color: #9b9b9b; + } + + ytd-button-renderer[is-paper-button][align-by-text]:not(:empty) { + margin-left: -16px; + } + + ytd-button-renderer[is-paper-button][button-size=size-large] { + line-height: 24px; + } + + paper-button.ytd-button-renderer { + width: var(--yt-paper-button-width, auto); + height: var(--yt-paper-button-height, auto); + border-radius: inherit; + margin: 0; + padding: var(--yt-button-padding, 0.7em 0.57em); + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -ms-flex: 1 1 auto; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + ; + } + + ytd-button-renderer[start-justified] paper-button.ytd-button-renderer { + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + } + + ytd-button-renderer[vertically-aligned] paper-button.ytd-button-renderer { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + #button.ytd-button-renderer { + color: var(--yt-button-color); + background-color: var(--yt-button-background-color); + } + + ytd-button-renderer #button.ytd-button-renderer { + color: var(--yt-button-color, inherit); + background-color: transparent; + text-transform: inherit; + } + + button.ytd-button-renderer,yt-icon-button.ytd-button-renderer { + padding: 1px 6px; + } + + yt-icon-button.ytd-button-renderer { + width: var(--yt-button-icon-size, 40px); + height: var(--yt-button-icon-size, 40px); + color: var(--yt-endpoint-color, var(--yt-luna-black)); + } + + yt-icon-button.ytd-button-renderer::-moz-focus-inner { + padding: 0; + margin: 0; + border: 0; + } + + yt-icon-button.ytd-button-renderer[disabled] { + color: var(--yt-button-disabled-color, rgba(17, 17, 17, 0.2)); + } + + yt-icon-button.ytd-button-renderer { + line-height: 1; + padding: var(--yt-button-icon-padding, 8px); + width: var(--yt-button-icon-size, var(--yt-icon-width, 40px)); + height: var(--yt-button-icon-size, var(--yt-icon-height, 40px)); + } + + yt-icon-button.ytd-button-renderer > yt-icon.ytd-button-renderer { + width: 100%; + height: 100%; + } + + #button.ytd-button-renderer yt-icon.ytd-button-renderer + yt-formatted-string.ytd-button-renderer { + margin-left: var(--yt-string-icon-padding, 8px); + } + + #button.ytd-button-renderer yt-formatted-string.ytd-button-renderer + yt-icon.ytd-button-renderer { + margin-left: var(--yt-button-icon-padding, 8px); + } + + ytd-button-renderer[vertically-aligned] #button.ytd-button-renderer yt-icon.ytd-button-renderer + yt-formatted-string.ytd-button-renderer { + margin-left: 0; + margin-top: var(--yt-string-icon-padding, 4px); + } + + ytd-button-renderer[vertically-aligned] #button.ytd-button-renderer yt-formatted-string.ytd-button-renderer + yt-icon.ytd-button-renderer { + margin-left: 0; + margin-top: var(--yt-button-icon-padding, 4px); + } + + ytd-ad-hover-text-button-renderer { + opacity: 0.9; + display: block; + } + + ytd-ad-hover-text-button-renderer:hover { + opacity: 1; + } + + #ad-info-tooltip.ytd-ad-hover-text-button-renderer { + white-space: nowrap; + } + + #info-button.ytd-ad-hover-text-button-renderer { + position: relative; + vertical-align: top; + width: 15px; + height: 15px; + --yt-button-icon-padding: 1px; + --yt-button-icon-size: 15px; + -ms-align-self: center; + -webkit-align-self: center; + align-self: center; + } + + #info-button.ytd-ad-hover-text-button-renderer > a { + cursor: pointer; + position: absolute; + top: 0; + right: 0; + } + + ytd-live-chat-product-item-renderer { + --yt-live-chat-primary-text-color: var(--yt-spec-static-overlay-text-primary); + --yt-live-chat-author-chip-owner-background-color: #ffd600; + --yt-live-chat-author-chip-owner-text-color: rgba(0, 0, 0, 0.87); + display: block; + padding-bottom: 4px; + padding-left: 24px; + width: calc(100% - 48px); + } + + ytd-live-chat-product-item-renderer:hover,ytd-live-chat-product-item-renderer.hover { + background-color: var(--yt-spec-badge-chip-background); + border-radius: 2px; + } + + ytd-live-chat-product-item-renderer:hover,ytd-live-chat-product-item-renderer.hover .description-card-merchant.ytd-live-chat-product-item-renderer,ytd-live-chat-product-item-renderer:hover,ytd-live-chat-product-item-renderer.hover .description-card-merchant.ytd-live-chat-product-item-renderer yt-icon.ytd-live-chat-product-item-renderer { + color: var(--yt-spec-static-overlay-call-to-action); + } + + .yt-simple-endpoint.ytd-live-chat-product-item-renderer { + display: inline-block; + cursor: pointer; + text-decoration: none; + color: var(--yt-endpoint-color, var(--yt-spec-text-primary)); + } + + .yt-simple-endpoint.ytd-live-chat-product-item-renderer:hover { + color: var(--yt-endpoint-hover-color, var(--yt-spec-text-primary)); + text-decoration: var(--yt-endpoint-text-decoration, none); + } + + #merch-item-container.yt-simple-endpoint.ytd-live-chat-product-item-renderer { + display: block; + text-decoration: none; + } + + ytd-live-chat-product-item-renderer[in-collapsed-banner] #merch-item-container.ytd-live-chat-product-item-renderer { + display: none; + } + + #container.ytd-live-chat-product-item-renderer { + background-color: rgba(0, 0, 0, 0.3); + border-radius: 4px; + margin-left: 0; + overflow: hidden; + width: 100%; + } + + #unavailable-product-card.ytd-live-chat-product-item-renderer { + padding: 8px 9px 8px 12px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + #unavailable-product-card-title.ytd-live-chat-product-item-renderer { + color: var(--yt-spec-static-overlay-text-primary); + font-size: 14px; + font-weight: 500; + line-height: 18px; + } + + #unavailable-product-card-link.ytd-live-chat-product-item-renderer { + color: var(--yt-spec-static-overlay-call-to-action); + margin-top: 10px; + font-size: 12px; + font-weight: 400; + line-height: 16px; + } + + #product-card.ytd-live-chat-product-item-renderer { + height: 76px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + } + + #product-card-image.ytd-live-chat-product-item-renderer { + background-color: var(--yt-spec-static-brand-white); + display: flex; + justify-content: center; + overflow: hidden; + padding: 4px 0; + width: 76px; + } + + #product-card-image.ytd-live-chat-product-item-renderer yt-img-shadow.ytd-live-chat-product-item-renderer { + height: 68px; + width: 68px; + } + + #product-card-info.ytd-live-chat-product-item-renderer { + padding: 8px 9px 8px 12px; + position: relative; + width: calc(100% - 111px); + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex: 1 1 1e-9px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 1e-9px; + flex-basis: 1e-9px; + } + + #product-card-title.ytd-live-chat-product-item-renderer { + color: var(--yt-spec-static-overlay-text-primary); + position: relative; + font-size: 12px; + font-weight: 400; + line-height: 16px; + } + + #product-card-title-text.ytd-live-chat-product-item-renderer { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: calc(100% - 20px); + } + + #product-card-price.ytd-live-chat-product-item-renderer { + color: var(--yt-spec-static-overlay-text-primary); + margin-bottom: 8px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + font-weight: 500; + line-height: 18px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex: 1 1 1e-9px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 1e-9px; + flex-basis: 1e-9px; + } + + #product-card-merchant.ytd-live-chat-product-item-renderer { + color: var(--yt-spec-static-overlay-call-to-action); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 12px; + font-weight: 400; + line-height: 16px; + } + + #product-card-merchant.ytd-live-chat-product-item-renderer { + padding-bottom: 2px; + } + + ytd-live-chat-product-item-renderer[in-collapsed-banner] #creator-message.ytd-live-chat-product-item-renderer { + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; + } + + ytd-live-chat-product-item-renderer[in-collapsed-banner] #creator-name.ytd-live-chat-product-item-renderer { + flex-shrink: 0; + } + + ytd-live-chat-product-item-renderer[in-collapsed-banner] #creator-message-content.ytd-live-chat-product-item-renderer { + width: calc(100% - 36px); + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + } + + #creator-message-content.ytd-live-chat-product-item-renderer { + font-size: 0; + } + + #creator-name.ytd-live-chat-product-item-renderer { + background-color: #ffd600; + border-radius: 2px; + color: rgba(0, 0, 0, 0.87); + display: inline-block; + height: 16px; + margin-right: 4px; + padding: 2px 4px; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + display: -ms-inline-flexbox; + display: -webkit-inline-flex; + display: inline-flex; + font-size: 12px; + font-weight: 400; + line-height: 12px; + } + + #creator-name.ytd-live-chat-product-item-renderer yt-icon.ytd-live-chat-product-item-renderer { + color: rgba(0, 0, 0, 0.87); + padding-bottom: 2px; + padding-left: 4px; + } + + #creator-message.ytd-live-chat-product-item-renderer { + color: var(--yt-spec-static-overlay-text-secondary); + overflow-wrap: break-word; + overflow: hidden; + padding-left: 2px; + word-break: break-word; + word-wrap: break-word; + font-size: 13px; + font-weight: 400; + line-height: 18px; + } + + #creator-message.ytd-live-chat-product-item-renderer yt-icon.ytd-live-chat-product-item-renderer { + display: block; + height: 16px; + width: 16px; + } + + #creator-photo.ytd-live-chat-product-item-renderer { + border-radius: 50%; + height: 24px; + margin-right: 12px; + margin-top: -3px; + overflow: hidden; + width: 24px; + -ms-flex: none; + -webkit-flex: none; + flex: none; + } + + #creator-message-container.ytd-live-chat-product-item-renderer { + padding-top: 7px; + padding-bottom: 12px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + } + + #item-whitespace.ytd-live-chat-product-item-renderer { + width: 5px; + } + + #single-item-additional-fees-text.ytd-live-chat-product-item-renderer { + color: var(--yt-spec-static-overlay-text-primary); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 12px; + font-weight: 400; + line-height: 16px; + } + + yt-icon.ytd-live-chat-product-item-renderer { + color: var(--yt-spec-static-overlay-call-to-action); + flex-shrink: 0; + height: 15px; + width: 15px; + } + + #information-icon.ytd-live-chat-product-item-renderer { + display: block; + opacity: 0.9; + position: absolute; + right: 0; + top: -2.5px; + } + + #information-icon.ytd-live-chat-product-item-renderer:hover { + opacity: 1; + } + + #info-button.ytd-live-chat-product-item-renderer { + --yt-icon-button-icon-height: 14px; + --yt-icon-button-icon-width: 14px; + --yt-spec-icon-inactive: var(--yt-spec-static-overlay-icon-inactive); + --yt-button-icon-padding: 1px; + --yt-button-icon-size: 15px; + } + + yt-live-chat-banner-renderer { + display: block; + padding: 4px 8px 4px 18px; + border-radius: 4px; + position: relative; + overflow: hidden; + cursor: pointer; + contain: content; + + + --yt-live-chat-primary-text-color: var(--yt-spec-static-overlay-text-primary); + --yt-live-chat-secondary-text-color: var(--yt-spec-static-overlay-text-secondary); + --yt-live-chat-tertiary-text-color: var(--yt-spec-static-overlay-text-disabled); + --yt-live-chat-deleted-message-color: var(--yt-spec-static-overlay-text-disabled); + --yt-live-chat-sponsor-color: var(--yt-spec-static-overlay-text-secondary); + --yt-live-chat-moderator-color: var(--yt-spec-static-overlay-text-secondary); + } + + yt-live-chat-banner-renderer[is-poll-banner] { + padding-left: 0; + padding-top: 0; + } + + #contents.yt-live-chat-banner-renderer { + padding: 0 8px 4px 12px; + transition: transform var(--yt-live-chat-universal-motion-curve), + height var(--yt-live-chat-universal-motion-curve), + padding-bottom var(--yt-live-chat-universal-motion-curve); + transition-duration: var(--yt-live-chat-banner-animation-duration); + } + + yt-live-chat-banner-renderer[is-poll-banner] #contents.yt-live-chat-banner-renderer { + padding-right: 0; + padding-left: 0; + } + + yt-live-chat-banner-renderer[collapsed] #contents.yt-live-chat-banner-renderer { + padding-bottom: 0; + } + + yt-live-chat-banner-renderer[collapsed]:not([is-poll-banner]) #contents.yt-live-chat-banner-renderer { + pointer-events: none; + } + + .background.yt-live-chat-banner-renderer { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + } + + #contents.yt-live-chat-banner-renderer > *.yt-live-chat-banner-renderer { + background-color: transparent; + } + + yt-live-chat-banner-renderer[is-poll-banner] #header.yt-live-chat-banner-renderer { + display: none; + } + + #indeterminate-bar.yt-live-chat-banner-renderer { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: var(--yt-live-chat-banner-indeterminate-bar-background); + + + margin-right: -9px; + animation: slide-horizontal infinite linear; + animation-duration: var(--yt-live-chat-banner-bar-animation-duration); + } + + @keyframes slide-horizontal { + 0% { + transform: translateX(0); + } + + 100% { + transform: translateX(-9px); + } + + } + + yt-live-chat-banner-manager { + display: block; + } + + yt-live-chat-banner-renderer.yt-live-chat-banner-manager { + border: 1px solid var(--yt-live-chat-banner-border-color); + } + + yt-live-chat-banner-renderer.yt-live-chat-banner-manager:not(:first-of-type) { + margin-top: 8px; + } + + yt-live-chat-banner-manager[has-visible-banner] { + background: var(--yt-live-chat-banner-gradient-scrim); + } + + yt-live-chat-banner-manager[has-visible-banner] yt-live-chat-banner-renderer.yt-live-chat-banner-manager { + animation: slideDown var(--yt-live-chat-universal-motion-curve) forwards; + animation-duration: var(--yt-live-chat-banner-animation-duration); + } + + @keyframes slideDown { + 0% { + transform: translateY(-15%); + opacity: 0; + } + + 100% { + transform: translateY(0); + opacity: 1; + } + + } + + yt-live-chat-docked-message-renderer { + display: block; + overflow: hidden; + } + + yt-live-chat-docked-message-renderer[is-undocking] #undocking-item.yt-live-chat-docked-message-renderer yt-live-chat-text-message-renderer.yt-live-chat-docked-message-renderer { + animation: fadeOut ease-out 0.5s forwards; + } + + #container.yt-live-chat-docked-message-renderer { + z-index: 0; + } + + #undocking-item.yt-live-chat-docked-message-renderer { + z-index: 1; + } + + #docked-item.yt-live-chat-docked-message-renderer,#undocking-item.yt-live-chat-docked-message-renderer { + margin: 8px 24px 0 8px; + } + + #docked-item.yt-live-chat-docked-message-renderer yt-live-chat-text-message-renderer.yt-live-chat-docked-message-renderer,#undocking-item.yt-live-chat-docked-message-renderer yt-live-chat-text-message-renderer.yt-live-chat-docked-message-renderer { + border-radius: 4px; + + padding-left: 16px; + } + + @keyframes fadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } + + } + + yt-live-chat-donation-announcement-renderer { + position: relative; + display: block; + padding: 4px 24px; + + --yt-live-chat-donation-chip-background-color: #e0e0e0; + --yt-live-chat-donation-chip-text-color: #262626; + --yt-live-chat-item-timestamp-display: none; + } + + yt-live-chat-donation-announcement-renderer[dashboard-money-feed] { + padding: 0; + + --yt-live-chat-item-timestamp-display: block; + } + + #card.yt-live-chat-donation-announcement-renderer { + position: relative; + background-color: var(--yt-live-chat-secondary-background-color); + border-radius: 4px; + color: var(--yt-live-chat-primary-text-color); + padding: 12px 16px; + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + } + + yt-live-chat-donation-announcement-renderer[dashboard-money-feed] #card.yt-live-chat-donation-announcement-renderer { + background-color: transparent; + color: transparent; + } + + yt-live-chat-donation-announcement-renderer[dashboard-money-feed] #content-header.yt-live-chat-donation-announcement-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-baseline_-_-ms-flex-align); -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); align-items: var(--layout-baseline_-_align-items); + } + + #author-name.yt-live-chat-donation-announcement-renderer { + display: none; + } + + yt-live-chat-donation-announcement-renderer[dashboard-money-feed] #author-name.yt-live-chat-donation-announcement-renderer { + display: block; + font-size: 14px; + font-weight: 500; + margin-right: 8px; + color: var(--yt-live-chat-secondary-text-color); + overflow: hidden; + + -webkit-box-orient: var(--yt-multi-line-ellipsis_-_-webkit-box-orient); text-overflow: var(--yt-multi-line-ellipsis_-_text-overflow); white-space: var(--yt-multi-line-ellipsis_-_white-space); display: var(--yt-multi-line-ellipsis_-_display, block); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #text.yt-live-chat-donation-announcement-renderer { + display: block; + font-size: 14px; + margin-bottom: var(--ytd-margin-base); + } + + yt-live-chat-donation-announcement-renderer[dashboard-money-feed] #text.yt-live-chat-donation-announcement-renderer { + height: 24px; + min-width: 16px; + border-radius: 12px; + margin-right: 8px; + padding: 0 12px; + background-color: var(--yt-live-chat-donation-chip-background-color); + color: var(--yt-live-chat-donation-chip-text-color); + + font-size: var(--ytd-badge_-_font-size); font-weight: var(--ytd-badge_-_font-weight); line-height: var(--ytd-badge_-_line-height); + display: var(--layout-inline_-_display); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + #subtext.yt-live-chat-donation-announcement-renderer { + display: block; + font-size: 12px; + } + + yt-live-chat-donation-announcement-renderer[dashboard-money-feed] #subtext.yt-live-chat-donation-announcement-renderer { + display: none; + } + + #author-photo.yt-live-chat-donation-announcement-renderer { + max-height: 40px; + } + + #menu.yt-live-chat-donation-announcement-renderer { + background: linear-gradient(to right, transparent, var(--yt-live-chat-secondary-background-color) 100%); + border-radius: 0 4px 4px 0; + } + + yt-live-chat-donation-announcement-renderer[dashboard-money-feed] #menu.yt-live-chat-donation-announcement-renderer { + margin-top: 8px; + background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%); + color: var(--yt-live-chat-secondary-text-color); + } + + #timestamp.yt-live-chat-donation-announcement-renderer { + display: var(--yt-live-chat-item-timestamp-display, inline); + margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0); + color: var(--yt-live-chat-tertiary-text-color); + font-size: 11px; + } + + #author-photo.yt-live-chat-donation-announcement-renderer { + display: block; + margin-right: 16px; + + overflow: hidden; + border-radius: 50%; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #menu-button.yt-live-chat-donation-announcement-renderer { + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + #menu.yt-live-chat-donation-announcement-renderer { + position: absolute; + top: 0; + bottom: 0; + right: 0; + + + transform: translateX(100px); + } + + yt-live-chat-donation-announcement-renderer:hover #menu.yt-live-chat-donation-announcement-renderer,yt-live-chat-donation-announcement-renderer[menu-visible] #menu.yt-live-chat-donation-announcement-renderer { + transform: none; + } + + yt-live-chat-donation-announcement-renderer:focus-within #menu.yt-live-chat-donation-announcement-renderer { + transform: none; + } + + #inline-action-button-container.yt-live-chat-donation-announcement-renderer { + position: absolute; + top: -4px; + right: 0; + bottom: -4px; + left: 0; + + background-color: var(--yt-live-chat-moderation-mode-hover-background-color); + display: none; + + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + yt-live-chat-donation-announcement-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-donation-announcement-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + + + display: var(--yt-live-chat-inline-action-button-container-display, none); + } + + yt-live-chat-donation-announcement-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-donation-announcement-renderer { + display: none; + } + + yt-live-chat-donation-announcement-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-donation-announcement-renderer { + display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block); + } + + #inline-action-buttons.yt-live-chat-donation-announcement-renderer > *.yt-live-chat-donation-announcement-renderer,#additional-inline-action-buttons.yt-live-chat-donation-announcement-renderer > *.yt-live-chat-donation-announcement-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; + + color: var(--yt-white); + border-radius: 2px; + } + + #inline-action-buttons.yt-live-chat-donation-announcement-renderer > *.yt-live-chat-donation-announcement-renderer { + background: var(--yt-luna-black-opacity-lighten-1); + } + + #inline-action-buttons.yt-live-chat-donation-announcement-renderer > .yt-live-chat-donation-announcement-renderer:hover { + background: var(--yt-luna-black); + } + + #additional-inline-action-buttons.yt-live-chat-donation-announcement-renderer > *.yt-live-chat-donation-announcement-renderer { + color: var(--yt-live-chat-additional-inline-action-button-color); + background: var(--yt-live-chat-additional-inline-action-button-background-color); + } + + #additional-inline-action-buttons.yt-live-chat-donation-announcement-renderer > .yt-live-chat-donation-announcement-renderer:hover { + background: var(--yt-live-chat-additional-inline-action-button-background-color-hover); + } + + #additional-inline-action-buttons.yt-live-chat-donation-announcement-renderer:not(:empty) { + margin-left: 32px; + } + + #inline-action-buttons.yt-live-chat-donation-announcement-renderer > *.yt-live-chat-donation-announcement-renderer:not(:first-child),#additional-inline-action-buttons.yt-live-chat-donation-announcement-renderer > *.yt-live-chat-donation-announcement-renderer:not(:first-child) { + margin-left: 8px; + } + + yt-live-chat-legacy-paid-message-renderer { + position: relative; + display: block; + + --yt-live-chat-sponsor-color: #0f9d58; + --yt-live-chat-item-timestamp-display: var(--yt-live-chat-paid-message-timestamp-display, none); + + padding: 4px 24px; + } + + yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] { + padding: 0; + } + + #card.yt-live-chat-legacy-paid-message-renderer { + position: relative; + padding: 8px 16px; + + background-color: var(--yt-live-chat-sponsor-color); + border-radius: 4px; + color: #fff; + font-size: 14px; + min-height: 40px; + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + } + + yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #card.yt-live-chat-legacy-paid-message-renderer { + border-radius: 0; + box-shadow: none; + background-color: var(--yt-live-chat-background-color); + color: rgba(0, 0, 0, 0.87); + } + + #author-photo.yt-live-chat-legacy-paid-message-renderer { + -ms-align-self: var(--layout-self-start_-_-ms-align-self); -webkit-align-self: var(--layout-self-start_-_-webkit-align-self); align-self: var(--layout-self-start_-_align-self); + } + + #author-name.yt-live-chat-legacy-paid-message-renderer { + display: none; + } + + yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-legacy-paid-message-renderer { + display: block; + margin-right: 8px; + color: var(--yt-live-chat-secondary-text-color); + font-weight: 500; + } + + #content.yt-live-chat-legacy-paid-message-renderer { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #content.yt-live-chat-legacy-paid-message-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #content-primary-column.yt-live-chat-legacy-paid-message-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-baseline_-_-ms-flex-align); -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); align-items: var(--layout-baseline_-_align-items); + } + + #event-text.yt-live-chat-legacy-paid-message-renderer { + color: rgba(255, 255, 255, 0.7); + font-weight: 500; + } + + yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #event-text.yt-live-chat-legacy-paid-message-renderer { + display: inline; + height: 24px; + min-width: 16px; + border-radius: 12px; + margin-right: 8px; + padding: 0 12px; + background-color: var(--yt-live-chat-sponsor-color); + color: var(--yt-white); + display: var(--layout-inline_-_display, inline); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + font-size: var(--ytd-badge_-_font-size); font-weight: var(--ytd-badge_-_font-weight); line-height: var(--ytd-badge_-_line-height); + } + + #detail-text.yt-live-chat-legacy-paid-message-renderer { + font-size: 15px; + word-wrap: break-word; + word-break: break-word; + } + + #detail-text.yt-live-chat-legacy-paid-message-renderer .emoji.yt-live-chat-legacy-paid-message-renderer { + width: var(--yt-live-chat-emoji-size); + height: var(--yt-live-chat-emoji-size); + + margin: -1px 2px 1px 2px; + vertical-align: middle; + } + + yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #detail-text.yt-live-chat-legacy-paid-message-renderer { + display: none; + } + + a.yt-live-chat-legacy-paid-message-renderer { + display: inline; + text-decoration: underline; + } + + #detail-text.yt-live-chat-legacy-paid-message-renderer a.yt-live-chat-legacy-paid-message-renderer { + word-break: break-all; + } + + #detail-text.yt-live-chat-legacy-paid-message-renderer a.yt-live-chat-legacy-paid-message-renderer .mention.yt-live-chat-legacy-paid-message-renderer { + text-decoration: underline; + } + + #menu.yt-live-chat-legacy-paid-message-renderer { + background: linear-gradient(to right, transparent, var(--yt-live-chat-sponsor-color) 100%); + border-radius: 0 4px 4px 0; + } + + yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #menu.yt-live-chat-legacy-paid-message-renderer { + margin-top: 8px; + background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%); + } + + #timestamp.yt-live-chat-legacy-paid-message-renderer { + display: var(--yt-live-chat-item-timestamp-display, inline); + margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0); + color: var(--yt-live-chat-tertiary-text-color); + font-size: 11px; + } + + #author-photo.yt-live-chat-legacy-paid-message-renderer { + display: block; + margin-right: 16px; + + overflow: hidden; + border-radius: 50%; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #menu-button.yt-live-chat-legacy-paid-message-renderer { + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + #menu.yt-live-chat-legacy-paid-message-renderer { + position: absolute; + top: 0; + bottom: 0; + right: 0; + + + transform: translateX(100px); + } + + yt-live-chat-legacy-paid-message-renderer:hover #menu.yt-live-chat-legacy-paid-message-renderer,yt-live-chat-legacy-paid-message-renderer[menu-visible] #menu.yt-live-chat-legacy-paid-message-renderer { + transform: none; + } + + yt-live-chat-legacy-paid-message-renderer:focus-within #menu.yt-live-chat-legacy-paid-message-renderer { + transform: none; + } + + #inline-action-button-container.yt-live-chat-legacy-paid-message-renderer { + position: absolute; + top: -4px; + right: 0; + bottom: -4px; + left: 0; + + background-color: var(--yt-live-chat-moderation-mode-hover-background-color); + display: none; + + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + yt-live-chat-legacy-paid-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-legacy-paid-message-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + + + display: var(--yt-live-chat-inline-action-button-container-display, none); + } + + yt-live-chat-legacy-paid-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-legacy-paid-message-renderer { + display: none; + } + + yt-live-chat-legacy-paid-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-legacy-paid-message-renderer { + display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block); + } + + #inline-action-buttons.yt-live-chat-legacy-paid-message-renderer > *.yt-live-chat-legacy-paid-message-renderer,#additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer > *.yt-live-chat-legacy-paid-message-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; + + color: var(--yt-white); + border-radius: 2px; + } + + #inline-action-buttons.yt-live-chat-legacy-paid-message-renderer > *.yt-live-chat-legacy-paid-message-renderer { + background: var(--yt-luna-black-opacity-lighten-1); + } + + #inline-action-buttons.yt-live-chat-legacy-paid-message-renderer > .yt-live-chat-legacy-paid-message-renderer:hover { + background: var(--yt-luna-black); + } + + #additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer > *.yt-live-chat-legacy-paid-message-renderer { + color: var(--yt-live-chat-additional-inline-action-button-color); + background: var(--yt-live-chat-additional-inline-action-button-background-color); + } + + #additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer > .yt-live-chat-legacy-paid-message-renderer:hover { + background: var(--yt-live-chat-additional-inline-action-button-background-color-hover); + } + + #additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer:not(:empty) { + margin-left: 32px; + } + + #inline-action-buttons.yt-live-chat-legacy-paid-message-renderer > *.yt-live-chat-legacy-paid-message-renderer:not(:first-child),#additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer > *.yt-live-chat-legacy-paid-message-renderer:not(:first-child) { + margin-left: 8px; + } + + yt-live-chat-mode-change-message-renderer { + display: block; + margin: 8px 0; + padding: 0 24px; + color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color)); + font-size: 13px; + } + + #contents.yt-live-chat-mode-change-message-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + padding: 16px 30px; + border-radius: 4px; + background: var(--yt-live-chat-mode-change-background-color, var(--yt-opalescence-soft-grey)); + } + + #text-container.yt-live-chat-mode-change-message-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + yt-icon.yt-live-chat-mode-change-message-renderer { + width: 40px; + height: 40px; + margin-bottom: 8px; + } + + #text.yt-live-chat-mode-change-message-renderer { + font-weight: 500; + } + + #subtext.yt-live-chat-mode-change-message-renderer { + margin-top: 4px; + color: var(--yt-live-chat-secondary-text-color, var(--yt-secondary-text-color)); + font-style: italic; + } + + #buttons.yt-live-chat-mode-change-message-renderer { + margin-top: 16px; + min-height: 32px; + } + + #buttons.yt-live-chat-mode-change-message-renderer:empty { + display: none; + } + + yt-live-chat-moderation-message-renderer { + display: block; + position: relative; + padding: 8px 24px; + font-size: 13px; + color: var(--yt-live-chat-deleted-message-color); + } + + yt-live-chat-moderation-message-renderer::before { + content: ''; + position: absolute; + display: block; + left: 8px; + top: 4px; + bottom: 4px; + width: 4px; + box-sizing: border-box; + border-radius: 2px; + background: var(--yt-live-chat-deleted-message-bar-color); + } + + #message.yt-live-chat-moderation-message-renderer { + line-height: 16px; + word-wrap: break-word; + } + + #timestamp.yt-live-chat-moderation-message-renderer { + display: var(--yt-live-chat-item-timestamp-display, inline); + margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0); + color: var(--yt-live-chat-tertiary-text-color); + font-size: 11px; + } + + #author-photo.yt-live-chat-moderation-message-renderer { + display: block; + margin-right: 16px; + + overflow: hidden; + border-radius: 50%; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #menu-button.yt-live-chat-moderation-message-renderer { + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + #menu.yt-live-chat-moderation-message-renderer { + position: absolute; + top: 0; + bottom: 0; + right: 0; + + + transform: translateX(100px); + } + + yt-live-chat-moderation-message-renderer:hover #menu.yt-live-chat-moderation-message-renderer,yt-live-chat-moderation-message-renderer[menu-visible] #menu.yt-live-chat-moderation-message-renderer { + transform: none; + } + + yt-live-chat-moderation-message-renderer:focus-within #menu.yt-live-chat-moderation-message-renderer { + transform: none; + } + + #inline-action-button-container.yt-live-chat-moderation-message-renderer { + position: absolute; + top: -4px; + right: 0; + bottom: -4px; + left: 0; + + background-color: var(--yt-live-chat-moderation-mode-hover-background-color); + display: none; + + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + yt-live-chat-moderation-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-moderation-message-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + + + display: var(--yt-live-chat-inline-action-button-container-display, none); + } + + yt-live-chat-moderation-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-moderation-message-renderer { + display: none; + } + + yt-live-chat-moderation-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-moderation-message-renderer { + display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block); + } + + #inline-action-buttons.yt-live-chat-moderation-message-renderer > *.yt-live-chat-moderation-message-renderer,#additional-inline-action-buttons.yt-live-chat-moderation-message-renderer > *.yt-live-chat-moderation-message-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; + + color: var(--yt-white); + border-radius: 2px; + } + + #inline-action-buttons.yt-live-chat-moderation-message-renderer > *.yt-live-chat-moderation-message-renderer { + background: var(--yt-luna-black-opacity-lighten-1); + } + + #inline-action-buttons.yt-live-chat-moderation-message-renderer > .yt-live-chat-moderation-message-renderer:hover { + background: var(--yt-luna-black); + } + + #additional-inline-action-buttons.yt-live-chat-moderation-message-renderer > *.yt-live-chat-moderation-message-renderer { + color: var(--yt-live-chat-additional-inline-action-button-color); + background: var(--yt-live-chat-additional-inline-action-button-background-color); + } + + #additional-inline-action-buttons.yt-live-chat-moderation-message-renderer > .yt-live-chat-moderation-message-renderer:hover { + background: var(--yt-live-chat-additional-inline-action-button-background-color-hover); + } + + #additional-inline-action-buttons.yt-live-chat-moderation-message-renderer:not(:empty) { + margin-left: 32px; + } + + #inline-action-buttons.yt-live-chat-moderation-message-renderer > *.yt-live-chat-moderation-message-renderer:not(:first-child),#additional-inline-action-buttons.yt-live-chat-moderation-message-renderer > *.yt-live-chat-moderation-message-renderer:not(:first-child) { + margin-left: 8px; + } + + yt-live-chat-server-error-message { + display: var(--yt-live-chat-server-error-message-display, block); + position: relative; + padding: 4px 24px; + } + + span#timestamp.yt-live-chat-server-error-message { + font-size: 10px; + } + + #message.yt-live-chat-server-error-message { + color: var(--yt-live-chat-deleted-message-color, rgba(0, 0, 0, 0.5)); + font-size: 12px; + font-style: italic; + line-height: 16px; + word-wrap: break-word; + } + + yt-live-chat-server-error-message::before { + content: ''; + position: absolute; + display: block; + left: 8px; + top: 4px; + bottom: 4px; + width: 1px; + box-sizing: border-box; + border-radius: 2px; + border: 2px solid var(--yt-live-chat-error-message-color); + } + + yt-live-chat-server-error-message.reconnect::before { + border: 2px solid var(--yt-live-chat-reconnect-message-color); + } + + #timestamp.yt-live-chat-server-error-message { + display: var(--yt-live-chat-item-timestamp-display, inline); + margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0); + color: var(--yt-live-chat-tertiary-text-color); + font-size: 11px; + } + + #author-photo.yt-live-chat-server-error-message { + display: block; + margin-right: 16px; + + overflow: hidden; + border-radius: 50%; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #menu-button.yt-live-chat-server-error-message { + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + #menu.yt-live-chat-server-error-message { + position: absolute; + top: 0; + bottom: 0; + right: 0; + + + transform: translateX(100px); + } + + yt-live-chat-server-error-message:hover #menu.yt-live-chat-server-error-message,yt-live-chat-server-error-message[menu-visible] #menu.yt-live-chat-server-error-message { + transform: none; + } + + yt-live-chat-server-error-message:focus-within #menu.yt-live-chat-server-error-message { + transform: none; + } + + #inline-action-button-container.yt-live-chat-server-error-message { + position: absolute; + top: -4px; + right: 0; + bottom: -4px; + left: 0; + + background-color: var(--yt-live-chat-moderation-mode-hover-background-color); + display: none; + + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + yt-live-chat-server-error-message[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-server-error-message { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + + + display: var(--yt-live-chat-inline-action-button-container-display, none); + } + + yt-live-chat-server-error-message[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-server-error-message { + display: none; + } + + yt-live-chat-server-error-message[has-inline-action-buttons]:hover #menu.yt-live-chat-server-error-message { + display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block); + } + + #inline-action-buttons.yt-live-chat-server-error-message > *.yt-live-chat-server-error-message,#additional-inline-action-buttons.yt-live-chat-server-error-message > *.yt-live-chat-server-error-message { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; + + color: var(--yt-white); + border-radius: 2px; + } + + #inline-action-buttons.yt-live-chat-server-error-message > *.yt-live-chat-server-error-message { + background: var(--yt-luna-black-opacity-lighten-1); + } + + #inline-action-buttons.yt-live-chat-server-error-message > .yt-live-chat-server-error-message:hover { + background: var(--yt-luna-black); + } + + #additional-inline-action-buttons.yt-live-chat-server-error-message > *.yt-live-chat-server-error-message { + color: var(--yt-live-chat-additional-inline-action-button-color); + background: var(--yt-live-chat-additional-inline-action-button-background-color); + } + + #additional-inline-action-buttons.yt-live-chat-server-error-message > .yt-live-chat-server-error-message:hover { + background: var(--yt-live-chat-additional-inline-action-button-background-color-hover); + } + + #additional-inline-action-buttons.yt-live-chat-server-error-message:not(:empty) { + margin-left: 32px; + } + + #inline-action-buttons.yt-live-chat-server-error-message > *.yt-live-chat-server-error-message:not(:first-child),#additional-inline-action-buttons.yt-live-chat-server-error-message > *.yt-live-chat-server-error-message:not(:first-child) { + margin-left: 8px; + } + + yt-live-chat-toast-renderer { + position: absolute; + box-sizing: border-box; + + right: 0; + bottom: 0; + left: 0; + padding: 16px; + + transition-duration: 0.2s; + transform: translateY(100%); + + border-radius: 2px; + + font-size: 14px; + color: var(--yt-live-chat-toast-text-color); + + word-break: break-word; + + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + } + + yt-live-chat-toast-renderer[is-showing-message] { + background-color: var(--yt-live-chat-toast-background-color); + transform: translateY(0); + } + + yt-live-chat-toast-renderer:not([is-message-visible]) { + height: 0; + padding: 0; + } + + #button.yt-live-chat-toast-renderer { + height: 36px; + } + + #button.yt-live-chat-toast-renderer > *.yt-live-chat-toast-renderer { + color: var(--yt-live-chat-toast-action-color); + margin-left: 8px; + } + + yt-live-chat-viewer-engagement-message-renderer { + display: block; + padding: 4px 24px; + font-size: 12px; + line-height: 16px; + overflow: hidden; + + --yt-endpoint-color: #2196F3; + --yt-endpoint-visited-color: #2196F3; + --yt-endpoint-hover-color: var(--yt-live-chat-primary-text-color); + } + + #card.yt-live-chat-viewer-engagement-message-renderer { + position: relative; + background-color: var(--yt-live-chat-vem-background-color); + border-radius: 4px; + padding: 12px 16px; + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + } + + #icon.yt-live-chat-viewer-engagement-message-renderer { + color: var(--yt-spec-static-brand-red); + margin-right: 16px; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #content.yt-live-chat-viewer-engagement-message-renderer { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + + + -ms-align-self: var(--layout-self-center_-_-ms-align-self); -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); align-self: var(--layout-self-center_-_align-self); + } + + #message.yt-live-chat-viewer-engagement-message-renderer { + color: var(--yt-live-chat-primary-text-color); + overflow-wrap: break-word; + word-break: break-word; + word-wrap: break-word; + } + + #action-button.yt-live-chat-viewer-engagement-message-renderer:not(:empty) { + margin: 2px 0 -4px -16px; + } + + #menu.yt-live-chat-viewer-engagement-message-renderer { + color: var(--yt-live-chat-secondary-text-color); + background: linear-gradient(to right, transparent 0%, var(--yt-live-chat-background-color, var(--yt-white)) 100%); + } + + #timestamp.yt-live-chat-viewer-engagement-message-renderer { + display: var(--yt-live-chat-item-timestamp-display, inline); + margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0); + color: var(--yt-live-chat-tertiary-text-color); + font-size: 11px; + } + + #author-photo.yt-live-chat-viewer-engagement-message-renderer { + display: block; + margin-right: 16px; + + overflow: hidden; + border-radius: 50%; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #menu-button.yt-live-chat-viewer-engagement-message-renderer { + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + #menu.yt-live-chat-viewer-engagement-message-renderer { + position: absolute; + top: 0; + bottom: 0; + right: 0; + + + transform: translateX(100px); + } + + yt-live-chat-viewer-engagement-message-renderer:hover #menu.yt-live-chat-viewer-engagement-message-renderer,yt-live-chat-viewer-engagement-message-renderer[menu-visible] #menu.yt-live-chat-viewer-engagement-message-renderer { + transform: none; + } + + yt-live-chat-viewer-engagement-message-renderer:focus-within #menu.yt-live-chat-viewer-engagement-message-renderer { + transform: none; + } + + #inline-action-button-container.yt-live-chat-viewer-engagement-message-renderer { + position: absolute; + top: -4px; + right: 0; + bottom: -4px; + left: 0; + + background-color: var(--yt-live-chat-moderation-mode-hover-background-color); + display: none; + + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + yt-live-chat-viewer-engagement-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-viewer-engagement-message-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + + + display: var(--yt-live-chat-inline-action-button-container-display, none); + } + + yt-live-chat-viewer-engagement-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-viewer-engagement-message-renderer { + display: none; + } + + yt-live-chat-viewer-engagement-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-viewer-engagement-message-renderer { + display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block); + } + + #inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer > *.yt-live-chat-viewer-engagement-message-renderer,#additional-inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer > *.yt-live-chat-viewer-engagement-message-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; + + color: var(--yt-white); + border-radius: 2px; + } + + #inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer > *.yt-live-chat-viewer-engagement-message-renderer { + background: var(--yt-luna-black-opacity-lighten-1); + } + + #inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer > .yt-live-chat-viewer-engagement-message-renderer:hover { + background: var(--yt-luna-black); + } + + #additional-inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer > *.yt-live-chat-viewer-engagement-message-renderer { + color: var(--yt-live-chat-additional-inline-action-button-color); + background: var(--yt-live-chat-additional-inline-action-button-background-color); + } + + #additional-inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer > .yt-live-chat-viewer-engagement-message-renderer:hover { + background: var(--yt-live-chat-additional-inline-action-button-background-color-hover); + } + + #additional-inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer:not(:empty) { + margin-left: 32px; + } + + #inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer > *.yt-live-chat-viewer-engagement-message-renderer:not(:first-child),#additional-inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer > *.yt-live-chat-viewer-engagement-message-renderer:not(:first-child) { + margin-left: 8px; + } + + ytd-live-chat-purchased-product-message-renderer { + background: var(--yt-spec-general-background-a); + display: inline-block; + padding: 4px 24px; + width: calc(100% - 48px); + } + + #container.ytd-live-chat-purchased-product-message-renderer { + background: var(--yt-spec-general-background-b); + border-radius: 2px; + overflow: hidden; + position: relative; + } + + #product-container.ytd-live-chat-purchased-product-message-renderer { + padding: 8px 8px 8px 16px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + } + + #purchased-message.ytd-live-chat-purchased-product-message-renderer { + color: var(--yt-spec-text-primary); + padding-bottom: 3px; + font-size: 14px; + font-weight: 400; + } + + #product-image.ytd-live-chat-purchased-product-message-renderer { + padding-right: 18px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex: none; + -webkit-flex: none; + flex: none; + } + + #product-info.ytd-live-chat-purchased-product-message-renderer { + min-width: 0; + padding-right: 20px; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -ms-flex: 1 1 auto; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + #product-title-container.ytd-live-chat-purchased-product-message-renderer { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + } + + #product-title.ytd-live-chat-purchased-product-message-renderer { + color: var(--yt-spec-call-to-action); + min-width: 0; + overflow: hidden; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 13px; + font-weight: 500; + } + + #product-title.ytd-live-chat-purchased-product-message-renderer[show-icon] { + padding-right: 20px; + } + + #product-title.ytd-live-chat-purchased-product-message-renderer yt-icon.ytd-live-chat-purchased-product-message-renderer { + color: inherit; + flex-shrink: 0; + height: 15px; + padding-left: 4px; + position: absolute; + right: 0; + width: 15px; + } + + #information-icon.ytd-live-chat-purchased-product-message-renderer { + display: block; + opacity: 0.9; + position: absolute; + right: 10px; + top: 10px; + } + + #information-icon.ytd-live-chat-purchased-product-message-renderer:hover { + opacity: 1; + } + + #info-button.ytd-live-chat-purchased-product-message-renderer { + color: var(--yt-spec-icon-active-other); + --yt-icon-button-icon-height: 15px; + --yt-icon-button-icon-width: 15px; + --yt-button-icon-padding: 0px; + --yt-button-icon-size: 15px; + } + + yt-img-shadow.ytd-live-chat-purchased-product-message-renderer { + border: 2px solid var(--yt-spec-brand-background-solid); + height: 36px; + width: 36px; + } + + yt-live-chat-item-list-renderer { + position: relative; + display: block; + overflow: hidden; + + z-index: 0; + } + + yt-live-chat-item-list-renderer[moderation-mode-enabled] { + --yt-live-chat-item-with-inline-actions-context-menu-display: none; + --yt-live-chat-inline-action-button-container-display: flex; + } + + #contents.yt-live-chat-item-list-renderer { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + #empty-state-message.yt-live-chat-item-list-renderer { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content); justify-content: var(--layout-center-justified_-_justify-content); + } + + #empty-state-message.yt-live-chat-item-list-renderer > yt-live-chat-message-renderer.yt-live-chat-item-list-renderer { + color: var(--yt-live-chat-tertiary-text-color); + background: transparent; + font-size: 18px; + + --yt-live-chat-message-renderer-text-align: center; + } + + yt-icon-button.yt-live-chat-item-list-renderer { + background-color: #2196f3; + border-radius: 999px; + bottom: 0; + color: #fff; + cursor: pointer; + width: 32px; + height: 32px; + margin: 0 calc(50% - 16px) 8px calc(50% - 16px); + padding: 4px; + position: absolute; + transition-property: bottom; + transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); + + transition-duration: 0.15s; + + + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + } + + yt-icon-button.yt-live-chat-item-list-renderer[disabled] { + bottom: -42px; + + color: #fff; + transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1); + } + + #item-scroller.yt-live-chat-item-list-renderer { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + overflow-x: hidden; + overflow-y: hidden; + padding-right: var(--scrollbar-width); + + overflow-anchor: none; + } + + yt-live-chat-item-list-renderer[allow-scroll] #item-scroller.yt-live-chat-item-list-renderer { + overflow-y: scroll; + padding-right: 0; + } + + #item-offset.yt-live-chat-item-list-renderer { + position: relative; + } + + #item-scroller.animated.yt-live-chat-item-list-renderer #item-offset.yt-live-chat-item-list-renderer { + overflow: hidden; + } + + #items.yt-live-chat-item-list-renderer { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + padding: var(--yt-live-chat-item-list-renderer-padding, 4px 0); + } + + #items.yt-live-chat-item-list-renderer > *.yt-live-chat-item-list-renderer:not(:first-child) { + border-top: var(--yt-live-chat-item-list-item-border, none); + } + + #item-scroller.animated.yt-live-chat-item-list-renderer #items.yt-live-chat-item-list-renderer { + bottom: 0; + left: 0; + position: absolute; + right: 0; + transform: translateY(0); + } + + #docked-messages.yt-live-chat-item-list-renderer { + z-index: 1; + position: absolute; + left: 0; + right: 0; + top: 0; + } + + yt-live-chat-paid-sticker-renderer.yt-live-chat-item-list-renderer { + padding: 4px 24px; + } + + yt-live-chat-paid-sticker-renderer.yt-live-chat-item-list-renderer[dashboard-money-feed] { + padding: 8px 16px; + } + + yt-live-chat-banner-manager.yt-live-chat-item-list-renderer { + z-index: 1; + position: absolute; + left: 0; + right: var(--scrollbar-width); + top: 0; + padding: 8px; + } + + yt-live-chat-poll-editor-input { + display: block; + --yt-live-chat-text-input-field-active-underline-color: none; + --yt-live-chat-text-input-field-inactive-underline-color: none; + color: var(--yt-live-chat-poll-primary-text-color); + } + + #input-container.yt-live-chat-poll-editor-input { + position: relative; + padding: 8px 16px; + border: 1px solid var(--yt-live-chat-poll-tertiary-text-color); + border-radius: var(--yt-live-chat-poll-choice-border-radius); + overflow: hidden; + } + + #input-container.yt-live-chat-poll-editor-input:focus-within { + border: 1px solid var(--yt-live-chat-poll-primary-text-color); + } + + #input.yt-live-chat-poll-editor-input { + font-size: 14px; + margin-right: 24px; + --yt-live-chat-text-input-field-placeholder-top: auto; + --yt-live-chat-text-input-field-placeholder-left: auto; + --yt-live-chat-text-input-field-placeholder-color: + var(--yt-live-chat-poll-tertiary-text-color); + --yt-live-chat-text-input-field-white-space: nowrap; + } + + yt-live-chat-poll-editor-input[has-prefilled-text] #input.yt-live-chat-poll-editor-input { + --yt-live-chat-text-input-field-placeholder-color: + var(--yt-live-chat-poll-secondary-text-color); + } + + #close-button.yt-live-chat-poll-editor-input,#char-count.yt-live-chat-poll-editor-input { + position: absolute; + right: 16px; + top: 50%; + } + + yt-live-chat-poll-editor-input[over-character-limit] #char-count.yt-live-chat-poll-editor-input,#close-button.yt-live-chat-poll-editor-input { + color: var(--yt-live-chat-poll-secondary-text-color); + } + + yt-live-chat-poll-editor-input:not([is-removable]) #close-button.yt-live-chat-poll-editor-input,#char-count.yt-live-chat-poll-editor-input { + visibility: hidden; + } + + #char-count.yt-live-chat-poll-editor-input { + transform: translateY(-50%); + color: var(--yt-live-chat-poll-primary-text-color); + } + + yt-live-chat-poll-editor-input:focus-within #content-right.yt-live-chat-poll-editor-input:not(:focus-within) #char-count.yt-live-chat-poll-editor-input { + display: inline; + visibility: visible; + } + + #close-button.yt-live-chat-poll-editor-input { + display: inline-block; + + transform: translate(100px, -50%); + } + + yt-live-chat-poll-editor-input[is-removable] #close-button.yt-live-chat-poll-editor-input:focus-within,yt-live-chat-poll-editor-input[is-removable]:not(:focus-within):hover #close-button.yt-live-chat-poll-editor-input { + transform: translate(0, -50%); + } + + #error-message.yt-live-chat-poll-editor-input { + display: none; + } + + yt-live-chat-poll-editor-input[show-error-message] #error-message.yt-live-chat-poll-editor-input { + display: block; + font-size: 12px; + line-height: 14px; + padding-top: 4px; + color: var(--yt-live-chat-poll-secondary-text-color); + } + + yt-live-chat-poll-editor-panel-renderer { + display: block; + background-color: var(--yt-live-chat-action-panel-background-color); + padding: 4px 0; + } + + .background.yt-live-chat-poll-editor-panel-renderer { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + } + + #panel-header.yt-live-chat-poll-editor-panel-renderer,#poll-editor-header.yt-live-chat-poll-editor-panel-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + padding-left: 13px; + } + + #panel-header.yt-live-chat-poll-editor-panel-renderer { + color: var(--yt-spec-text-secondary); + border-bottom: 1px solid var(--yt-live-chat-poll-editor-panel-header-border-color); + } + + #poll-editor-header.yt-live-chat-poll-editor-panel-renderer { + color: var(--yt-live-chat-poll-secondary-text-color); + font-size: 12px; + padding: 6px; + } + + #poll-editor-header.yt-live-chat-poll-editor-panel-renderer yt-icon.yt-live-chat-poll-editor-panel-renderer { + width: 16px; + height: 16px; + } + + #panel-title.yt-live-chat-poll-editor-panel-renderer,#poll-editor-title.yt-live-chat-poll-editor-panel-renderer { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + font-size: 13px; + margin-left: 8px; + } + + #panel-contents.yt-live-chat-poll-editor-panel-renderer { + padding: 4px 13px; + } + + #poll-editor.yt-live-chat-poll-editor-panel-renderer,#poll-editor-header.yt-live-chat-poll-editor-panel-renderer,#poll-options.yt-live-chat-poll-editor-panel-renderer,#poll-question-count.yt-live-chat-poll-editor-panel-renderer,#poll-question-sub-content.yt-live-chat-poll-editor-panel-renderer { + position: relative; + } + + #poll-editor.yt-live-chat-poll-editor-panel-renderer { + overflow: hidden; + padding: 4px 8px; + margin: 8px 0; + border-radius: 4px; + color: var(--yt-live-chat-poll-primary-text-color); + } + + yt-live-chat-text-input-field-renderer.yt-live-chat-poll-editor-panel-renderer { + padding: 8px 8px 4px 8px; + font-size: 14px; + --yt-live-chat-text-input-field-placeholder-top: auto; + --yt-live-chat-text-input-field-placeholder-left: auto; + --yt-live-chat-text-input-field-placeholder-color: + var(--yt-live-chat-poll-tertiary-text-color); + } + + #poll-question.yt-live-chat-poll-editor-panel-renderer { + --yt-live-chat-text-input-field-active-underline-color: + var(--yt-live-chat-poll-primary-text-color); + --yt-live-chat-text-input-field-inactive-underline-color: + var(--yt-live-chat-poll-tertiary-text-color); + } + + yt-live-chat-poll-editor-panel-renderer[over-question-character-limit] #poll-question.yt-live-chat-poll-editor-panel-renderer { + --yt-live-chat-text-input-field-active-underline-color: + var(--yt-live-chat-poll-tertiary-text-color); + } + + yt-live-chat-poll-editor-panel-renderer[over-question-character-limit] #poll-question-count.yt-live-chat-poll-editor-panel-renderer { + color: var(--yt-live-chat-poll-tertiary-text-color); + } + + #poll-question-sub-content.yt-live-chat-poll-editor-panel-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-pack: var(--layout-end-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-end-justified_-_-webkit-justify-content); justify-content: var(--layout-end-justified_-_justify-content); + padding-bottom: 4px; + } + + #poll-question-error-message.yt-live-chat-poll-editor-panel-renderer { + display: none; + padding-left: 8px; + font-size: 12px; + line-height: 14px; + color: var(--yt-live-chat-poll-secondary-text-color); + } + + yt-live-chat-poll-editor-panel-renderer[show-question-error-message] #poll-question-error-message.yt-live-chat-poll-editor-panel-renderer { + display: unset; + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + #poll-question-count.yt-live-chat-poll-editor-panel-renderer { + display: none; + text-align: end; + margin-right: 8px; + font-size: 12px; + line-height: 14px; + } + + yt-live-chat-poll-editor-panel-renderer[show-question-error-message] #poll-question-count.yt-live-chat-poll-editor-panel-renderer { + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #poll-question.yt-live-chat-poll-editor-panel-renderer:focus-within + #poll-question-sub-content.yt-live-chat-poll-editor-panel-renderer > #poll-question-count.yt-live-chat-poll-editor-panel-renderer { + display: block; + } + + #poll-options.yt-live-chat-poll-editor-panel-renderer { + padding: 8px; + } + + yt-live-chat-poll-editor-panel-renderer[has-max-num-poll-options] #poll-options.yt-live-chat-poll-editor-panel-renderer { + padding-bottom: 18px; + } + + yt-live-chat-poll-editor-input.yt-live-chat-poll-editor-panel-renderer { + margin-top: 8px; + } + + #add-option-button.yt-live-chat-poll-editor-panel-renderer { + display: var(--layout_-_display); + -ms-flex-pack: var(--layout-end-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-end-justified_-_-webkit-justify-content); justify-content: var(--layout-end-justified_-_justify-content); + } + + #poll-editor.yt-live-chat-poll-editor-panel-renderer,#add-option-button.yt-live-chat-poll-editor-panel-renderer yt-button-renderer.yt-live-chat-poll-editor-panel-renderer { + color: var(--yt-live-chat-poll-primary-text-color); + } + + #close-button.yt-live-chat-poll-editor-panel-renderer { + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #start-button.yt-live-chat-poll-editor-panel-renderer { + padding: 4px 0; + } + + #start-button.yt-live-chat-poll-editor-panel-renderer yt-button-renderer.yt-live-chat-poll-editor-panel-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + background-color: var(--yt-live-chat-poll-editor-start-button-background-color); + color: var(--yt-live-chat-poll-editor-start-button-color); + } + + #start-button.yt-live-chat-poll-editor-panel-renderer yt-button-renderer.yt-live-chat-poll-editor-panel-renderer[disabled] { + background-color: var(--yt-live-chat-poll-editor-start-button-background-color-disabled); + color: var(--yt-live-chat-poll-primary-text-color); + } + + #poll-option.yt-live-chat-poll-editor-panel-renderer { + position: relative; + } + + #remove-option-button.yt-live-chat-poll-editor-panel-renderer { + display: none; + color: var(--yt-live-chat-poll-secondary-text-color); + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + } + + #poll-option.yt-live-chat-poll-editor-panel-renderer:not(:focus-within):hover #remove-option-button.yt-live-chat-poll-editor-panel-renderer[is-removable] { + display: inline-block; + } + + #spinner-container.yt-live-chat-poll-editor-panel-renderer { + background-color: var(--yt-live-chat-action-panel-background-color); + display: var(--layout_-_display); + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + #poll-question-count-alt-label.yt-live-chat-poll-editor-panel-renderer { + position: absolute; + left: -1000px; + width: 1px; + height: 1px; + overflow: hidden; + } + + yt-live-chat-product-button-renderer:focus { + outline: none; + } + + paper-item.yt-live-chat-product-button-renderer { + margin: 0; + padding: 12px 16px 12px 24px; + text-transform: none; + } + + #endpoint.yt-live-chat-product-button-renderer:hover { + background-color: var(--yt-live-chat-product-picker-hover-color); + } + + #endpoint.yt-live-chat-product-button-renderer { + display: block; + } + + #container.yt-live-chat-product-button-renderer { + min-height: 32px; + } + + #text.yt-live-chat-product-button-renderer { + font-size: 16px; + line-height: 24px; + color: var(--yt-live-chat-primary-text-color); + + ; + } + + #subtext.yt-live-chat-product-button-renderer { + font-size: 12px; + line-height: 16px; + color: var(--yt-live-chat-secondary-text-color); + } + + yt-live-chat-product-button-renderer[disabled] a.yt-live-chat-product-button-renderer { + cursor: unset; + } + + yt-live-chat-product-button-renderer[disabled] #text.yt-live-chat-product-button-renderer,yt-live-chat-product-button-renderer[disabled] #subtext.yt-live-chat-product-button-renderer { + color: var(--yt-live-chat-tertiary-text-color); + } + + #icon.yt-live-chat-product-button-renderer { + padding-right: 32px; + color: var(--yt-live-chat-product-picker-icon-color); + } + + yt-live-chat-product-button-renderer[disabled] #icon.yt-live-chat-product-button-renderer { + color: var(--yt-live-chat-product-picker-disabled-icon-color); + } + + yt-live-chat-product-picker-renderer { + margin: 8px -8px; + + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + yt-live-chat-product-picker-renderer:focus { + outline: none; + } + + #title.yt-live-chat-product-picker-renderer { + color: var(--yt-live-chat-secondary-text-color); + font-family: 'Roboto'; + font-size: 14px; + font-weight: 500; + padding: 12px 24px 20px 24px; + + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + yt-live-chat-text-actions-error-message-renderer { + color: var(--yt-live-chat-error-message-color, #f44336); + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + yt-icon-button.yt-live-chat-text-actions-error-message-renderer { + margin-right: 8px; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + width: var(--yt-live-chat-32px-icon-button_-_width); height: var(--yt-live-chat-32px-icon-button_-_height); padding: var(--yt-live-chat-32px-icon-button_-_padding); + } + + error-text.yt-live-chat-text-actions-error-message-renderer { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + button.yt-live-chat-text-actions-error-message-renderer { + text-decoration: underline; + padding: 0; + border: none; + background-color: transparent; + cursor: pointer; + color: currentColor; + font-size: 100%; + } + + yt-live-chat-message-input-renderer { + display: block; + padding: 16px; + color: var(--yt-live-chat-primary-text-color); + background: var(--yt-live-chat-action-panel-background-color, var(--yt-opalescence-soft-grey-opacity-lighten-3)); + font-size: 13px; + position: relative; + + --yt-emoji-picker-renderer-content_-_margin: 0 24px;; + + --yt-emoji-picker-category-margin-left: 24px; + } + + #avatar.yt-live-chat-message-input-renderer { + margin-right: 16px; + + overflow: hidden; + border-radius: 50%; + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #top.yt-live-chat-message-input-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-start_-_-ms-flex-align); -webkit-align-items: var(--layout-start_-_-webkit-align-items); align-items: var(--layout-start_-_align-items); + } + + #top.yt-live-chat-message-input-renderer,#pickers.yt-live-chat-message-input-renderer,#error-message.yt-live-chat-message-input-renderer { + margin: 0px 8px; + } + + yt-live-chat-message-input-renderer[product-picker-open] { + padding: 0; + overflow-y: hidden; + } + + yt-live-chat-message-input-renderer[poll-editor-picker-open] { + padding-top: 0; + padding-bottom: 0; + } + + yt-live-chat-message-input-renderer[creator-open] #top.yt-live-chat-message-input-renderer,yt-live-chat-message-input-renderer[creator-open] #buttons.yt-live-chat-message-input-renderer,yt-live-chat-message-input-renderer[product-picker-open] #top.yt-live-chat-message-input-renderer,yt-live-chat-message-input-renderer[product-picker-open] #buttons.yt-live-chat-message-input-renderer,yt-live-chat-message-input-renderer[poll-editor-picker-open] #top.yt-live-chat-message-input-renderer,yt-live-chat-message-input-renderer[poll-editor-picker-open] #buttons.yt-live-chat-message-input-renderer { + display: none; + } + + #input-container.yt-live-chat-message-input-renderer { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + + min-width: 0; + } + + #input.yt-live-chat-message-input-renderer { + margin-top: 4px; + } + + yt-live-chat-message-renderer.yt-live-chat-message-input-renderer { + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + opacity: 0; + transition: opacity .125s linear; + padding: 16px 24px + } + + yt-live-chat-message-input-renderer:hover yt-live-chat-message-renderer.yt-live-chat-message-input-renderer,yt-live-chat-message-input-renderer:focus yt-live-chat-message-renderer.yt-live-chat-message-input-renderer { + opacity: 1; + } + + yt-live-chat-message-input-renderer[has-interaction-message]:hover #container.yt-live-chat-message-input-renderer { + opacity: 0; + } + + #buttons.yt-live-chat-message-input-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + margin: 4px 0 -8px 0; + } + + #message-buttons.yt-live-chat-message-input-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #count.yt-live-chat-message-input-renderer { + margin-right: 8px; + color: var(--yt-live-chat-secondary-text-color, var(--yt-luna-black-opacity-lighten-2)); + } + + #count.early-warning.yt-live-chat-message-input-renderer { + color: var(--yt-live-chat-count-color-early-warning, #fdd835); + } + + #count.warning.yt-live-chat-message-input-renderer { + color: var(--yt-live-chat-count-color-warning, #ff9800); + } + + #count.error.yt-live-chat-message-input-renderer { + color: var(--yt-live-chat-count-color-error, var(--yt-spec-brand-link-text)); + } + + #send-button.yt-live-chat-message-input-renderer { + transition: transform .5s .5s cubic-bezier(.175, .885, .32, 1.275); + } + + #send-button.yt-live-chat-message-input-renderer > *.yt-live-chat-message-input-renderer { + color: var(--yt-live-chat-enabled-send-button-color); + } + + #send-button.yt-live-chat-message-input-renderer > .yt-live-chat-message-input-renderer[disabled] { + color: var(--yt-live-chat-disabled-icon-button-color); + } + + #send-button.yt-live-chat-message-input-renderer[countdown-active] { + transform: scale(.55); + transition: transform 1s cubic-bezier(.23, 1, .32, 1); + } + + #countdown.yt-live-chat-message-input-renderer { + position: relative; + + left: -33px; + width: 24px; + height: 24px; + margin-right: -24px; + opacity: 0; + transition: opacity 1s; + pointer-events: none; + } + + #countdown.yt-live-chat-message-input-renderer[countdown-active] { + opacity: var(--yt-live-chat-countdown-opacity, 0.3); + transition: opacity 2s; + } + + circle.yt-live-chat-message-input-renderer { + fill: none; + stroke-linecap: square; + stroke-width: 2; + stroke: currentColor; + } + + #countdown-background.yt-live-chat-message-input-renderer { + opacity: 0.3; + } + + #countdown-line.yt-live-chat-message-input-renderer { + stroke-dasharray: 62.8318; + + + transform: translate(0, 24px) rotateZ(-90deg); + } + + yt-emoji-picker-renderer.yt-live-chat-message-input-renderer { + min-height: 130px; + max-height: 220px; + + margin: 16px -24px 0 -24px; + } + + yt-live-chat-poll-editor-panel-renderer.yt-live-chat-message-input-renderer { + margin: 0 -24px; + } + + #error-message.yt-live-chat-message-input-renderer { + margin: 16px 0 4px 0; + } + + #error-message.yt-live-chat-message-input-renderer:empty { + display: none; + } + + #picker-buttons.yt-live-chat-message-input-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #picker-buttons.yt-live-chat-message-input-renderer > *.yt-live-chat-message-input-renderer { + color: var(--yt-live-chat-picker-button-color); + } + + #picker-buttons.yt-live-chat-message-input-renderer .yt-live-chat-message-input-renderer:hover { + color: var(--yt-live-chat-picker-button-hover-color); + } + + #picker-buttons.yt-live-chat-message-input-renderer .yt-live-chat-message-input-renderer[active] { + color: var(--yt-live-chat-picker-button-active-color); + } + + #picker-buttons.yt-live-chat-message-input-renderer .yt-live-chat-message-input-renderer[disabled] { + color: var(--yt-live-chat-picker-button-disabled-color); + } + + yt-live-chat-ninja-message-renderer { + background: var(--yt-spec-general-background-a); + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + svg.yt-live-chat-ninja-message-renderer { + width: 300px; + height: 190px; + } + + #button.yt-live-chat-ninja-message-renderer { + margin-top: 12px; + } + + yt-formatted-string.yt-live-chat-ninja-message-renderer { + padding: 0 15px; + text-align: center; + } + + #container.yt-live-chat-participant-renderer { + padding: 4px 0; + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + } + + yt-img-shadow.yt-live-chat-participant-renderer { + margin: 0 16px 0 24px; + + overflow: hidden; + border-radius: 50%; + } + + yt-img-shadow.yt-live-chat-participant-renderer:not([loaded]).yt-live-chat-participant-renderer { + background-color: #444; + } + + yt-live-chat-participant-list-renderer { + color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color)); + + + z-index: 0; + + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + #header.yt-live-chat-participant-list-renderer { + padding: 8px; + height: 48px; + box-sizing: border-box; + + background-color: var(--yt-live-chat-action-panel-background-color, var(--yt-opalescence-soft-grey-opacity-lighten-3)); + + font-size: var(--yt-live-chat-header-font-size, 18px); + line-height: 24px; + + box-shadow: var(--yt-live-chat-header-box-shadow); + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + ; + + z-index: 1; + } + + #header.yt-live-chat-participant-list-renderer:focus { + outline: none; + } + + #back-button.yt-live-chat-participant-list-renderer { + margin: 0 8px; + } + + #back-button.yt-live-chat-participant-list-renderer > *.yt-live-chat-participant-list-renderer { + --yt-button-color: var(--yt-live-chat-primary-text-color, var(--yt-luna-black-opacity-lighten-3)); + } + + #participants.yt-live-chat-participant-list-renderer { + overflow-y: auto; + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + padding: 4px 0; + } + + yt-live-chat-pinned-message-renderer { + display: block; + padding-top: 4px; + z-index: 2; + + --yt-pdg-paid-stickers-author-name-font-size: 14px; + --yt-pdg-paid-stickers-author-subtext-font-size: 15px; + --yt-pdg-paid-stickers-margin-left: 56px; + --yt-live-chat-item-timestamp-display: none; + } + + #fade.yt-live-chat-pinned-message-renderer { + background-color: var(--yt-live-chat-overlay-color); + bottom: -100vh; + left: 0; + position: absolute; + right: 0; + top: 0; + } + + #message.yt-live-chat-pinned-message-renderer { + left: 0; + margin-right: var(--scrollbar-width); + position: absolute; + right: 0; + } + + yt-live-chat-paid-sticker-renderer.yt-live-chat-pinned-message-renderer { + margin: 4px 24px; + border-radius: 4px; + min-height: 40px; + background-color: var(--yt-dialog-background); + + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + } + + yt-live-chat-restricted-participation-renderer { + display: block; + box-sizing: border-box; + } + + #container.yt-live-chat-restricted-participation-renderer { + padding: 0 16px 0 24px; + background: var(--yt-live-chat-action-panel-background-color, var(--yt-opalescence-soft-grey-opacity-lighten-3)); + color: var(--yt-live-chat-secondary-text-color, var(--yt-secondary-text-color)); + font-size: 14px; + } + + #explanation.yt-live-chat-restricted-participation-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content); + min-height: 48px; + } + + #icon.yt-live-chat-restricted-participation-renderer { + width: 24px; + height: 24px; + margin-right: 16px; + + color: var(--yt-spec-icon-disabled, var(--yt-live-chat-disabled-icon-button-color)); + + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #body.yt-live-chat-restricted-participation-renderer { + padding: 11px 0 10px; + + -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex); + } + + #message.yt-live-chat-restricted-participation-renderer { + display: inline; + } + + #picker-buttons.yt-live-chat-restricted-participation-renderer > *.yt-live-chat-restricted-participation-renderer { + color: var(--yt-spec-icon-inactive, var(--yt-live-chat-icon-button-color)); + } + + #message-button.yt-live-chat-restricted-participation-renderer { + padding-top: 3px; + display: inline; + + --yt-paper-button-min-width: 0; + --yt-button-padding: 0 0; + --yt-paper-button-font-size: 14px; + } + + #message-button.yt-live-chat-restricted-participation-renderer:not(:empty)::before { + display: inline; + padding: 0 5px; + content: '·'; + font-weight: 500; + } + + yt-live-chat-restricted-participation-renderer[creator-open] #explanation.yt-live-chat-restricted-participation-renderer,yt-live-chat-restricted-participation-renderer[product-picker-open] #explanation.yt-live-chat-restricted-participation-renderer { + display: none; + } + + yt-live-chat-restricted-participation-renderer[creator-open] #container.yt-live-chat-restricted-participation-renderer { + padding: 8px 16px 8px 24px; + } + + yt-live-chat-restricted-participation-renderer[product-picker-open] #container.yt-live-chat-restricted-participation-renderer { + padding: 8px 16px; + margin: 0 -8px; + } + + #picker-buttons.yt-live-chat-restricted-participation-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #picker-buttons.yt-live-chat-restricted-participation-renderer > *.yt-live-chat-restricted-participation-renderer { + color: var(--yt-live-chat-picker-button-color); + } + + #picker-buttons.yt-live-chat-restricted-participation-renderer .yt-live-chat-restricted-participation-renderer:hover { + color: var(--yt-live-chat-picker-button-hover-color); + } + + #picker-buttons.yt-live-chat-restricted-participation-renderer .yt-live-chat-restricted-participation-renderer[active] { + color: var(--yt-live-chat-picker-button-active-color); + } + + #picker-buttons.yt-live-chat-restricted-participation-renderer .yt-live-chat-restricted-participation-renderer[disabled] { + color: var(--yt-live-chat-picker-button-disabled-color); + } + + yt-live-chat-ticker-sponsor-item-renderer { + display: inline-block; + font-size: 14px; + outline: none; + transition: width 0.2s; + vertical-align: top; + cursor: pointer; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + } + + #container.yt-live-chat-ticker-sponsor-item-renderer { + border-radius: 999px; + padding: 4px; + } + + yt-live-chat-ticker-sponsor-item-renderer.sliding-down #container.yt-live-chat-ticker-sponsor-item-renderer { + opacity: 0.5; + transform: translateY(44px); + transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0.0, 1, 1); + } + + yt-live-chat-ticker-sponsor-item-renderer.collapsing { + margin-right: 0; + transition: margin-right 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0.0, 0.2, 1); + } + + yt-live-chat-ticker-sponsor-item-renderer[dimmed] { + opacity: 0.5; + } + + yt-img-shadow.yt-live-chat-ticker-sponsor-item-renderer { + margin-right: -4px; + + overflow: hidden; + border-radius: 50%; + } + + #content.yt-live-chat-ticker-sponsor-item-renderer { + height: 24px; + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + #text.yt-live-chat-ticker-sponsor-item-renderer { + margin: 0 8px; + font-weight: 500; + } + + yt-live-chat-ticker-sponsor-item-renderer[is-deleted] #author-photo.yt-live-chat-ticker-sponsor-item-renderer { + display: none; + } + + yt-live-chat-ticker-renderer { + display: block; + background-color: var(--yt-live-chat-header-background-color); + } + + #container.yt-live-chat-ticker-renderer { + position: var(--layout-relative_-_position); + } + + #items.yt-live-chat-ticker-renderer { + height: 32px; + overflow: hidden; + white-space: nowrap; + padding: 0 24px 8px 24px; + } + + #items.yt-live-chat-ticker-renderer > *.yt-live-chat-ticker-renderer { + margin-right: 8px; + } + + #left-arrow-container.yt-live-chat-ticker-renderer { + background: linear-gradient(to right, var(--yt-live-chat-ticker-arrow-background) 0, var(--yt-live-chat-ticker-arrow-background) 52px, transparent 60px); + left: 0; + padding: 0 16px 0 12px; + } + + #right-arrow-container.yt-live-chat-ticker-renderer { + background: linear-gradient(to left, var(--yt-live-chat-ticker-arrow-background) 0, var(--yt-live-chat-ticker-arrow-background) 52px, transparent 60px); + right: 0; + padding: 0 12px 0 16px; + } + + #container.yt-live-chat-ticker-renderer:hover #left-arrow-container.yt-live-chat-ticker-renderer,#container.yt-live-chat-ticker-renderer:hover #right-arrow-container.yt-live-chat-ticker-renderer { + opacity: 1; + } + + #left-arrow-container.yt-live-chat-ticker-renderer,#right-arrow-container.yt-live-chat-ticker-renderer { + height: 32px; + opacity: 0; + position: absolute; + text-align: center; + top: 0; + transition: opacity 0.3s 0.1s; + } + + yt-icon.yt-live-chat-ticker-renderer { + background-color: #2196f3; + border-radius: 999px; + color: #fff; + cursor: pointer; + height: 24px; + padding: 4px; + width: 24px; + } + + yt-live-chat-upsell-dialog-renderer { + padding: 24px 40px; + + color: var(--yt-live-chat-primary-text-color); + + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content); justify-content: var(--layout-center-justified_-_justify-content); + } + + #card.yt-live-chat-upsell-dialog-renderer { + overflow: hidden; + background: var(--yt-dialog-background); + border: var(--yt-live-chat-upsell-dialog-renderer-border, none); + border-radius: var(--yt-live-chat-upsell-dialog-renderer-border-radius, 0); + + + box-shadow: var(--yt-live-chat-upsell-dialog-renderer-box-shadow, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4)); + } + + #content.yt-live-chat-upsell-dialog-renderer { + padding: 24px; + + padding: var(--live-chat-upsell-dialog-renderer-content_-_padding, 24px); + } + + yt-formatted-string.yt-live-chat-upsell-dialog-renderer { + display: block; + } + + #upsell-dialog-title.yt-live-chat-upsell-dialog-renderer { + margin-bottom: var(--ytd-margin-4x); + + font-size: var(--ytd-subheadline_-_font-size); font-weight: var(--ytd-subheadline_-_font-weight); line-height: var(--ytd-subheadline_-_line-height); letter-spacing: var(--ytd-subheadline_-_letter-spacing); + + font-size: var(--live-chat-upsell-dialog-renderer-title_-_font-size, var(--ytd-subheadline_-_font-size)); font-weight: var(--live-chat-upsell-dialog-renderer-title_-_font-weight, var(--ytd-subheadline_-_font-weight)); line-height: var(--live-chat-upsell-dialog-renderer-title_-_line-height, var(--ytd-subheadline_-_line-height)); margin-bottom: var(--live-chat-upsell-dialog-renderer-title_-_margin-bottom, var(--ytd-margin-4x)); + } + + #upsell-dialog-text.yt-live-chat-upsell-dialog-renderer { + margin-top: 4px; + + color: var(--yt-live-chat-secondary-text-color); + font-size: 14px; + line-height: 20px; + + font-size: var(--live-chat-upsell-dialog-renderer-text_-_font-size, 14px); line-height: var(--live-chat-upsell-dialog-renderer-text_-_line-height, 20px); + } + + #button-container.yt-live-chat-upsell-dialog-renderer { + padding: 8px 8px 8px 24px; + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-pack: var(--layout-end-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-end-justified_-_-webkit-justify-content); justify-content: var(--layout-end-justified_-_justify-content); + + padding: var(--live-chat-upsell-dialog-renderer-button-container_-_padding, 8px 8px 8px 24px); + } + + yt-button-renderer.yt-live-chat-upsell-dialog-renderer { + font-size: var(--live-chat-upsell-dialog-renderer-button-font-size, 14px); + text-transform: var(--live-chat-upsell-dialog-renderer-button-text-transform, uppercase); + + --yt-button-padding: var(--yt-live-chat-upsell-dialog-renderer-button-padding); + } + + #action-button.yt-live-chat-upsell-dialog-renderer { + margin-left: 8px; + } + + #action-button.yt-live-chat-upsell-dialog-renderer > yt-button-renderer.yt-live-chat-upsell-dialog-renderer { + color: var(--yt-live-chat-upsell-dialog-renderer-action-button-color, var(--yt-white)); + background: var(--yt-live-chat-upsell-dialog-renderer-action-button-background, var(--yt-blue)); + } + + ytd-expander { + display: block; + } + + paper-button.ytd-expander { + display: inline-block; + text-align: center; + font-family: inherit; + } + + ytd-expander[collapsed] > #content.ytd-expander { + overflow: hidden; + max-height: var(--ytd-expander-collapsed-height); + } + + ytd-expander[reversed],ytd-expander[reversed] > #content.ytd-expander { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + ytd-expander[reversed][collapsed][collapsed-height="0"] > #content.ytd-expander { + display: none; + visibility: hidden; + } + + ytd-expander[should-use-number-of-lines][collapsed] > #content.ytd-expander { + color: var(--yt-spec-text-primary); + display: -webkit-box; + overflow: hidden; + max-height: none; + -webkit-box-orient: vertical; + -webkit-line-clamp: var(--ytd-expander-max-lines, 4); + } + + ytd-expander > * { + word-wrap: break-word; + min-width: 0; + } + + paper-button.ytd-expander { + margin: var(--ytd-expander-button-margin, 0); + padding: 0; + -ms-align-self: flex-start; + -webkit-align-self: flex-start; + align-self: flex-start; + } + + ytd-expander[align-auto] paper-button.ytd-expander { + -ms-align-self: auto; + -webkit-align-self: auto; + align-self: auto; + } + + #more.ytd-expander:focus,#less.ytd-expander:focus { + outline: -webkit-focus-ring-color auto 5px; + } + + #more.ytd-expander:focus:hover,#less.ytd-expander:focus:hover { + outline: none; + } + + #less.scrolling.ytd-expander { + box-shadow: var(--ytd-expander-button-scrolling-box-shadow); + border-radius: var(--ytd-expander-button-border-radius); + } + + ytd-donation-amount-picker-renderer.ytd-popup-container { + margin-bottom: 0; + margin-top: 0; + padding: 0; + } + + #container.ytd-donation-amount-picker-renderer { + width: 548px; + } + + ytd-donation-amount-picker-renderer[live-chat] #container.ytd-donation-amount-picker-renderer { + background-color: var(--yt-live-chat-action-panel-background-color); + width: 402px; + } + + #top-box.ytd-donation-amount-picker-renderer { + background-color: var(--yt-spec-general-background-b); + display: block; + padding: 24px; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + + ytd-donation-amount-picker-renderer[live-chat] #top-box.ytd-donation-amount-picker-renderer { + background-color: inherit; + padding-top: 16px; + padding-bottom: 0; + } + + #bottom-box.ytd-donation-amount-picker-renderer { + padding: 24px; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + } + + ytd-donation-amount-picker-renderer[live-chat] #bottom-box.ytd-donation-amount-picker-renderer { + background-color: inherit; + padding-top: 12px; + } + + #campaign-row.ytd-donation-amount-picker-renderer { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + } + + #title.ytd-donation-amount-picker-renderer { + color: var(--yt-spec-text-primary); + margin-bottom: 16px; + -ms-flex: 1 1 1e-9px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 1e-9px; + flex-basis: 1e-9px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + font-size: var(--ytd-subheadline-link_-_font-size); font-weight: var(--ytd-subheadline-link_-_font-weight); line-height: var(--ytd-subheadline-link_-_line-height); letter-spacing: var(--ytd-subheadline-link_-_letter-spacing); + } + + ytd-donation-amount-picker-renderer[live-chat] #title.ytd-donation-amount-picker-renderer { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + } + + .title-text.ytd-donation-amount-picker-renderer { + flex-grow: 1; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + } + + ytd-donation-amount-picker-renderer[live-chat] .title-text.ytd-donation-amount-picker-renderer { + margin-left: 16px; + } + + #text-container.ytd-donation-amount-picker-renderer { + flex-grow: 1; + margin-left: 16px; + min-width: 50%; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + #campaign-row.ytd-donation-amount-picker-renderer yt-img-shadow.ytd-donation-amount-picker-renderer { + width: 90px; + height: 90px; + } + + ytd-donation-amount-picker-renderer[live-chat] #campaign-row.ytd-donation-amount-picker-renderer yt-img-shadow.ytd-donation-amount-picker-renderer { + width: 32px; + height: 32px; + } + + ytd-donation-amount-picker-renderer[live-chat] #description-column.ytd-donation-amount-picker-renderer { + display: none; + } + + #live-chat-description-column.ytd-donation-amount-picker-renderer { + display: none; + } + + ytd-donation-amount-picker-renderer[live-chat] #live-chat-description-column.ytd-donation-amount-picker-renderer { + display: block; + margin-top: 16px; + } + + ytd-donation-amount-picker-renderer[live-chat] #live-chat-description-column.ytd-donation-amount-picker-renderer .campaign-description.ytd-donation-amount-picker-renderer { + margin-bottom: 12px; + } + + #campaign-title.ytd-donation-amount-picker-renderer { + color: var(--yt-spec-text-primary); + font-size: var(--yt-link-font-size, 1.4rem); + font-weight: 500; + line-height: var(--ytd-link-line-height, 1.6rem); + letter-spacing: var(--yt-link-letter-spacing, normal); + } + + #campaign-subtitle.ytd-donation-amount-picker-renderer,.campaign-description.ytd-donation-amount-picker-renderer { + color: var(--yt-spec-text-secondary); + } + + #campaign-subtitle.ytd-donation-amount-picker-renderer { + display: block; + max-height: var(--yt-thumbnail-attribution-line-height, 1.8rem); + overflow: hidden; + font-size: var(--ytd-thumbnail-attribution_-_font-size); font-weight: var(--ytd-thumbnail-attribution_-_font-weight); line-height: var(--ytd-thumbnail-attribution_-_line-height); letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); text-transform: var(--ytd-thumbnail-attribution_-_text-transform); + } + + ytd-donation-amount-picker-renderer:not([live-chat]) .campaign-description.ytd-donation-amount-picker-renderer { + display: -webkit-box; + -webkit-box-orient: vertical; + max-height: calc(2 * var(--yt-thumbnail-attribution-line-height, 1.8rem)); + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + -webkit-line-clamp: 2; + font-size: var(--ytd-thumbnail-attribution_-_font-size); font-weight: var(--ytd-thumbnail-attribution_-_font-weight); line-height: var(--ytd-thumbnail-attribution_-_line-height); letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); text-transform: var(--ytd-thumbnail-attribution_-_text-transform); + overflow-wrap: break-word; + } + + ytd-donation-amount-picker-renderer[live-chat] .campaign-description.ytd-donation-amount-picker-renderer { + font-size: var(--ytd-thumbnail-attribution_-_font-size); font-weight: var(--ytd-thumbnail-attribution_-_font-weight); line-height: var(--ytd-thumbnail-attribution_-_line-height); letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); text-transform: var(--ytd-thumbnail-attribution_-_text-transform); + } + + .separator.ytd-donation-amount-picker-renderer { + background-color: #ccc; + height: 1px; + margin: 8px 0 8px 0; + } + + ytd-donation-amount-picker-renderer[live-chat] .separator.ytd-donation-amount-picker-renderer { + margin: 0; + } + + #nonprofit-title.ytd-donation-amount-picker-renderer,#nonprofit-subtitle.ytd-donation-amount-picker-renderer { + color: var(--yt-spec-text-primary); + } + + #nonprofit-title.ytd-donation-amount-picker-renderer { + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + #nonprofit-subtitle.ytd-donation-amount-picker-renderer { + display: block; + max-height: var(--yt-thumbnail-attribution-line-height, 1.8rem); + overflow: hidden; + font-size: var(--ytd-thumbnail-attribution_-_font-size); font-weight: var(--ytd-thumbnail-attribution_-_font-weight); line-height: var(--ytd-thumbnail-attribution_-_line-height); letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); text-transform: var(--ytd-thumbnail-attribution_-_text-transform); + } + + #button-row.ytd-donation-amount-picker-renderer { + margin-top: 16px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + } + + ytd-donation-amount-picker-renderer[live-chat] #button-row.ytd-donation-amount-picker-renderer { + margin-top: 0; + display: flex; + flex-direction: column; + align-items: stretch; + } + + #nonprofit-row.ytd-donation-amount-picker-renderer { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + } + + #nonprofit-row.ytd-donation-amount-picker-renderer > .ytd-donation-amount-picker-renderer:first-child { + flex-grow: 1; + padding-right: 16px; + } + + ytd-donation-amount-picker-renderer[live-chat] #nonprofit-row.ytd-donation-amount-picker-renderer > .ytd-donation-amount-picker-renderer:first-child { + padding-right: 8px; + } + + #nonprofit-link.ytd-donation-amount-picker-renderer { + color: var(--yt-spec-call-to-action); + white-space: nowrap; + font-size: var(--yt-link-font-size, 1.4rem); + font-weight: 500; + line-height: var(--ytd-link-line-height, 1.6rem); + letter-spacing: var(--yt-link-letter-spacing, normal); + } + + #nonprofit-link-text.ytd-donation-amount-picker-renderer { + --yt-endpoint-color: var(--yt-spec-call-to-action); + --yt-endpoint-hover-color: var(--yt-spec-call-to-action); + --yt-endpoint-visited-color: var(--yt-spec-call-to-action); + font-size: var(--yt-link-font-size, 1.4rem); + font-weight: 500; + line-height: var(--ytd-link-line-height, 1.6rem); + letter-spacing: var(--yt-link-letter-spacing, normal); + } + + .inline-icon.ytd-donation-amount-picker-renderer { + position: relative; + top: -2px; + width: 1em; + } + + #amount-selector.ytd-donation-amount-picker-renderer { + margin: 0 auto; + max-width: 360px; + } + + #suggested-amount-buttons-row.ytd-donation-amount-picker-renderer { + margin-top: 32px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + } + + ytd-donation-amount-picker-renderer[live-chat] #suggested-amount-buttons-row.ytd-donation-amount-picker-renderer { + margin-top: 16px; + } + + #custom-amount-container.ytd-donation-amount-picker-renderer { + height: 70px; + margin-top: 8px; + } + + ytd-donation-amount-picker-renderer[live-chat] #custom-amount-container.ytd-donation-amount-picker-renderer { + height: auto; + transition: height 0.7s; + margin-top: 8px; + } + + ytd-donation-amount-picker-renderer[live-chat] #custom-amount-container.ytd-donation-amount-picker-renderer .ytd-donation-amount-picker-renderer[focused] { + height: 70px; + } + + ytd-donation-amount-picker-renderer[live-chat] #custom-amount-container.ytd-donation-amount-picker-renderer .ytd-donation-amount-picker-renderer[hidden] { + height: 0px; + } + + #custom-amount-input.ytd-donation-amount-picker-renderer { + --paper-input-container-focus-color: var(--yt-spec-themed-blue); + --paper-input-prefix_-_color: var(--yt-spec-text-primary);; + --primary-text-color: var(--yt-spec-text-primary); + } + + #suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer { + text-transform: none; + } + + #suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer[selected] { + background-color: var(--yt-spec-themed-blue); + color: var(--yt-spec-suggested-action); + } + + #privacy-checkbox.ytd-donation-amount-picker-renderer { + --paper-checkbox-vertical-align: top; + --paper-checkbox-label_-_margin-right: 20px;; + margin-top: 32px; + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + ytd-donation-amount-picker-renderer[live-chat] #privacy-checkbox.ytd-donation-amount-picker-renderer { + margin-top: 8px; + margin-bottom: 16px; + font-size: var(--ytd-thumbnail-attribution_-_font-size); font-weight: var(--ytd-thumbnail-attribution_-_font-weight); line-height: var(--ytd-thumbnail-attribution_-_line-height); letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); text-transform: var(--ytd-thumbnail-attribution_-_text-transform); + } + + yt-tooltip-renderer { + --yt-button-color: var(--yt-spec-text-primary-inverse); + display: block; + min-width: 0; + min-height: 0; + max-width: 300px; + position: relative; + background-color: var(--yt-spec-themed-blue); + color: var(--yt-spec-text-primary-inverse); + overflow: visible !important; + font-size: var(--ytd-thumbnail-attribution_-_font-size); font-weight: var(--ytd-thumbnail-attribution_-_font-weight); line-height: var(--ytd-thumbnail-attribution_-_line-height); letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); text-transform: var(--ytd-thumbnail-attribution_-_text-transform); + } + + #text.yt-tooltip-renderer:not(:empty) { + margin-bottom: var(--ytd-margin-2x); + font-size: var(--ytd-link_-_font-size); font-weight: var(--ytd-link_-_font-weight); line-height: var(--ytd-link_-_line-height); letter-spacing: var(--ytd-link_-_letter-spacing); + } + + #content.yt-tooltip-renderer { + padding: var(--ytd-margin-4x); + } + + #content.yt-tooltip-renderer yt-formatted-string.yt-tooltip-renderer { + display: block; + } + + yt-tooltip-renderer[has-buttons_] #content.yt-tooltip-renderer { + padding: var(--ytd-margin-4x) var(--ytd-margin-4x) var(--ytd-margin-base); + } + + #content.yt-tooltip-renderer yt-formatted-string.yt-tooltip-renderer,#text.yt-tooltip-renderer yt-formatted-string.yt-tooltip-renderer { + --yt-endpoint-color: var(--yt-spec-text-primary-inverse); + --yt-endpoint-visited-color: var(--yt-spec-text-primary-inverse); + --yt-endpoint-hover-color: var(--yt-spec-text-primary-inverse); + --yt-endpoint-text-decoration: underline; + } + + .buttons.yt-tooltip-renderer { + padding: var(--ytd-margin-2x) var(--ytd-margin-base); + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-pack: var(--layout-end-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-end-justified_-_-webkit-justify-content); justify-content: var(--layout-end-justified_-_justify-content); + } + + yt-tooltip-renderer::before { + content: ""; + position: absolute; + border-style: solid; + top: 100%; + border-width: 12px; + right: calc(50% - 12px); + border-color: var(--yt-spec-themed-blue) transparent transparent transparent; + } + + yt-tooltip-renderer[position-type="OPEN_POPUP_POSITION_TOPLEFT"]::before { + right: 12px; + } + + yt-tooltip-renderer[position-type="OPEN_POPUP_POSITION_TOPRIGHT"]::before { + left: 12px; + right: auto; + } + + yt-tooltip-renderer[position-type="OPEN_POPUP_POSITION_LEFT"]::before { + top: calc(50% - 12px); + left: 100%; + right: auto; + border-color: transparent transparent transparent var(--yt-spec-themed-blue); + } + + yt-tooltip-renderer[position-type="OPEN_POPUP_POSITION_RIGHT"]::before { + top: calc(50% - 12px); + right: 100%; + left: auto; + border-color: transparent var(--yt-spec-themed-blue) transparent transparent; + } + + yt-tooltip-renderer[position-type="OPEN_POPUP_POSITION_BOTTOM"]::before { + top: -24px; + left: calc(50% - 12px); + border-color: transparent transparent var(--yt-spec-themed-blue) transparent; + } + + yt-tooltip-renderer[position-type="OPEN_POPUP_POSITION_BOTTOMLEFT"]::before { + top: -24px; + right: 12px; + border-color: transparent transparent var(--yt-spec-themed-blue) transparent; + } + + yt-tooltip-renderer[position-type="OPEN_POPUP_POSITION_BOTTOMRIGHT"]::before { + top: -24px; + left: 12px; + right: auto; + border-color: transparent transparent var(--yt-spec-themed-blue) transparent; + } + + yt-live-chat-renderer { + position: relative; + height: 100%; + + background: var(--yt-live-chat-background-color); + color: var(--yt-live-chat-primary-text-color); + + overflow: hidden; + + + z-index: 0; + + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + ; + + + contain: content; + } + + yt-live-chat-renderer[hide-timestamps] { + --yt-live-chat-item-timestamp-display: none; + } + + #separator.yt-live-chat-renderer { + border-bottom: var(--yt-live-chat-header-bottom-border, none); + } + + #content-pages.yt-live-chat-renderer { + width: var(--sidebar-width-px); + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + #panel-pages.yt-live-chat-renderer { + max-height: 100%; + overflow-x: hidden; + overflow-y: auto; + } + + #contents.yt-live-chat-renderer { + overflow: hidden; + + + position: relative; + z-index: 0; + } + + #chat-messages.yt-live-chat-renderer,#contents.yt-live-chat-renderer,#item-list.yt-live-chat-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + #ticker.yt-live-chat-renderer { + z-index: 1; + + + box-shadow: var(--yt-live-chat-header-box-shadow); + } + + #chat.yt-live-chat-renderer { + position: relative; + + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + #chat.yt-live-chat-renderer::after { + content: ''; + display: none; + + animation: gradient-slide 1.2s ease infinite; + animation-name: gradient-slide; + background-color: var(--yt-live-chat-shimmer-background-color); + background-image: var(--yt-live-chat-shimmer-linear-gradient); + background-size: 300% 300%; + transform: rotateX(180deg); + + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + } + + yt-live-chat-renderer[loading] #chat.yt-live-chat-renderer::after { + display: block; + } + + yt-live-chat-pinned-message-renderer.yt-live-chat-renderer { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + } + + yt-live-chat-item-list-renderer.yt-live-chat-renderer,yt-live-chat-ninja-message-renderer.yt-live-chat-renderer { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + #action-panel.yt-live-chat-renderer { + display: none; + } + + yt-live-chat-renderer[has-action-panel-renderer] #action-panel.yt-live-chat-renderer { + display: unset; + position: absolute; + bottom: 0; + left: 0; + right: var(--scrollbar-width); + padding: 0 8px 8px 8px; + background: var(--yt-live-chat-action-panel-gradient-scrim); + overflow: hidden; + } + + yt-live-chat-renderer[has-action-panel-renderer] yt-live-chat-action-panel-renderer.yt-live-chat-renderer { + animation: slideUp var(--yt-live-chat-universal-motion-curve) forwards; + animation-duration: var(--yt-live-chat-panel-animation-duration); + } + + yt-live-chat-renderer[has-action-panel-renderer][is-closing-action-panel] yt-live-chat-action-panel-renderer.yt-live-chat-renderer { + animation: slideDownFadeOut var(--yt-live-chat-universal-motion-curve) forwards; + animation-duration: var(--yt-live-chat-panel-animation-duration); + } + + #input-panel.yt-live-chat-renderer { + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex); + } + + #input-panel.yt-live-chat-renderer:not(:empty) { + border-top: var(--yt-live-chat-action-panel-top-border, none); + } + + #input-panel.yt-live-chat-renderer::after { + content: ''; + display: block; + height: 1px; + margin: 0 24px; + background: var(--yt-spec-10-percent-layer); + } + + #toast-container.yt-live-chat-renderer { + position: relative; + } + + yt-live-chat-renderer[has-picker-open] #toast-container.yt-live-chat-renderer { + order: 1; + + z-index: 1; + } + + #loading.yt-live-chat-renderer { + height: 387px; + background-color: var(--yt-live-chat-action-panel-background-color); + + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content); + } + + #loading.yt-live-chat-renderer > paper-spinner-lite.yt-live-chat-renderer { + --paper-spinner-color: var(--yt-live-chat-primary-text-color); + } + + #nitrate-promo.yt-live-chat-renderer > *.yt-live-chat-renderer { + background: var(--yt-live-chat-overlay-color); + + z-index: 3; + + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left); + } + + @keyframes gradient-slide { + 0% { + background-position: 100% 100% + } + + to { + background-position: 0% 0% + } + + } + + @keyframes slideUp { + 0% { + transform: translateY(15%); + opacity: 0; + } + + 100% { + transform: translateY(0); + opacity: 1; + } + + } + + @keyframes slideDownFadeOut { + 0% { + transform: translateY(0); + opacity: 1; + } + + 100% { + transform: translateY(15%); + opacity: 0; + } + + } + + @keyframes fadeIn { + 0% { + background-color: transparent; + } + + 100% { + background-color: var(--yt-spec-static-overlay-background-medium); + } + + } + + yt-live-chat-renderer { + font-size: 13px; + + --yt-emoji-picker-renderer-height: 180px; + --yt-button-default-text-color: var(--yt-live-chat-button-default-text-color); + --yt-button-default-background-color: var(--yt-live-chat-button-default-background-color); + --yt-button-dark-text-color: var(--yt-live-chat-button-dark-text-color); + --yt-button-dark-background-color: var(--yt-live-chat-button-dark-background-color); + --yt-button-payment-background-color: var(--yt-live-chat-sponsor-color); + } + + ytd-legal-report-details-form-renderer[dialog][dialog][dialog] { + --ytd-legal-report-details-form-renderer-content-width: 402px; + --paper-input-container-input-align: baseline; + --ytd-dropdown-renderer-width: var(--ytd-legal-report-details-form-renderer-content-width); + background: var(--yt-spec-brand-background-primary); + margin: 0; + width: 450px; + max-width: 80vw; + min-height: 240px; + min-width: 250px; + padding: 0; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + ytd-legal-report-details-form-renderer > *.ytd-legal-report-details-form-renderer:not(:last-child) { + padding: 0 24px; + } + + ytd-legal-report-details-form-renderer > *.ytd-legal-report-details-form-renderer:first-child { + margin-top: 24px; + } + + h2.ytd-legal-report-details-form-renderer { + color: var(--yt-spec-text-primary); + padding: 0 24px; + margin-top: 24px; + font-size: var(--ytd-subheadline_-_font-size); font-weight: var(--ytd-subheadline_-_font-weight); line-height: var(--ytd-subheadline_-_line-height); letter-spacing: var(--ytd-subheadline_-_letter-spacing); + } + + #scroller.ytd-legal-report-details-form-renderer { + --paper-dialog-scrollable_-_padding: 0; --paper-dialog-scrollable_-_overflow-x: hidden; --paper-dialog-scrollable_-_min-width: initial; --paper-dialog-scrollable_-_box-sizing: initial;; + } + + #scroller.ytd-legal-report-details-form-renderer:first-child { + margin-top: 20px; + } + + #timestamp.ytd-legal-report-details-form-renderer { + display: block; + color: var(--yt-spec-text-secondary); + margin: 20px 0 4px; + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + yt-timestamp-input.ytd-legal-report-details-form-renderer { + height: 40px; + } + + #description-box.ytd-legal-report-details-form-renderer { + margin-top: 24px; + } + + #description-box.ytd-legal-report-details-form-renderer paper-input-container.ytd-legal-report-details-form-renderer { + --paper-input-container-underline-display: none; + --paper-input-container-underline-focus-display: none; + --paper-input-container-input-color: var(--yt-spec-text-primary); + --paper-input-container-focus-color: var(--yt-spec-text-primary); + --paper-input-container-input_-_padding: 12px; --paper-input-container-input_-_box-sizing: border-box; --paper-input-container-input_-_font-size: var(--ytd-user-comment_-_font-size); --paper-input-container-input_-_font-weight: var(--ytd-user-comment_-_font-weight); --paper-input-container-input_-_line-height: var(--ytd-user-comment_-_line-height); --paper-input-container-input_-_letter-spacing: var(--ytd-user-comment_-_letter-spacing); --paper-input-container-input_-_color: initial; --paper-input-container-input_-_height: initial; --paper-input-container-input_-_text-align: initial; --paper-input-container-input_-_overflow: initial; --paper-input-container-input_-_white-space: initial; --paper-input-container-input_-_text-overflow: initial; --paper-input-container-input_-_max-width: initial; --paper-input-container-input_-_cursor: initial;; + padding-top: 0; + padding-bottom: 0; + } + + #description-box.ytd-legal-report-details-form-renderer paper-input-container.ytd-legal-report-details-form-renderer { + --iron-autogrow-textarea-placeholder_-_padding: 10px;; + } + + #description.ytd-legal-report-details-form-renderer { + display: inline-block; + --iron-autogrow-textarea-textarea_-_padding: 12px; --iron-autogrow-textarea-textarea_-_box-sizing: border-box; --iron-autogrow-textarea-textarea_-_font-size: var(--ytd-user-comment_-_font-size); --iron-autogrow-textarea-textarea_-_font-weight: var(--ytd-user-comment_-_font-weight); --iron-autogrow-textarea-textarea_-_line-height: var(--ytd-user-comment_-_line-height); --iron-autogrow-textarea-textarea_-_letter-spacing: var(--ytd-user-comment_-_letter-spacing);; + padding: 12px 12px 32px 12px; + box-shadow: inset 0 0 0 1px var(--yt-spec-10-percent-layer); + border-radius: 2px; + box-sizing: border-box; + margin-bottom: -2px; + } + + #description.ytd-legal-report-details-form-renderer[focused] { + box-shadow: inset 0 0 0 2px var(--yt-spec-text-primary); + } + + #description-box.ytd-legal-report-details-form-renderer paper-input-char-counter.ytd-legal-report-details-form-renderer { + --paper-input-char-counter_-_color: var(--yt-spec-text-secondary); --paper-input-char-counter_-_margin-top: -32px; --paper-input-char-counter_-_margin-right: 18px;; + } + + #issue-type.ytd-legal-report-details-form-renderer,#affiliation.ytd-legal-report-details-form-renderer,#full-name.ytd-legal-report-details-form-renderer { + margin-top: 0; + } + + #full-name.ytd-legal-report-details-form-renderer { + --paper-input-container-underline-color: var(--yt-spec-10-percent-layer); + --paper-input-container-underline-focus-color: var(--yt-spec-text-primary); + --paper-input-container-underline-legacy-height: 0; + --paper-input-container-input_-_color: var(--yt-spec-text-primary); --paper-input-container-input_-_font-size: var(--ytd-user-comment_-_font-size); --paper-input-container-input_-_font-weight: var(--ytd-user-comment_-_font-weight); --paper-input-container-input_-_line-height: var(--ytd-user-comment_-_line-height); --paper-input-container-input_-_letter-spacing: var(--ytd-user-comment_-_letter-spacing); --paper-input-container-input_-_padding: initial; --paper-input-container-input_-_box-sizing: initial; --paper-input-container-input_-_height: initial; --paper-input-container-input_-_text-align: initial; --paper-input-container-input_-_overflow: initial; --paper-input-container-input_-_white-space: initial; --paper-input-container-input_-_text-overflow: initial; --paper-input-container-input_-_max-width: initial; --paper-input-container-input_-_cursor: initial;; + height: 57px; + } + + #name-subtext.ytd-legal-report-details-form-renderer { + color: var(--yt-spec-text-secondary); + margin-top: 4px; + font-size: 1.2rem; + font-weight: 400; + line-height: 1.5rem; + } + + #footer-text.ytd-legal-report-details-form-renderer { + color: var(--yt-spec-text-secondary); + margin: 24px 0; + font-size: 1.2rem; + font-weight: 400; + line-height: 1.5rem; + } + + .footer.ytd-legal-report-details-form-renderer { + padding-left: 24px; + border-top: 1px solid var(--yt-spec-10-percent-layer); + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + } + + #cancel-button.ytd-legal-report-details-form-renderer { + margin-right: 8px; + } + + #required-label.ytd-legal-report-details-form-renderer { + color: var(--yt-spec-text-secondary); + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + font-size: var(--ytd-thumbnail-attribution_-_font-size); font-weight: var(--ytd-thumbnail-attribution_-_font-weight); line-height: var(--ytd-thumbnail-attribution_-_line-height); letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); text-transform: var(--ytd-thumbnail-attribution_-_text-transform); + } + + .buttons.ytd-legal-report-details-form-renderer { + padding: 8px 8px 8px 24px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + } + + ytd-dropdown-item-renderer { + background-color: var(--ytd-dropdown-item-background-color, inherit); + outline: none; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + } + + #label.ytd-dropdown-item-renderer { + color: var(--yt-spec-text-primary); + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + ytd-dropdown-renderer { + display: block; + --paper-dropdown-menu-color: var(--yt-spec-text-secondary); + --paper-dropdown-menu-focus-color: var(--yt-spec-text-primary); + --paper-dropdown-error-color: var(--yt-spec-brand-link-text); + --paper-dropdown-menu-input_-_font-size: var(--ytd-user-comment_-_font-size); --paper-dropdown-menu-input_-_font-weight: var(--ytd-user-comment_-_font-weight); --paper-dropdown-menu-input_-_line-height: var(--ytd-user-comment_-_line-height); --paper-dropdown-menu-input_-_letter-spacing: var(--ytd-user-comment_-_letter-spacing); --paper-dropdown-menu-input_-_border-bottom: initial;; + --paper-dropdown-menu-label_-_font-size: var(--ytd-user-comment_-_font-size); --paper-dropdown-menu-label_-_font-weight: var(--ytd-user-comment_-_font-weight); --paper-dropdown-menu-label_-_line-height: var(--ytd-user-comment_-_line-height); --paper-dropdown-menu-label_-_letter-spacing: var(--ytd-user-comment_-_letter-spacing);; + --paper-dropdown-menu-icon_-_color: var(--yt-spec-icon-inactive);; + } + + ytd-dropdown-renderer[no-underline] { + --paper-dropdown-menu-input_-_border-bottom: none; --paper-dropdown-menu-input_-_font-size: var(--ytd-user-comment_-_font-size); --paper-dropdown-menu-input_-_font-weight: var(--ytd-user-comment_-_font-weight); --paper-dropdown-menu-input_-_line-height: var(--ytd-user-comment_-_line-height); --paper-dropdown-menu-input_-_letter-spacing: var(--ytd-user-comment_-_letter-spacing);; + } + + ytd-dropdown-renderer[has-background] paper-dropdown-menu-light.ytd-dropdown-renderer { + --paper-dropdown-menu-input_-_border-bottom: none; --paper-dropdown-menu-input_-_font-size: var(--ytd-user-comment_-_font-size); --paper-dropdown-menu-input_-_font-weight: var(--ytd-user-comment_-_font-weight); --paper-dropdown-menu-input_-_line-height: var(--ytd-user-comment_-_line-height); --paper-dropdown-menu-input_-_letter-spacing: var(--ytd-user-comment_-_letter-spacing);; + color: var(--yt-spec-text-secondary); + background-color: var(--yt-spec-10-percent-layer); + padding: 0 16px; + } + + ytd-dropdown-renderer[has-background] paper-dropdown-menu-light.ytd-dropdown-renderer:focus { + --paper-dropdown-menu-input_-_border-bottom: none; --paper-dropdown-menu-input_-_font-size: var(--ytd-user-comment_-_font-size); --paper-dropdown-menu-input_-_font-weight: var(--ytd-user-comment_-_font-weight); --paper-dropdown-menu-input_-_line-height: var(--ytd-user-comment_-_line-height); --paper-dropdown-menu-input_-_letter-spacing: var(--ytd-user-comment_-_letter-spacing);; + } + + paper-dropdown-menu-light.ytd-dropdown-renderer { + width: 100%; + } + + #entries.ytd-dropdown-renderer { + width: var(--ytd-dropdown-renderer-width); + max-height: 400px; + } + + ytd-navigation-dropdown-item-renderer { + display: block; + outline: none; + } + + #label.ytd-navigation-dropdown-item-renderer { + color: var(--yt-spec-text-primary); + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + .yt-simple-endpoint.ytd-navigation-dropdown-item-renderer { + display: inline-block; + cursor: pointer; + text-decoration: none; + color: var(--yt-endpoint-color, var(--yt-spec-text-primary)); + } + + .yt-simple-endpoint.ytd-navigation-dropdown-item-renderer:hover { + color: var(--yt-endpoint-hover-color, var(--yt-spec-text-primary)); + text-decoration: var(--yt-endpoint-text-decoration, none); + } + + ytd-privacy-dropdown-item-renderer { + display: block; + outline: none; + } + + ytd-privacy-dropdown-item-renderer:hover { + cursor: pointer; + background-color: var(--yt-spec-10-percent-layer); + } + + #label.ytd-privacy-dropdown-item-renderer { + color: var(--yt-spec-text-primary); + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + #description.ytd-privacy-dropdown-item-renderer { + color: var(--yt-spec-text-secondary); + font-size: var(--ytd-thumbnail-attribution_-_font-size); font-weight: var(--ytd-thumbnail-attribution_-_font-weight); line-height: var(--ytd-thumbnail-attribution_-_line-height); letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); text-transform: var(--ytd-thumbnail-attribution_-_text-transform); + } + + #dropdown-icon.ytd-privacy-dropdown-item-renderer { + color: var(--yt-spec-brand-icon-inactive); + margin-left: -8px; + margin-right: 8px; + } + + paper-item-body.ytd-privacy-dropdown-item-renderer { + min-height: 0; + max-width: 100%; + -ms-flex: none; + -webkit-flex: none; + flex: none; + } + + yt-timestamp-input { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + } + + [dir="rtl"] yt-timestamp-input, yt-timestamp-input[dir="rtl"] { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; + } + + #minutes.yt-timestamp-input,#seconds.yt-timestamp-input { + text-align: right; + height: 40px; + } + + #minutes.yt-timestamp-input { + width: 30px; + } + + #separator.yt-timestamp-input { + padding: 0 2px; + } + + #seconds.yt-timestamp-input { + width: 20px; + } + + paper-input.yt-timestamp-input { + --paper-input-container-input-color: var(--yt-spec-text-primary); + --paper-input-container-focus-color: var(--yt-spec-text-primary); + --paper-input-container-underline-color: var(--yt-spec-10-percent-layer); + --paper-input-container-underline-legacy-height: 0; + } + + yt-report-form-modal-renderer[dialog][dialog][dialog] { + --yt-report-form-modal-renderer-width: 450px; + background: var(--yt-spec-brand-background-solid); + margin: 0; + width: var(--yt-report-form-modal-renderer-width, 450px); + max-width: 80vw; + min-height: 240px; + min-width: var(--yt-report-form-modal-renderer-min-width, 300px); + padding: 0; + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + yt-report-form-modal-renderer[dialog][dialog][dialog][hide-report-form] { + display: none; + } + + yt-report-form-modal-renderer > *.yt-report-form-modal-renderer:not(:last-child) { + margin-top: 20px; + padding: 0 24px; + } + + yt-report-form-modal-renderer > paper-dialog-scrollable.yt-report-form-modal-renderer:not(:last-child) { + padding: 0; + margin-top: 0; + } + + paper-dialog-scrollable.is-scrolled.yt-report-form-modal-renderer { + margin-top: 14px; + } + + yt-report-form-modal-renderer > *.yt-report-form-modal-renderer:first-child { + margin-top: 24px; + } + + paper-dialog-scrollable.yt-report-form-modal-renderer { + --paper-dialog-scrollable_-_padding: 0 var(--ytd-margin-6x) var(--ytd-margin-6x) var(--ytd-margin-6x); --paper-dialog-scrollable_-_overflow-x: initial; --paper-dialog-scrollable_-_min-width: initial; --paper-dialog-scrollable_-_box-sizing: initial; + } + + .buttons.yt-report-form-modal-renderer { + padding: var(--ytd-margin-2x) var(--ytd-margin-2x) var(--ytd-margin-2x) var(--ytd-margin-6x); + border-top: 1px solid var(--yt-spec-10-percent-layer); + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-pack: var(--layout-end-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-end-justified_-_-webkit-justify-content); justify-content: var(--layout-end-justified_-_justify-content); + } + + #title.yt-report-form-modal-renderer { + color: var(--yt-spec-text-primary); + margin-bottom: var(--ytd-margin-base); + padding: 0 var(--ytd-margin-6x) 0 var(--ytd-margin-6x); + font-size: var(--ytd-subheadline_-_font-size); font-weight: var(--ytd-subheadline_-_font-weight); line-height: var(--ytd-subheadline_-_line-height); letter-spacing: var(--ytd-subheadline_-_letter-spacing); + } + + #submit-container.yt-report-form-modal-renderer { + padding-top: var(--ytd-margin-2x); + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-pack: var(--layout-end-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-end-justified_-_-webkit-justify-content); justify-content: var(--layout-end-justified_-_justify-content); + } + + #loading-indicator.yt-report-form-modal-renderer { + height: 100%; + width: 100%; + position: absolute; + z-index: var(--ytd-z-index-report-form-overlay); + background-color: var(--yt-white-opacity-lighten-1); + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + -ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content); justify-content: var(--layout-center-justified_-_justify-content); + } + + #message-container.yt-report-form-modal-renderer { + color: var(--yt-spec-text-primary); + padding: 0 var(--ytd-margin-6x) var(--ytd-margin-6x) var(--ytd-margin-6x); + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + -ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content); justify-content: var(--layout-center-justified_-_justify-content); + } + + #container.yt-report-form-modal-renderer { + position: relative; + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + #description.yt-report-form-modal-renderer { + color: var(--yt-spec-text-secondary); + margin: var(--ytd-margin-4x) 0 var(--ytd-margin-2x); + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + yt-options-renderer.yt-report-form-modal-renderer { + --yt-options-renderer-dropdown-width: calc(var(--yt-report-form-modal-renderer-width) - (var(--ytd-margin-6x) * 2) - var(--ytd-margin-11x) - var(--ytd-margin-4x)); + } + + #footer.yt-report-form-modal-renderer { + --yt-formatted-string-endpoint: var(--ytd-mini-attribution-endpoint);--yt-formatted-string-endpoint_-_font-size: var(--ytd-mini-attribution-endpoint_-_font-size); --yt-formatted-string-endpoint_-_font-weight: var(--ytd-mini-attribution-endpoint_-_font-weight); --yt-formatted-string-endpoint_-_line-height: var(--ytd-mini-attribution-endpoint_-_line-height);; + color: var(--yt-spec-text-secondary); + margin: var(--ytd-margin-6x) 0 var(--ytd-margin-2x); + font-size: var(--ytd-mini-attribution_-_font-size); font-weight: var(--ytd-mini-attribution_-_font-weight); line-height: var(--ytd-mini-attribution_-_line-height); + } + + #cancel-button.yt-report-form-modal-renderer { + margin-right: var(--ytd-margin-2x); + } + + #additional-detail-checkbox-container.yt-report-form-modal-renderer,#checkbox-container.yt-report-form-modal-renderer { + --yt-boolean-form-string-padding-left: 0; + padding: var(--ytd-margin-4x) 0 var(--ytd-margin-6x) 0; + border-top: 1px solid var(--yt-spec-10-percent-layer); + margin: 24px 0 0 0; + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + } + + yt-options-renderer { + --paper-input-container-input-color: var(--yt-spec-text-primary); + display: block; + } + + #yt-options-renderer-options.yt-options-renderer { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + yt-formatted-string.yt-options-renderer { + color: var(--yt-spec-text-primary); + line-height: 24px; + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height, 24px); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + yt-icon.yt-options-renderer { + color: var(--yt-spec-icon-inactive); + height: 16px; + padding: 0 var(--ytd-margin-2x); + width: 16px; + } + + yt-options-renderer[tooltip-tapped] paper-radio-button.yt-options-renderer { + --paper-radio-button-unchecked-ink-color: transparent; + } + + yt-options-renderer[increased-tooltip-target] yt-icon.yt-options-renderer { + padding: var(--ytd-margin-3x); + } + + yt-icon.yt-options-renderer:hover { + color: var(--yt-spec-icon-active-other); + } + + .info-container.yt-options-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + .content.yt-options-renderer { + min-height: 40px; + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + } + + paper-radio-button.radio.yt-options-renderer { + padding: 0; + } + + paper-tooltip.yt-options-renderer { + min-width: 200px; + } + + paper-item.yt-options-renderer { + cursor: pointer; + } + + paper-item.yt-options-renderer:hover { + background-color: var(--yt-spec-10-percent-layer); + } + + paper-dropdown-menu.yt-options-renderer { + --paper-input-container-color: var(--yt-spec-text-secondary); + --paper-input-container-input-color: var(--yt-spec-text-primary); + --paper-input-container-focus-color: var(--yt-spec-text-primary); + --paper-input-container-underline_-_background: var(--yt-spec-10-percent-layer); --paper-input-container-underline_-_display: initial;; + --paper-input-container-input_-_font-size: var(--ytd-user-comment_-_font-size); --paper-input-container-input_-_font-weight: var(--ytd-user-comment_-_font-weight); --paper-input-container-input_-_line-height: var(--ytd-user-comment_-_line-height); --paper-input-container-input_-_letter-spacing: var(--ytd-user-comment_-_letter-spacing); --paper-input-container-input_-_color: initial; --paper-input-container-input_-_padding: initial; --paper-input-container-input_-_box-sizing: initial; --paper-input-container-input_-_height: initial; --paper-input-container-input_-_text-align: initial; --paper-input-container-input_-_overflow: initial; --paper-input-container-input_-_white-space: initial; --paper-input-container-input_-_text-overflow: initial; --paper-input-container-input_-_max-width: initial; --paper-input-container-input_-_cursor: initial;; + + padding: var(--ytd-margin-2x) var(--ytd-margin-4x) var(--ytd-margin-2x) var(--ytd-margin-11x); + --paper-item_-_font-size: var(--ytd-user-comment_-_font-size); --paper-item_-_font-weight: var(--ytd-user-comment_-_font-weight); --paper-item_-_line-height: var(--ytd-user-comment_-_line-height); --paper-item_-_letter-spacing: var(--ytd-user-comment_-_letter-spacing); --paper-item_-_white-space: initial;; + --paper-item-selected-weight: 500; + } + + paper-listbox.yt-options-renderer { + width: var(--yt-options-renderer-dropdown-width); + } + + yt-boolean-form-field-v2-renderer { + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + } + + paper-checkbox.yt-boolean-form-field-v2-renderer { + --paper-checkbox-size: 18px; + --paper-checkbox-vertical-align: top; + --paper-checkbox-margin: 2px 0 0 0; + } + + yt-formatted-string.yt-boolean-form-field-v2-renderer { + --yt-endpoint-color: var(--yt-blue); + --yt-endpoint-hover-color: var(--yt-blue); + padding-left: + var(--yt-boolean-form-string-padding-left, var(--ytd-margin-6x)); + color: var(--yt-primary-text-color); + cursor: pointer; + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + yt-confirm-dialog-renderer[dialog][dialog][dialog] { + --divider-color: var(--yt-border-color); + background: var(--yt-dialog-background); + margin: 0; + max-width: 688px; + padding: 0; + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + } + + yt-confirm-dialog-renderer[dialog][dialog][dialog][use-overlay-for-spinner_] { + position: relative; + visibility: hidden; + } + + yt-confirm-dialog-renderer[dialog-with-header-image] { + width: min-content; + } + + yt-confirm-dialog-renderer:not([use-overlay-for-spinner_]) #spinner.yt-confirm-dialog-renderer { + width: 400px; + + height: 224px; + display: var(--layout_-_display); + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items); + -ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content); justify-content: var(--layout-center-justified_-_justify-content); + } + + yt-confirm-dialog-renderer[use-overlay-for-spinner_] #spinner.yt-confirm-dialog-renderer { + display: block; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + visibility: visible; + } + + yt-confirm-dialog-renderer[dialog-with-thumbnail] { + min-width: 456px; + } + + yt-confirm-dialog-renderer[dialog-with-thumbnail] #main.yt-confirm-dialog-renderer { + min-width: 200px; + } + + yt-confirm-dialog-renderer[dialog-with-thumbnail] #scroller.yt-confirm-dialog-renderer { + margin: 0; + min-height: 100px; + display: var(--layout_-_display); + } + + #main.yt-confirm-dialog-renderer { + margin-top: var(--ytd-margin-6x); + + + width: 100%; + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + yt-confirm-dialog-renderer[dialog-with-header-image] #main.yt-confirm-dialog-renderer { + margin-top: 0; + } + + #header-image.yt-confirm-dialog-renderer { + margin: 0 0 24px 0; + width: max-content; + } + + #title.yt-confirm-dialog-renderer { + display: block; + color: var(--yt-primary-text-color); + margin-bottom: var(--ytd-margin-4x); + padding: 0 var(--ytd-margin-6x); + font-size: var(--ytd-subheadline_-_font-size); font-weight: var(--ytd-subheadline_-_font-weight); line-height: var(--ytd-subheadline_-_line-height); letter-spacing: var(--ytd-subheadline_-_letter-spacing); + } + + #scroller.yt-confirm-dialog-renderer { + --paper-dialog-scrollable_-_min-width: 200px; --paper-dialog-scrollable_-_padding: 0 var(--ytd-margin-6x); --paper-dialog-scrollable_-_box-sizing: border-box; --paper-dialog-scrollable_-_overflow-x: initial;; + color: var(--yt-secondary-text-color); + margin: var(--ytd-margin-base) 0 var(--ytd-margin-6x); + padding: 0; + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing); + } + + .line-text.yt-confirm-dialog-renderer:not(:last-of-type) { + display: block; + margin-bottom: var(--ytd-margin-2x); + } + + .buttons.yt-confirm-dialog-renderer { + border-top: var(--yt-confirm-dialog-buttons-border-top, 1px solid var(--yt-border-color)); + position: relative; + padding: var(--ytd-margin-2x) var(--ytd-margin-2x) var(--ytd-margin-2x) var(--ytd-margin-6x); + + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-pack: var(--layout-end-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-end-justified_-_-webkit-justify-content); justify-content: var(--layout-end-justified_-_justify-content); + -ms-flex: var(--ytd-safari-layout-fix_-_-ms-flex); -webkit-flex: var(--ytd-safari-layout-fix_-_-webkit-flex); flex: var(--ytd-safari-layout-fix_-_flex); + } + + #cancel-button.yt-confirm-dialog-renderer,#confirm-button.yt-confirm-dialog-renderer { + margin-left: var(--ytd-margin-2x); + } + + yt-confirm-dialog-renderer[primary-is-cancel] .buttons.yt-confirm-dialog-renderer { + display: var(--layout-horizontal-reverse_-_display); -ms-flex-direction: var(--layout-horizontal-reverse_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal-reverse_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal-reverse_-_flex-direction); + -ms-flex-pack: var(--layout-start-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-start-justified_-_-webkit-justify-content); justify-content: var(--layout-start-justified_-_justify-content); + } + + @media (max-width: 455px) { + yt-confirm-dialog-renderer[dialog][dialog][dialog] { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + yt-confirm-dialog-renderer[dialog-with-thumbnail] { + min-width: initial; + } + + yt-confirm-dialog-renderer[dialog-with-thumbnail] #scroller.yt-confirm-dialog-renderer { + margin-bottom: 24px; + min-height: initial; + display: var(--layout-block_-_display); + } + + } + + yt-fancy-dismissible-dialog-renderer[dialog][dialog][dialog] { + background: var(--yt-dialog-background); + margin: 0; + width: 450px; + min-height: 240px; + max-width: 80vw; + min-width: var(--yt-legal-report-details-form-renderer-min-width); + padding: 0; + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + yt-fancy-dismissible-dialog-renderer > *.yt-fancy-dismissible-dialog-renderer:not(:last-child) { + padding: 0 var(--ytd-margin-6x); + } + + yt-fancy-dismissible-dialog-renderer > *.yt-fancy-dismissible-dialog-renderer:first-child { + margin-top: var(--ytd-margin-6x); + } + + h2.yt-fancy-dismissible-dialog-renderer { + color: var(--yt-primary-text-color); + margin-bottom: 0; + font-size: var(--ytd-subheadline_-_font-size); font-weight: var(--ytd-subheadline_-_font-weight); line-height: var(--ytd-subheadline_-_line-height); letter-spacing: var(--ytd-subheadline_-_letter-spacing); + } + + #scroller.yt-fancy-dismissible-dialog-renderer { + --paper-dialog-scrollable_-_padding: 0; --paper-dialog-scrollable_-_min-width: initial; --paper-dialog-scrollable_-_box-sizing: initial; --paper-dialog-scrollable_-_overflow-x: initial;; + margin-top: var(--ytd-margin-5x); + margin-bottom: var(--ytd-margin-6x); + } + + #message.yt-fancy-dismissible-dialog-renderer { + color: var(--yt-primary-text-color); + font-size: var(--ytd-thumbnail-attribution_-_font-size); font-weight: var(--ytd-thumbnail-attribution_-_font-weight); line-height: var(--ytd-thumbnail-attribution_-_line-height); letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); text-transform: var(--ytd-thumbnail-attribution_-_text-transform); + } + + .buttons.yt-fancy-dismissible-dialog-renderer { + padding: var(--ytd-margin-2x) var(--ytd-margin-2x) var(--ytd-margin-2x) var(--ytd-margin-6x); + border-top: 1px solid var(--yt-border-color); + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction); + -ms-flex-pack: var(--layout-end-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-end-justified_-_-webkit-justify-content); justify-content: var(--layout-end-justified_-_justify-content); + } + + yt-live-chat-app { + display: block; + + + width: 100vw; + height: 100vh; + + + min-width: 298px; + min-height: 360px; + + --yt-report-form-modal-renderer-min-width: 0; + + display: var(--layout-vertical_-_display, block); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + } + + #contents.yt-live-chat-app { + display: var(--layout-vertical_-_display); -ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction); flex-direction: var(--layout-vertical_-_flex-direction); + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + #contents.yt-live-chat-app > *.yt-live-chat-app { + -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis); + } + + yt-live-chat-app[dashboard-money-feed] { + min-height: 0; + } + + yt-live-chat-app[dashboard-money-feed] #contents.yt-live-chat-app > yt-live-chat-message-renderer.yt-live-chat-app { + font-size: 18px; + } + + /* Browser reset styles. */ + + canvas, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, embed, fieldset, font, + form, h1, h2, h3, h4, h5, h6, hr, i, iframe, img, ins, kbd, label, legend, li, menu, + object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, + tfoot, th, thead, tr, tt, u, ul, var { + margin: 0; + padding: 0; + border: 0; + background: transparent; + } + + /* Extra definitions. STYLE MUST BE GLOBAL AND HIGHLY REUSED TO BE ADDED HERE. */ + + [hidden] { + display: none !important; /* See https://github.com/Polymer/polymer/issues/3711 */ + } + + /** + * Simple endpoint styles are copies of the --yt-endpoint and + * --yt-endpoint-hover mixins defined above in the custom-style block. + * See b/37723498 for context. + */ + .yt-simple-endpoint { + display: inline-block; + cursor: pointer; + text-decoration: none; + color: var(--yt-endpoint-color, var(--yt-spec-text-primary)); + } + + .yt-simple-endpoint:hover { + color: var(--yt-endpoint-hover-color, var(--yt-spec-text-primary)); + text-decoration: var(--yt-endpoint-text-decoration, none); + } + \ No newline at end of file diff --git a/src/options.js b/src/options.js index aed49f4..227d61b 100644 --- a/src/options.js +++ b/src/options.js @@ -180,4 +180,9 @@ PersistentSyncStorage.on('ready', () => { var infoButton = document.getElementById('infoButton'); infoButton.addEventListener('click', function(){ chrome.tabs.create({ url: 'https://wompmacho.com/wompchat' }); +}); + +var chat_overlay = document.getElementById('chat_overlay'); +chat_overlay.addEventListener('click', function(){ + chrome.tabs.create({ url: 'html/chat_overlay.html' }); }); \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 28f48f3..77e3d0e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -23,7 +23,8 @@ module.exports = { content: './content/', background: './background/', options: './options.js', - welcomePage: './welcomePage.js' + welcomePage: './welcomePage.js', + chat_overlay: './chat_overlay.js' }, output: { diff --git a/webpack.prod.js b/webpack.prod.js index 50b47c2..02c6827 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -24,7 +24,8 @@ module.exports = { content: './content/', background: './background/', options: './options.js', - welcomePage: './welcomePage.js' + welcomePage: './welcomePage.js', + chat_overlay: './chat_overlay.js' }, output: { path: distPath,