From 2ec6096d4dfe6c289cdf0dd3147685a58c0d091f Mon Sep 17 00:00:00 2001 From: John Smith Date: Sat, 12 Sep 2020 15:50:16 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8A=8AYouTube=E7=9A=84CSS=E7=A7=BB=E5=88=B0?= =?UTF-8?q?=E5=8D=95=E7=8B=AC=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/css/youtube/yt-html.css | 362 ++++++++ frontend/src/assets/css/youtube/yt-icon.css | 30 + .../src/assets/css/youtube/yt-img-shadow.css | 68 ++ .../yt-live-chat-author-badge-renderer.css | 36 + .../css/youtube/yt-live-chat-author-chip.css | 64 ++ .../yt-live-chat-item-list-renderer.css | 140 +++ .../yt-live-chat-membership-item-renderer.css | 360 ++++++++ .../yt-live-chat-paid-message-renderer.css | 378 ++++++++ .../css/youtube/yt-live-chat-renderer.css | 252 ++++++ .../yt-live-chat-text-message-renderer.css | 230 +++++ ...chat-ticker-paid-message-item-renderer.css | 80 ++ .../youtube/yt-live-chat-ticker-renderer.css | 65 ++ .../components/ChatRenderer/AuthorBadge.vue | 75 +- .../src/components/ChatRenderer/ImgShadow.vue | 72 +- .../ChatRenderer/MembershipItem.vue | 364 +------- .../components/ChatRenderer/PaidMessage.vue | 381 +------- .../components/ChatRenderer/TextMessage.vue | 303 +------ .../src/components/ChatRenderer/Ticker.vue | 154 +--- .../src/components/ChatRenderer/index.vue | 820 +----------------- frontend/src/layout/index.vue | 2 +- 20 files changed, 2078 insertions(+), 2158 deletions(-) create mode 100644 frontend/src/assets/css/youtube/yt-html.css create mode 100644 frontend/src/assets/css/youtube/yt-icon.css create mode 100644 frontend/src/assets/css/youtube/yt-img-shadow.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-author-badge-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-author-chip.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-item-list-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-membership-item-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-paid-message-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-text-message-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-ticker-paid-message-item-renderer.css create mode 100644 frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css diff --git a/frontend/src/assets/css/youtube/yt-html.css b/frontend/src/assets/css/youtube/yt-html.css new file mode 100644 index 0000000..75dc6fc --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-html.css @@ -0,0 +1,362 @@ +html:not(.style-scope) { + --yt-live-chat-background-color: hsl(0, 0%, 100%); + --yt-live-chat-action-panel-background-color: hsla(0, 0%, 93.3%, .4); + --yt-live-chat-action-panel-background-color-transparent: hsla(0, 0%, 97%, .8); + --yt-live-chat-mode-change-background-color: hsla(0, 0%, 93.3%, .4); + --yt-live-chat-primary-text-color: hsl(0, 0%, 6.7%); + --yt-live-chat-secondary-text-color: hsla(0, 0%, 6.7%, .6); + --yt-live-chat-tertiary-text-color: hsla(0, 0%, 6.7%, .4); + --yt-live-chat-text-input-field-inactive-underline-color: #b8b8b8; + --yt-live-chat-text-input-field-placeholder-color: hsla(0, 0%, 6.7%, .6); + --yt-live-chat-icon-button-color: hsla(0, 0%, 6.7%, .4); + --yt-live-chat-enabled-send-button-color: #4285f4; + --yt-live-chat-disabled-icon-button-color: hsla(0, 0%, 6.7%, .2); + --yt-live-chat-picker-button-color: hsla(0, 0%, 6.7%, .4); + --yt-live-chat-picker-button-active-color: hsla(0, 0%, 6.7%, .8); + --yt-live-chat-picker-button-disabled-color: var(--yt-live-chat-disabled-icon-button-color); + --yt-live-chat-picker-button-hover-color: hsla(0, 0%, 6.7%, .6); + --yt-live-chat-mention-background-color: #ff5722; + --yt-live-chat-mention-text-color: hsl(0, 0%, 100%); + --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: hsl(0, 0%, 93.3%); + --yt-live-chat-disabled-button-text-color: hsla(0, 0%, 6.7%, .4); + --yt-live-chat-sub-panel-background-color: hsl(0, 0%, 93.3%); + --yt-live-chat-sub-panel-background-color-transparent: hsla(0, 0%, 93%, .7); + --yt-live-chat-header-background-color: hsla(0, 0%, 93.3%, .4); + --yt-live-chat-header-button-color: hsl(0, 0%, 6.7%); + --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-text-color: rgba(0,0,0,0.87); + --yt-live-chat-author-chip-verified-background-color: #CCCCCC; + --yt-live-chat-author-chip-verified-text-color: #606060; + --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: hsl(0, 0%, 100%); + --yt-live-chat-dialog-text-color: hsla(0, 0%, 6.7%, .6); + --yt-live-chat-poll-choice-text-color: var(--yt-spec-text-secondary); + --yt-live-chat-poll-choice-border-color: var(--yt-spec-10-percent-layer); + --yt-live-chat-poll-choice-vote-bar-background-color: hsla(0, 0%, 93.3%, .8); + --yt-live-chat-poll-choice-vote-bar-background-color-selected: #F2F8FF; + --yt-live-chat-poll-choice-color-selected: #065FD4; + --yt-live-chat-moderation-mode-hover-background-color: hsla(0, 0%, 6.7%, .2); + --yt-live-chat-additional-inline-action-button-color: hsl(0, 0%, 100%); + --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: hsl(0, 0%, 100%); + --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: hsla(0, 0%, 100%, .6); + --yt-emoji-picker-search-color: hsla(0, 0%, 6.7%, .8); + --yt-emoji-picker-search-placeholder-color: hsla(0, 0%, 6.7%, .6); + --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-background-color: hsl(0, 0%, 20%); + --yt-live-chat-toast-text-color: hsl(0, 0%, 100%); + --yt-live-chat-automod-button-background-color: hsl(0, 0%, 93.3%); + --yt-live-chat-automod-button-background-color-hover: hsla(0, 0%, 6.7%, .2); + --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: hsl(0, 0%, 93.3%); + --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: #065FD4; + --yt-pdg-paid-stickers-author-name-font-size: 13px; + --yt-pdg-paid-stickers-margin-left: 38px; +} + +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; + ; +} diff --git a/frontend/src/assets/css/youtube/yt-icon.css b/frontend/src/assets/css/youtube/yt-icon.css new file mode 100644 index 0000000..c21acf2 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-icon.css @@ -0,0 +1,30 @@ +canvas.yt-icon, caption.yt-icon, center.yt-icon, cite.yt-icon, code.yt-icon, dd.yt-icon, del.yt-icon, dfn.yt-icon, div.yt-icon, dl.yt-icon, dt.yt-icon, em.yt-icon, embed.yt-icon, fieldset.yt-icon, font.yt-icon, form.yt-icon, h1.yt-icon, h2.yt-icon, h3.yt-icon, h4.yt-icon, h5.yt-icon, h6.yt-icon, hr.yt-icon, i.yt-icon, iframe.yt-icon, img.yt-icon, ins.yt-icon, kbd.yt-icon, label.yt-icon, legend.yt-icon, li.yt-icon, menu.yt-icon, object.yt-icon, ol.yt-icon, p.yt-icon, pre.yt-icon, q.yt-icon, s.yt-icon, samp.yt-icon, small.yt-icon, span.yt-icon, strike.yt-icon, strong.yt-icon, sub.yt-icon, sup.yt-icon, table.yt-icon, tbody.yt-icon, td.yt-icon, tfoot.yt-icon, th.yt-icon, thead.yt-icon, tr.yt-icon, tt.yt-icon, u.yt-icon, ul.yt-icon, var.yt-icon { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-icon[hidden] { + display: none !important; +} + +yt-icon, .yt-icon-container.yt-icon { + 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: currentcolor; + stroke: none; + width: var(--iron-icon-width, 24px); + height: var(--iron-icon-height, 24px); +} + +yt-icon.external-container { + display: none !important; +} diff --git a/frontend/src/assets/css/youtube/yt-img-shadow.css b/frontend/src/assets/css/youtube/yt-img-shadow.css new file mode 100644 index 0000000..e4ea828 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-img-shadow.css @@ -0,0 +1,68 @@ +canvas.yt-img-shadow, caption.yt-img-shadow, center.yt-img-shadow, cite.yt-img-shadow, code.yt-img-shadow, dd.yt-img-shadow, del.yt-img-shadow, dfn.yt-img-shadow, div.yt-img-shadow, dl.yt-img-shadow, dt.yt-img-shadow, em.yt-img-shadow, embed.yt-img-shadow, fieldset.yt-img-shadow, font.yt-img-shadow, form.yt-img-shadow, h1.yt-img-shadow, h2.yt-img-shadow, h3.yt-img-shadow, h4.yt-img-shadow, h5.yt-img-shadow, h6.yt-img-shadow, hr.yt-img-shadow, i.yt-img-shadow, iframe.yt-img-shadow, img.yt-img-shadow, ins.yt-img-shadow, kbd.yt-img-shadow, label.yt-img-shadow, legend.yt-img-shadow, li.yt-img-shadow, menu.yt-img-shadow, object.yt-img-shadow, ol.yt-img-shadow, p.yt-img-shadow, pre.yt-img-shadow, q.yt-img-shadow, s.yt-img-shadow, samp.yt-img-shadow, small.yt-img-shadow, span.yt-img-shadow, strike.yt-img-shadow, strong.yt-img-shadow, sub.yt-img-shadow, sup.yt-img-shadow, table.yt-img-shadow, tbody.yt-img-shadow, td.yt-img-shadow, tfoot.yt-img-shadow, th.yt-img-shadow, thead.yt-img-shadow, tr.yt-img-shadow, tt.yt-img-shadow, u.yt-img-shadow, ul.yt-img-shadow, var.yt-img-shadow { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-img-shadow[hidden] { + display: none !important; +} + +yt-img-shadow { + display: inline-block; + opacity: 0; + transition: opacity 0.2s; + -ms-flex: none; + -webkit-flex: none; + flex: none; +} + +yt-img-shadow.no-transition { + opacity: 1; + transition: none; +} + +yt-img-shadow.with-placeholder { + background-color: transparent; + min-height: unset; + min-width: unset; +} + +yt-img-shadow[loaded] { + opacity: 1; +} + +yt-img-shadow.empty img.yt-img-shadow { + visibility: hidden; +} + +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: auto; + margin-right: auto; + max-height: none; + max-width: 100%; + border-radius: none; +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-author-badge-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-author-badge-renderer.css new file mode 100644 index 0000000..9a0b840 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-author-badge-renderer.css @@ -0,0 +1,36 @@ +canvas.yt-live-chat-author-badge-renderer, caption.yt-live-chat-author-badge-renderer, center.yt-live-chat-author-badge-renderer, cite.yt-live-chat-author-badge-renderer, code.yt-live-chat-author-badge-renderer, dd.yt-live-chat-author-badge-renderer, del.yt-live-chat-author-badge-renderer, dfn.yt-live-chat-author-badge-renderer, div.yt-live-chat-author-badge-renderer, dl.yt-live-chat-author-badge-renderer, dt.yt-live-chat-author-badge-renderer, em.yt-live-chat-author-badge-renderer, embed.yt-live-chat-author-badge-renderer, fieldset.yt-live-chat-author-badge-renderer, font.yt-live-chat-author-badge-renderer, form.yt-live-chat-author-badge-renderer, h1.yt-live-chat-author-badge-renderer, h2.yt-live-chat-author-badge-renderer, h3.yt-live-chat-author-badge-renderer, h4.yt-live-chat-author-badge-renderer, h5.yt-live-chat-author-badge-renderer, h6.yt-live-chat-author-badge-renderer, hr.yt-live-chat-author-badge-renderer, i.yt-live-chat-author-badge-renderer, iframe.yt-live-chat-author-badge-renderer, img.yt-live-chat-author-badge-renderer, ins.yt-live-chat-author-badge-renderer, kbd.yt-live-chat-author-badge-renderer, label.yt-live-chat-author-badge-renderer, legend.yt-live-chat-author-badge-renderer, li.yt-live-chat-author-badge-renderer, menu.yt-live-chat-author-badge-renderer, object.yt-live-chat-author-badge-renderer, ol.yt-live-chat-author-badge-renderer, p.yt-live-chat-author-badge-renderer, pre.yt-live-chat-author-badge-renderer, q.yt-live-chat-author-badge-renderer, s.yt-live-chat-author-badge-renderer, samp.yt-live-chat-author-badge-renderer, small.yt-live-chat-author-badge-renderer, span.yt-live-chat-author-badge-renderer, strike.yt-live-chat-author-badge-renderer, strong.yt-live-chat-author-badge-renderer, sub.yt-live-chat-author-badge-renderer, sup.yt-live-chat-author-badge-renderer, table.yt-live-chat-author-badge-renderer, tbody.yt-live-chat-author-badge-renderer, td.yt-live-chat-author-badge-renderer, tfoot.yt-live-chat-author-badge-renderer, th.yt-live-chat-author-badge-renderer, thead.yt-live-chat-author-badge-renderer, tr.yt-live-chat-author-badge-renderer, tt.yt-live-chat-author-badge-renderer, u.yt-live-chat-author-badge-renderer, ul.yt-live-chat-author-badge-renderer, var.yt-live-chat-author-badge-renderer { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-live-chat-author-badge-renderer[hidden] { + display: none !important; +} + +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: #999; +} + +img.yt-live-chat-author-badge-renderer, yt-icon.yt-live-chat-author-badge-renderer { + display: block; + width: 16px; + height: 16px; +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-author-chip.css b/frontend/src/assets/css/youtube/yt-live-chat-author-chip.css new file mode 100644 index 0000000..2ce7ed4 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-author-chip.css @@ -0,0 +1,64 @@ +canvas.yt-live-chat-author-chip, caption.yt-live-chat-author-chip, center.yt-live-chat-author-chip, cite.yt-live-chat-author-chip, code.yt-live-chat-author-chip, dd.yt-live-chat-author-chip, del.yt-live-chat-author-chip, dfn.yt-live-chat-author-chip, div.yt-live-chat-author-chip, dl.yt-live-chat-author-chip, dt.yt-live-chat-author-chip, em.yt-live-chat-author-chip, embed.yt-live-chat-author-chip, fieldset.yt-live-chat-author-chip, font.yt-live-chat-author-chip, form.yt-live-chat-author-chip, h1.yt-live-chat-author-chip, h2.yt-live-chat-author-chip, h3.yt-live-chat-author-chip, h4.yt-live-chat-author-chip, h5.yt-live-chat-author-chip, h6.yt-live-chat-author-chip, hr.yt-live-chat-author-chip, i.yt-live-chat-author-chip, iframe.yt-live-chat-author-chip, img.yt-live-chat-author-chip, ins.yt-live-chat-author-chip, kbd.yt-live-chat-author-chip, label.yt-live-chat-author-chip, legend.yt-live-chat-author-chip, li.yt-live-chat-author-chip, menu.yt-live-chat-author-chip, object.yt-live-chat-author-chip, ol.yt-live-chat-author-chip, p.yt-live-chat-author-chip, pre.yt-live-chat-author-chip, q.yt-live-chat-author-chip, s.yt-live-chat-author-chip, samp.yt-live-chat-author-chip, small.yt-live-chat-author-chip, span.yt-live-chat-author-chip, strike.yt-live-chat-author-chip, strong.yt-live-chat-author-chip, sub.yt-live-chat-author-chip, sup.yt-live-chat-author-chip, table.yt-live-chat-author-chip, tbody.yt-live-chat-author-chip, td.yt-live-chat-author-chip, tfoot.yt-live-chat-author-chip, th.yt-live-chat-author-chip, thead.yt-live-chat-author-chip, tr.yt-live-chat-author-chip, tt.yt-live-chat-author-chip, u.yt-live-chat-author-chip, ul.yt-live-chat-author-chip, var.yt-live-chat-author-chip { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-live-chat-author-chip[hidden] { + display: none !important; +} + +yt-live-chat-author-chip { + display: inline-flex; + -ms-flex-align: baseline; + -webkit-align-items: baseline; + align-items: baseline; +} + +#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); +} + +#author-name.yt-live-chat-author-chip[type='moderator'] { + color: var(--yt-live-chat-moderator-color); +} + +yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip[type='owner'], #author-name.yt-live-chat-author-chip[type='owner'] { + background-color: #ffd600; + color: var(--yt-live-chat-author-chip-owner-text-color); +} + +#author-name.yt-live-chat-author-chip[type='member'] { + 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-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; +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-item-list-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-item-list-renderer.css new file mode 100644 index 0000000..7eaad8b --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-item-list-renderer.css @@ -0,0 +1,140 @@ +canvas.yt-live-chat-item-list-renderer, caption.yt-live-chat-item-list-renderer, center.yt-live-chat-item-list-renderer, cite.yt-live-chat-item-list-renderer, code.yt-live-chat-item-list-renderer, dd.yt-live-chat-item-list-renderer, del.yt-live-chat-item-list-renderer, dfn.yt-live-chat-item-list-renderer, div.yt-live-chat-item-list-renderer, dl.yt-live-chat-item-list-renderer, dt.yt-live-chat-item-list-renderer, em.yt-live-chat-item-list-renderer, embed.yt-live-chat-item-list-renderer, fieldset.yt-live-chat-item-list-renderer, font.yt-live-chat-item-list-renderer, form.yt-live-chat-item-list-renderer, h1.yt-live-chat-item-list-renderer, h2.yt-live-chat-item-list-renderer, h3.yt-live-chat-item-list-renderer, h4.yt-live-chat-item-list-renderer, h5.yt-live-chat-item-list-renderer, h6.yt-live-chat-item-list-renderer, hr.yt-live-chat-item-list-renderer, i.yt-live-chat-item-list-renderer, iframe.yt-live-chat-item-list-renderer, img.yt-live-chat-item-list-renderer, ins.yt-live-chat-item-list-renderer, kbd.yt-live-chat-item-list-renderer, label.yt-live-chat-item-list-renderer, legend.yt-live-chat-item-list-renderer, li.yt-live-chat-item-list-renderer, menu.yt-live-chat-item-list-renderer, object.yt-live-chat-item-list-renderer, ol.yt-live-chat-item-list-renderer, p.yt-live-chat-item-list-renderer, pre.yt-live-chat-item-list-renderer, q.yt-live-chat-item-list-renderer, s.yt-live-chat-item-list-renderer, samp.yt-live-chat-item-list-renderer, small.yt-live-chat-item-list-renderer, span.yt-live-chat-item-list-renderer, strike.yt-live-chat-item-list-renderer, strong.yt-live-chat-item-list-renderer, sub.yt-live-chat-item-list-renderer, sup.yt-live-chat-item-list-renderer, table.yt-live-chat-item-list-renderer, tbody.yt-live-chat-item-list-renderer, td.yt-live-chat-item-list-renderer, tfoot.yt-live-chat-item-list-renderer, th.yt-live-chat-item-list-renderer, thead.yt-live-chat-item-list-renderer, tr.yt-live-chat-item-list-renderer, tt.yt-live-chat-item-list-renderer, u.yt-live-chat-item-list-renderer, ul.yt-live-chat-item-list-renderer, var.yt-live-chat-item-list-renderer { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-live-chat-item-list-renderer[hidden] { + display: none !important; +} + +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: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; +} + +#empty-state-message.yt-live-chat-item-list-renderer { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +#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: 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); +} + +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: 1 1 0.000000001px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 0.000000001px; + flex-basis: 0.000000001px; + overflow-x: hidden; + overflow-y: hidden; + padding-right: var(--scrollbar-width); +} + +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: 1 1 0.000000001px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 0.000000001px; + flex-basis: 0.000000001px; + 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; +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-membership-item-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-membership-item-renderer.css new file mode 100644 index 0000000..3338121 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-membership-item-renderer.css @@ -0,0 +1,360 @@ +#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-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%); +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-paid-message-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-paid-message-renderer.css new file mode 100644 index 0000000..00a6ce9 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-paid-message-renderer.css @@ -0,0 +1,378 @@ +canvas.yt-live-chat-paid-message-renderer, caption.yt-live-chat-paid-message-renderer, center.yt-live-chat-paid-message-renderer, cite.yt-live-chat-paid-message-renderer, code.yt-live-chat-paid-message-renderer, dd.yt-live-chat-paid-message-renderer, del.yt-live-chat-paid-message-renderer, dfn.yt-live-chat-paid-message-renderer, div.yt-live-chat-paid-message-renderer, dl.yt-live-chat-paid-message-renderer, dt.yt-live-chat-paid-message-renderer, em.yt-live-chat-paid-message-renderer, embed.yt-live-chat-paid-message-renderer, fieldset.yt-live-chat-paid-message-renderer, font.yt-live-chat-paid-message-renderer, form.yt-live-chat-paid-message-renderer, h1.yt-live-chat-paid-message-renderer, h2.yt-live-chat-paid-message-renderer, h3.yt-live-chat-paid-message-renderer, h4.yt-live-chat-paid-message-renderer, h5.yt-live-chat-paid-message-renderer, h6.yt-live-chat-paid-message-renderer, hr.yt-live-chat-paid-message-renderer, i.yt-live-chat-paid-message-renderer, iframe.yt-live-chat-paid-message-renderer, img.yt-live-chat-paid-message-renderer, ins.yt-live-chat-paid-message-renderer, kbd.yt-live-chat-paid-message-renderer, label.yt-live-chat-paid-message-renderer, legend.yt-live-chat-paid-message-renderer, li.yt-live-chat-paid-message-renderer, menu.yt-live-chat-paid-message-renderer, object.yt-live-chat-paid-message-renderer, ol.yt-live-chat-paid-message-renderer, p.yt-live-chat-paid-message-renderer, pre.yt-live-chat-paid-message-renderer, q.yt-live-chat-paid-message-renderer, s.yt-live-chat-paid-message-renderer, samp.yt-live-chat-paid-message-renderer, small.yt-live-chat-paid-message-renderer, span.yt-live-chat-paid-message-renderer, strike.yt-live-chat-paid-message-renderer, strong.yt-live-chat-paid-message-renderer, sub.yt-live-chat-paid-message-renderer, sup.yt-live-chat-paid-message-renderer, table.yt-live-chat-paid-message-renderer, tbody.yt-live-chat-paid-message-renderer, td.yt-live-chat-paid-message-renderer, tfoot.yt-live-chat-paid-message-renderer, th.yt-live-chat-paid-message-renderer, thead.yt-live-chat-paid-message-renderer, tr.yt-live-chat-paid-message-renderer, tt.yt-live-chat-paid-message-renderer, u.yt-live-chat-paid-message-renderer, ul.yt-live-chat-paid-message-renderer, var.yt-live-chat-paid-message-renderer { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-live-chat-paid-message-renderer[hidden] { + display: none !important; +} + +#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: none; + -webkit-flex: none; + flex: none; +} + +#menu-button.yt-live-chat-paid-message-renderer { + width: 40px; + height: 40px; + padding: 8px; +} + +#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: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +yt-live-chat-paid-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-paid-message-renderer { + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + 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: hsl(0, 0%, 100%); + border-radius: 2px; +} + +#inline-action-buttons.yt-live-chat-paid-message-renderer>*.yt-live-chat-paid-message-renderer { + background: hsla(0, 0%, 6.7%, .8); +} + +#inline-action-buttons.yt-live-chat-paid-message-renderer>.yt-live-chat-paid-message-renderer:hover { + background: hsl(0, 0%, 6.7%); +} + +#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-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: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + 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); +} + +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: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + 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: 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; + -ms-flex: 1 1 0.000000001px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 0.000000001px; + flex-basis: 0.000000001px; + -ms-flex-align: baseline; + -webkit-align-items: baseline; + align-items: baseline; +} + +yt-live-chat-paid-message-renderer[dashboard-money-feed] #header-content.yt-live-chat-paid-message-renderer { + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; +} + +#header-content-primary-column.yt-live-chat-paid-message-renderer { + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -ms-flex: 1 1 0.000000001px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 0.000000001px; + flex-basis: 0.000000001px; +} + +yt-live-chat-paid-message-renderer[dashboard-money-feed] #header-content-primary-column.yt-live-chat-paid-message-renderer { + margin-bottom: 4px; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: baseline; + -webkit-align-items: baseline; + align-items: baseline; + -ms-flex: none; + -webkit-flex: none; + flex: none; +} + +#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; +} + +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: inline-flex; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + font-size: 1.2rem; + font-weight: 500; + line-height: 1.2rem; +} + +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] { + margin: 4px 0 0; + order: 1; +} + +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: 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: none; + -webkit-flex: none; + flex: none; +} + +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; +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-renderer.css new file mode 100644 index 0000000..5e805f6 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-renderer.css @@ -0,0 +1,252 @@ +yt-live-chat-renderer, yt-live-chat-item-list-renderer #item-scroller { + height: 100%; +} + +yt-live-chat-renderer ::-webkit-scrollbar { + content: ''; +} + +yt-live-chat-renderer ::-webkit-scrollbar-thumb { + background-color: hsla(0, 0%, 53.3%, .2); + border: 2px solid #fcfcfc; + min-height: 30px; +} + +yt-live-chat-renderer ::-webkit-scrollbar-track { + background-color: #fcfcfc; +} + + +canvas.yt-live-chat-renderer, caption.yt-live-chat-renderer, center.yt-live-chat-renderer, cite.yt-live-chat-renderer, code.yt-live-chat-renderer, dd.yt-live-chat-renderer, del.yt-live-chat-renderer, dfn.yt-live-chat-renderer, div.yt-live-chat-renderer, dl.yt-live-chat-renderer, dt.yt-live-chat-renderer, em.yt-live-chat-renderer, embed.yt-live-chat-renderer, fieldset.yt-live-chat-renderer, font.yt-live-chat-renderer, form.yt-live-chat-renderer, h1.yt-live-chat-renderer, h2.yt-live-chat-renderer, h3.yt-live-chat-renderer, h4.yt-live-chat-renderer, h5.yt-live-chat-renderer, h6.yt-live-chat-renderer, hr.yt-live-chat-renderer, i.yt-live-chat-renderer, iframe.yt-live-chat-renderer, img.yt-live-chat-renderer, ins.yt-live-chat-renderer, kbd.yt-live-chat-renderer, label.yt-live-chat-renderer, legend.yt-live-chat-renderer, li.yt-live-chat-renderer, menu.yt-live-chat-renderer, object.yt-live-chat-renderer, ol.yt-live-chat-renderer, p.yt-live-chat-renderer, pre.yt-live-chat-renderer, q.yt-live-chat-renderer, s.yt-live-chat-renderer, samp.yt-live-chat-renderer, small.yt-live-chat-renderer, span.yt-live-chat-renderer, strike.yt-live-chat-renderer, strong.yt-live-chat-renderer, sub.yt-live-chat-renderer, sup.yt-live-chat-renderer, table.yt-live-chat-renderer, tbody.yt-live-chat-renderer, td.yt-live-chat-renderer, tfoot.yt-live-chat-renderer, th.yt-live-chat-renderer, thead.yt-live-chat-renderer, tr.yt-live-chat-renderer, tt.yt-live-chat-renderer, u.yt-live-chat-renderer, ul.yt-live-chat-renderer, var.yt-live-chat-renderer { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-live-chat-renderer[hidden] { + display: none !important; +} + +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); +} + +yt-live-chat-renderer { + position: relative; + background: var(--yt-live-chat-background-color); + color: var(--yt-live-chat-primary-text-color); + overflow: hidden; + z-index: 0; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; +} + +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 { + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex: 1 1 0.000000001px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 0.000000001px; + flex-basis: 0.000000001px; +} + +#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: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex: 1 1 0.000000001px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 0.000000001px; + flex-basis: 0.000000001px; +} + +#ticker.yt-live-chat-renderer { + z-index: 1; +} + +#chat.yt-live-chat-renderer { + position: relative; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex: 1 1 0.000000001px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 0.000000001px; + flex-basis: 0.000000001px; +} + +#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: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +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: 1 1 0.000000001px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 0.000000001px; + flex-basis: 0.000000001px; +} + +#action-panel.yt-live-chat-renderer { + position: absolute; + bottom: 0; + left: 0; + right: 0; + overflow: hidden; +} + +yt-live-chat-renderer[has-action-panel-renderer] yt-live-chat-action-panel-renderer.yt-live-chat-renderer { + animation: slideUp cubic-bezier(0.05, 0.00, 0.00, 1.00) forwards; + animation-duration: 0.5s; +} + +#action-panel-backdrop.yt-live-chat-renderer { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + visibility: hidden; +} + +yt-live-chat-renderer[has-action-panel-renderer] #action-panel-backdrop.yt-live-chat-renderer { + visibility: visible; + animation: fadeIn cubic-bezier(0.05, 0.00, 0.00, 1.00) forwards; + animation-duration: 0.5s; +} + +#input-panel.yt-live-chat-renderer { + -ms-flex: none; + -webkit-flex: none; + flex: none; +} + +#input-panel.yt-live-chat-renderer:not(:empty) { + border-top: var(--yt-live-chat-action-panel-top-border, none); +} + +.hide-on-collapse.yt-live-chat-renderer { + transition: opacity 0.3s; +} + +yt-live-chat-renderer[collapsed] .hide-on-collapse.yt-live-chat-renderer { + opacity: 0; +} + +#loading.yt-live-chat-renderer { + height: 387px; + background-color: var(--yt-live-chat-action-panel-background-color); + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +#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: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +@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 fadeIn { + 0% { + background-color: transparent; + } + 100% { + background-color: rgba(0, 0, 0, 0.60); + } +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-text-message-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-text-message-renderer.css new file mode 100644 index 0000000..932f3fd --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-text-message-renderer.css @@ -0,0 +1,230 @@ +canvas.yt-live-chat-text-message-renderer, caption.yt-live-chat-text-message-renderer, center.yt-live-chat-text-message-renderer, cite.yt-live-chat-text-message-renderer, code.yt-live-chat-text-message-renderer, dd.yt-live-chat-text-message-renderer, del.yt-live-chat-text-message-renderer, dfn.yt-live-chat-text-message-renderer, div.yt-live-chat-text-message-renderer, dl.yt-live-chat-text-message-renderer, dt.yt-live-chat-text-message-renderer, em.yt-live-chat-text-message-renderer, embed.yt-live-chat-text-message-renderer, fieldset.yt-live-chat-text-message-renderer, font.yt-live-chat-text-message-renderer, form.yt-live-chat-text-message-renderer, h1.yt-live-chat-text-message-renderer, h2.yt-live-chat-text-message-renderer, h3.yt-live-chat-text-message-renderer, h4.yt-live-chat-text-message-renderer, h5.yt-live-chat-text-message-renderer, h6.yt-live-chat-text-message-renderer, hr.yt-live-chat-text-message-renderer, i.yt-live-chat-text-message-renderer, iframe.yt-live-chat-text-message-renderer, img.yt-live-chat-text-message-renderer, ins.yt-live-chat-text-message-renderer, kbd.yt-live-chat-text-message-renderer, label.yt-live-chat-text-message-renderer, legend.yt-live-chat-text-message-renderer, li.yt-live-chat-text-message-renderer, menu.yt-live-chat-text-message-renderer, object.yt-live-chat-text-message-renderer, ol.yt-live-chat-text-message-renderer, p.yt-live-chat-text-message-renderer, pre.yt-live-chat-text-message-renderer, q.yt-live-chat-text-message-renderer, s.yt-live-chat-text-message-renderer, samp.yt-live-chat-text-message-renderer, small.yt-live-chat-text-message-renderer, span.yt-live-chat-text-message-renderer, strike.yt-live-chat-text-message-renderer, strong.yt-live-chat-text-message-renderer, sub.yt-live-chat-text-message-renderer, sup.yt-live-chat-text-message-renderer, table.yt-live-chat-text-message-renderer, tbody.yt-live-chat-text-message-renderer, td.yt-live-chat-text-message-renderer, tfoot.yt-live-chat-text-message-renderer, th.yt-live-chat-text-message-renderer, thead.yt-live-chat-text-message-renderer, tr.yt-live-chat-text-message-renderer, tt.yt-live-chat-text-message-renderer, u.yt-live-chat-text-message-renderer, ul.yt-live-chat-text-message-renderer, var.yt-live-chat-text-message-renderer { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-live-chat-text-message-renderer[hidden] { + display: none !important; +} + +#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: none; + -webkit-flex: none; + flex: none; +} + +#menu-button.yt-live-chat-text-message-renderer { + width: 40px; + height: 40px; + padding: 8px; +} + +#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: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +yt-live-chat-text-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-text-message-renderer { + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + 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: hsl(0, 0%, 100%); + border-radius: 2px; +} + +#inline-action-buttons.yt-live-chat-text-message-renderer>*.yt-live-chat-text-message-renderer { + background: hsla(0, 0%, 6.7%, .8); +} + +#inline-action-buttons.yt-live-chat-text-message-renderer>.yt-live-chat-text-message-renderer:hover { + background: hsl(0, 0%, 6.7%); +} + +#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-text-message-renderer { + position: relative; + font-size: 13px; + padding: 4px 24px; + overflow: hidden; + --yt-endpoint-color: var(--yt-live-chat-primary-text-color, hsl(0, 0%, 6.7%)); + --yt-endpoint-hover-color: var(--yt-live-chat-primary-text-color, var(--yt-endpoint-color)); + 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; +} + +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: center; + -webkit-align-self: center; + align-self: center; + 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, var(--yt-live-chat-background-color, hsl(0, 0%, 100%)) 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); +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-ticker-paid-message-item-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-ticker-paid-message-item-renderer.css new file mode 100644 index 0000000..4844b66 --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-ticker-paid-message-item-renderer.css @@ -0,0 +1,80 @@ +canvas.yt-live-chat-ticker-paid-message-item-renderer, caption.yt-live-chat-ticker-paid-message-item-renderer, center.yt-live-chat-ticker-paid-message-item-renderer, cite.yt-live-chat-ticker-paid-message-item-renderer, code.yt-live-chat-ticker-paid-message-item-renderer, dd.yt-live-chat-ticker-paid-message-item-renderer, del.yt-live-chat-ticker-paid-message-item-renderer, dfn.yt-live-chat-ticker-paid-message-item-renderer, div.yt-live-chat-ticker-paid-message-item-renderer, dl.yt-live-chat-ticker-paid-message-item-renderer, dt.yt-live-chat-ticker-paid-message-item-renderer, em.yt-live-chat-ticker-paid-message-item-renderer, embed.yt-live-chat-ticker-paid-message-item-renderer, fieldset.yt-live-chat-ticker-paid-message-item-renderer, font.yt-live-chat-ticker-paid-message-item-renderer, form.yt-live-chat-ticker-paid-message-item-renderer, h1.yt-live-chat-ticker-paid-message-item-renderer, h2.yt-live-chat-ticker-paid-message-item-renderer, h3.yt-live-chat-ticker-paid-message-item-renderer, h4.yt-live-chat-ticker-paid-message-item-renderer, h5.yt-live-chat-ticker-paid-message-item-renderer, h6.yt-live-chat-ticker-paid-message-item-renderer, hr.yt-live-chat-ticker-paid-message-item-renderer, i.yt-live-chat-ticker-paid-message-item-renderer, iframe.yt-live-chat-ticker-paid-message-item-renderer, img.yt-live-chat-ticker-paid-message-item-renderer, ins.yt-live-chat-ticker-paid-message-item-renderer, kbd.yt-live-chat-ticker-paid-message-item-renderer, label.yt-live-chat-ticker-paid-message-item-renderer, legend.yt-live-chat-ticker-paid-message-item-renderer, li.yt-live-chat-ticker-paid-message-item-renderer, menu.yt-live-chat-ticker-paid-message-item-renderer, object.yt-live-chat-ticker-paid-message-item-renderer, ol.yt-live-chat-ticker-paid-message-item-renderer, p.yt-live-chat-ticker-paid-message-item-renderer, pre.yt-live-chat-ticker-paid-message-item-renderer, q.yt-live-chat-ticker-paid-message-item-renderer, s.yt-live-chat-ticker-paid-message-item-renderer, samp.yt-live-chat-ticker-paid-message-item-renderer, small.yt-live-chat-ticker-paid-message-item-renderer, span.yt-live-chat-ticker-paid-message-item-renderer, strike.yt-live-chat-ticker-paid-message-item-renderer, strong.yt-live-chat-ticker-paid-message-item-renderer, sub.yt-live-chat-ticker-paid-message-item-renderer, sup.yt-live-chat-ticker-paid-message-item-renderer, table.yt-live-chat-ticker-paid-message-item-renderer, tbody.yt-live-chat-ticker-paid-message-item-renderer, td.yt-live-chat-ticker-paid-message-item-renderer, tfoot.yt-live-chat-ticker-paid-message-item-renderer, th.yt-live-chat-ticker-paid-message-item-renderer, thead.yt-live-chat-ticker-paid-message-item-renderer, tr.yt-live-chat-ticker-paid-message-item-renderer, tt.yt-live-chat-ticker-paid-message-item-renderer, u.yt-live-chat-ticker-paid-message-item-renderer, ul.yt-live-chat-ticker-paid-message-item-renderer, var.yt-live-chat-ticker-paid-message-item-renderer { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-live-chat-ticker-paid-message-item-renderer[hidden] { + display: none !important; +} + +canvas.yt-live-chat-ticker-paid-message-item-renderer, caption.yt-live-chat-ticker-paid-message-item-renderer, center.yt-live-chat-ticker-paid-message-item-renderer, cite.yt-live-chat-ticker-paid-message-item-renderer, code.yt-live-chat-ticker-paid-message-item-renderer, dd.yt-live-chat-ticker-paid-message-item-renderer, del.yt-live-chat-ticker-paid-message-item-renderer, dfn.yt-live-chat-ticker-paid-message-item-renderer, div.yt-live-chat-ticker-paid-message-item-renderer, dl.yt-live-chat-ticker-paid-message-item-renderer, dt.yt-live-chat-ticker-paid-message-item-renderer, em.yt-live-chat-ticker-paid-message-item-renderer, embed.yt-live-chat-ticker-paid-message-item-renderer, fieldset.yt-live-chat-ticker-paid-message-item-renderer, font.yt-live-chat-ticker-paid-message-item-renderer, form.yt-live-chat-ticker-paid-message-item-renderer, h1.yt-live-chat-ticker-paid-message-item-renderer, h2.yt-live-chat-ticker-paid-message-item-renderer, h3.yt-live-chat-ticker-paid-message-item-renderer, h4.yt-live-chat-ticker-paid-message-item-renderer, h5.yt-live-chat-ticker-paid-message-item-renderer, h6.yt-live-chat-ticker-paid-message-item-renderer, hr.yt-live-chat-ticker-paid-message-item-renderer, i.yt-live-chat-ticker-paid-message-item-renderer, iframe.yt-live-chat-ticker-paid-message-item-renderer, img.yt-live-chat-ticker-paid-message-item-renderer, ins.yt-live-chat-ticker-paid-message-item-renderer, kbd.yt-live-chat-ticker-paid-message-item-renderer, label.yt-live-chat-ticker-paid-message-item-renderer, legend.yt-live-chat-ticker-paid-message-item-renderer, li.yt-live-chat-ticker-paid-message-item-renderer, menu.yt-live-chat-ticker-paid-message-item-renderer, object.yt-live-chat-ticker-paid-message-item-renderer, ol.yt-live-chat-ticker-paid-message-item-renderer, p.yt-live-chat-ticker-paid-message-item-renderer, pre.yt-live-chat-ticker-paid-message-item-renderer, q.yt-live-chat-ticker-paid-message-item-renderer, s.yt-live-chat-ticker-paid-message-item-renderer, samp.yt-live-chat-ticker-paid-message-item-renderer, small.yt-live-chat-ticker-paid-message-item-renderer, span.yt-live-chat-ticker-paid-message-item-renderer, strike.yt-live-chat-ticker-paid-message-item-renderer, strong.yt-live-chat-ticker-paid-message-item-renderer, sub.yt-live-chat-ticker-paid-message-item-renderer, sup.yt-live-chat-ticker-paid-message-item-renderer, table.yt-live-chat-ticker-paid-message-item-renderer, tbody.yt-live-chat-ticker-paid-message-item-renderer, td.yt-live-chat-ticker-paid-message-item-renderer, tfoot.yt-live-chat-ticker-paid-message-item-renderer, th.yt-live-chat-ticker-paid-message-item-renderer, thead.yt-live-chat-ticker-paid-message-item-renderer, tr.yt-live-chat-ticker-paid-message-item-renderer, tt.yt-live-chat-ticker-paid-message-item-renderer, u.yt-live-chat-ticker-paid-message-item-renderer, ul.yt-live-chat-ticker-paid-message-item-renderer, var.yt-live-chat-ticker-paid-message-item-renderer { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-live-chat-ticker-paid-message-item-renderer[hidden] { + display: none !important; +} + +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: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} + +#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; +} diff --git a/frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css b/frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css new file mode 100644 index 0000000..029720d --- /dev/null +++ b/frontend/src/assets/css/youtube/yt-live-chat-ticker-renderer.css @@ -0,0 +1,65 @@ +canvas.yt-live-chat-ticker-renderer, caption.yt-live-chat-ticker-renderer, center.yt-live-chat-ticker-renderer, cite.yt-live-chat-ticker-renderer, code.yt-live-chat-ticker-renderer, dd.yt-live-chat-ticker-renderer, del.yt-live-chat-ticker-renderer, dfn.yt-live-chat-ticker-renderer, div.yt-live-chat-ticker-renderer, dl.yt-live-chat-ticker-renderer, dt.yt-live-chat-ticker-renderer, em.yt-live-chat-ticker-renderer, embed.yt-live-chat-ticker-renderer, fieldset.yt-live-chat-ticker-renderer, font.yt-live-chat-ticker-renderer, form.yt-live-chat-ticker-renderer, h1.yt-live-chat-ticker-renderer, h2.yt-live-chat-ticker-renderer, h3.yt-live-chat-ticker-renderer, h4.yt-live-chat-ticker-renderer, h5.yt-live-chat-ticker-renderer, h6.yt-live-chat-ticker-renderer, hr.yt-live-chat-ticker-renderer, i.yt-live-chat-ticker-renderer, iframe.yt-live-chat-ticker-renderer, img.yt-live-chat-ticker-renderer, ins.yt-live-chat-ticker-renderer, kbd.yt-live-chat-ticker-renderer, label.yt-live-chat-ticker-renderer, legend.yt-live-chat-ticker-renderer, li.yt-live-chat-ticker-renderer, menu.yt-live-chat-ticker-renderer, object.yt-live-chat-ticker-renderer, ol.yt-live-chat-ticker-renderer, p.yt-live-chat-ticker-renderer, pre.yt-live-chat-ticker-renderer, q.yt-live-chat-ticker-renderer, s.yt-live-chat-ticker-renderer, samp.yt-live-chat-ticker-renderer, small.yt-live-chat-ticker-renderer, span.yt-live-chat-ticker-renderer, strike.yt-live-chat-ticker-renderer, strong.yt-live-chat-ticker-renderer, sub.yt-live-chat-ticker-renderer, sup.yt-live-chat-ticker-renderer, table.yt-live-chat-ticker-renderer, tbody.yt-live-chat-ticker-renderer, td.yt-live-chat-ticker-renderer, tfoot.yt-live-chat-ticker-renderer, th.yt-live-chat-ticker-renderer, thead.yt-live-chat-ticker-renderer, tr.yt-live-chat-ticker-renderer, tt.yt-live-chat-ticker-renderer, u.yt-live-chat-ticker-renderer, ul.yt-live-chat-ticker-renderer, var.yt-live-chat-ticker-renderer { + margin: 0; + padding: 0; + border: 0; + background: transparent; +} + +.yt-live-chat-ticker-renderer[hidden] { + display: none !important; +} + +yt-live-chat-ticker-renderer { + display: block; + background-color: var(--yt-live-chat-header-background-color); +} + +#container.yt-live-chat-ticker-renderer { + position: relative; +} + +#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; +} diff --git a/frontend/src/components/ChatRenderer/AuthorBadge.vue b/frontend/src/components/ChatRenderer/AuthorBadge.vue index 840c010..257b9c0 100644 --- a/frontend/src/components/ChatRenderer/AuthorBadge.vue +++ b/frontend/src/components/ChatRenderer/AuthorBadge.vue @@ -46,76 +46,5 @@ export default { } - - - - - + + diff --git a/frontend/src/components/ChatRenderer/ImgShadow.vue b/frontend/src/components/ChatRenderer/ImgShadow.vue index 1060dd3..10c2c32 100644 --- a/frontend/src/components/ChatRenderer/ImgShadow.vue +++ b/frontend/src/components/ChatRenderer/ImgShadow.vue @@ -15,74 +15,4 @@ export default { } - - + diff --git a/frontend/src/components/ChatRenderer/MembershipItem.vue b/frontend/src/components/ChatRenderer/MembershipItem.vue index 3bd5525..5e3ad2e 100644 --- a/frontend/src/components/ChatRenderer/MembershipItem.vue +++ b/frontend/src/components/ChatRenderer/MembershipItem.vue @@ -56,366 +56,4 @@ export default { } - - + diff --git a/frontend/src/components/ChatRenderer/PaidMessage.vue b/frontend/src/components/ChatRenderer/PaidMessage.vue index 4809d7d..f445527 100644 --- a/frontend/src/components/ChatRenderer/PaidMessage.vue +++ b/frontend/src/components/ChatRenderer/PaidMessage.vue @@ -63,383 +63,4 @@ export default { - + diff --git a/frontend/src/components/ChatRenderer/TextMessage.vue b/frontend/src/components/ChatRenderer/TextMessage.vue index 6d0ebd7..5f3e803 100644 --- a/frontend/src/components/ChatRenderer/TextMessage.vue +++ b/frontend/src/components/ChatRenderer/TextMessage.vue @@ -94,304 +94,5 @@ yt-live-chat-text-message-renderer>#content>#message>.el-badge .el-badge__conten } - - - - - + + diff --git a/frontend/src/components/ChatRenderer/Ticker.vue b/frontend/src/components/ChatRenderer/Ticker.vue index 0f8e459..4913f70 100644 --- a/frontend/src/components/ChatRenderer/Ticker.vue +++ b/frontend/src/components/ChatRenderer/Ticker.vue @@ -160,155 +160,5 @@ export default { } - - - - - + + diff --git a/frontend/src/components/ChatRenderer/index.vue b/frontend/src/components/ChatRenderer/index.vue index 3467433..213bbe3 100644 --- a/frontend/src/components/ChatRenderer/index.vue +++ b/frontend/src/components/ChatRenderer/index.vue @@ -536,820 +536,6 @@ export default { } - - - - - - - - - - - - - + + + diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue index 153c22a..4ff6604 100644 --- a/frontend/src/layout/index.vue +++ b/frontend/src/layout/index.vue @@ -53,7 +53,7 @@ export default {